@ultraviolet/ui 1.27.1 → 1.27.3

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

@@ -403,12 +403,6 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref64, ref) => {
     if (!progress) onChange?.(event);
     setState(current => current === 'indeterminate' ? false : event.target.checked);
   }, [onChange, progress, setState]);
-  const onKeyDown = useCallback(event => {
-    if (event.key.charCodeAt(0) === 32) {
-      event.preventDefault();
-      setState(current => !current);
-    }
-  }, []);
   return jsx(Tooltip, {
     text: tooltip,
     children: jsxs(CheckboxContainer, {
@@ -433,7 +427,6 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref64, ref) => {
         checked: state === 'indeterminate' ? false : state,
         size: size,
         onChange: onLocalChange,
-        onKeyDown: onKeyDown,
         onFocus: onFocus,
         onBlur: onBlur,
         disabled: disabled,

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.1",
+  "version": "1.27.3",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -67,7 +67,7 @@
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.5.0",
-    "@ultraviolet/icons": "2.5.5"
+    "@ultraviolet/icons": "2.6.0"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs"