@lumx/react 3.9.1 → 3.9.2-alpha.1

package/_internal/types.d.ts

@@ -32,6 +32,13 @@ interface HasClassName {
      */
     className?: string;
 }
+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.
  */
@@ -318,4 +325,4 @@ declare const ThumbnailObjectFit: {
 };
 type ThumbnailObjectFit = ValueOf<typeof ThumbnailObjectFit>;
 
-export { Alignment as A, Comp as C, Emphasis as E, Falsy as F, GenericProps as G, HasTheme as H, Kind as K, Orientation as O, Size as S, Typography as T, ValueOf as V, WhiteSpace as W, HorizontalAlignment as a, ColorPalette as b, VerticalAlignment as c, ColorVariant as d, TextElement as e, HeadingElement as f, AspectRatio as g, FocusPoint as h, ThumbnailObjectFit as i, ThumbnailSize as j, ThumbnailVariant as k, HasClassName as l, HasAriaLabelOrLabelledBy as m, ComponentRef as n, GlobalSize as o, TypographyInterface as p, Color as q, Theme as r, TypographyTitleCustom as s, TypographyCustom as t, Callback as u, ThumbnailAspectRatio as v };
+export { Alignment as A, Comp as C, Emphasis as E, Falsy as F, GenericProps as G, HasTheme as H, Kind as K, Orientation as O, Size as S, Typography as T, ValueOf as V, WhiteSpace as W, HorizontalAlignment as a, ColorPalette as b, VerticalAlignment as c, ColorVariant as d, TextElement as e, HeadingElement as f, AspectRatio as g, FocusPoint as h, ThumbnailObjectFit as i, ThumbnailSize as j, ThumbnailVariant as k, HasClassName as l, HasAriaLabelOrLabelledBy as m, ComponentRef as n, HasCloseMode as o, GlobalSize as p, TypographyInterface as q, Color as r, Theme as s, TypographyTitleCustom as t, TypographyCustom as u, Callback as v, ThumbnailAspectRatio as w };

package/index.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode, SyntheticEvent, ReactElement, MouseEventHandler, KeyboardEventHandler, AriaAttributes, DetailedHTMLProps, ButtonHTMLAttributes, InputHTMLAttributes, Ref, RefObject, ImgHTMLAttributes, CSSProperties, SetStateAction, Key } from 'react';
-import { K as Kind, C as Comp, G as GenericProps, H as HasTheme, a as HorizontalAlignment, S as Size, b as ColorPalette, E as Emphasis, V as ValueOf, A as Alignment, c as VerticalAlignment, O as Orientation, d as ColorVariant, T as Typography, e as TextElement, W as WhiteSpace, f as HeadingElement, g as AspectRatio, F as Falsy, h as FocusPoint, i as ThumbnailObjectFit, j as ThumbnailSize, k as ThumbnailVariant, l as HasClassName, m as HasAriaLabelOrLabelledBy, n as ComponentRef, o as GlobalSize, p as TypographyInterface } from './_internal/types.js';
-export { A as Alignment, g as AspectRatio, u as Callback, q as Color, b as ColorPalette, d as ColorVariant, E as Emphasis, h as FocusPoint, G as GenericProps, o as GlobalSize, f as HeadingElement, a as HorizontalAlignment, K as Kind, O as Orientation, S as Size, e as TextElement, r as Theme, v as ThumbnailAspectRatio, i as ThumbnailObjectFit, j as ThumbnailSize, k as ThumbnailVariant, T as Typography, t as TypographyCustom, p as TypographyInterface, s as TypographyTitleCustom, c as VerticalAlignment, W as WhiteSpace } from './_internal/types.js';
+import { K as Kind, C as Comp, G as GenericProps, H as HasTheme, a as HorizontalAlignment, S as Size, b as ColorPalette, E as Emphasis, V as ValueOf, A as Alignment, c as VerticalAlignment, O as Orientation, d as ColorVariant, T as Typography, e as TextElement, W as WhiteSpace, f as HeadingElement, g as AspectRatio, F as Falsy, h as FocusPoint, i as ThumbnailObjectFit, j as ThumbnailSize, k as ThumbnailVariant, l as HasClassName, m as HasAriaLabelOrLabelledBy, n as ComponentRef, o as HasCloseMode, p as GlobalSize, q as TypographyInterface } from './_internal/types.js';
+export { A as Alignment, g as AspectRatio, v as Callback, r as Color, b as ColorPalette, d as ColorVariant, E as Emphasis, h as FocusPoint, G as GenericProps, p as GlobalSize, f as HeadingElement, a as HorizontalAlignment, K as Kind, O as Orientation, S as Size, e as TextElement, s as Theme, w as ThumbnailAspectRatio, i as ThumbnailObjectFit, j as ThumbnailSize, k as ThumbnailVariant, T as Typography, u as TypographyCustom, q as TypographyInterface, t as TypographyTitleCustom, c as VerticalAlignment, W as WhiteSpace } from './_internal/types.js';
 
 interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {
     /** Message variant. */
@@ -2209,7 +2209,7 @@ declare const SideNavigation: Comp<SideNavigationProps, HTMLUListElement>;
 /**
  * Defines the props of the component.
  */
-interface SideNavigationItemProps extends GenericProps {
+interface SideNavigationItemProps extends GenericProps, HasCloseMode {
     /** SideNavigationItem elements. */
     children?: ReactNode;
     /** Emphasis variant. */
@@ -2228,11 +2228,6 @@ interface SideNavigationItemProps extends GenericProps {
     linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
     /** 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. */
@@ -2872,7 +2867,7 @@ type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | 'left'>;
 /**
  * Defines the props of the component.
  */
-interface TooltipProps extends GenericProps {
+interface TooltipProps extends GenericProps, HasCloseMode {
     /** Anchor (element on which we activate the tooltip). */
     children: ReactNode;
     /** Delay (in ms) before closing the tooltip. */

package/index.js

@@ -383,6 +383,11 @@ const WINDOW = typeof window !== 'undefined' ? window : undefined;
  */
 const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
 
+/**
+ * Check if we are running in the simulated DOM jsdom environment
+ */
+const IS_JSDOM_ENV = typeof navigator !== 'undefined' && navigator.userAgent.includes('jsdom');
+
 const _excluded = ["prefix"];
 
 /**
@@ -6477,7 +6482,7 @@ function usePopoverStyle(_ref5) {
     zIndex
   } = _ref5;
   const [popperElement, setPopperElement] = useState(null);
-  if (navigator.userAgent.includes('jsdom')) {
+  if (IS_JSDOM_ENV) {
     // Skip all logic; we don't need popover positioning in jsdom.
     return {
       styles: {},
@@ -13984,9 +13989,11 @@ function useTooltipOpen(delay, anchorElement) {
     // Run timer to defer updating the isOpen state.
     const deferUpdate = duration => {
       if (timer) clearTimeout(timer);
-      timer = setTimeout(() => {
+      const update = () => {
         setIsOpen(!!shouldOpen);
-      }, duration);
+      };
+      // Skip timeout in jsdom env
+      if (IS_JSDOM_ENV) update();else timer = setTimeout(update, duration);
     };
     const hoverNotSupported = browserDoesNotSupportHover();
     const hasTouch = ('ontouchstart' in window);
@@ -14080,7 +14087,7 @@ function useTooltipOpen(delay, anchorElement) {
   };
 }
 
-const _excluded$1q = ["label", "children", "className", "delay", "placement", "forceOpen"];
+const _excluded$1q = ["label", "children", "className", "delay", "placement", "forceOpen", "closeMode"];
 
 /** Position of the tooltip relative to the anchor element. */
 
@@ -14102,7 +14109,8 @@ const CLASSNAME$1h = getRootClassName(COMPONENT_NAME$1k);
  * Component default props.
  */
 const DEFAULT_PROPS$11 = {
-  placement: Placement.BOTTOM
+  placement: Placement.BOTTOM,
+  closeMode: 'unmount'
 };
 
 /**
@@ -14110,6 +14118,9 @@ const DEFAULT_PROPS$11 = {
  */
 const ARROW_SIZE$1 = 8;
 
+// Skip popper logic in jsdom env
+const usePopperHook = IS_JSDOM_ENV ? () => ({}) : usePopper;
+
 /**
  * Tooltip component.
  *
@@ -14125,20 +14136,21 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       delay,
       placement,
-      forceOpen
+      forceOpen,
+      closeMode
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1q);
   // Disable in SSR.
-  if (!DOCUMENT) {
+  if (!DOCUMENT && closeMode === 'unmount') {
     return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   }
   const id = useId();
   const [popperElement, setPopperElement] = useState(null);
   const [anchorElement, setAnchorElement] = useState(null);
   const {
-    styles,
-    attributes
-  } = usePopper(anchorElement, popperElement, {
+    styles = {},
+    attributes = {}
+  } = usePopperHook(anchorElement, popperElement, {
     placement,
     modifiers: [{
       name: 'offset',
@@ -14153,25 +14165,29 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
     onPopperMount
   } = useTooltipOpen(delay, anchorElement);
   const isOpen = (isActivated || forceOpen) && !!label;
-  const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen, id, label);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TooltipContextProvider, null, wrappedChildren), isOpen && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({
-    ref: mergeRefs(ref, setPopperElement, onPopperMount)
+  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 /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TooltipContextProvider, null, wrappedChildren), isMounted && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({
+    ref: tooltipRef
   }, forwardedProps, {
     id: id,
     role: "tooltip",
-    "aria-label": label,
+    "aria-label": label || '',
     className: classnames(className, handleBasicClasses({
       prefix: CLASSNAME$1h,
-      position
+      position,
+      hidden: !isOpen && closeMode === 'hide'
     })),
     style: styles.popper
   }, attributes.popper), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$1h}__arrow`
   }), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$1h}__inner`
-  }, label.indexOf('\n') !== -1 ? label.split('\n').map(sentence => /*#__PURE__*/React.createElement("p", {
-    key: sentence
-  }, sentence)) : label)), document.body));
+  }, labelLines.map(line => /*#__PURE__*/React.createElement("p", {
+    key: line
+  }, line)))), document.body));
 });
 Tooltip.displayName = COMPONENT_NAME$1k;
 Tooltip.className = CLASSNAME$1h;