@ultraviolet/ui 1.21.1 → 1.23.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;
@@ -1951,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: {
@@ -1961,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;
@@ -1977,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 = {
@@ -1992,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.
      */
@@ -2020,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.
@@ -2842,16 +2856,21 @@ 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;
     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/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

@@ -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,11 +107,15 @@ const FwdMenu = /*#__PURE__*/forwardRef((_ref7, ref) => {
     ref: popupRef,
     onClose: onClose,
     tabIndex: -1,
+    maxHeight: maxHeight,
+    maxWidth: maxWidth,
     text: jsx(MenuList, {
       "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,
@@ -110,8 +120,10 @@ const Popover = /*#__PURE__*/forwardRef((_ref6, ref) => {
     size = 'medium',
     onClose,
     className,
+    maxWidth,
+    maxHeight,
     'data-testid': dataTestId
-  } = _ref6;
+  } = _ref7;
   const innerRef = useRef(null);
   const [localVisible, setLocalVisible] = useState(visible);
 
@@ -155,6 +167,8 @@ const Popover = /*#__PURE__*/forwardRef((_ref6, 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/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.1",
+  "version": "1.23.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.4.2"
+    "@ultraviolet/icons": "2.5.1"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs"