@lumx/react 3.9.2-alpha.0 → 3.9.2-alpha.1

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.9.2-alpha.0",
-        "@lumx/icons": "^3.9.2-alpha.0",
+        "@lumx/core": "^3.9.2-alpha.1",
+        "@lumx/icons": "^3.9.2-alpha.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.9.2-alpha.0"
+    "version": "3.9.2-alpha.1"
 }

package/src/components/popover/usePopoverStyle.tsx

@@ -3,7 +3,7 @@ import { usePopper } from 'react-popper';
 import memoize from 'lodash/memoize';
 import { detectOverflow } from '@popperjs/core';
 
-import { DOCUMENT, WINDOW } from '@lumx/react/constants';
+import { DOCUMENT, IS_JSDOM_ENV, WINDOW } from '@lumx/react/constants';
 import { PopoverProps } from '@lumx/react/components/popover/Popover';
 import { ARROW_SIZE, FitAnchorWidth, Placement } from './constants';
 
@@ -104,7 +104,7 @@ export function usePopoverStyle({
 }: Options): Output {
     const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);
 
-    if (navigator.userAgent.includes('jsdom')) {
+    if (IS_JSDOM_ENV) {
         // Skip all logic; we don't need popover positioning in jsdom.
         return { styles: {}, attributes: {}, isPositioned: true, popperElement, setPopperElement };
     }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Button, IconButton } from '@lumx/react';
-import { screen, render, waitFor } from '@testing-library/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';
@@ -159,18 +159,17 @@ describe(`<${Tooltip.displayName}>`, () => {
             expect(ref.current === element).toBe(true);
         });
 
-        it.only('should render in closeMode=hide', async () => {
-            const { tooltip, anchorWrapper } = await setup({
+        it('should render in closeMode=hide', async () => {
+            const { tooltip } = await setup({
                 label: 'Tooltip label',
                 children: <Button>Anchor</Button>,
                 closeMode: 'hide',
+                forceOpen: false,
             });
-            screen.logTestingPlaygroundURL()
             expect(tooltip).toBeInTheDocument();
-            expect(anchorWrapper).toBeInTheDocument();
-            expect(anchorWrapper).toHaveAttribute('aria-describedby', tooltip?.id);
+            expect(tooltip).toHaveClass('lumx-tooltip--is-hidden');
             const button = screen.queryByRole('button', { name: 'Anchor' });
-            expect(button?.parentElement).toBe(anchorWrapper);
+            expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
         });
     });
 
@@ -194,12 +193,11 @@ describe(`<${Tooltip.displayName}>`, () => {
             expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
 
             // Un-hover anchor button
-            userEvent.unhover(button);
-            await waitFor(() => {
-                expect(button).not.toHaveFocus();
-                // Tooltip closed
-                expect(tooltip).not.toBeInTheDocument();
-            });
+            await userEvent.unhover(button);
+
+            expect(button).not.toHaveFocus();
+            // Tooltip closed
+            expect(tooltip).not.toBeInTheDocument();
         });
 
         it('should activate on hover anchor and then tooltip', async () => {
@@ -226,12 +224,10 @@ describe(`<${Tooltip.displayName}>`, () => {
             expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
 
             // Un-hover tooltip
-            userEvent.unhover(tooltip);
-            await waitFor(() => {
-                expect(button).not.toHaveFocus();
-                // Tooltip closed
-                expect(tooltip).not.toBeInTheDocument();
-            });
+            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 () => {

package/src/components/tooltip/Tooltip.tsx

@@ -5,10 +5,10 @@ import { usePopper } from 'react-popper';
 
 import classNames from 'classnames';
 
-import { DOCUMENT } from '@lumx/react/constants';
+import { DOCUMENT, IS_JSDOM_ENV } from '@lumx/react/constants';
 import { Comp, GenericProps, HasCloseMode } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { Placement } from '@lumx/react/components/popover';
 import { TooltipContextProvider } from '@lumx/react/components/tooltip/context';
 import { useId } from '@lumx/react/hooks/useId';
@@ -50,7 +50,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<TooltipProps> = {
     placement: Placement.BOTTOM,
-    closeMode: 'hide',
+    closeMode: 'unmount',
 };
 
 /**
@@ -58,6 +58,9 @@ const DEFAULT_PROPS: Partial<TooltipProps> = {
  */
 const ARROW_SIZE = 8;
 
+// Skip popper logic in jsdom env
+const usePopperHook: typeof usePopper = IS_JSDOM_ENV ? () => ({}) as any : usePopper;
+
 /**
  * Tooltip component.
  *
@@ -76,7 +79,7 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
 
     const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);
     const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);
-    const { styles, attributes } = usePopper(anchorElement, popperElement, {
+    const { styles = {}, attributes = {} } = usePopperHook(anchorElement, popperElement, {
         placement,
         modifiers: [
             {
@@ -94,13 +97,14 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
 
     const labelLines = label ? label.split('\n') : [];
 
+    const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);
     return (
         <>
             <TooltipContextProvider>{wrappedChildren}</TooltipContextProvider>
             {isMounted &&
                 createPortal(
                     <div
-                        ref={mergeRefs(ref, setPopperElement, onPopperMount)}
+                        ref={tooltipRef}
                         {...forwardedProps}
                         id={id}
                         role="tooltip"

package/src/components/tooltip/useTooltipOpen.tsx

@@ -1,6 +1,6 @@
 import { MutableRefObject, useEffect, useRef, useState } from 'react';
 import { browserDoesNotSupportHover } from '@lumx/react/utils/browserDoesNotSupportHover';
-import { TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/constants';
+import { IS_JSDOM_ENV, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/constants';
 import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
 
@@ -31,9 +31,12 @@ export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLEle
         // Run timer to defer updating the isOpen state.
         const deferUpdate = (duration: number) => {
             if (timer) clearTimeout(timer);
-            timer = setTimeout(() => {
+            const update = () => {
                 setIsOpen(!!shouldOpen);
-            }, duration) as any;
+            };
+            // Skip timeout in jsdom env
+            if (IS_JSDOM_ENV) update();
+            else timer = setTimeout(update, duration) as any;
         };
 
         const hoverNotSupported = browserDoesNotSupportHover();

package/src/constants.ts

@@ -15,3 +15,8 @@ export const WINDOW = typeof window !== 'undefined' ? window : undefined;
  * Optional global `document` instance (not defined when running SSR).
  */
 export const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
+
+/**
+ * Check if we are running in the simulated DOM jsdom environment
+ */
+export const IS_JSDOM_ENV = typeof navigator !== 'undefined' && navigator.userAgent.includes('jsdom');