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

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.9.2-alpha.1",
-        "@lumx/icons": "^3.9.2-alpha.1",
+        "@lumx/core": "^3.9.2-alpha.2",
+        "@lumx/icons": "^3.9.2-alpha.2",
         "@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.1"
+    "version": "3.9.2-alpha.2"
 }

package/src/components/popover/usePopoverStyle.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { usePopper } from 'react-popper';
 import memoize from 'lodash/memoize';
 import { detectOverflow } from '@popperjs/core';
 
-import { DOCUMENT, IS_JSDOM_ENV, WINDOW } from '@lumx/react/constants';
+import { DOCUMENT, WINDOW } from '@lumx/react/constants';
 import { PopoverProps } from '@lumx/react/components/popover/Popover';
+import { usePopper } from '@lumx/react/hooks/usePopper';
 import { ARROW_SIZE, FitAnchorWidth, Placement } from './constants';
 
 /**
@@ -104,12 +104,6 @@ export function usePopoverStyle({
 }: Options): Output {
     const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);
 
-    if (IS_JSDOM_ENV) {
-        // Skip all logic; we don't need popover positioning in jsdom.
-        return { styles: {}, attributes: {}, isPositioned: true, popperElement, setPopperElement };
-    }
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [arrowElement, setArrowElement] = useState<null | HTMLElement>(null);
 
     const actualOffset: [number, number] = [offset?.along ?? 0, (offset?.away ?? 0) + (hasArrow ? ARROW_SIZE : 0)];
@@ -142,16 +136,13 @@ export function usePopoverStyle({
         );
     }
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const { styles, attributes, state, update } = usePopper(anchorRef.current, popperElement, { placement, modifiers });
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
         update?.();
     }, [children, update]);
 
     const position = state?.placement ?? placement;
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const popoverStyle = useMemo(() => {
         const newStyles = { ...style, ...styles.popper, zIndex };
 

package/src/components/tooltip/Tooltip.tsx

@@ -1,11 +1,10 @@
 /* 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, IS_JSDOM_ENV } from '@lumx/react/constants';
+import { DOCUMENT } from '@lumx/react/constants';
 import { Comp, GenericProps, HasCloseMode } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
@@ -15,6 +14,7 @@ import { useId } from '@lumx/react/hooks/useId';
 
 import { useInjectTooltipRef } from './useInjectTooltipRef';
 import { useTooltipOpen } from './useTooltipOpen';
+import { usePopper } from '@lumx/react/hooks/usePopper';
 
 /** Position of the tooltip relative to the anchor element. */
 export type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | 'left'>;
@@ -58,9 +58,6 @@ 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.
  *
@@ -71,7 +68,7 @@ const usePopperHook: typeof usePopper = IS_JSDOM_ENV ? () => ({}) as any : usePo
 export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {
     const { label, children, className, delay, placement, forceOpen, closeMode, ...forwardedProps } = props;
     // Disable in SSR.
-    if (!DOCUMENT && closeMode === 'unmount') {
+    if (!DOCUMENT) {
         return <>{children}</>;
     }
 
@@ -79,7 +76,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 = {} } = usePopperHook(anchorElement, popperElement, {
+    const { styles, attributes } = usePopper(anchorElement, popperElement, {
         placement,
         modifiers: [
             {

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 { IS_JSDOM_ENV, 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';
 
@@ -34,8 +34,8 @@ export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLEle
             const update = () => {
                 setIsOpen(!!shouldOpen);
             };
-            // Skip timeout in jsdom env
-            if (IS_JSDOM_ENV) update();
+            // Skip timeout in fake browsers
+            if (!IS_BROWSER) update();
             else timer = setTimeout(update, duration) as any;
         };
 

package/src/constants.ts

@@ -17,6 +17,6 @@ export const WINDOW = typeof window !== 'undefined' ? window : undefined;
 export const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
 
 /**
- * Check if we are running in the simulated DOM jsdom environment
+ * Check if we are running in a true browser
  */
-export const IS_JSDOM_ENV = typeof navigator !== 'undefined' && navigator.userAgent.includes('jsdom');
+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: { 'data-popper-placement': placement }, styles: {} }) as any;
+
+/** Switch hook implementation between environment */
+export const usePopper: typeof usePopperHook = IS_BROWSER ? usePopperHook : useStubPopper;