@ultraviolet/ui 1.21.0 → 1.21.1

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

@@ -70,12 +70,12 @@ const FwdMenu = /*#__PURE__*/forwardRef((_ref7, ref) => {
 
     // Focus the first item when the menu is opened
     if (!isVisible) {
-      requestIdleCallback(() => {
+      setTimeout(() => {
         // We have to wait for the popup to be inserted in the DOM
         if (popupRef.current?.firstChild?.firstChild instanceof HTMLElement) {
           popupRef.current.firstChild.firstChild.focus();
         }
-      });
+      }, 1);
     }
   };
   const onClose = () => {

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

@@ -267,7 +267,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, ref) => {
     const handleClickOutside = event => {
       const tooltipCurrent = innerTooltipRef.current;
       const childrenCurrent = childrenRef.current;
-      if (tooltipCurrent && hideOnClickOutside) {
+      if (tooltipCurrent && hideOnClickOutside && !event.defaultPrevented) {
         if (event.target && event.target !== tooltipCurrent && event.target !== childrenCurrent && !childrenCurrent?.contains(event.target) && !tooltipCurrent.contains(event.target)) {
           event.preventDefault();
           event.stopPropagation();
@@ -277,11 +277,11 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, ref) => {
     };
     if (visibleInDom) {
       document.body.addEventListener('keyup', handleEscPress);
-      document.body.addEventListener('mousedown', handleClickOutside);
+      document.body.addEventListener('click', handleClickOutside);
     }
     return () => {
       document.body.removeEventListener('keyup', handleEscPress);
-      document.body.removeEventListener('mousedown', handleClickOutside);
+      document.body.removeEventListener('click', handleClickOutside);
     };
   }, [hideTooltip, visibleInDom, innerTooltipRef, childrenRef, hideOnClickOutside]);
 
@@ -322,6 +322,13 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, ref) => {
       children: children
     });
   }
+
+  /**
+   * This event handle allow us to not bubble the event to document.body like this react-select works fine
+   */
+  const stopClickPropagation = event => {
+    event.nativeEvent.stopImmediatePropagation();
+  };
   return jsxs(Fragment, {
     children: [renderChildren(), visibleInDom ? /*#__PURE__*/createPortal(jsx(StyledTooltip, {
       ref: innerTooltipRef,
@@ -333,6 +340,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, ref) => {
       reverseAnimation: reverseAnimation,
       "data-testid": dataTestId,
       "data-has-arrow": hasArrow,
+      onClick: stopClickPropagation,
       children: text
     }), document.body) : null]
   });

package/package.json

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