@lumx/react 4.3.2-alpha.41 → 4.3.2-alpha.43

package/index.d.ts

@@ -733,7 +733,7 @@ interface ButtonProps extends GenericProps$1, ReactToJSX<ButtonProps$1> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>;
+declare const Button: Comp<ButtonProps, HTMLAnchorElement | HTMLButtonElement>;
 
 interface IconButtonProps$1 extends BaseButtonProps {
     /**
@@ -1552,7 +1552,7 @@ declare const GenericBlockGapSize: Pick<{
     readonly medium: "medium";
     readonly big: "big";
     readonly huge: "huge";
-}, "medium" | "tiny" | "regular" | "big" | "huge">;
+}, "tiny" | "regular" | "medium" | "big" | "huge">;
 type GenericBlockGapSize = ValueOf$1<typeof GenericBlockGapSize>;
 
 interface GenericBlockProps extends FlexBoxProps {
@@ -2242,7 +2242,7 @@ interface LinkProps extends GenericProps$1, ReactToJSX<LinkProps$1, 'label'> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Link: Comp<LinkProps, HTMLButtonElement | HTMLAnchorElement>;
+declare const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement>;
 
 /**
  * Defines the props of the component.
@@ -3772,6 +3772,11 @@ interface TooltipProps extends GenericProps$1, HasCloseMode {
     placement?: TooltipPlacement;
     /** Choose how the tooltip text should link to the anchor */
     ariaLinkMode?: (typeof ARIA_LINK_MODES)[number];
+    /**
+     * z-index positioning
+     * @deprecated Never really needed. Ignored on browsers supporting the HTML popover API
+     */
+    zIndex?: number;
 }
 /**
  * Tooltip component.

package/index.js

@@ -14834,6 +14834,11 @@ Toolbar.defaultProps = DEFAULT_PROPS$3;
  */
 const TOOLTIP_ZINDEX = POPOVER_ZINDEX + 1;
 
+/** Check if browser supports the HTML Popover API */
+function isPopoverSupported() {
+  return WINDOW != null && 'popover' in HTMLElement.prototype;
+}
+
 /**
  * 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)
@@ -15060,7 +15065,7 @@ const Tooltip = forwardRef((props, ref) => {
     delay,
     placement = DEFAULT_PROPS$2.placement,
     forceOpen,
-    closeMode = DEFAULT_PROPS$2.closeMode,
+    closeMode = isPopoverSupported() ? 'hide' : 'unmount',
     ariaLinkMode = DEFAULT_PROPS$2.ariaLinkMode,
     zIndex = DEFAULT_PROPS$2.zIndex,
     ...forwardedProps
@@ -15104,28 +15109,47 @@ const Tooltip = forwardRef((props, ref) => {
     ariaLinkMode: ariaLinkMode
   });
 
-  // Update on open
+  // Update popover visibility on open/close.
   React__default.useEffect(() => {
-    if (isOpen || popperElement) update?.();
+    if (!popperElement) return;
+    if (popperElement.popover) {
+      try {
+        if (isOpen) popperElement.showPopover();else popperElement.hidePopover();
+      } catch {
+        /* already open/closed */
+      }
+    }
+    if (isOpen) update?.();
   }, [isOpen, update, popperElement]);
   const labelLines = label ? label.split('\n') : [];
   const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);
+  let popover;
+  let Wrapper = Portal;
+  if (isPopoverSupported()) {
+    // Use native HTML popover API
+    popover = forceOpen ? 'manual' : 'hint';
+    // No need for Portal (originally used to escape potential parent hidden/cliped overflow)
+    Wrapper = React__default.Fragment;
+  }
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(TooltipContextProvider, {
       children: wrappedChildren
-    }), isMounted && /*#__PURE__*/jsx(Portal, {
+    }), isMounted && /*#__PURE__*/jsx(Wrapper, {
       children: /*#__PURE__*/jsxs("div", {
         ref: tooltipRef,
         ...forwardedProps,
-        id: id,
         role: "tooltip",
+        popover: popover,
+        id: id,
         className: classNames.join(className, block$2({
           [`position-${position}`]: Boolean(position),
-          'is-initializing': !styles.popper?.transform
-        }), isHidden && classNames.visuallyHidden()),
+          'is-initializing': !popover && !styles.popper?.transform
+        }), !popover && isHidden && classNames.visuallyHidden()),
         style: {
           ...(isHidden ? undefined : styles.popper),
-          zIndex
+          ...(!popover && {
+            zIndex
+          })
         },
         ...attributes.popper,
         children: [/*#__PURE__*/jsx("div", {