@lumx/react 4.3.2-alpha.40 → 4.3.2-alpha.42

package/index.d.ts

@@ -1552,7 +1552,7 @@ declare const GenericBlockGapSize: Pick<{
     readonly medium: "medium";
     readonly big: "big";
     readonly huge: "huge";
-}, "tiny" | "regular" | "medium" | "big" | "huge">;
+}, "medium" | "tiny" | "regular" | "big" | "huge">;
 type GenericBlockGapSize = ValueOf$1<typeof GenericBlockGapSize>;
 
 interface GenericBlockProps extends FlexBoxProps {
@@ -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

@@ -11447,7 +11447,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
       as: linkAs || (linkProps?.href ? 'a' : 'button'),
       ...linkProps,
       className: element$d('link'),
-      onClick,
+      handleClick: onClick,
       ...ariaProps,
       children: /*#__PURE__*/jsxs(Fragment, {
         children: [icon && /*#__PURE__*/jsx(Icon, {
@@ -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)
@@ -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()),
+        }), !popover && isHidden && classNames.visuallyHidden()),
         style: {
           ...(isHidden ? undefined : styles.popper),
-          zIndex
+          ...(!popover && {
+            zIndex
+          })
         },
         ...attributes.popper,
         children: [/*#__PURE__*/jsx("div", {