@lumx/react 3.18.2-alpha.4 → 3.19.0

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.18.2-alpha.4",
-        "@lumx/icons": "^3.18.2-alpha.4",
+        "@lumx/core": "^3.19.0",
+        "@lumx/icons": "^3.19.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -105,5 +105,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.18.2-alpha.4"
+    "version": "3.19.0"
 }

package/src/components/navigation/NavigationItem.tsx

@@ -42,7 +42,7 @@ export const NavigationItem = Object.assign(
     forwardRefPolymorphic(<E extends ElementType = 'a'>(props: NavigationItemProps<E>, ref: ComponentRef<E>) => {
         const { className, icon, label, isCurrentPage, as: Element = 'a', ...forwardedProps } = props;
         const theme = useTheme();
-        const { tooltipLabel, labelRef } = useOverflowTooltipLabel();
+        const { tooltipLabel, labelRef } = useOverflowTooltipLabel(label);
 
         const buttonProps = Element === 'button' ? { type: 'button' } : {};
 

package/src/components/text/Text.stories.tsx

@@ -6,7 +6,7 @@ import { textElementArgType } from '@lumx/react/stories/controls/element';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
 import { loremIpsum } from '@lumx/react/stories/utils/lorem';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { ColorPalette, ColorVariant, Icon, WhiteSpace } from '@lumx/react';
+import { Button, ColorPalette, ColorVariant, Icon, WhiteSpace } from '@lumx/react';
 import { mdiEarth, mdiHeart } from '@lumx/icons';
 import { withResizableBox } from '@lumx/react/stories/decorators/withResizableBox';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
@@ -107,6 +107,28 @@ export const Truncate = {
     },
 };
 
+/**
+ * Test the update of the `title` attribute when text overflows
+ */
+export const TestUpdateTruncateTitleLabel = {
+    render(args: any) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [content, setContent] = React.useState<string>('Some text');
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const lengthen = React.useCallback(() => setContent((prevContent) => `${prevContent} ${prevContent}`), []);
+        return (
+            <>
+                <Button onClick={lengthen}>Lengthen text</Button>
+                <Text as="p" truncate style={{ maxWidth: 300 }} {...args}>
+                    {content}
+                </Text>
+            </>
+        );
+    },
+    // Disables Chromatic snapshot (not relevant for this story).
+    parameters: { chromatic: { disable: true } },
+};
+
 /**
  * Long text with multi line truncate ellipsis
  */

package/src/components/text/Text.tsx

@@ -112,7 +112,7 @@ export const Text = forwardRef<TextProps>((props, ref) => {
         !(isTruncated && !isTruncatedMultiline) &&
         whiteSpace && { '--lumx-text-white-space': whiteSpace };
 
-    const { tooltipLabel, labelRef } = useOverflowTooltipLabel();
+    const { tooltipLabel, labelRef } = useOverflowTooltipLabel(children);
 
     return (
         <Component

package/src/hooks/useOverflowTooltipLabel.tsx

@@ -1,29 +1,32 @@
 import React from 'react';
 import { useTooltipContext } from '@lumx/react/components/tooltip/context';
+import { VISUALLY_HIDDEN } from '@lumx/react/constants';
 
 /**
  * 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!)
  */
-export const useOverflowTooltipLabel = () => {
+export const useOverflowTooltipLabel = (content: React.ReactNode) => {
     const parentTooltip = useTooltipContext();
     const [tooltipLabel, setTooltipLabel] = React.useState<string | undefined>(undefined);
-    const labelRef = React.useCallback(
-        (labelElement: HTMLElement | null) => {
-            if (!labelElement || !!parentTooltip) {
-                // Skip if label element is unknown
-                // Skip if the parent has a tooltip
-                return;
-            }
+    const [labelElement, setLabelElement] = React.useState<HTMLElement | null>(null);
 
-            // Label overflowing
-            if (labelElement.offsetWidth < labelElement.scrollWidth) {
-                setTooltipLabel(labelElement.innerText);
-            }
-        },
-        [parentTooltip],
-    );
+    React.useLayoutEffect(() => {
+        if (
+            // Not inside a tooltip
+            !parentTooltip &&
+            labelElement &&
+            // Not inside a visually hidden
+            !labelElement?.closest(`.${VISUALLY_HIDDEN}`) &&
+            // Text overflows
+            labelElement.offsetWidth < labelElement.scrollWidth
+        ) {
+            // Set tooltip label
+            setTooltipLabel(labelElement.innerText);
+        } else {
+            setTooltipLabel(undefined);
+        }
+    }, [labelElement, parentTooltip, content]);
 
-    return { labelRef, tooltipLabel };
+    return { labelRef: setLabelElement, tooltipLabel };
 };