@ultraviolet/ui 1.46.0 → 1.47.0

package/dist/index.d.ts

@@ -1334,7 +1334,7 @@ type AvatarProps = {
 declare const Avatar: ({ image, size, text, textBgColor, textColor, textSize, lock, className, "data-testid": dataTestId, }: AvatarProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type IconName$1 = ComponentProps<typeof Icon>['name'];
-declare const SIZES: {
+declare const SIZES$1: {
     large: number;
     medium: number;
     small: number;
@@ -1345,7 +1345,7 @@ declare const PROMINENCES$3: {
 };
 type BadgeProps = {
     sentiment?: Color;
-    size?: keyof typeof SIZES;
+    size?: keyof typeof SIZES$1;
     prominence?: keyof typeof PROMINENCES$3;
     /**
      * Defines icon to display on left side of badge. **Only available on medium and large sizes**.
@@ -2261,7 +2261,7 @@ declare const Popover: react.ForwardRefExoticComponent<{
     onKeyDown?: react.KeyboardEventHandler | undefined;
     'aria-haspopup'?: boolean | "menu" | "dialog" | "grid" | "listbox" | "tree" | "false" | "true" | undefined;
     hideOnClickOutside?: boolean | undefined;
-    needDebounce?: boolean | undefined;
+    debounceDelay?: number | undefined;
     maxHeight?: string | number | undefined;
     disableAnimation?: boolean | undefined;
     portalTarget?: HTMLElement | undefined;
@@ -2307,7 +2307,11 @@ type PopupProps = {
     onKeyDown?: KeyboardEventHandler;
     'aria-haspopup'?: HTMLAttributes<HTMLDivElement>['aria-haspopup'];
     hideOnClickOutside?: boolean;
-    needDebounce?: boolean;
+    /**
+     * If you set debounceTime to false, the popup will not debounce the hover event and will be displayed instantly.
+     * If set to 0 it will disable debounce.
+     */
+    debounceDelay?: number;
     /**
      * If you set a max height keep in mind that the animation is disabled, or it will not work properly on some browsers.
      */
@@ -2794,7 +2798,8 @@ declare const Tabs: {
         children: ReactNode;
         onClick?: react.MouseEventHandler<HTMLElement> | undefined;
         borderless?: boolean | undefined;
-        sentiment?: ("neutral" | "danger") | undefined;
+        sentiment?: ("primary" | "neutral" | "danger") | undefined;
+        active?: boolean | undefined;
         'data-testid'?: string | undefined;
     } & react.RefAttributes<HTMLElement> & {
         theme?: _emotion_react.Theme | undefined;
@@ -3201,7 +3206,7 @@ declare const ToggleGroup: {
     Toggle: ({ disabled, name, value, label, helper, className, "data-testid": dataTestId, }: ToggleGroupToggleProps) => _emotion_react_jsx_runtime.JSX.Element;
 };
 
-type TooltipProps = Pick<ComponentProps<typeof Popup>, 'id' | 'children' | 'maxWidth' | 'placement' | 'text' | 'className' | 'visible' | 'innerRef' | 'role' | 'data-testid' | 'containerFullWidth' | 'portalTarget' | 'tabIndex'>;
+type TooltipProps = Pick<ComponentProps<typeof Popup>, 'id' | 'children' | 'maxWidth' | 'placement' | 'text' | 'className' | 'visible' | 'innerRef' | 'role' | 'data-testid' | 'containerFullWidth' | 'portalTarget' | 'tabIndex' | 'debounceDelay'>;
 /**
  * Tooltip component is used to display additional information on hover or focus.
  * It is used to explain the purpose of the element it is attached to.
@@ -3265,6 +3270,11 @@ declare const RadioGroup: {
     Radio: ({ onFocus, onBlur, disabled, error, name, value, label, helper, className, autoFocus, onKeyDown, "data-testid": dataTestId, }: RadioGroupRadioProps) => _emotion_react_jsx_runtime.JSX.Element;
 };
 
+declare const SIZES: {
+    small: string;
+    medium: string;
+    large: string;
+};
 type DisclosureProps = {
     visible: boolean;
 };
@@ -3285,12 +3295,21 @@ type MenuProps = {
     visible?: boolean;
     'data-testid'?: string;
     maxHeight?: string;
+    /**
+     * @deprecated: use `size` instead
+     */
     maxWidth?: string;
     /**
      * By default, the portal target is children container or document.body if children is a function. You can override this
      * behavior by setting a portalTarget prop.
      */
     portalTarget?: HTMLElement;
+    size?: keyof typeof SIZES;
+    /**
+     * The behavior of the menu when it is opened. If set to `click`, the menu will open when the user clicks on the disclosure.
+     * If set to `hover`, the menu will open when the user hovers over the disclosure.
+     */
+    triggerMethod?: 'click' | 'hover';
 };
 /**
  * A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
@@ -3307,9 +3326,14 @@ declare const MenuV2: react.ForwardRefExoticComponent<MenuProps & react.RefAttri
         children: ReactNode;
         onClick?: react.MouseEventHandler<HTMLElement> | undefined;
         borderless?: boolean | undefined;
-        sentiment?: ("neutral" | "danger") | undefined;
+        sentiment?: ("primary" | "neutral" | "danger") | undefined;
+        active?: boolean | undefined;
         'data-testid'?: string | undefined;
     } & react.RefAttributes<HTMLElement>>;
+    Group: ({ label, children }: {
+        label: string;
+        children: ReactNode;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
 };
 
 type GlobalAlertProps = {

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

@@ -0,0 +1,25 @@
+import _styled from '@emotion/styled/base';
+import { Text } from '../Text/index.js';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+
+const Container = /*#__PURE__*/_styled("span", {
+  target: "e7u2rl20"
+})("padding:", ({
+  theme
+}) => `${theme.space['0.5']} ${theme.space['1.5']}`, ";text-align:left;");
+const Group = ({
+  label,
+  children
+}) => jsxs(Fragment, {
+  children: [jsx(Container, {
+    children: jsx(Text, {
+      variant: "captionStrong",
+      as: "span",
+      prominence: "weak",
+      sentiment: "neutral",
+      children: label
+    })
+  }), children]
+});
+
+export { Group };

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

@@ -3,22 +3,28 @@ import { forwardRef } from 'react';
 import { Tooltip } from '../Tooltip/index.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 
+const ANIMATION_DURATION = 200; // in ms
+
 const itemCoreStyle = ({
   theme,
-  borderless,
   sentiment,
   disabled
 }) => `
-  display: inline-block;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  min-height: 32px;
+  max-height: 44px;
   font-size: ${theme.typography.bodySmall.fontSize};
   line-height: ${theme.typography.bodySmall.lineHeight};
   font-weight: inherit;
   padding: ${`${theme.space['0.5']} ${theme.space['1']}`};
   border: none;
-  ${borderless ? '' : `border-bottom: 1px solid ${theme.colors.neutral.border};`}
   cursor: pointer;
   min-width: 110px;
   width: 100%;
+  border-radius: ${theme.radii.default};
+  transition: background-color ${ANIMATION_DURATION}ms, color ${ANIMATION_DURATION}ms;
 
   color: ${theme.colors[sentiment][disabled ? 'textDisabled' : 'text']};
   svg {
@@ -29,13 +35,24 @@ const itemCoreStyle = ({
         cursor: not-allowed;
       ` : `
           &:hover,
-          &:focus {
+          &:focus, &[data-active='true'] {
+            background-color: ${theme.colors[sentiment].backgroundHover};
             color: ${theme.colors[sentiment].textHover};
             svg {
               fill: ${theme.colors[sentiment].textHover};
             }
           }`}
   `;
+const Container = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['borderless'].includes(prop),
+  target: "ei26g5y2"
+})(({
+  theme,
+  borderless
+}) => borderless ? '' : `border-bottom: 1px solid ${theme.colors.neutral.border};`, " padding:", ({
+  theme,
+  borderless
+}) => `${borderless ? theme.space['0.25'] : theme.space['0.5']} ${theme.space['0.5']}`, ";&:last-child{border:none;}");
 const StyledItem = /*#__PURE__*/_styled('button', {
   shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
   target: "ei26g5y1"
@@ -72,14 +89,17 @@ const Item = /*#__PURE__*/forwardRef(({
   href,
   children,
   tooltip,
+  active,
   className,
   'data-testid': dataTestId
 }, ref) => {
   if (href && !disabled) {
-    return jsx("div", {
+    return jsx(Container, {
+      borderless: borderless,
       children: jsx(Tooltip, {
         text: tooltip,
         children: jsx(StyledLinkItem, {
+          "data-active": active,
           borderless: true,
           href: href,
           ref: ref,
@@ -94,7 +114,8 @@ const Item = /*#__PURE__*/forwardRef(({
       })
     });
   }
-  return jsx("div", {
+  return jsx(Container, {
+    borderless: borderless,
     children: jsx(Tooltip, {
       text: tooltip,
       children: jsx(StyledItem, {
@@ -107,6 +128,7 @@ const Item = /*#__PURE__*/forwardRef(({
         sentiment: sentiment,
         className: className,
         "data-testid": dataTestId,
+        "data-active": active,
         children: children
       })
     })

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

@@ -2,10 +2,17 @@ import _styled from '@emotion/styled/base';
 import { forwardRef, useState, useRef, useId, isValidElement, useImperativeHandle, cloneElement } from 'react';
 import { Popup } from '../Popup/index.js';
 import { Stack } from '../Stack/index.js';
+import { Group } from './Group.js';
 import Item from './Item.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 
+const SIZES = {
+  small: '180px',
+  medium: '280px',
+  large: '380px'
+};
 const StyledPopup = /*#__PURE__*/_styled(Popup, {
+  shouldForwardProp: prop => !['size'].includes(prop),
   target: "e1jn11gg1"
 })("background-color:", ({
   theme
@@ -13,10 +20,14 @@ const StyledPopup = /*#__PURE__*/_styled(Popup, {
   theme
 }) => theme.shadows.menu, ";padding:0;&[data-has-arrow='true']{&::after{border-color:", ({
   theme
-}) => theme.colors.neutral.background, " transparent transparent transparent;}}");
+}) => theme.colors.neutral.background, " transparent transparent transparent;}}width:", ({
+  size
+}) => SIZES[size], ";max-width:none;padding:", ({
+  theme
+}) => `${theme.space['0.25']} 0`, ";");
 const MenuList = /*#__PURE__*/_styled(Stack, {
   target: "e1jn11gg0"
-})("&:after,&:before{border:solid transparent;border-width:9px;content:' ';height:0;width:0;position:absolute;pointer-events:none;}&:after{border-color:transparent;}&:before{border-color:transparent;}background-color:", ({
+})("max-height:480px;overflow-y:auto;overflow-x:hidden;&:after,&:before{border:solid transparent;border-width:9px;content:' ';height:0;width:0;position:absolute;pointer-events:none;}&:after{border-color:transparent;}&:before{border-color:transparent;}background-color:", ({
   theme
 }) => theme.colors.neutral.backgroundWeakElevated, ";color:", ({
   theme
@@ -28,14 +39,16 @@ const FwdMenu = /*#__PURE__*/forwardRef(({
   ariaLabel = 'Menu',
   children,
   disclosure,
-  hasArrow = true,
+  hasArrow = false,
   placement = 'bottom',
   visible = false,
   className,
   'data-testid': dataTestId,
   maxHeight,
   maxWidth,
-  portalTarget
+  portalTarget,
+  size = 'small',
+  triggerMethod = 'click'
 }, ref) => {
   const [isVisible, setIsVisible] = useState(visible);
   const popupRef = useRef(null);
@@ -60,11 +73,11 @@ const FwdMenu = /*#__PURE__*/forwardRef(({
     ref: disclosureRef
   });
   return jsx(StyledPopup, {
-    needDebounce: false,
+    debounceDelay: triggerMethod === 'hover' ? 350 : 0,
     hideOnClickOutside: true,
     "aria-label": ariaLabel,
     className: className,
-    visible: isVisible,
+    visible: triggerMethod === 'click' ? isVisible : undefined,
     placement: placement,
     hasArrow: hasArrow,
     "data-has-arrow": hasArrow,
@@ -75,6 +88,7 @@ const FwdMenu = /*#__PURE__*/forwardRef(({
     tabIndex: -1,
     maxHeight: maxHeight,
     maxWidth: maxWidth,
+    size: size,
     text: jsx(MenuList, {
       "data-testid": dataTestId,
       className: className,
@@ -95,7 +109,8 @@ const FwdMenu = /*#__PURE__*/forwardRef(({
  * When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.
  */
 const MenuV2 = /*#__PURE__*/Object.assign(FwdMenu, {
-  Item
+  Item,
+  Group
 });
 
 export { MenuV2 };

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

@@ -116,7 +116,7 @@ const Popover = /*#__PURE__*/forwardRef(({
   }, [onClose]);
   return jsx(StyledPopup, {
     hideOnClickOutside: true,
-    needDebounce: false,
+    debounceDelay: 0,
     visible: localVisible,
     placement: placement,
     text: jsx(ContentWrapper, {

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

@@ -78,7 +78,7 @@ const Popup = /*#__PURE__*/forwardRef(({
   onKeyDown,
   'aria-haspopup': ariaHasPopup,
   hideOnClickOutside = false,
-  needDebounce = true,
+  debounceDelay = DEFAULT_DEBOUNCE_DURATION,
   disableAnimation = false,
   portalTarget
 }, ref) => {
@@ -88,8 +88,8 @@ const Popup = /*#__PURE__*/forwardRef(({
   useImperativeHandle(ref, () => innerPopupRef.current);
   const timer = useRef();
   const popupPortalTarget = useMemo(() => {
+    if (portalTarget) return portalTarget;
     if (role === 'dialog') {
-      if (portalTarget) return portalTarget;
       if (childrenRef.current) return childrenRef.current;
       if (typeof window !== 'undefined') return document.body;
       return null;
@@ -158,14 +158,20 @@ const Popup = /*#__PURE__*/forwardRef(({
         unmountPopupFromDom();
         onClose?.();
       }, animationDuration);
-    }, needDebounce && !disableAnimation ? DEFAULT_DEBOUNCE_DURATION : 0);
-  }, [animationDuration, disableAnimation, needDebounce, onClose, unmountPopupFromDom]);
+    }, debounceDelay && !disableAnimation ? debounceDelay : 0);
+  }, [animationDuration, disableAnimation, debounceDelay, onClose, unmountPopupFromDom]);
 
   /**
    * When mouse hover or stop hovering children this function display or hide popup. A timeout is set to allow animation
    * end, then remove popup from dom.
    */
   const onPointerEvent = useCallback(isVisible => () => {
+    // If there is a debounceDelay and the popup is not visible, we clear the debounce timer
+    if (!visible && debounceDelay > 0 && debounceTimer.current) {
+      clearTimeout(debounceTimer.current);
+      debounceTimer.current = undefined;
+    }
+
     // This condition is for when we want to unmount the popup
     // There is debounce in order to avoid popup to flicker when we move the mouse from children to popup
     // Timer is used to follow the animation duration
@@ -186,9 +192,15 @@ const Popup = /*#__PURE__*/forwardRef(({
         clearTimeout(debounceTimer.current);
         debounceTimer.current = undefined;
       }
-      setVisibleInDom(true);
+      if (debounceDelay > 0) {
+        debounceTimer.current = setTimeout(() => {
+          setVisibleInDom(true);
+        }, debounceDelay);
+      } else {
+        setVisibleInDom(true);
+      }
     }
-  }, [closePopup, innerPopupRef]);
+  }, [closePopup, debounceDelay, visible]);
 
   /**
    * Once popup is visible in the dom we can compute positions, then set it visible on screen and add event to
@@ -338,6 +350,8 @@ const Popup = /*#__PURE__*/forwardRef(({
       "data-testid": dataTestId,
       "data-has-arrow": hasArrow,
       onClick: stopClickPropagation,
+      onPointerEnter: !isControlled ? onPointerEvent(true) : noop,
+      onPointerLeave: !isControlled ? onPointerEvent(false) : noop,
       animationDuration: animationDuration,
       onKeyDown: role === 'dialog' ? handleFocusTrap : undefined,
       isDialog: role === 'dialog',

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

@@ -32,6 +32,7 @@ const Tooltip = /*#__PURE__*/forwardRef(({
   role = 'tooltip',
   'data-testid': dataTestId,
   portalTarget,
+  debounceDelay,
   tabIndex
 }, tooltipRef) => jsx(StyledPopup, {
   id: id,
@@ -47,6 +48,7 @@ const Tooltip = /*#__PURE__*/forwardRef(({
   innerRef: innerRef,
   portalTarget: portalTarget,
   tabIndex: tabIndex,
+  debounceDelay: debounceDelay,
   children: children
 }));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.46.0",
+  "version": "1.47.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -43,9 +43,9 @@
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@types/react": "18.2.74",
+    "@types/react": "18.2.78",
     "@types/react-datepicker": "4.19.6",
-    "@types/react-dom": "18.2.24",
+    "@types/react-dom": "18.2.25",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -65,7 +65,7 @@
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.10.0",
-    "@ultraviolet/icons": "2.12.3"
+    "@ultraviolet/icons": "2.12.4"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",