@lumx/react 3.9.2-alpha.7 → 3.9.2-alpha.9

package/index.js

@@ -6409,6 +6409,11 @@ const FitAnchorWidth = {
  */
 const ARROW_SIZE$1 = 14;
 
+/**
+ * Popover default z-index
+ */
+const POPOVER_ZINDEX = 9999;
+
 /**
  * Popper js modifier to fit popover min width to the anchor width.
  */
@@ -6602,7 +6607,7 @@ const DEFAULT_PROPS$P = {
   placement: Placement.AUTO,
   focusAnchorOnClose: true,
   usePortal: true,
-  zIndex: 9999
+  zIndex: POPOVER_ZINDEX
 };
 
 /** Method to render the popover inside a portal if usePortal is true */
@@ -13909,6 +13914,11 @@ Toolbar.displayName = COMPONENT_NAME$3;
 Toolbar.className = CLASSNAME$3;
 Toolbar.defaultProps = DEFAULT_PROPS$3;
 
+/**
+ * Make sure tooltip appear above popovers.
+ */
+const TOOLTIP_ZINDEX = POPOVER_ZINDEX + 1;
+
 /**
  * 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)
@@ -14092,7 +14102,7 @@ function useTooltipOpen(delay, anchorElement) {
   };
 }
 
-const _excluded$2 = ["label", "children", "className", "delay", "placement", "forceOpen", "closeMode", "ariaLinkMode"];
+const _excluded$2 = ["label", "children", "className", "delay", "placement", "forceOpen", "closeMode", "ariaLinkMode", "zIndex"];
 
 /** Position of the tooltip relative to the anchor element. */
 
@@ -14116,7 +14126,8 @@ const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
 const DEFAULT_PROPS$2 = {
   placement: Placement.BOTTOM,
   closeMode: 'unmount',
-  ariaLinkMode: 'aria-describedby'
+  ariaLinkMode: 'aria-describedby',
+  zIndex: TOOLTIP_ZINDEX
 };
 
 /**
@@ -14141,7 +14152,8 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
       placement,
       forceOpen,
       closeMode,
-      ariaLinkMode
+      ariaLinkMode,
+      zIndex
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$2);
   // Disable in SSR.
@@ -14153,7 +14165,8 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
   const [anchorElement, setAnchorElement] = useState(null);
   const {
     styles,
-    attributes
+    attributes,
+    update
   } = usePopper(anchorElement, popperElement, {
     placement,
     modifiers: [{
@@ -14178,6 +14191,11 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
     label,
     ariaLinkMode: ariaLinkMode
   });
+
+  // Update on open
+  React__default.useEffect(() => {
+    if (isOpen) update === null || update === void 0 ? void 0 : update();
+  }, [isOpen, update]);
   const labelLines = label ? label.split('\n') : [];
   const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TooltipContextProvider, null, wrappedChildren), isMounted && /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement("div", _extends({
@@ -14191,7 +14209,9 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
       position,
       hidden: !isOpen && closeMode === 'hide'
     })),
-    style: styles.popper
+    style: _objectSpread2(_objectSpread2({}, styles.popper), {}, {
+      zIndex
+    })
   }, attributes.popper), /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$2}__arrow`
   }), /*#__PURE__*/React__default.createElement("div", {