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

package/index.d.ts

@@ -725,6 +725,8 @@ declare const DEFAULT_PROPS: Partial<ButtonProps$1>;
 interface ButtonProps extends GenericProps$1, ReactToJSX<ButtonProps$1> {
     /** callback for clicking on the button */
     onClick?: (event?: React.MouseEvent) => void;
+    /** callback for pressing a key on the button */
+    onKeyPress?: (event?: React.KeyboardEvent) => void;
 }
 /**
  * Button component.
@@ -733,7 +735,7 @@ interface ButtonProps extends GenericProps$1, ReactToJSX<ButtonProps$1> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Button: Comp<ButtonProps, HTMLAnchorElement | HTMLButtonElement>;
+declare const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>;
 
 interface IconButtonProps$1 extends BaseButtonProps {
     /**
@@ -765,6 +767,8 @@ interface IconButtonProps extends GenericProps$1, ReactToJSX<IconButtonProps$1,
     hideTooltip?: boolean;
     /** callback for clicking on the button */
     onClick?: (event?: React.MouseEvent) => void;
+    /** callback for pressing a key on the button */
+    onKeyPress?: (event?: React.KeyboardEvent) => void;
 }
 /**
  * IconButton component.
@@ -2242,7 +2246,7 @@ interface LinkProps extends GenericProps$1, ReactToJSX<LinkProps$1, 'label'> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement>;
+declare const Link: Comp<LinkProps, HTMLButtonElement | HTMLAnchorElement>;
 
 /**
  * Defines the props of the component.
@@ -3772,11 +3776,6 @@ 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

@@ -1259,6 +1259,7 @@ const Button = forwardRef((props, ref) => {
   } = useDisableStateProps(props);
   const {
     onClick,
+    onKeyPress,
     ...restOfOtherProps
   } = otherProps;
   const {
@@ -1273,6 +1274,7 @@ const Button = forwardRef((props, ref) => {
     ...restOfOtherProps,
     'aria-disabled': isAnyDisabled,
     handleClick: onClick,
+    handleKeyPress: onKeyPress,
     children: /*#__PURE__*/jsxs(Fragment, {
       children: [leftIcon && !isEmpty(leftIcon) &&
       /*#__PURE__*/
@@ -1472,6 +1474,7 @@ const IconButton = forwardRef((props, ref) => {
   } = useDisableStateProps(forwardedProps);
   const {
     onClick,
+    onKeyPress,
     ...restOfOtherProps
   } = otherProps;
   return /*#__PURE__*/jsx(Tooltip, {
@@ -1483,6 +1486,7 @@ const IconButton = forwardRef((props, ref) => {
       ...disabledStateProps,
       ...restOfOtherProps,
       handleClick: onClick,
+      handleKeyPress: onKeyPress,
       'aria-disabled': isAnyDisabled,
       label
     })
@@ -9450,6 +9454,7 @@ const NavigationSection = forwardRef((props, ref) => {
         setIsOpen(!isOpen);
         event.stopPropagation();
       },
+      handleKeyPress: forwardedProps.onKeyPress,
       children: /*#__PURE__*/jsxs(Fragment, {
         children: [icon ? /*#__PURE__*/jsx(Icon, {
           className: itemElement('icon'),
@@ -9521,6 +9526,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
     isCurrentPage,
     as: Element = 'a',
     onClick,
+    onKeyPress,
     ...forwardedProps
   } = props;
   const theme = useTheme();
@@ -9544,6 +9550,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
         'aria-current': isCurrentPage ? 'page' : undefined,
         ...forwardedProps,
         handleClick: onClick,
+        handleKeyPress: onKeyPress,
         children: /*#__PURE__*/jsxs(Fragment, {
           children: [icon ? /*#__PURE__*/jsx(Icon, {
             className: element$p('icon'),
@@ -11425,6 +11432,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
         ...linkProps,
         className: element$d('link'),
         handleClick: onClick,
+        handleKeyPress: linkProps?.onKeyPress,
         children: /*#__PURE__*/jsxs(Fragment, {
           children: [icon && /*#__PURE__*/jsx(Icon, {
             className: element$d('icon'),
@@ -11448,6 +11456,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
       ...linkProps,
       className: element$d('link'),
       handleClick: onClick,
+      handleKeyPress: linkProps?.onKeyPress,
       ...ariaProps,
       children: /*#__PURE__*/jsxs(Fragment, {
         children: [icon && /*#__PURE__*/jsx(Icon, {
@@ -14834,11 +14843,6 @@ 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)
@@ -15065,7 +15069,7 @@ const Tooltip = forwardRef((props, ref) => {
     delay,
     placement = DEFAULT_PROPS$2.placement,
     forceOpen,
-    closeMode = isPopoverSupported() ? 'hide' : 'unmount',
+    closeMode = DEFAULT_PROPS$2.closeMode,
     ariaLinkMode = DEFAULT_PROPS$2.ariaLinkMode,
     zIndex = DEFAULT_PROPS$2.zIndex,
     ...forwardedProps
@@ -15109,47 +15113,28 @@ const Tooltip = forwardRef((props, ref) => {
     ariaLinkMode: ariaLinkMode
   });
 
-  // Update popover visibility on open/close.
+  // Update on open
   React__default.useEffect(() => {
-    if (!popperElement) return;
-    if (popperElement.popover) {
-      try {
-        if (isOpen) popperElement.showPopover();else popperElement.hidePopover();
-      } catch {
-        /* already open/closed */
-      }
-    }
-    if (isOpen) update?.();
+    if (isOpen || popperElement) 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(Wrapper, {
+    }), isMounted && /*#__PURE__*/jsx(Portal, {
       children: /*#__PURE__*/jsxs("div", {
         ref: tooltipRef,
         ...forwardedProps,
-        role: "tooltip",
-        popover: popover,
         id: id,
+        role: "tooltip",
         className: classNames.join(className, block$2({
           [`position-${position}`]: Boolean(position),
-          'is-initializing': !popover && !styles.popper?.transform
-        }), !popover && isHidden && classNames.visuallyHidden()),
+          'is-initializing': !styles.popper?.transform
+        }), isHidden && classNames.visuallyHidden()),
         style: {
           ...(isHidden ? undefined : styles.popper),
-          ...(!popover && {
-            zIndex
-          })
+          zIndex
         },
         ...attributes.popper,
         children: [/*#__PURE__*/jsx("div", {