@lumx/react 3.9.1 → 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.1",
-        "@lumx/icons": "^3.9.1",
+        "@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.1"
+    "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/side-navigation/SideNavigationItem.tsx

@@ -7,7 +7,7 @@ import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 
 import { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';
 
-import { Comp, GenericProps, isComponent } from '@lumx/react/utils/type';
+import { Comp, GenericProps, HasCloseMode, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
 import { renderButtonOrLink } from '@lumx/react/utils/renderButtonOrLink';
@@ -16,7 +16,7 @@ import { useId } from '@lumx/react/hooks/useId';
 /**
  * Defines the props of the component.
  */
-export interface SideNavigationItemProps extends GenericProps {
+export interface SideNavigationItemProps extends GenericProps, HasCloseMode {
     /** SideNavigationItem elements. */
     children?: ReactNode;
     /** Emphasis variant. */
@@ -36,11 +36,6 @@ export interface SideNavigationItemProps extends GenericProps {
     /** Props to pass to the toggle button (minus those already set by the SideNavigationItem props). */
     toggleButtonProps: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color' | 'size'>;
-    /**
-     * Choose how the children are hidden when closed
-     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
-     */
-    closeMode?: 'hide' | 'unmount';
     /** On action button click callback. */
     onActionClick?(evt: React.MouseEvent): void;
     /** On click callback. */

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

@@ -42,6 +42,14 @@ export const ForceOpen = {
     },
 };
 
+/** Hide on close instead of unmounting */
+export const CloseModeHide = {
+    args: {
+        ...OnAButton.args,
+        closeMode: 'hide',
+    },
+};
+
 /** Display a multiline tooltip */
 export const MultilineTooltip = {
     args: {

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';
@@ -158,6 +158,19 @@ describe(`<${Tooltip.displayName}>`, () => {
             // Children ref is stable
             expect(ref.current === element).toBe(true);
         });
+
+        it('should render in closeMode=hide', async () => {
+            const { tooltip } = await setup({
+                label: 'Tooltip label',
+                children: <Button>Anchor</Button>,
+                closeMode: 'hide',
+                forceOpen: false,
+            });
+            expect(tooltip).toBeInTheDocument();
+            expect(tooltip).toHaveClass('lumx-tooltip--is-hidden');
+            const button = screen.queryByRole('button', { name: 'Anchor' });
+            expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
+        });
     });
 
     describe('activation', () => {
@@ -180,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 () => {
@@ -212,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 { Comp, GenericProps } from '@lumx/react/utils/type';
+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';
@@ -22,7 +22,7 @@ export type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | '
 /**
  * Defines the props of the component.
  */
-export interface TooltipProps extends GenericProps {
+export interface TooltipProps extends GenericProps, HasCloseMode {
     /** Anchor (element on which we activate the tooltip). */
     children: ReactNode;
     /** Delay (in ms) before closing the tooltip. */
@@ -50,6 +50,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<TooltipProps> = {
     placement: Placement.BOTTOM,
+    closeMode: 'unmount',
 };
 
 /**
@@ -57,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.
  *
@@ -65,9 +69,9 @@ const ARROW_SIZE = 8;
  * @return React element.
  */
 export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { label, children, className, delay, placement, forceOpen, ...forwardedProps } = props;
+    const { label, children, className, delay, placement, forceOpen, closeMode, ...forwardedProps } = props;
     // Disable in SSR.
-    if (!DOCUMENT) {
+    if (!DOCUMENT && closeMode === 'unmount') {
         return <>{children}</>;
     }
 
@@ -75,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: [
             {
@@ -88,28 +92,39 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
     const position = attributes?.popper?.['data-popper-placement'] ?? placement;
     const { isOpen: isActivated, onPopperMount } = useTooltipOpen(delay, anchorElement);
     const isOpen = (isActivated || forceOpen) && !!label;
-    const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen, id, label);
+    const isMounted = isOpen || closeMode === 'hide';
+    const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isMounted, id, label);
+
+    const labelLines = label ? label.split('\n') : [];
 
+    const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);
     return (
         <>
             <TooltipContextProvider>{wrappedChildren}</TooltipContextProvider>
-            {isOpen &&
+            {isMounted &&
                 createPortal(
                     <div
-                        ref={mergeRefs(ref, setPopperElement, onPopperMount)}
+                        ref={tooltipRef}
                         {...forwardedProps}
                         id={id}
                         role="tooltip"
-                        aria-label={label}
-                        className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, position }))}
+                        aria-label={label || ''}
+                        className={classNames(
+                            className,
+                            handleBasicClasses({
+                                prefix: CLASSNAME,
+                                position,
+                                hidden: !isOpen && closeMode === 'hide',
+                            }),
+                        )}
                         style={styles.popper}
                         {...attributes.popper}
                     >
                         <div className={`${CLASSNAME}__arrow`} />
                         <div className={`${CLASSNAME}__inner`}>
-                            {label.indexOf('\n') !== -1
-                                ? label.split('\n').map((sentence: string) => <p key={sentence}>{sentence}</p>)
-                                : label}
+                            {labelLines.map((line) => (
+                                <p key={line}>{line}</p>
+                            ))}
                         </div>
                     </div>,
                     document.body,

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');

package/src/utils/type.ts

@@ -59,6 +59,15 @@ export interface HasClassName {
     className?: string;
 }
 
+
+export interface HasCloseMode {
+    /**
+     * Choose how the children are hidden when closed
+     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
+     */
+    closeMode?: 'hide' | 'unmount';
+}
+
 /**
  * Define a generic props types.
  */