@ultraviolet/ui 1.21.0 → 1.22.0

package/dist/index.d.ts

@@ -1153,12 +1153,14 @@ type BannerProps = {
     linkText?: string;
     linkHref?: string;
     image?: ReactNode;
+    closable?: boolean;
     className?: string;
+    ['data-testid']?: string;
 };
 /**
  * Banner component is used to display an informative message to the user with style.
  */
-declare const Banner: ({ variant, size, title, children, direction, onClose, buttonText, onClickButton, linkText, linkHref, image, className, }: BannerProps) => _emotion_react_jsx_runtime.JSX.Element | null;
+declare const Banner: ({ variant, size, title, children, direction, onClose, buttonText, onClickButton, linkText, linkHref, image, className, closable, "data-testid": dataTestId, }: BannerProps) => _emotion_react_jsx_runtime.JSX.Element | null;
 
 type BarChartToolTipProps = {
     color: string;
@@ -2842,11 +2844,14 @@ type DisclosureProps = {
 type DisclosureElement = ((disclosure: DisclosureProps) => ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>) | (ReactElement<ButtonHTMLAttributes<HTMLButtonElement>> & {
     ref?: Ref<HTMLButtonElement>;
 });
+type ChildMenuProps = {
+    toggle: () => void;
+};
 type MenuProps = {
     id?: string;
     ariaLabel?: string;
     placement?: ComponentProps<typeof Popup>['placement'];
-    children?: ReactNode;
+    children?: ReactNode | (({ toggle }: ChildMenuProps) => ReactNode);
     className?: string;
     disclosure: DisclosureElement;
     hasArrow?: boolean;

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

@@ -40,7 +40,7 @@ const styles = _ref => {
   return null;
 };
 const Container = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['variant', 'size'].includes(prop),
+  shouldForwardProp: prop => !['variant', 'size', 'padding'].includes(prop),
   target: "e1kdwp5x1"
 })("padding:", _ref2 => {
   let {
@@ -100,7 +100,9 @@ const Banner = _ref8 => {
     linkText,
     linkHref,
     image,
-    className
+    className,
+    closable = true,
+    'data-testid': dataTestId
   } = _ref8;
   const {
     theme
@@ -112,6 +114,7 @@ const Banner = _ref8 => {
     variant: variant,
     size: size,
     className: className,
+    "data-testid": dataTestId,
     children: [jsx(ImageStack, {
       size: size,
       justifyContent: "center",
@@ -165,7 +168,7 @@ const Banner = _ref8 => {
           children: linkText
         }) : null]
       })]
-    }), jsx(Button, {
+    }), closable ? jsx(Button, {
       icon: "close",
       size: "small",
       name: "close",
@@ -175,7 +178,7 @@ const Banner = _ref8 => {
         setOpened(false);
         onClose?.();
       }
-    })]
+    }) : null]
   });
 };
 

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 = () => {
@@ -109,7 +109,9 @@ const FwdMenu = /*#__PURE__*/forwardRef((_ref7, ref) => {
       "data-testid": dataTestId,
       className: className,
       role: "menu",
-      children: children
+      children: typeof children === 'function' ? children({
+        toggle: toggleVisible
+      }) : children
     }),
     children: finalDisclosure
   });

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

@@ -13,7 +13,7 @@ const SIZES_WIDTH = {
 };
 const StyledPopup = /*#__PURE__*/_styled(Popup, {
   shouldForwardProp: prop => !['sentiment', 'size'].includes(prop),
-  target: "ejpxv5a0"
+  target: "ejpxv5a1"
 })("padding:", _ref => {
   let {
     theme
@@ -55,18 +55,28 @@ const StyledPopup = /*#__PURE__*/_styled(Popup, {
       }
       `;
 }, ";");
-const ContentWrapper = _ref5 => {
+
+// This is to avoid having text inherit color from popup (which is white on white background)
+const StyledStack = /*#__PURE__*/_styled(Stack, {
+  target: "ejpxv5a0"
+})("color:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral.text;
+}, ";");
+const ContentWrapper = _ref6 => {
   let {
     title,
     onClose,
     children,
     sentiment
-  } = _ref5;
+  } = _ref6;
   const buttonRef = useRef(null);
   useEffect(() => {
     buttonRef.current?.focus();
   }, []);
-  return jsxs(Stack, {
+  return jsxs(StyledStack, {
     gap: 1,
     children: [jsxs(Stack, {
       direction: "row",
@@ -99,7 +109,7 @@ const ContentWrapper = _ref5 => {
  * Popover component is used to display additional information or actions on top of the main content of the page.
  * It is usually triggered by clicking on a button. It includes a title, a close button and a content area.
  */
-const Popover = /*#__PURE__*/forwardRef((_ref6, ref) => {
+const Popover = /*#__PURE__*/forwardRef((_ref7, ref) => {
   let {
     visible = false,
     children,
@@ -111,7 +121,7 @@ const Popover = /*#__PURE__*/forwardRef((_ref6, ref) => {
     onClose,
     className,
     'data-testid': dataTestId
-  } = _ref6;
+  } = _ref7;
   const innerRef = useRef(null);
   const [localVisible, setLocalVisible] = useState(visible);
 

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/dist/src/components/TagInput/index.js

@@ -99,26 +99,31 @@ const TagInputContainer = /*#__PURE__*/_styled('div', {
 }, ";");
 const StyledInput = /*#__PURE__*/_styled("input", {
   target: "ea7vc6o0"
-})("font-size:16px;color:", _ref6 => {
+})("display:flex;flex:1;font-size:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.typography.body.fontSize;
+}, ";color:", _ref7 => {
   let {
     theme: {
       colors
     }
-  } = _ref6;
+  } = _ref7;
   return colors.neutral.text;
-}, ";border:none;outline:none;background-color:", _ref7 => {
+}, ";border:none;outline:none;background-color:", _ref8 => {
   let {
     theme: {
       colors
     }
-  } = _ref7;
+  } = _ref8;
   return colors.neutral.background;
-}, ";&::placeholder{color:", _ref8 => {
+}, ";&::placeholder{color:", _ref9 => {
   let {
     theme: {
       colors
     }
-  } = _ref8;
+  } = _ref9;
   return colors.neutral.textWeak;
 }, ";}");
 const convertTagArrayToTagStateArray = tags => (tags || [])?.map((tag, index) => typeof tag === 'object' ? {
@@ -132,7 +137,7 @@ const convertTagArrayToTagStateArray = tags => (tags || [])?.map((tag, index) =>
  * TagInput is a component that allows users to input tags.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-const TagInput = _ref9 => {
+const TagInput = _ref10 => {
   let {
     disabled = false,
     id,
@@ -145,7 +150,7 @@ const TagInput = _ref9 => {
     variant = 'base',
     className,
     'data-testid': dataTestId
-  } = _ref9;
+  } = _ref10;
   const [tagInputState, setTagInput] = useState(convertTagArrayToTagStateArray(tags ?? []));
   const [input, setInput] = useState('');
   const [status, setStatus] = useState({});
@@ -189,10 +194,10 @@ const TagInput = _ref9 => {
     setStatus({
       [tagIndex]: STATUS.LOADING
     });
-    const findIndex = tagInputState.findIndex(_ref10 => {
+    const findIndex = tagInputState.findIndex(_ref11 => {
       let {
         index
-      } = _ref10;
+      } = _ref11;
       return index === tagIndex;
     });
     const newTagInput = [...tagInputState];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "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.3.0",
-    "@ultraviolet/icons": "2.4.2"
+    "@ultraviolet/icons": "2.5.0"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs"