@lumx/react 3.20.1-alpha.1 → 3.20.1-alpha.11

package/src/components/tooltip/Tooltip.stories.tsx

@@ -1,117 +0,0 @@
-import { Button, Dialog, Dropdown, Placement, Tooltip } from '@lumx/react';
-import React, { useState } from 'react';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { withChromaticForceScreenSize } from '@lumx/react/stories/decorators/withChromaticForceScreenSize';
-import { ARIA_LINK_MODES } from '@lumx/react/components/tooltip/constants';
-
-const placements = [Placement.TOP, Placement.BOTTOM, Placement.RIGHT, Placement.LEFT];
-const CLOSE_MODES = ['hide', 'unmount'];
-
-export default {
-    title: 'LumX components/tooltip/Tooltip',
-    component: Tooltip,
-    args: Tooltip.defaultProps,
-    argTypes: {
-        placement: getSelectArgType(placements),
-        children: { control: false },
-        closeMode: { control: { type: 'inline-radio' }, options: CLOSE_MODES },
-        ariaLinkMode: { control: { type: 'inline-radio' }, options: ARIA_LINK_MODES },
-    },
-    decorators: [
-        // Force minimum chromatic screen size to make sure the dialog appears in view.
-        withChromaticForceScreenSize(),
-    ],
-};
-
-/** Simple tooltip on a button*/
-export const OnAButton = {
-    args: {
-        label: 'Tooltip label',
-        children: <Button>Button</Button>,
-    },
-};
-
-/** Simple tooltip on a button*/
-export const OnADisabledButton = {
-    args: {
-        ...OnAButton.args,
-        children: <Button isDisabled>Button</Button>,
-    },
-};
-
-/** Forcing the tooltip to appear */
-export const ForceOpen = {
-    args: {
-        ...OnAButton.args,
-        forceOpen: true,
-    },
-};
-
-/** Hide on close instead of unmounting */
-export const CloseModeHide = {
-    args: {
-        ...OnAButton.args,
-        closeMode: 'hide',
-    },
-};
-
-/** Display a multiline tooltip */
-export const MultilineTooltip = {
-    args: {
-        ...OnAButton.args,
-        label: 'First sentence.\nSecond sentence.\nThird sentence.\n',
-    },
-};
-
-/** Tooltip should hide when a dropdown opens */
-export const TooltipWithDropdown = (props: any) => {
-    const [button, setButton] = useState<HTMLElement | null>(null);
-    const [isOpen, setOpen] = useState(false);
-    return (
-        <>
-            <br />
-            <Tooltip label={!isOpen && 'Tooltip'} {...props} placement="top">
-                <Button ref={setButton} onClick={() => setOpen((o) => !o)}>
-                    Anchor
-                </Button>
-            </Tooltip>
-            <Dropdown anchorRef={{ current: button }} isOpen={isOpen} onClose={() => setOpen(false)}>
-                Dropdown
-            </Dropdown>
-        </>
-    );
-};
-
-/** Tooltip should hide when the anchor is hidden */
-export const HideTooltipOnHiddenAnchor = () => {
-    const [isOpen, setOpen] = useState(false);
-    return (
-        <>
-            The tooltip should show when the button is hovered but it should disappear when the dialog get in-between
-            the mouse and the button
-            <br />
-            <Tooltip label="Tooltip label">
-                <Button onClick={() => setOpen((wasOpen) => !wasOpen)}>Open dialog</Button>
-            </Tooltip>
-            <Dialog isOpen={isOpen} onClose={() => setOpen(false)}>
-                Dialog
-            </Dialog>
-        </>
-    );
-};
-HideTooltipOnHiddenAnchor.parameters = { chromatic: { disableSnapshot: true } };
-
-/** Test focusing a tooltip anchor programmatically */
-export const TestProgrammaticFocus = () => {
-    const anchorRef = React.useRef<HTMLButtonElement>(null);
-    return (
-        <>
-            <p>The tooltip should open on keyboard focus but not on programmatic focus (ex: after a click)</p>
-            <Tooltip label="label">
-                <Button ref={anchorRef}>button with label</Button>
-            </Tooltip>
-            <Button onClick={() => anchorRef.current?.focus()}>focus the button</Button>
-        </>
-    );
-};
-TestProgrammaticFocus.parameters = { chromatic: { disableSnapshot: true } };

package/src/components/tooltip/Tooltip.test.tsx

@@ -1,411 +0,0 @@
-import React from 'react';
-
-import { Button } from '@lumx/react';
-import { screen, render } from '@testing-library/react';
-import { queryAllByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import userEvent from '@testing-library/user-event';
-import { isFocusVisible } from '@lumx/react/utils/browser/isFocusVisible';
-import { VISUALLY_HIDDEN } from '@lumx/react/constants';
-
-import { Tooltip, TooltipProps } from './Tooltip';
-
-const CLASSNAME = Tooltip.className as string;
-
-jest.mock('@lumx/react/utils/browser/isFocusVisible');
-jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
-// Skip delays
-jest.mock('@lumx/react/constants', () => ({
-    ...jest.requireActual('@lumx/react/constants'),
-    TOOLTIP_HOVER_DELAY: { open: 0, close: 0 },
-}));
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = async (propsOverride: Partial<TooltipProps> = {}) => {
-    const props: any = { forceOpen: true, label: 'Tooltip label', children: 'Anchor', ...propsOverride };
-    const result = render(<Tooltip {...props} />);
-    const tooltip = screen.queryByRole('tooltip');
-    const anchorWrapper = queryByClassName(document.body, 'lumx-tooltip-anchor-wrapper');
-    return { props, tooltip, anchorWrapper, result };
-};
-
-describe(`<${Tooltip.displayName}>`, () => {
-    describe('render', () => {
-        it('should not render with empty label', async () => {
-            const { tooltip, anchorWrapper } = await setup({
-                label: undefined,
-                forceOpen: true,
-            });
-            expect(tooltip).not.toBeInTheDocument();
-            expect(anchorWrapper).not.toBeInTheDocument();
-        });
-
-        it('should wrap unknown children', async () => {
-            const { tooltip, anchorWrapper } = await setup({
-                label: 'Tooltip label',
-                children: 'Anchor',
-                forceOpen: true,
-            });
-            expect(tooltip).toBeInTheDocument();
-            // Default placement
-            expect(tooltip).toHaveAttribute('data-popper-placement', 'bottom');
-            expect(anchorWrapper).toBeInTheDocument();
-        });
-
-        it('should render with custom placement', async () => {
-            const { tooltip } = await setup({
-                label: 'Tooltip label',
-                children: 'Anchor',
-                forceOpen: true,
-                placement: 'top',
-            });
-            // Custom placement
-            expect(tooltip).toHaveAttribute('data-popper-placement', 'top');
-        });
-
-        it('should not wrap Button', async () => {
-            const { tooltip, anchorWrapper } = await setup({
-                label: 'Tooltip label',
-                children: <Button>Anchor</Button>,
-                forceOpen: true,
-            });
-            expect(tooltip).toBeInTheDocument();
-            expect(anchorWrapper).not.toBeInTheDocument();
-            const button = screen.queryByRole('button', { name: 'Anchor' });
-            expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
-        });
-
-        it('should wrap disabled Button', async () => {
-            const { tooltip, anchorWrapper } = await setup({
-                label: 'Tooltip label',
-                children: <Button isDisabled>Anchor</Button>,
-                forceOpen: true,
-            });
-            expect(tooltip).toBeInTheDocument();
-            expect(anchorWrapper).toBeInTheDocument();
-            expect(anchorWrapper).toHaveAttribute('aria-describedby', tooltip?.id);
-            const button = screen.queryByRole('button', { name: 'Anchor' });
-            expect(button?.parentElement).toBe(anchorWrapper);
-        });
-
-        it('should render multiline', async () => {
-            const { tooltip } = await setup({
-                label: 'First line\nSecond line',
-                forceOpen: true,
-            });
-            expect(tooltip).toBeInTheDocument();
-            const lines = queryAllByTagName(tooltip as any, 'p');
-            expect(lines.length).toBe(2);
-            expect(lines[0]).toHaveTextContent('First line');
-            expect(lines[1]).toHaveTextContent('Second line');
-        });
-
-        it('should have a stable ref', async () => {
-            const ref = React.createRef() as any;
-
-            // Render without a label
-            const result = render(
-                <Tooltip label="">
-                    <span ref={ref}>some text</span>
-                </Tooltip>,
-            );
-            const element = ref.current;
-            expect(element).not.toBeFalsy();
-
-            // Re-render with a label
-            result.rerender(
-                <Tooltip label="Some tooltip">
-                    <span ref={ref}>some updated text</span>
-                </Tooltip>,
-            );
-            // Children ref is stable
-            expect(ref.current === element).toBe(true);
-        });
-
-        describe('closeMode="hide"', () => {
-            it('should not render with empty label', async () => {
-                const { tooltip, anchorWrapper } = await setup({
-                    label: undefined,
-                    forceOpen: true,
-                    closeMode: 'hide',
-                });
-                expect(tooltip).not.toBeInTheDocument();
-                expect(anchorWrapper).not.toBeInTheDocument();
-            });
-
-            it('should render hidden', async () => {
-                const { tooltip } = await setup({
-                    label: 'Tooltip label',
-                    children: <Button>Anchor</Button>,
-                    closeMode: 'hide',
-                    forceOpen: false,
-                });
-                expect(tooltip).toBeInTheDocument();
-                expect(tooltip).toHaveClass(VISUALLY_HIDDEN);
-                // Popper styles should not be applied when closed.
-                expect(tooltip?.style?.transform).toBe('');
-
-                const anchor = screen.getByRole('button', { name: 'Anchor' });
-                await userEvent.hover(anchor);
-                expect(tooltip).not.toHaveClass(VISUALLY_HIDDEN);
-            });
-        });
-
-        describe('ariaLinkMode="aria-describedby"', () => {
-            it('should add aria-describedby on anchor on open', async () => {
-                await setup({
-                    label: 'Tooltip label',
-                    forceOpen: false,
-                    children: <Button aria-describedby=":description1:">Anchor</Button>,
-                });
-                const anchor = screen.getByRole('button', { name: 'Anchor' });
-                expect(anchor).toHaveAttribute('aria-describedby', ':description1:');
-
-                await userEvent.hover(anchor);
-                const tooltip = screen.queryByRole('tooltip');
-                expect(anchor).toHaveAttribute('aria-describedby', `:description1: ${tooltip?.id}`);
-            });
-
-            it('should always add aria-describedby on anchor with closeMode="hide"', async () => {
-                const { tooltip } = await setup({
-                    label: 'Tooltip label',
-                    forceOpen: false,
-                    children: <Button aria-describedby=":description1:">Anchor</Button>,
-                    closeMode: 'hide',
-                });
-                const anchor = screen.getByRole('button', { name: 'Anchor' });
-                expect(anchor).toHaveAttribute('aria-describedby', `:description1: ${tooltip?.id}`);
-            });
-
-            it('should skip aria-describedby if anchor has label', async () => {
-                const { tooltip } = await setup({
-                    label: 'Tooltip label',
-                    forceOpen: true,
-                    children: (
-                        <Button aria-describedby=":description1:" aria-label="Tooltip label">
-                            Anchor
-                        </Button>
-                    ),
-                });
-                expect(tooltip).toBeInTheDocument();
-                expect(screen.getByRole('button')).toHaveAttribute('aria-describedby', `:description1:`);
-            });
-
-            it('should add aria-describedby on anchor wrapper on open', async () => {
-                const { anchorWrapper } = await setup({
-                    label: 'Tooltip label',
-                    forceOpen: false,
-                    children: 'Anchor',
-                });
-                expect(anchorWrapper).not.toHaveAttribute('aria-describedby');
-
-                await userEvent.hover(anchorWrapper as any);
-                const tooltip = screen.queryByRole('tooltip');
-                expect(anchorWrapper).toHaveAttribute('aria-describedby', tooltip?.id);
-            });
-
-            it('should always add aria-describedby on anchor wrapper with closeMode="hide"', async () => {
-                const { tooltip, anchorWrapper } = await setup({
-                    label: 'Tooltip label',
-                    forceOpen: false,
-                    children: 'Anchor',
-                    closeMode: 'hide',
-                });
-                expect(anchorWrapper).toHaveAttribute('aria-describedby', `${tooltip?.id}`);
-            });
-        });
-
-        describe('ariaLinkMode="aria-labelledby"', () => {
-            it('should add aria-labelledby on anchor on open', async () => {
-                await setup({
-                    label: 'Tooltip label',
-                    forceOpen: false,
-                    children: <Button aria-labelledby=":label1:">Anchor</Button>,
-                    ariaLinkMode: 'aria-labelledby',
-                });
-                const anchor = screen.getByRole('button', { name: 'Anchor' });
-                expect(anchor).toHaveAttribute('aria-labelledby', ':label1:');
-
-                await userEvent.hover(anchor);
-                const tooltip = screen.queryByRole('tooltip');
-                expect(anchor).toHaveAttribute('aria-labelledby', `:label1: ${tooltip?.id}`);
-            });
-
-            it('should always add aria-labelledby on anchor with closeMode="hide"', async () => {
-                const label = 'Tooltip label';
-                const { tooltip } = await setup({
-                    label,
-                    forceOpen: false,
-                    children: <Button aria-labelledby=":label1:">Anchor</Button>,
-                    ariaLinkMode: 'aria-labelledby',
-                    closeMode: 'hide',
-                });
-                const anchor = screen.queryByRole('button', { name: label });
-                expect(anchor).toBeInTheDocument();
-                expect(anchor).toHaveAttribute('aria-labelledby', `:label1: ${tooltip?.id}`);
-            });
-
-            it('should skip aria-labelledby if anchor has label', async () => {
-                const { tooltip } = await setup({
-                    label: 'Tooltip label',
-                    forceOpen: true,
-                    children: (
-                        <Button aria-labelledby=":label1:" aria-label="Tooltip label">
-                            Anchor
-                        </Button>
-                    ),
-                    ariaLinkMode: 'aria-labelledby',
-                });
-                expect(tooltip).toBeInTheDocument();
-                expect(screen.getByRole('button')).toHaveAttribute('aria-labelledby', `:label1:`);
-            });
-
-            it('should add aria-labelledby on anchor wrapper on open', async () => {
-                const { anchorWrapper } = await setup({
-                    label: 'Tooltip label',
-                    forceOpen: false,
-                    children: 'Anchor',
-                    ariaLinkMode: 'aria-labelledby',
-                });
-                expect(anchorWrapper).not.toHaveAttribute('aria-labelledby');
-
-                await userEvent.hover(anchorWrapper as any);
-                const tooltip = screen.queryByRole('tooltip');
-                expect(anchorWrapper).toHaveAttribute('aria-labelledby', tooltip?.id);
-            });
-
-            it('should always add aria-labelledby on anchor wrapper with closeMode="hide"', async () => {
-                const { tooltip, anchorWrapper } = await setup({
-                    label: 'Tooltip label',
-                    forceOpen: false,
-                    children: 'Anchor',
-                    ariaLinkMode: 'aria-labelledby',
-                    closeMode: 'hide',
-                });
-                expect(anchorWrapper).toHaveAttribute('aria-labelledby', `${tooltip?.id}`);
-            });
-        });
-    });
-
-    describe('activation', () => {
-        it('should activate on anchor hover', async () => {
-            let { tooltip } = await setup({
-                label: 'Tooltip label',
-                children: <Button>Anchor</Button>,
-                forceOpen: false,
-            });
-
-            expect(tooltip).not.toBeInTheDocument();
-
-            // Hover anchor button
-            const button = screen.getByRole('button', { name: 'Anchor' });
-            await userEvent.hover(button);
-
-            // Tooltip opened
-            tooltip = await screen.findByRole('tooltip', { name: 'Tooltip label' });
-            expect(tooltip).toBeInTheDocument();
-
-            // Un-hover anchor button
-            await userEvent.unhover(button);
-
-            expect(button).not.toHaveFocus();
-            // Tooltip closed
-            expect(tooltip).not.toBeInTheDocument();
-        });
-
-        it('should activate on hover anchor and then tooltip', async () => {
-            let { tooltip } = await setup({
-                label: 'Tooltip label',
-                children: <Button>Anchor</Button>,
-                forceOpen: false,
-            });
-
-            expect(tooltip).not.toBeInTheDocument();
-
-            // Hover anchor button
-            const button = screen.getByRole('button', { name: 'Anchor' });
-            await userEvent.hover(button);
-
-            // Tooltip opened
-            tooltip = await screen.findByRole('tooltip', { name: 'Tooltip label' });
-            expect(tooltip).toBeInTheDocument();
-            expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
-
-            // Hover tooltip
-            await userEvent.hover(tooltip);
-            expect(tooltip).toBeInTheDocument();
-            expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
-
-            // Un-hover tooltip
-            await userEvent.unhover(tooltip);
-            expect(button).not.toHaveFocus();
-            // Tooltip closed
-            expect(tooltip).not.toBeInTheDocument();
-        });
-
-        it('should activate on anchor focus visible and close on escape', async () => {
-            (isFocusVisible as jest.Mock).mockReturnValue(true);
-            let { tooltip } = await setup({
-                label: 'Tooltip label',
-                children: <Button>Anchor</Button>,
-                forceOpen: false,
-            });
-
-            expect(tooltip).not.toBeInTheDocument();
-
-            // Focus anchor button
-            await userEvent.tab();
-            const button = screen.getByRole('button', { name: 'Anchor' });
-            expect(button).toHaveFocus();
-
-            // Tooltip opened
-            tooltip = await screen.findByRole('tooltip', { name: 'Tooltip label' });
-            expect(tooltip).toBeInTheDocument();
-            expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
-
-            // Focus next element => close tooltip
-            await userEvent.tab();
-            expect(button).not.toHaveFocus();
-            expect(tooltip).not.toBeInTheDocument();
-
-            // Focus again
-            await userEvent.tab({ shift: true });
-            tooltip = await screen.findByRole('tooltip', { name: 'Tooltip label' });
-            expect(tooltip).toBeInTheDocument();
-
-            // Escape pressed => close tooltip
-            await userEvent.keyboard('{Escape}');
-            expect(tooltip).not.toBeInTheDocument();
-        });
-
-        it('should not activate on anchor focus if not visible', async () => {
-            (isFocusVisible as jest.Mock).mockReturnValue(false);
-            let { tooltip } = await setup({
-                label: 'Tooltip label',
-                children: <Button>Anchor</Button>,
-                forceOpen: false,
-            });
-
-            expect(tooltip).not.toBeInTheDocument();
-
-            // Focus anchor button
-            await userEvent.tab();
-            const button = screen.getByRole('button', { name: 'Anchor' });
-            expect(button).toHaveFocus();
-
-            // Tooltip not opening
-            tooltip = screen.queryByRole('tooltip', { name: 'Tooltip label' });
-            expect(tooltip).not.toBeInTheDocument();
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'tooltip',
-        forwardAttributes: 'tooltip',
-        forwardRef: 'tooltip',
-    });
-});

package/src/components/tooltip/Tooltip.tsx

@@ -1,165 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import React, { ReactNode, useState } from 'react';
-
-import classNames from 'classnames';
-
-import { DOCUMENT, VISUALLY_HIDDEN } from '@lumx/react/constants';
-import { GenericProps, HasCloseMode } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
-import { Placement } from '@lumx/react/components/popover';
-import { TooltipContextProvider } from '@lumx/react/components/tooltip/context';
-import { useId } from '@lumx/react/hooks/useId';
-import { usePopper } from '@lumx/react/hooks/usePopper';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { ARIA_LINK_MODES, TOOLTIP_ZINDEX } from '@lumx/react/components/tooltip/constants';
-import { Portal } from '@lumx/react/utils';
-import { useInjectTooltipRef } from './useInjectTooltipRef';
-import { useTooltipOpen } from './useTooltipOpen';
-
-/** Position of the tooltip relative to the anchor element. */
-export type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | 'left'>;
-
-/**
- * Defines the props of the component.
- */
-export interface TooltipProps extends GenericProps, HasCloseMode {
-    /** Anchor (element on which we activate the tooltip). */
-    children: ReactNode;
-    /** Delay (in ms) before closing the tooltip. */
-    delay?: number;
-    /** Whether the tooltip is displayed even without the mouse hovering the anchor. */
-    forceOpen?: boolean;
-    /** Label text. */
-    label?: string | null | false;
-    /** Placement of the tooltip relative to the anchor. */
-    placement?: TooltipPlacement;
-    /** Choose how the tooltip text should link to the anchor */
-    ariaLinkMode?: (typeof ARIA_LINK_MODES)[number];
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Tooltip';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<TooltipProps> = {
-    placement: Placement.BOTTOM,
-    closeMode: 'unmount',
-    ariaLinkMode: 'aria-describedby',
-    zIndex: TOOLTIP_ZINDEX,
-};
-
-/**
- * Arrow size (in pixel).
- */
-const ARROW_SIZE = 8;
-
-/**
- * Tooltip component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Tooltip = forwardRef<TooltipProps, HTMLDivElement>((props, ref) => {
-    const {
-        label,
-        children,
-        className,
-        delay,
-        placement = DEFAULT_PROPS.placement,
-        forceOpen,
-        closeMode = DEFAULT_PROPS.closeMode,
-        ariaLinkMode = DEFAULT_PROPS.ariaLinkMode,
-        zIndex = DEFAULT_PROPS.zIndex,
-        ...forwardedProps
-    } = props;
-    // Disable in SSR.
-    if (!DOCUMENT) {
-        return <>{children}</>;
-    }
-
-    const id = useId();
-
-    const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);
-    const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);
-    const { styles, attributes, update } = usePopper(anchorElement, popperElement, {
-        placement,
-        modifiers: [
-            {
-                name: 'offset',
-                options: { offset: [0, ARROW_SIZE] },
-            },
-        ],
-    });
-
-    const position = attributes?.popper?.['data-popper-placement'] ?? placement;
-    const { isOpen: isActivated, onPopperMount } = useTooltipOpen(delay, anchorElement);
-    const isOpen = (isActivated || forceOpen) && !!label;
-    const isMounted = !!label && (isOpen || closeMode === 'hide');
-    const isHidden = !isOpen && closeMode === 'hide';
-    const wrappedChildren = useInjectTooltipRef({
-        children,
-        setAnchorElement,
-        isMounted,
-        id,
-        label,
-        ariaLinkMode: ariaLinkMode as any,
-    });
-
-    // Update on open
-    React.useEffect(() => {
-        if (isOpen || popperElement) update?.();
-    }, [isOpen, update, popperElement]);
-
-    const labelLines = label ? label.split('\n') : [];
-
-    const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);
-
-    return (
-        <>
-            <TooltipContextProvider>{wrappedChildren}</TooltipContextProvider>
-            {isMounted && (
-                <Portal>
-                    <div
-                        ref={tooltipRef}
-                        {...forwardedProps}
-                        id={id}
-                        role="tooltip"
-                        className={classNames(
-                            className,
-                            handleBasicClasses({
-                                prefix: CLASSNAME,
-                                position,
-                                isInitializing: !styles.popper?.transform,
-                            }),
-                            isHidden && VISUALLY_HIDDEN,
-                        )}
-                        style={{ ...(isHidden ? undefined : styles.popper), zIndex }}
-                        {...attributes.popper}
-                    >
-                        <div className={`${CLASSNAME}__arrow`} />
-                        <div className={`${CLASSNAME}__inner`}>
-                            {labelLines.map((line) => (
-                                <p key={line}>{line}</p>
-                            ))}
-                        </div>
-                    </div>
-                </Portal>
-            )}
-        </>
-    );
-});
-Tooltip.displayName = COMPONENT_NAME;
-Tooltip.className = CLASSNAME;
-Tooltip.defaultProps = DEFAULT_PROPS;