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

package/src/components/tooltip/Tooltip.tsx

@@ -1,18 +1,19 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import React, { forwardRef, ReactNode, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { usePopper } from 'react-popper';
 
 import classNames from 'classnames';
 
 import { DOCUMENT } 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';
+import { usePopper } from '@lumx/react/hooks/usePopper';
 
+import { ARIA_LINK_MODES, TOOLTIP_ZINDEX } from '@lumx/react/components/tooltip/constants';
 import { useInjectTooltipRef } from './useInjectTooltipRef';
 import { useTooltipOpen } from './useTooltipOpen';
 
@@ -33,6 +34,8 @@ export interface TooltipProps extends GenericProps, HasCloseMode {
     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];
 }
 
 /**
@@ -50,7 +53,9 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<TooltipProps> = {
     placement: Placement.BOTTOM,
-    closeMode: 'hide',
+    closeMode: 'unmount',
+    ariaLinkMode: 'aria-describedby',
+    zIndex: TOOLTIP_ZINDEX,
 };
 
 /**
@@ -66,9 +71,20 @@ const ARROW_SIZE = 8;
  * @return React element.
  */
 export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { label, children, className, delay, placement, forceOpen, closeMode, ...forwardedProps } = props;
+    const {
+        label,
+        children,
+        className,
+        delay,
+        placement,
+        forceOpen,
+        closeMode,
+        ariaLinkMode,
+        zIndex,
+        ...forwardedProps
+    } = props;
     // Disable in SSR.
-    if (!DOCUMENT && closeMode === 'unmount') {
+    if (!DOCUMENT) {
         return <>{children}</>;
     }
 
@@ -76,7 +92,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, update } = usePopper(anchorElement, popperElement, {
         placement,
         modifiers: [
             {
@@ -89,18 +105,31 @@ 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 isMounted = isOpen || closeMode === 'hide';
-    const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isMounted, id, label);
+    const isMounted = !!label && (isOpen || closeMode === 'hide');
+    const wrappedChildren = useInjectTooltipRef({
+        children,
+        setAnchorElement,
+        isMounted,
+        id,
+        label,
+        ariaLinkMode: ariaLinkMode as any,
+    });
+
+    // Update on open
+    React.useEffect(() => {
+        if (isOpen) update?.();
+    }, [isOpen, update]);
 
     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"
@@ -113,7 +142,7 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
                                 hidden: !isOpen && closeMode === 'hide',
                             }),
                         )}
-                        style={styles.popper}
+                        style={{ ...styles.popper, zIndex }}
                         {...attributes.popper}
                     >
                         <div className={`${CLASSNAME}__arrow`} />

package/src/components/tooltip/constants.ts

@@ -0,0 +1,8 @@
+import { POPOVER_ZINDEX } from '../popover/constants';
+
+export const ARIA_LINK_MODES = ['aria-describedby', 'aria-labelledby'] as const;
+
+/**
+ * Make sure tooltip appear above popovers.
+ */
+export const TOOLTIP_ZINDEX = POPOVER_ZINDEX + 1;

package/src/components/tooltip/useInjectTooltipRef.tsx

@@ -2,27 +2,30 @@ import React, { cloneElement, ReactNode, useMemo } from 'react';
 
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
+interface Options {
+    /** Original tooltip anchor */
+    children: ReactNode;
+    /** Set tooltip anchor element */
+    setAnchorElement: (e: HTMLDivElement) => void;
+    /** Whether the tooltip is open or not */
+    isMounted: boolean | undefined;
+    /** Tooltip id */
+    id: string;
+    /** Tooltip label*/
+    label?: string | null | false;
+    /** Choose how the tooltip text should link to the anchor */
+    ariaLinkMode: 'aria-describedby' | 'aria-labelledby';
+}
+
 /**
  * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
  * Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)
  * will be wrapped in a <span>.
- *
- * @param  children         Original tooltip anchor.
- * @param  setAnchorElement Set tooltip anchor element.
- * @param  isOpen           Whether the tooltip is open or not.
- * @param  id               Tooltip id.
- * @param  label            Tooltip label.
- * @return tooltip anchor.
  */
-export const useInjectTooltipRef = (
-    children: ReactNode,
-    setAnchorElement: (e: HTMLDivElement) => void,
-    isOpen: boolean | undefined,
-    id: string,
-    label?: string | null | false,
-): ReactNode => {
-    // Only add description when open
-    const describedBy = isOpen ? id : undefined;
+export const useInjectTooltipRef = (options: Options): ReactNode => {
+    const { children, setAnchorElement, isMounted, id, label, ariaLinkMode } = options;
+    // Only add link when mounted
+    const linkId = isMounted ? id : undefined;
 
     return useMemo(() => {
         if (!label) return children;
@@ -32,18 +35,21 @@ export const useInjectTooltipRef = (
             const ref = mergeRefs((children as any).ref, setAnchorElement);
             const props = { ...children.props, ref };
 
-            // Add current tooltip to the aria-describedby if the label is not already present
-            if (label !== props['aria-label'] && describedBy) {
-                props['aria-describedby'] = [props['aria-describedby'], describedBy].filter(Boolean).join(' ');
+            // Do not add label/description if the tooltip label is already in aria-label
+            if (linkId && label !== props['aria-label']) {
+                if (props[ariaLinkMode]) props[ariaLinkMode] += ' ';
+                else props[ariaLinkMode] = '';
+                props[ariaLinkMode] += linkId;
             }
 
             return cloneElement(children, props);
         }
 
+        const aria = linkId ? { [ariaLinkMode]: linkId } : undefined;
         return (
-            <div className="lumx-tooltip-anchor-wrapper" ref={setAnchorElement} aria-describedby={describedBy}>
+            <div className="lumx-tooltip-anchor-wrapper" ref={setAnchorElement} {...aria}>
                 {children}
             </div>
         );
-    }, [children, setAnchorElement, describedBy, label]);
+    }, [label, children, setAnchorElement, linkId, ariaLinkMode]);
 };

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_BROWSER, 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 fake browsers
+            if (!IS_BROWSER) 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 a true browser
+ */
+export const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');

package/src/hooks/usePopper.ts

@@ -0,0 +1,9 @@
+import { usePopper as usePopperHook } from 'react-popper';
+import { IS_BROWSER } from '@lumx/react/constants';
+
+/** Stub usePopper for use outside of browsers */
+const useStubPopper: typeof usePopperHook = (_a, _p, { placement }: any) =>
+    ({ attributes: { popper: { 'data-popper-placement': placement } }, styles: {} }) as any;
+
+/** Switch hook implementation between environment */
+export const usePopper: typeof usePopperHook = IS_BROWSER ? usePopperHook : useStubPopper;

package/src/stories/generated/TextField/Demos.stories.tsx

@@ -10,6 +10,7 @@ export { App as Disabled } from './disabled';
 export { App as Helper } from './helper';
 export { App as Icon } from './icon';
 export { App as Invalid } from './invalid';
+export { App as Number } from './number';
 export { App as Placeholder } from './placeholder';
 export { App as Required } from './required';
 export { App as TextAreaInvalid } from './text-area-invalid';

package/src/utils/type.ts

@@ -59,7 +59,6 @@ export interface HasClassName {
     className?: string;
 }
 
-
 export interface HasCloseMode {
     /**
      * Choose how the children are hidden when closed