@ultraviolet/ui 1.22.0 → 1.24.0

package/dist/index.d.ts

@@ -1953,6 +1953,8 @@ declare const Popover: react.ForwardRefExoticComponent<{
     onClose?: (() => void) | undefined;
     className?: string | undefined;
     'data-testid'?: string | undefined;
+    maxWidth?: string | undefined;
+    maxHeight?: string | undefined;
 } & Pick<{
     id?: string | undefined;
     children: ReactNode | ((renderProps: {
@@ -1963,7 +1965,7 @@ declare const Popover: react.ForwardRefExoticComponent<{
         onPointerLeave: () => void;
         ref: react.RefObject<HTMLDivElement>;
     }) => ReactNode);
-    maxWidth?: number | undefined;
+    maxWidth?: string | number | undefined;
     placement?: PopupPlacement | undefined;
     text?: ReactNode;
     className?: string | undefined;
@@ -1979,6 +1981,8 @@ declare const Popover: react.ForwardRefExoticComponent<{
     'aria-haspopup'?: boolean | "menu" | "dialog" | "grid" | "listbox" | "tree" | "false" | "true" | undefined;
     hideOnClickOutside?: boolean | undefined;
     needDebounce?: boolean | undefined;
+    maxHeight?: string | number | undefined;
+    disableAnimation?: boolean | undefined;
 } & react.RefAttributes<HTMLDivElement>, "placement"> & react.RefAttributes<HTMLDivElement>>;
 
 type PopupProps = {
@@ -1994,7 +1998,7 @@ type PopupProps = {
         onPointerLeave: () => void;
         ref: RefObject<HTMLDivElement>;
     }) => ReactNode);
-    maxWidth?: number;
+    maxWidth?: number | string;
     /**
      * `auto` placement will change the position of the tooltip if it doesn't fit in the viewport.
      */
@@ -2022,6 +2026,14 @@ type PopupProps = {
     'aria-haspopup'?: HTMLAttributes<HTMLDivElement>['aria-haspopup'];
     hideOnClickOutside?: boolean;
     needDebounce?: boolean;
+    /**
+     * If you set a max height keep in mind that the animation is disabled, or it will not work properly on some browsers.
+     */
+    maxHeight?: string | number;
+    /**
+     * Will remove the animation on the popup if set to false.
+     */
+    disableAnimation?: boolean;
 };
 /**
  * @experimental This component is experimental and may be subject to breaking changes in the future.
@@ -2332,12 +2344,14 @@ type StepperProps = {
     selected?: number;
     children: ReactNode[];
     className?: string;
+    labelPosition?: 'bottom' | 'right';
+    size?: 'small' | 'medium';
     'data-testid'?: string;
 };
 /**
  * Stepper component to show the progress of a process in a linear way.
  */
-declare const Stepper: ({ children, selected, animated, className, "data-testid": dataTestId, }: StepperProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Stepper: ({ children, selected, animated, className, labelPosition, size, "data-testid": dataTestId, }: StepperProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SwitchButtonProps = {
     name: string;
@@ -2857,6 +2871,8 @@ type MenuProps = {
     hasArrow?: boolean;
     visible?: boolean;
     'data-testid'?: string;
+    maxHeight?: string;
+    maxWidth?: string;
 };
 /**
  * A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.

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

@@ -51,7 +51,9 @@ const FwdMenu = /*#__PURE__*/forwardRef((_ref7, ref) => {
     placement = 'bottom',
     visible = false,
     className,
-    'data-testid': dataTestId
+    'data-testid': dataTestId,
+    maxHeight,
+    maxWidth
   } = _ref7;
   const [isVisible, setIsVisible] = useState(visible);
   const popupRef = useRef(null);
@@ -105,6 +107,8 @@ const FwdMenu = /*#__PURE__*/forwardRef((_ref7, ref) => {
     ref: popupRef,
     onClose: onClose,
     tabIndex: -1,
+    maxHeight: maxHeight,
+    maxWidth: maxWidth,
     text: jsx(MenuList, {
       "data-testid": dataTestId,
       className: className,

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

@@ -120,6 +120,8 @@ const Popover = /*#__PURE__*/forwardRef((_ref7, ref) => {
     size = 'medium',
     onClose,
     className,
+    maxWidth,
+    maxHeight,
     'data-testid': dataTestId
   } = _ref7;
   const innerRef = useRef(null);
@@ -165,6 +167,8 @@ const Popover = /*#__PURE__*/forwardRef((_ref7, ref) => {
     innerRef: innerRef,
     onClose: localOnClose,
     onKeyDown: onKeyDownSpace,
+    maxWidth: maxWidth,
+    maxHeight: maxHeight,
     children: children
   });
 });

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

@@ -6,8 +6,8 @@ import { DEFAULT_POSITIONS, computePositions, ARROW_WIDTH } from './helpers.js';
 import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const ANIMATION_DURATION = 230; // in ms
-const DEBOUNCE_DURATION = 200;
+const DEFAULT_ANIMATION_DURATION = 230; // in ms
+const DEFAULT_DEBOUNCE_DURATION = 200;
 function noop() {}
 const animation = positions => keyframes`
   0% {
@@ -30,7 +30,7 @@ const exitAnimation = positions => keyframes`
   }
 `;
 const StyledTooltip = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['maxWidth', 'positions', 'reverseAnimation'].includes(prop),
+  shouldForwardProp: prop => !['maxWidth', 'positions', 'reverseAnimation', 'maxHeight', 'animationDuration'].includes(prop),
   target: "e4h1g861"
 })("background:", _ref => {
   let {
@@ -56,42 +56,54 @@ const StyledTooltip = /*#__PURE__*/_styled('div', {
   let {
     maxWidth
   } = _ref5;
-  return maxWidth;
-}, "px;overflow-wrap:break-word;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;transform:", _ref6 => {
+  return typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
+}, ";max-height:", _ref6 => {
   let {
-    positions
+    maxHeight
   } = _ref6;
-  return positions.tooltipPosition;
-}, ";animation:", _ref7 => {
+  return typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
+}, ";overflow:", _ref7 => {
   let {
-    positions,
-    reverseAnimation
+    maxHeight
   } = _ref7;
-  return /*#__PURE__*/css(ANIMATION_DURATION, "ms ", !reverseAnimation ? animation(positions) : exitAnimation(positions), " forwards;");
-}, ";&[data-has-arrow='true']{&::after{content:' ';position:absolute;top:", _ref8 => {
+  return maxHeight ? 'auto' : undefined;
+}, ";overflow-wrap:break-word;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;transform:", _ref8 => {
   let {
     positions
   } = _ref8;
+  return positions.tooltipPosition;
+}, ";animation:", _ref9 => {
+  let {
+    positions,
+    reverseAnimation,
+    maxHeight,
+    animationDuration
+  } = _ref9;
+  return maxHeight || animationDuration === 0 || animationDuration === undefined ? undefined : /*#__PURE__*/css(animationDuration, "ms ", !reverseAnimation ? animation(positions) : exitAnimation(positions), " forwards;");
+}, ";&[data-has-arrow='true']{&::after{content:' ';position:absolute;top:", _ref10 => {
+  let {
+    positions
+  } = _ref10;
   return positions.arrowTop;
-}, "px;left:", _ref9 => {
+}, "px;left:", _ref11 => {
   let {
     positions
-  } = _ref9;
+  } = _ref11;
   return positions.arrowLeft;
-}, "px;transform:", _ref10 => {
+}, "px;transform:", _ref12 => {
   let {
     positions
-  } = _ref10;
+  } = _ref12;
   return positions.arrowTransform;
-}, " rotate(", _ref11 => {
+}, " rotate(", _ref13 => {
   let {
     positions
-  } = _ref11;
+  } = _ref13;
   return positions.rotate;
-}, "deg);margin-left:-", ARROW_WIDTH, "px;border-width:", ARROW_WIDTH, "px;border-style:solid;border-color:", _ref12 => {
+}, "deg);margin-left:-", ARROW_WIDTH, "px;border-width:", ARROW_WIDTH, "px;border-style:solid;border-color:", _ref14 => {
   let {
     theme
-  } = _ref12;
+  } = _ref14;
   return theme.colors.neutral.backgroundStronger;
 }, " transparent transparent transparent;pointer-events:none;}}");
 const StyledChildrenContainer = /*#__PURE__*/_styled("div", {
@@ -107,7 +119,7 @@ const StyledChildrenContainer = /*#__PURE__*/_styled("div", {
 /**
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-const Popup = /*#__PURE__*/forwardRef((_ref13, ref) => {
+const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
   let {
     children,
     text = '',
@@ -116,6 +128,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, ref) => {
     className,
     containerFullWidth,
     maxWidth = 232,
+    maxHeight,
     visible,
     innerRef,
     role = 'tooltip',
@@ -126,14 +139,18 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, ref) => {
     onKeyDown,
     'aria-haspopup': ariaHasPopup,
     hideOnClickOutside = false,
-    needDebounce = true
-  } = _ref13;
+    needDebounce = true,
+    disableAnimation = false
+  } = _ref15;
   const childrenRef = useRef(null);
   useImperativeHandle(innerRef, () => childrenRef.current);
   const innerTooltipRef = useRef(null);
   useImperativeHandle(ref, () => innerTooltipRef.current);
   const timer = useRef();
 
+  // There are some issue when mixing animation and maxHeight on some browsers, so we disable animation if maxHeight is set.
+  const animationDuration = disableAnimation || maxHeight ? 0 : DEFAULT_ANIMATION_DURATION;
+
   // Debounce timer will be used to prevent the tooltip from flickering when the user moves the mouse out and in the children element.
   const debounceTimer = useRef();
   const [visibleInDom, setVisibleInDom] = useState(false);
@@ -184,9 +201,9 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, ref) => {
       timer.current = setTimeout(() => {
         unmountTooltip();
         onClose?.();
-      }, ANIMATION_DURATION);
-    }, needDebounce ? DEBOUNCE_DURATION : 0);
-  }, [needDebounce, onClose, unmountTooltip]);
+      }, animationDuration);
+    }, needDebounce && !disableAnimation ? DEFAULT_DEBOUNCE_DURATION : 0);
+  }, [animationDuration, disableAnimation, needDebounce, onClose, unmountTooltip]);
 
   /**
    * When mouse hover or stop hovering children this function display or hide tooltip. A timeout is set to allow animation
@@ -334,6 +351,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, ref) => {
       ref: innerTooltipRef,
       positions: positions,
       maxWidth: maxWidth,
+      maxHeight: maxHeight,
       role: role,
       id: generatedId,
       className: className,
@@ -341,6 +359,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, ref) => {
       "data-testid": dataTestId,
       "data-has-arrow": hasArrow,
       onClick: stopClickPropagation,
+      animationDuration: animationDuration,
       children: text
     }), document.body) : null]
   });

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

@@ -7,6 +7,10 @@ import { Text } from '../Text/index.js';
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const LINE_HEIGHT_SIZES = {
+  small: 2,
+  medium: 4
+};
 const loadingAnimation = keyframes`
   from {
     width: 0;
@@ -16,7 +20,7 @@ const loadingAnimation = keyframes`
   }
 `;
 const StyledStepContainer = /*#__PURE__*/_styled("div", {
-  target: "e19ft7rb3"
+  target: "e19ft7rb4"
 })(process.env.NODE_ENV === "production" ? {
   name: "b8wmnj",
   styles: "display:flex;flex-direction:column;align-items:center;justify-content:flex-start"
@@ -26,99 +30,128 @@ const StyledStepContainer = /*#__PURE__*/_styled("div", {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const StyledText = /*#__PURE__*/_styled(Text, {
-  target: "e19ft7rb2"
+  target: "e19ft7rb3"
 })("margin-top:", _ref => {
   let {
     theme
   } = _ref;
   return theme.space['1'];
 }, ";");
+const StyledBullet = /*#__PURE__*/_styled(Bullet, {
+  target: "e19ft7rb2"
+})("margin-top:", _ref2 => {
+  let {
+    theme,
+    size
+  } = _ref2;
+  return size === 'small' ? theme.space['0.5'] : 0;
+}, ";");
 const loadingStyle = /*#__PURE__*/css("animation:", loadingAnimation, " 1s linear infinite;");
 const StyledLine = /*#__PURE__*/_styled("div", {
   target: "e19ft7rb1"
-})("border-radius:", _ref2 => {
+})("border-radius:", _ref3 => {
   let {
     theme
-  } = _ref2;
+  } = _ref3;
   return theme.radii.default;
-}, ";flex-grow:1;border-radius:", _ref3 => {
+}, ";flex-grow:1;border-radius:", _ref4 => {
   let {
     theme
-  } = _ref3;
+  } = _ref4;
   return theme.radii.default;
-}, ";background-color:", _ref4 => {
+}, ";background-color:", _ref5 => {
   let {
     theme
-  } = _ref4;
+  } = _ref5;
   return theme.colors.neutral.backgroundStrong;
-}, ";position:relative;::after{content:'';position:absolute;left:0;top:0;height:100%;border-radius:", _ref5 => {
+}, ";position:relative;::after{content:'';position:absolute;left:0;top:0;height:100%;border-radius:", _ref6 => {
   let {
     theme
-  } = _ref5;
+  } = _ref6;
   return theme.radii.default;
-}, ";background-color:", _ref6 => {
+}, ";background-color:", _ref7 => {
   let {
     theme
-  } = _ref6;
+  } = _ref7;
   return theme.colors.primary.backgroundStrong;
-}, ";", _ref7 => {
+}, ";", _ref8 => {
   let {
     temporal
-  } = _ref7;
+  } = _ref8;
   return temporal === 'previous' && `width: 100%;`;
-}, " ", _ref8 => {
+}, " ", _ref9 => {
   let {
     temporal,
     animated
-  } = _ref8;
+  } = _ref9;
   return temporal === 'current' && animated && loadingStyle;
 }, ";}");
 const StyledContainer = /*#__PURE__*/_styled("div", {
   target: "e19ft7rb0"
-})("display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:0 ", _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.space['1'];
-}, ";", StyledStepContainer, "{width:", _ref10 => {
+})("display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:0 ", _ref10 => {
   let {
     theme
   } = _ref10;
-  return theme.space['4'];
-}, ";white-space:nowrap;}", StyledLine, "{height:", _ref11 => {
+  return theme.space['1'];
+}, ";gap:", _ref11 => {
   let {
-    theme
+    theme,
+    labelPosition,
+    size
   } = _ref11;
-  return theme.space['0.5'];
-}, ";margin-top:", _ref12 => {
+  return size === 'medium' && labelPosition === 'bottom' ? theme.space['0'] : theme.space['1'];
+}, ";", StyledStepContainer, "{display:flex;flex-direction:", _ref12 => {
   let {
-    theme
+    labelPosition
   } = _ref12;
+  return labelPosition === 'bottom' ? 'column' : 'row';
+}, ";align-items:", _ref13 => {
+  let {
+    labelPosition
+  } = _ref13;
+  return labelPosition === 'bottom' ? 'center' : 'baseline';
+}, ";gap:", _ref14 => {
+  let {
+    theme,
+    labelPosition
+  } = _ref14;
+  return labelPosition === 'bottom' ? theme.space['0.5'] : theme.space['1'];
+}, ";white-space:nowrap;}", StyledLine, "{height:", _ref15 => {
+  let {
+    size
+  } = _ref15;
+  return LINE_HEIGHT_SIZES[size];
+}, "px;margin-top:", _ref16 => {
+  let {
+    theme
+  } = _ref16;
   return theme.space['2'];
-}, ";margin-bottom:", _ref13 => {
+}, ";margin-bottom:", _ref17 => {
   let {
     theme
-  } = _ref13;
+  } = _ref17;
   return theme.space['2'];
 }, ";}");
-const StepperNumbers = _ref14 => {
+const StepperNumbers = _ref18 => {
   let {
     temporal,
     children,
-    CurrentStep
-  } = _ref14;
+    CurrentStep,
+    size = 'medium'
+  } = _ref18;
   return jsxs(StyledStepContainer, {
-    children: [jsx(Bullet, {
+    children: [jsx(StyledBullet, {
       sentiment: temporal === 'next' ? 'neutral' : 'primary',
       ...(temporal === 'previous' ? {
         icon: 'check'
       } : {
         text: CurrentStep.toString()
       }),
-      prominence: temporal !== 'current' ? 'default' : 'strong'
+      prominence: temporal !== 'current' ? 'default' : 'strong',
+      size: size
     }), jsx(StyledText, {
       as: "span",
-      variant: "bodySmall",
+      variant: size === 'medium' ? 'body' : 'bodySmall',
       prominence: temporal === 'next' ? 'weak' : 'default',
       children: children
     })]
@@ -127,18 +160,22 @@ const StepperNumbers = _ref14 => {
 /**
  * Stepper component to show the progress of a process in a linear way.
  */
-const Stepper = _ref15 => {
+const Stepper = _ref19 => {
   let {
     children,
     selected = 0,
     animated = false,
     className,
+    labelPosition = 'bottom',
+    size = 'medium',
     'data-testid': dataTestId
-  } = _ref15;
+  } = _ref19;
   const lastStep = Children.count(children) - 1;
   return jsx(StyledContainer, {
     className: className,
     "data-testid": dataTestId,
+    labelPosition: labelPosition,
+    size: size,
     children: flattenChildren(children).map((child, index) => {
       const getTemporal = () => {
         if (selected > index) return 'previous';
@@ -153,6 +190,7 @@ const Stepper = _ref15 => {
           children: [jsx(StepperNumbers, {
             CurrentStep: index + 1,
             temporal: temporal,
+            size: size,
             children: child
           }), isNotLast ? jsx(StyledLine, {
             temporal: temporal,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.22.0",
+  "version": "1.24.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -43,8 +43,8 @@
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@types/react": "18.2.31",
-    "@types/react-datepicker": "4.19.0",
+    "@types/react": "18.2.33",
+    "@types/react-datepicker": "4.19.1",
     "@types/react-dom": "18.2.14",
     "react": "18.2.0",
     "react-dom": "18.2.0"
@@ -60,14 +60,14 @@
     "@scaleway/random-name": "4.0.2",
     "@scaleway/use-media": "2.0.1",
     "deepmerge": "4.3.1",
-    "react-datepicker": "4.20.0",
+    "react-datepicker": "4.21.0",
     "react-flatten-children": "1.1.2",
     "react-select": "5.7.7",
     "react-toastify": "9.1.3",
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.3.0",
-    "@ultraviolet/icons": "2.5.0"
+    "@ultraviolet/icons": "2.5.1"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs"