@lumx/react 3.18.2-alpha.4 → 3.19.0

package/index.js

@@ -7229,26 +7229,28 @@ const useTooltipContext = () => React__default.useContext(TooltipContext);
 
 /**
  * Compute a tooltip label based on a label element `innerText` if the text overflows.
- *
- * Warning: only works on first render, does not update on label element resize.
+ * Updates dynamically on content changes (but not on resize!)
  */
-const useOverflowTooltipLabel = () => {
+const useOverflowTooltipLabel = content => {
   const parentTooltip = useTooltipContext();
   const [tooltipLabel, setTooltipLabel] = React__default.useState(undefined);
-  const labelRef = React__default.useCallback(labelElement => {
-    if (!labelElement || !!parentTooltip) {
-      // Skip if label element is unknown
-      // Skip if the parent has a tooltip
-      return;
-    }
-
-    // Label overflowing
-    if (labelElement.offsetWidth < labelElement.scrollWidth) {
+  const [labelElement, setLabelElement] = React__default.useState(null);
+  React__default.useLayoutEffect(() => {
+    if (
+    // Not inside a tooltip
+    !parentTooltip && labelElement &&
+    // Not inside a visually hidden
+    !(labelElement !== null && labelElement !== void 0 && labelElement.closest(`.${VISUALLY_HIDDEN}`)) &&
+    // Text overflows
+    labelElement.offsetWidth < labelElement.scrollWidth) {
+      // Set tooltip label
       setTooltipLabel(labelElement.innerText);
+    } else {
+      setTooltipLabel(undefined);
     }
-  }, [parentTooltip]);
+  }, [labelElement, parentTooltip, content]);
   return {
-    labelRef,
+    labelRef: setLabelElement,
     tooltipLabel
   };
 };
@@ -7329,7 +7331,7 @@ const Text = forwardRef((props, ref) => {
   const {
     tooltipLabel,
     labelRef
-  } = useOverflowTooltipLabel();
+  } = useOverflowTooltipLabel(children);
   return /*#__PURE__*/React__default.createElement(Component, _extends({
     ref: useMergeRefs(ref, labelRef),
     className: classNames(className, handleBasicClasses({
@@ -9371,7 +9373,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
   const {
     tooltipLabel,
     labelRef
-  } = useOverflowTooltipLabel();
+  } = useOverflowTooltipLabel(label);
   const buttonProps = Element === 'button' ? {
     type: 'button'
   } : {};