@ultraviolet/ui 1.27.0 → 1.27.2

package/dist/index.d.ts

@@ -1821,7 +1821,7 @@ type NumberInputProps = {
      */
     text?: string;
     defaultValue?: number;
-    value?: number;
+    value?: number | null;
     disabledTooltip?: string;
     className?: string;
     'data-testid'?: string;

package/dist/src/components/NumberInput/index.js

@@ -181,7 +181,7 @@ const NumberInput = _ref21 => {
     }
     return defaultValue;
   });
-  const currentValue = value !== undefined ? value : inputValue;
+  const currentValue = value !== undefined && value !== null ? value : inputValue;
   const setValue = function (newValue,
   /**
    * If true, will check if newValue is between minValue and maxValue and set it to minValue or maxValue if it's not.
@@ -190,20 +190,17 @@ const NumberInput = _ref21 => {
     if (hasMinMaxVerification === void 0) {
       hasMinMaxVerification = true;
     }
-    if (value === undefined) {
-      if (hasMinMaxVerification) {
-        if (newValue !== undefined && newValue < minValue) {
-          setInputValue(minValue);
-          return;
-        }
-        if (newValue !== undefined && maxValue !== undefined && newValue > maxValue) {
-          setInputValue(maxValue);
-          return;
-        }
+    let nextValue = newValue;
+    if (value === undefined && hasMinMaxVerification) {
+      if (newValue !== undefined && newValue < minValue) {
+        nextValue = minValue;
+      }
+      if (newValue !== undefined && maxValue !== undefined && newValue > maxValue) {
+        nextValue = maxValue;
       }
-      setInputValue(newValue);
     }
-    onChange?.(newValue);
+    setInputValue(nextValue);
+    onChange?.(nextValue);
   };
   const offsetFn = direction => () => {
     const localValue = currentValue ?? 0;

package/dist/src/components/Text/index.js

@@ -1,6 +1,7 @@
 import _styled from '@emotion/styled/base';
-import { useState, useRef, useEffect } from 'react';
+import { useRef } from 'react';
 import recursivelyGetChildrenString from '../../helpers/recursivelyGetChildrenString.js';
+import { useIsOverflowing } from '../../hooks/useIsOverflowing.js';
 import capitalize from '../../utils/capitalize.js';
 import { Tooltip } from '../Tooltip/index.js';
 import { jsx } from '@emotion/react/jsx-runtime';
@@ -79,20 +80,11 @@ const Text = _ref2 => {
     'data-testid': dataTestId
   } = _ref2;
   const computedSentiment = sentiment ?? color;
-  const [isTruncated, setIsTruncated] = useState(false);
   const elementRef = useRef(null);
+  const isOverflowing = useIsOverflowing(elementRef);
   const finalStringChildren = recursivelyGetChildrenString(children);
-  useEffect(() => {
-    if (oneLine && elementRef?.current) {
-      const {
-        offsetWidth,
-        scrollWidth
-      } = elementRef.current;
-      setIsTruncated(offsetWidth < scrollWidth);
-    }
-  }, [oneLine]);
   return jsx(Tooltip, {
-    text: oneLine && isTruncated ? finalStringChildren : '',
+    text: oneLine && isOverflowing ? finalStringChildren : '',
     children: jsx(StyledText, {
       ref: elementRef,
       as: as,

package/dist/src/hooks/useIsOverflowing.js

@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * This hook checks if the element has overflow based on the offsetWidth and scrollWidth of the element.
+ */
+const useIsOverflowing = (ref, callback) => {
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  useEffect(() => {
+    const handleResize = () => {
+      if (!ref.current) {
+        return;
+      }
+      const element = ref.current;
+      const hasOverflow = element.clientWidth < element.scrollWidth;
+      setIsOverflowing(hasOverflow);
+      if (callback) callback(hasOverflow);
+    };
+
+    // This will add the function into the browser event queue after the DOM is painted
+    // which is needed to get the correct offsetWidth and scrollWidth
+    setTimeout(() => handleResize(), 0);
+
+    // Listen for resize events
+    window.addEventListener('resize', handleResize);
+
+    // Cleanup the event listener
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [ref, callback]);
+  return isOverflowing;
+};
+
+export { useIsOverflowing };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.27.0",
+  "version": "1.27.2",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {