@ultraviolet/ui 1.25.0 → 1.26.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { ReactNode, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, ReactElement, Ref, KeyboardEventHandler, RefObject, HTMLAttributes, CSSProperties, ChangeEventHandler, FocusEventHandler, ForwardRefExoticComponent, ForwardedRef, ElementType, TextareaHTMLAttributes } from 'react';
+import react__default, { ReactNode, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, ReactElement, Ref, RefObject, KeyboardEventHandler, HTMLAttributes, CSSProperties, ChangeEventHandler, FocusEventHandler, ForwardRefExoticComponent, ForwardedRef, ElementType, TextareaHTMLAttributes } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
@@ -1232,7 +1232,7 @@ type BarStackProps = {
 /**
  * BarStack is a graphic component that is used to show data in one dimension.
  */
-declare const BarStack: ({ data, total, className, "data-testid": dataTestId, }: BarStackProps) => JSX.Element;
+declare const BarStack: ({ data, total, className, "data-testid": dataTestId, }: BarStackProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type ItemProps$1 = {
     children: ReactNode;
@@ -1329,8 +1329,8 @@ type CarouselProps = {
  * Carousel component allows you to scroll horizontally through a list of items.
  */
 declare const Carousel: {
-    ({ children, className, "data-testid": dataTestId, }: CarouselProps): JSX.Element;
-    Item: ({ children, width, }: CarouselItemProps) => JSX.Element;
+    ({ children, className, "data-testid": dataTestId, }: CarouselProps): _emotion_react_jsx_runtime.JSX.Element;
+    Item: ({ children, width, }: CarouselItemProps) => _emotion_react_jsx_runtime.JSX.Element;
 };
 
 type CheckboxProps = {
@@ -1695,7 +1695,7 @@ type PasswordStrengthMeterProps$1 = {
 /**
  * Show strength of a password based on different criteria.
  */
-declare const Meter: ({ strength, title, value, className, "data-testid": dataTestId, id, }: PasswordStrengthMeterProps$1) => JSX.Element;
+declare const Meter: ({ strength, title, value, className, "data-testid": dataTestId, id, }: PasswordStrengthMeterProps$1) => _emotion_react_jsx_runtime.JSX.Element;
 
 type ModalSize = 'large' | 'medium' | 'small' | 'xsmall' | 'xxsmall';
 type ModalPlacement = 'bottom' | 'bottom-left' | 'bottom-right' | 'center' | 'top' | 'top-left' | 'top-right' | 'right' | 'left';
@@ -1856,7 +1856,7 @@ type PaginationProps = {
  * Pagination is a component to navigate between pages, it is composed of 2 buttons to go to the previous and next page,
  * and a list of buttons to go to a specific page.
  */
-declare const Pagination: ({ disabled, page, pageCount, onChange, pageTabCount, className, "data-testid": dataTestId, }: PaginationProps) => JSX.Element;
+declare const Pagination: ({ disabled, page, pageCount, onChange, pageTabCount, className, "data-testid": dataTestId, }: PaginationProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type Rule = {
     name: string;
@@ -1915,7 +1915,7 @@ type PasswordStrengthMeterProps = {
  * PasswordStrengthMeter is a component that displays a password strength meter.
  * @deprecated use Meter component instead
  */
-declare const PasswordStrengthMeter: ({ password, onChange, strength, title, estimate, forbiddenInputs, className, "data-testid": dataTestId, }: PasswordStrengthMeterProps) => JSX.Element;
+declare const PasswordStrengthMeter: ({ password, onChange, strength, title, estimate, forbiddenInputs, className, "data-testid": dataTestId, }: PasswordStrengthMeterProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type Data = {
     name?: string | null;
@@ -1961,6 +1961,11 @@ declare const Popover: react.ForwardRefExoticComponent<{
     'data-testid'?: string | undefined;
     maxWidth?: string | undefined;
     maxHeight?: string | undefined;
+    /**
+     * 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 | undefined;
 } & Pick<{
     id?: string | undefined;
     children: ReactNode | ((renderProps: {
@@ -1983,17 +1988,18 @@ declare const Popover: react.ForwardRefExoticComponent<{
     hasArrow?: boolean | undefined;
     onClose?: (() => void) | undefined;
     tabIndex?: number | undefined;
-    onKeyDown?: KeyboardEventHandler | undefined;
+    onKeyDown?: react.KeyboardEventHandler | undefined;
     'aria-haspopup'?: boolean | "menu" | "dialog" | "grid" | "listbox" | "tree" | "false" | "true" | undefined;
     hideOnClickOutside?: boolean | undefined;
     needDebounce?: boolean | undefined;
     maxHeight?: string | number | undefined;
     disableAnimation?: boolean | undefined;
+    portalTarget?: HTMLElement | undefined;
 } & react.RefAttributes<HTMLDivElement>, "placement"> & react.RefAttributes<HTMLDivElement>>;
 
 type PopupProps = {
     /**
-     * Id is automatically generated if not set. It is used for associating tooltip wrapper with tooltip portal.
+     * Id is automatically generated if not set. It is used for associating popup wrapper with popup portal.
      */
     id?: string;
     children: ReactNode | ((renderProps: {
@@ -2006,20 +2012,20 @@ type PopupProps = {
     }) => ReactNode);
     maxWidth?: number | string;
     /**
-     * `auto` placement will change the position of the tooltip if it doesn't fit in the viewport.
+     * `auto` placement will change the position of the popup if it doesn't fit in the viewport.
      */
     placement?: PopupPlacement;
     /**
-     * Content of the tooltip, preferably text inside.
+     * Content of the popup, preferably text inside.
      */
     text?: ReactNode;
     className?: string;
     /**
-     * It will add `width: 100%` to the tooltip container.
+     * It will add `width: 100%` to the popup container.
      */
     containerFullWidth?: boolean;
     /**
-     * It will force display tooltip. This can be useful if you need to always display the tooltip without hover needed.
+     * It will force display popup. This can be useful if you need to always display the popup without hover needed.
      */
     visible?: boolean;
     innerRef?: Ref<HTMLDivElement | null>;
@@ -2040,6 +2046,11 @@ type PopupProps = {
      * Will remove the animation on the popup if set to false.
      */
     disableAnimation?: boolean;
+    /**
+     * 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;
 };
 /**
  * @experimental This component is experimental and may be subject to breaking changes in the future.
@@ -2200,7 +2211,7 @@ type SeparatorProps = {
 /**
  * Separator component used to separate content with a horizontal or vertical line.
  */
-declare const Separator: ({ direction, thickness, color, icon, className, "data-testid": dataTestId, }: SeparatorProps) => JSX.Element;
+declare const Separator: ({ direction, thickness, color, icon, className, "data-testid": dataTestId, }: SeparatorProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const variants$1: {
     readonly block: ({ length }: {
@@ -2258,12 +2269,13 @@ type SnippetProps = {
     showText?: string;
     hideText?: string;
     'data-testid'?: string;
+    initiallyExpanded?: boolean;
 } & Pick<ComponentProps<typeof CopyButton>, 'copyText' | 'copiedText'>;
 /**
  * Snippet component is used to display code snippets with the ability to copy the code.
  * It also has the ability to show/hide the code snippet if it has more than 4 lines.
  */
-declare const Snippet: ({ children, copyText, copiedText, showText, hideText, prefix, className, "data-testid": dataTestId, }: SnippetProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Snippet: ({ children, copyText, copiedText, showText, hideText, prefix, className, "data-testid": dataTestId, initiallyExpanded, }: SnippetProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type StackProps = {
     gap?: keyof UltravioletUITheme['space'] | number;
@@ -2314,7 +2326,7 @@ type StatusProps = {
 /**
  * Status component used to display a colored circle with a tooltip for additional information.
  */
-declare const Status: ({ animated, className, tooltip, sentiment, "data-testid": dataTestId, }: StatusProps) => JSX.Element;
+declare const Status: ({ animated, className, tooltip, sentiment, "data-testid": dataTestId, }: StatusProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type Sizes = 'small' | 'medium';
 type ContentProps = {
@@ -2485,10 +2497,11 @@ declare const Tabs: {
         className?: string | undefined;
         counter?: string | number | undefined;
         disabled?: boolean | undefined;
-        value?: string | number | undefined;
         onClick?: react.MouseEventHandler<HTMLElement> | undefined;
         onKeyDown?: react.KeyboardEventHandler<HTMLElement> | undefined;
+        subtitle?: string | undefined;
         tooltip?: string | undefined;
+        value?: string | number | undefined;
     } & Omit<any, "tooltip" | "children" | "role" | "className" | "as" | "disabled" | "value" | "badge" | "counter">, "ref"> & react.RefAttributes<HTMLElement>>;
     Menu: react.ForwardRefExoticComponent<{
         children: ReactNode;
@@ -2569,7 +2582,7 @@ type TagInputProps = {
  * 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.
  */
-declare const TagInput: ({ disabled, id, manualInput, name, onChange, onChangeError, placeholder, tags, variant, className, "data-testid": dataTestId, }: TagInputProps) => JSX.Element;
+declare const TagInput: ({ disabled, id, manualInput, name, onChange, onChangeError, placeholder, tags, variant, className, "data-testid": dataTestId, }: TagInputProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TagListProps = {
     /**
@@ -2598,7 +2611,7 @@ type TagListProps = {
 /**
  * This component is used to display a list of tags with a threshold and a popover when there are too many tags.
  */
-declare const TagList: ({ maxLength, tags, threshold, multiline, popoverTitle, copiable, copyText, copiedText, className, "data-testid": dataTestId, }: TagListProps) => JSX.Element | null;
+declare const TagList: ({ maxLength, tags, threshold, multiline, popoverTitle, copiable, copyText, copiedText, className, "data-testid": dataTestId, }: TagListProps) => _emotion_react_jsx_runtime.JSX.Element | null;
 
 declare const PROMINENCES: {
     default: string;
@@ -2800,7 +2813,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'>;
+type TooltipProps = Pick<ComponentProps<typeof Popup>, 'id' | 'children' | 'maxWidth' | 'placement' | 'text' | 'className' | 'visible' | 'innerRef' | 'role' | 'data-testid' | 'containerFullWidth' | 'portalTarget'>;
 /**
  * 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.
@@ -2838,7 +2851,7 @@ type VerificationCodeProps = {
 /**
  * Verification code allows you to enter a code in multiple fields (4 by default).
  */
-declare const VerificationCode: ({ disabled, className, error, fields, initialValue, inputId, inputStyle, onChange, onComplete, placeholder, required, type, "data-testid": dataTestId, "aria-label": ariaLabel, }: VerificationCodeProps) => JSX.Element;
+declare const VerificationCode: ({ disabled, className, error, fields, initialValue, inputId, inputStyle, onChange, onComplete, placeholder, required, type, "data-testid": dataTestId, "aria-label": ariaLabel, }: VerificationCodeProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type RadioGroupRadioProps = Omit<ComponentProps<typeof Radio>, 'onChange' | 'checked' | 'required'>;
 type RadioGroupProps = {
@@ -2879,6 +2892,11 @@ type MenuProps = {
     'data-testid'?: string;
     maxHeight?: string;
     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;
 };
 /**
  * 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

@@ -53,7 +53,8 @@ const FwdMenu = /*#__PURE__*/forwardRef((_ref7, ref) => {
     className,
     'data-testid': dataTestId,
     maxHeight,
-    maxWidth
+    maxWidth,
+    portalTarget
   } = _ref7;
   const [isVisible, setIsVisible] = useState(visible);
   const popupRef = useRef(null);
@@ -67,27 +68,8 @@ const FwdMenu = /*#__PURE__*/forwardRef((_ref7, ref) => {
   });
   const innerRef = useRef(target);
   useImperativeHandle(ref, () => innerRef.current);
-  const toggleVisible = () => {
-    setIsVisible(!isVisible);
-
-    // Focus the first item when the menu is opened
-    if (!isVisible) {
-      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 = () => {
-    setIsVisible(false);
-
-    // Focus the disclosure when the menu is closed
-    disclosureRef.current?.focus();
-  };
   const finalDisclosure = /*#__PURE__*/cloneElement(target, {
-    onClick: toggleVisible,
+    onClick: () => setIsVisible(!isVisible),
     'aria-haspopup': 'dialog',
     'aria-expanded': isVisible,
     // @ts-expect-error not sure how to fix this
@@ -105,7 +87,7 @@ const FwdMenu = /*#__PURE__*/forwardRef((_ref7, ref) => {
     role: "dialog",
     id: finalId,
     ref: popupRef,
-    onClose: onClose,
+    onClose: () => setIsVisible(false),
     tabIndex: -1,
     maxHeight: maxHeight,
     maxWidth: maxWidth,
@@ -114,9 +96,10 @@ const FwdMenu = /*#__PURE__*/forwardRef((_ref7, ref) => {
       className: className,
       role: "menu",
       children: typeof children === 'function' ? children({
-        toggle: toggleVisible
+        toggle: () => setIsVisible(!isVisible)
       }) : children
     }),
+    portalTarget: portalTarget,
     children: finalDisclosure
   });
 });

package/dist/src/components/Modal/Dialog.js

@@ -11,7 +11,7 @@ const StyledBackdrop = /*#__PURE__*/_styled("div", {
     theme
   } = _ref;
   return theme.colors.overlay;
-}, ";&[data-open='true']{padding:", _ref2 => {
+}, ";z-index:1;&[data-open='true']{padding:", _ref2 => {
   let {
     theme
   } = _ref2;
@@ -175,7 +175,7 @@ const Dialog = _ref9 => {
     event.preventDefault();
     event.stopPropagation();
   };
-  return /*#__PURE__*/createPortal(jsx(StyledBackdrop, {
+  return open ? /*#__PURE__*/createPortal(jsx(StyledBackdrop, {
     "data-open": open,
     onClick: handleClose,
     className: backdropClassName,
@@ -201,7 +201,7 @@ const Dialog = _ref9 => {
       tabIndex: 0,
       children: open ? children : null
     })
-  }), containerRef.current);
+  }), containerRef.current) : null;
 };
 
 export { Dialog };

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

@@ -72,10 +72,6 @@ const ContentWrapper = _ref6 => {
     children,
     sentiment
   } = _ref6;
-  const buttonRef = useRef(null);
-  useEffect(() => {
-    buttonRef.current?.focus();
-  }, []);
   return jsxs(StyledStack, {
     gap: 1,
     children: [jsxs(Stack, {
@@ -93,8 +89,7 @@ const ContentWrapper = _ref6 => {
         onClick: onClose,
         size: "small",
         icon: "close",
-        "aria-label": "close",
-        ref: buttonRef
+        "aria-label": "close"
       })]
     }), typeof children === 'string' ? jsx(Text, {
       variant: "bodySmall",
@@ -122,7 +117,8 @@ const Popover = /*#__PURE__*/forwardRef((_ref7, ref) => {
     className,
     maxWidth,
     maxHeight,
-    'data-testid': dataTestId
+    'data-testid': dataTestId,
+    portalTarget
   } = _ref7;
   const innerRef = useRef(null);
   const [localVisible, setLocalVisible] = useState(visible);
@@ -131,21 +127,9 @@ const Popover = /*#__PURE__*/forwardRef((_ref7, ref) => {
   useEffect(() => {
     setLocalVisible(visible);
   }, [visible]);
-
-  // When space key is pressed we show the popover
-  const onKeyDownSpace = useCallback(event => {
-    if (event.code === 'Space') {
-      event.preventDefault();
-      event.stopPropagation();
-      setLocalVisible(true);
-    }
-  }, []);
-
-  // When we close we hide the popover and focus the disclosure element
   const localOnClose = useCallback(() => {
     setLocalVisible(false);
     onClose?.();
-    innerRef.current?.focus();
   }, [onClose]);
   return jsx(StyledPopup, {
     hideOnClickOutside: true,
@@ -164,11 +148,12 @@ const Popover = /*#__PURE__*/forwardRef((_ref7, ref) => {
     size: size,
     role: "dialog",
     ref: ref,
+    tabIndex: -1,
     innerRef: innerRef,
     onClose: localOnClose,
-    onKeyDown: onKeyDownSpace,
     maxWidth: maxWidth,
     maxHeight: maxHeight,
+    portalTarget: portalTarget,
     children: children
   });
 });

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

@@ -0,0 +1,24 @@
+import { keyframes } from '@emotion/react';
+
+const animation = positions => keyframes`
+  0% {
+    opacity: 0;
+    transform: ${positions.popupInitialPosition};
+  }
+  100% {
+    opacity: 1;
+    transform: ${positions.popupPosition};
+  }
+`;
+const exitAnimation = positions => keyframes`
+  0% {
+    opacity: 1;
+    transform: ${positions.popupPosition};
+  }
+  100% {
+    opacity: 0;
+    transform: ${positions.popupInitialPosition};
+  }
+`;
+
+export { animation, exitAnimation };

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

@@ -1,57 +1,75 @@
 const ARROW_WIDTH = 8; // in px
 const SPACE = 4; // in px
-const TOTAL_USED_SPACE = ARROW_WIDTH + SPACE; // in px
+const TOTAL_USED_SPACE = 0; // in px
 const DEFAULT_POSITIONS = {
   arrowLeft: -999,
   arrowTop: -999,
   arrowTransform: 'translate(-50%, -50)',
   placement: 'top',
   rotate: 135,
-  tooltipInitialPosition: 'translate3d(-999px, -999px, 0)',
-  tooltipPosition: 'translate3d(-999px, -999px, 0)'
+  popupInitialPosition: 'translate3d(-999px, -999px, 0)',
+  popupPosition: 'translate3d(-999px, -999px, 0)'
 };
 /**
- * This function will find the best placement in a window for tooltip based on children position and tooltip size
+ * This function will find the best placement in a window for popup based on children position and popup size
  */
 const computePlacement = _ref => {
   let {
     childrenStructuredRef,
-    tooltipStructuredRef
+    popupStructuredRef,
+    offsetParentRect,
+    popupPortalTarget
   } = _ref;
   const {
-    top: childrenX,
-    left: childrenY,
+    top: childrenTop,
+    left: childrenLeft,
     right: childrenRight
   } = childrenStructuredRef;
   const {
-    width: tooltipWidth,
-    height: tooltipHeight
-  } = tooltipStructuredRef;
-  if (childrenX - tooltipHeight - TOTAL_USED_SPACE < 0) {
+    top: parentTop,
+    left: parentLeft,
+    right: parentRight
+  } = offsetParentRect;
+  const overloadedChildrenLeft = popupPortalTarget === document.body ? childrenLeft : childrenLeft - parentLeft;
+  const overloadedChildrenTop = popupPortalTarget === document.body ? childrenTop : childrenTop - parentTop;
+  const overloadedChildrenRight = popupPortalTarget === document.body ? childrenRight : childrenRight - parentRight;
+  const {
+    width: popupWidth,
+    height: popupHeight
+  } = popupStructuredRef;
+  if (overloadedChildrenTop - popupHeight - TOTAL_USED_SPACE < 0) {
     return 'bottom';
   }
-  if (childrenY - tooltipWidth - TOTAL_USED_SPACE < 0) {
+  if (overloadedChildrenLeft - popupWidth - TOTAL_USED_SPACE < 0) {
     return 'right';
   }
-  if (childrenRight + tooltipWidth + TOTAL_USED_SPACE > window.innerWidth) {
+  if (overloadedChildrenRight + popupWidth + TOTAL_USED_SPACE > window.innerWidth) {
     return 'left';
   }
   return 'top';
 };
 /**
- * This function will compute the positions of tooltip and arrow based on children position and tooltip size
+ * This function will compute the positions of popup and arrow based on children position and popup size
  */
 const computePositions = _ref2 => {
   let {
     placement,
     childrenRef,
-    tooltipRef
+    popupRef,
+    popupPortalTarget
   } = _ref2;
   const childrenStructuredRef = childrenRef.current.getBoundingClientRect();
-  const tooltipStructuredRef = tooltipRef.current.getBoundingClientRect();
+  const offsetParentRect = childrenRef?.current?.offsetParent?.getBoundingClientRect() ?? {
+    top: 0,
+    left: 0,
+    right: 0
+  };
+  const popupStructuredRef = popupRef.current.getBoundingClientRect();
   const placementBasedOnWindowSize = placement === 'auto' ? computePlacement({
     childrenStructuredRef,
-    tooltipStructuredRef
+    popupStructuredRef,
+    offsetParentRect: offsetParentRect,
+    popupPortalTarget
   }) : placement;
   const {
     top: childrenTop,
@@ -61,68 +79,78 @@ const computePositions = _ref2 => {
     height: childrenHeight
   } = childrenStructuredRef;
   const {
-    width: tooltipWidth,
-    height: tooltipHeight
-  } = tooltipStructuredRef;
+    top: parentTop,
+    left: parentLeft,
+    right: parentRight
+  } = offsetParentRect;
+  const {
+    width: popupWidth,
+    height: popupHeight
+  } = popupStructuredRef;
+
+  // It will get how much scroll is done on the page to compute the position of the popup
+  const scrollTopValue = popupPortalTarget === document.body ? document.documentElement.scrollTop : 0;
 
-  // It will get how much scroll is done on the page to compute the position of the tooltip
-  const scrollTopValue = document.documentElement.scrollTop;
+  // We need to compute the position of the popup based on the parent element in the case the popup is not in the body
+  const overloadedChildrenLeft = popupPortalTarget === document.body ? childrenLeft : childrenLeft - parentLeft;
+  const overloadedChildrenTop = popupPortalTarget === document.body ? childrenTop : childrenTop - parentTop;
+  const overloadedChildrenRight = popupPortalTarget === document.body ? childrenRight : childrenRight + childrenWidth + ARROW_WIDTH + SPACE - parentRight / 2;
   switch (placementBasedOnWindowSize) {
     case 'bottom':
       {
-        const positionX = childrenLeft + childrenWidth / 2 - tooltipWidth / 2;
-        const positionY = childrenTop + scrollTopValue + childrenHeight + ARROW_WIDTH + SPACE;
+        const positionX = overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
+        const positionY = overloadedChildrenTop + scrollTopValue + childrenHeight + ARROW_WIDTH + SPACE;
         return {
-          arrowLeft: tooltipWidth / 2,
+          arrowLeft: popupWidth / 2,
           arrowTop: -ARROW_WIDTH - 5,
           arrowTransform: '',
           placement: 'bottom',
           rotate: 180,
-          tooltipInitialPosition: `translate3d(${positionX}px, ${positionY - TOTAL_USED_SPACE}px, 0)`,
-          tooltipPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
+          popupInitialPosition: `translate3d(${positionX}px, ${positionY - TOTAL_USED_SPACE}px, 0)`,
+          popupPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
         };
       }
     case 'left':
       {
-        const positionX = childrenLeft - tooltipWidth - ARROW_WIDTH - SPACE * 2;
-        const positionY = childrenTop + scrollTopValue - tooltipHeight / 2 + childrenHeight / 2;
+        const positionX = overloadedChildrenLeft - popupWidth - ARROW_WIDTH - SPACE * 2;
+        const positionY = overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
         return {
-          arrowLeft: tooltipWidth + ARROW_WIDTH + 5,
-          arrowTop: tooltipHeight / 2,
+          arrowLeft: popupWidth + ARROW_WIDTH + 5,
+          arrowTop: popupHeight / 2,
           arrowTransform: 'translate(-50%, -50%)',
           placement: 'left',
           rotate: -90,
-          tooltipInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY}px, 0)`,
-          tooltipPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
+          popupInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY}px, 0)`,
+          popupPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
         };
       }
     case 'right':
       {
-        const positionX = childrenRight + ARROW_WIDTH + SPACE * 2;
-        const positionY = childrenTop + scrollTopValue - tooltipHeight / 2 + childrenHeight / 2;
+        const positionX = overloadedChildrenRight + ARROW_WIDTH + SPACE * 2;
+        const positionY = overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
         return {
           arrowLeft: -ARROW_WIDTH - 5,
-          arrowTop: tooltipHeight / 2,
+          arrowTop: popupHeight / 2,
           arrowTransform: 'translate(50%, -50%)',
           placement: 'right',
           rotate: 90,
-          tooltipInitialPosition: `translate3d(${positionX - TOTAL_USED_SPACE}px, ${positionY}px, 0)`,
-          tooltipPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
+          popupInitialPosition: `translate3d(${positionX - TOTAL_USED_SPACE}px, ${positionY}px, 0)`,
+          popupPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
         };
       }
     default:
       {
         // top placement is default value
-        const positionX = childrenLeft + childrenWidth / 2 - tooltipWidth / 2;
-        const positionY = childrenTop + scrollTopValue - tooltipHeight - ARROW_WIDTH - SPACE;
+        const positionX = overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
+        const positionY = overloadedChildrenTop + scrollTopValue - popupHeight - ARROW_WIDTH - SPACE;
         return {
-          arrowLeft: tooltipWidth / 2,
-          arrowTop: tooltipHeight - 1,
+          arrowLeft: popupWidth / 2,
+          arrowTop: popupHeight - 1,
           arrowTransform: '',
           placement: 'top',
           rotate: 0,
-          tooltipInitialPosition: `translate3d(${positionX}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
-          tooltipPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
+          popupInitialPosition: `translate3d(${positionX}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
+          popupPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
         };
       }
   }

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

@@ -1,36 +1,18 @@
 import _styled from '@emotion/styled/base';
-import { css, keyframes } from '@emotion/react';
-import { forwardRef, useRef, useImperativeHandle, useState, useId, useCallback, useEffect } from 'react';
+import { css } from '@emotion/react';
+import { forwardRef, useRef, useImperativeHandle, useMemo, useState, useId, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
+import { animation, exitAnimation } from './animations.js';
 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 DEFAULT_ANIMATION_DURATION = 230; // in ms
-const DEFAULT_DEBOUNCE_DURATION = 200;
+const DEFAULT_DEBOUNCE_DURATION = 200; // in ms
+
 function noop() {}
-const animation = positions => keyframes`
-  0% {
-    opacity: 0;
-    transform: ${positions.tooltipInitialPosition};
-  }
-  100% {
-    opacity: 1;
-    transform: ${positions.tooltipPosition};
-  }
-`;
-const exitAnimation = positions => keyframes`
-  0% {
-    opacity: 1;
-    transform: ${positions.tooltipPosition};
-  }
-  100% {
-    opacity: 0;
-    transform: ${positions.tooltipInitialPosition};
-  }
-`;
-const StyledTooltip = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['maxWidth', 'positions', 'reverseAnimation', 'maxHeight', 'animationDuration'].includes(prop),
+const StyledPopup = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['maxWidth', 'positions', 'reverseAnimation', 'maxHeight', 'animationDuration', 'isDialog'].includes(prop),
   target: "e4h1g861"
 })("background:", _ref => {
   let {
@@ -67,11 +49,11 @@ const StyledTooltip = /*#__PURE__*/_styled('div', {
     maxHeight
   } = _ref7;
   return maxHeight ? 'auto' : undefined;
-}, ";overflow-wrap:break-word;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;transform:", _ref8 => {
+}, ";overflow-wrap:break-word;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;z-index:1;transform:", _ref8 => {
   let {
     positions
   } = _ref8;
-  return positions.tooltipPosition;
+  return positions.popupPosition;
 }, ";animation:", _ref9 => {
   let {
     positions,
@@ -131,7 +113,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
     maxHeight,
     visible,
     innerRef,
-    role = 'tooltip',
+    role = 'popup',
     'data-testid': dataTestId,
     hasArrow = true,
     onClose,
@@ -140,18 +122,34 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
     'aria-haspopup': ariaHasPopup,
     hideOnClickOutside = false,
     needDebounce = true,
-    disableAnimation = false
+    disableAnimation = false,
+    portalTarget
   } = _ref15;
   const childrenRef = useRef(null);
   useImperativeHandle(innerRef, () => childrenRef.current);
-  const innerTooltipRef = useRef(null);
-  useImperativeHandle(ref, () => innerTooltipRef.current);
+  const innerPopupRef = useRef(null);
+  useImperativeHandle(ref, () => innerPopupRef.current);
   const timer = useRef();
+  const popupPortalTarget = useMemo(() => {
+    if (role === 'dialog') {
+      if (portalTarget) return portalTarget;
+      if (childrenRef.current) return childrenRef.current;
+      if (typeof window !== 'undefined') return document.body;
+      return null;
+    }
+
+    // We check if window exists for SSR
+    if (typeof window !== 'undefined') {
+      return document.body;
+    }
+    return null;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [portalTarget, role, childrenRef.current]);
 
   // 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.
+  // Debounce timer will be used to prevent the popup from flickering when the user moves the mouse out and in the children element.
   const debounceTimer = useRef();
   const [visibleInDom, setVisibleInDom] = useState(false);
   const [reverseAnimation, setReverseAnimation] = useState(false);
@@ -161,70 +159,71 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
   const uniqueId = useId();
   const generatedId = id ?? uniqueId;
   const isControlled = visible !== undefined;
-  const generatePositions = useCallback(() => {
-    if (childrenRef.current && innerTooltipRef.current) {
+  const generatePopupPositions = useCallback(() => {
+    if (childrenRef.current && innerPopupRef.current) {
       setPositions(computePositions({
         childrenRef,
         placement,
-        tooltipRef: innerTooltipRef
+        popupRef: innerPopupRef,
+        popupPortalTarget: popupPortalTarget
       }));
     }
-  }, [innerTooltipRef, placement]);
+  }, [placement, popupPortalTarget]);
 
   /**
-   * This function is called when we need to recompute positions of tooltip due to window scroll or resize.
+   * This function is called when we need to recompute positions of popup due to window scroll or resize.
    */
   const onWindowChangeDetected = useCallback(() => {
     // We remove animation on scroll or the animation will restart on every scroll
-    if (innerTooltipRef.current) {
-      innerTooltipRef.current.style.animation = 'none';
+    if (innerPopupRef.current) {
+      innerPopupRef.current.style.animation = 'none';
     }
-    generatePositions();
-  }, [generatePositions, innerTooltipRef]);
+    generatePopupPositions();
+  }, [generatePopupPositions, innerPopupRef]);
 
   /**
-   * This function is called when we need to remove tooltip portal from DOM and remove event listener to it.
+   * This function is called when we need to remove popup portal from DOM and remove event listener to it.
    */
-  const unmountTooltip = useCallback(() => {
+  const unmountPopupFromDom = useCallback(() => {
     setVisibleInDom(false);
     setReverseAnimation(false);
     window.removeEventListener('scroll', onWindowChangeDetected, true);
   }, [onWindowChangeDetected]);
 
   /**
-   * This function is called when we need to hide tooltip. A timeout is set to allow animation end, then remove
-   * tooltip from dom.
+   * This function is called when we need to hide popup. A timeout is set to allow animation end, then remove
+   * popup from dom.
    */
-  const hideTooltip = useCallback(() => {
+  const closePopup = useCallback(() => {
     debounceTimer.current = setTimeout(() => {
       setReverseAnimation(true);
       timer.current = setTimeout(() => {
-        unmountTooltip();
+        unmountPopupFromDom();
         onClose?.();
       }, animationDuration);
     }, needDebounce && !disableAnimation ? DEFAULT_DEBOUNCE_DURATION : 0);
-  }, [animationDuration, disableAnimation, needDebounce, onClose, unmountTooltip]);
+  }, [animationDuration, disableAnimation, needDebounce, onClose, unmountPopupFromDom]);
 
   /**
-   * When mouse hover or stop hovering children this function display or hide tooltip. A timeout is set to allow animation
-   * end, then remove tooltip from dom.
+   * 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 => () => {
-    // This condition is for when we want to unmount the tooltip
-    // There is debounce in order to avoid tooltip to flicker when we move the mouse from children to tooltip
+    // 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
-    if (!isVisible && innerTooltipRef.current && !debounceTimer.current) {
-      hideTooltip();
+    if (!isVisible && innerPopupRef.current && !debounceTimer.current) {
+      closePopup();
     } else if (isVisible) {
-      // This condition is for when we want to mount the tooltip
-      // If the timer exists it means the tooltip was about to umount, but we hovered the children again,
-      // so we clear the timer and the tooltip will not be unmounted
+      // This condition is for when we want to mount the popup
+      // If the timer exists it means the popup was about to umount, but we hovered the children again,
+      // so we clear the timer and the popup will not be unmounted
       if (timer.current) {
         setReverseAnimation(false);
         clearTimeout(timer.current);
         timer.current = undefined;
       }
-      // And here is when we currently are in a debounce timer, it means tooltip was hovered during
+      // And here is when we currently are in a debounce timer, it means popup was hovered during
       // that period, and so we can clear debounce timer
       if (debounceTimer.current) {
         clearTimeout(debounceTimer.current);
@@ -232,20 +231,21 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
       }
       setVisibleInDom(true);
     }
-  }, [hideTooltip, innerTooltipRef]);
+  }, [closePopup, innerPopupRef]);
 
   /**
-   * Once tooltip is visible in the dom we can compute positions, then set it visible on screen and add event to
+   * Once popup is visible in the dom we can compute positions, then set it visible on screen and add event to
    * recompute positions on scroll or screen resize.
    */
   useEffect(() => {
     if (visibleInDom) {
-      generatePositions();
-
-      // We want to detect scroll and resize in order to recompute positions of tooltip
-      // Adding true as third parameter to event listener will detect nested scrolls.
-      window.addEventListener('scroll', onWindowChangeDetected, true);
-      window.addEventListener('resize', onWindowChangeDetected, true);
+      generatePopupPositions();
+      if (popupPortalTarget === document.body) {
+        // We want to detect scroll and resize in order to recompute positions of popup
+        // Adding true as third parameter to event listener will detect nested scrolls.
+        window.addEventListener('scroll', onWindowChangeDetected, true);
+        window.addEventListener('resize', onWindowChangeDetected, true);
+      }
     }
     return () => {
       window.removeEventListener('scroll', onWindowChangeDetected, true);
@@ -255,22 +255,17 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
         timer.current = undefined;
       }
     };
-  }, [generatePositions, onWindowChangeDetected, visibleInDom, maxWidth]);
+  }, [generatePopupPositions, onWindowChangeDetected, visibleInDom, maxWidth, popupPortalTarget]);
 
   /**
-   * If tooltip has `visible` prop it means the tooltip is manually controlled through this prop.
-   * In this cas we don't want to display tooltip on hover, but only when `visible` is true.
+   * If popup has `visible` prop it means the popup is manually controlled through this prop.
+   * In this cas we don't want to display popup on hover, but only when `visible` is true.
    */
   useEffect(() => {
     if (isControlled) {
       onPointerEvent(visible)();
     }
   }, [isControlled, onPointerEvent, visible]);
-  const onLocalKeyDown = useCallback(event => {
-    if (event.code === 'Escape') {
-      unmountTooltip();
-    }
-  }, [unmountTooltip]);
 
   // Handle hide on esc press and hide on click outside
   useEffect(() => {
@@ -278,17 +273,17 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
       if (event.key === 'Escape') {
         event.preventDefault();
         event.stopPropagation();
-        hideTooltip();
+        closePopup();
       }
     };
     const handleClickOutside = event => {
-      const tooltipCurrent = innerTooltipRef.current;
+      const popupCurrent = innerPopupRef.current;
       const childrenCurrent = childrenRef.current;
-      if (tooltipCurrent && hideOnClickOutside && !event.defaultPrevented) {
-        if (event.target && event.target !== tooltipCurrent && event.target !== childrenCurrent && !childrenCurrent?.contains(event.target) && !tooltipCurrent.contains(event.target)) {
+      if (popupCurrent && hideOnClickOutside && !event.defaultPrevented) {
+        if (event.target && event.target !== popupCurrent && event.target !== childrenCurrent && !childrenCurrent?.contains(event.target) && !popupCurrent.contains(event.target)) {
           event.preventDefault();
           event.stopPropagation();
-          hideTooltip();
+          closePopup();
         }
       }
     };
@@ -300,7 +295,35 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
       document.body.removeEventListener('keyup', handleEscPress);
       document.body.removeEventListener('click', handleClickOutside);
     };
-  }, [hideTooltip, visibleInDom, innerTooltipRef, childrenRef, hideOnClickOutside]);
+  }, [closePopup, visibleInDom, innerPopupRef, childrenRef, hideOnClickOutside]);
+
+  /**
+   * This event will occur only for dialog and will trap focus inside the dialog.
+   */
+  const handleFocusTrap = useCallback(event => {
+    const isTabPressed = event.key === 'Tab';
+    if (!isTabPressed) {
+      return;
+    }
+    event.stopPropagation();
+    const focusableEls = innerPopupRef.current?.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])') ?? [];
+
+    // Handle case when no interactive element are within the modal (including close icon)
+    if (focusableEls.length === 0) {
+      event.preventDefault();
+    }
+    const firstFocusableEl = focusableEls[0];
+    const lastFocusableEl = focusableEls[focusableEls.length - 1];
+    if (event.shiftKey) {
+      if (document.activeElement === firstFocusableEl || document.activeElement === innerPopupRef.current) {
+        lastFocusableEl.focus();
+        event.preventDefault();
+      }
+    } else if (document.activeElement === lastFocusableEl || document.activeElement === innerPopupRef.current) {
+      firstFocusableEl.focus();
+      event.preventDefault();
+    }
+  }, []);
 
   /**
    * Will render children conditionally if children is a function or not.
@@ -326,13 +349,12 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
       tabIndex: tabIndex,
       onKeyDown: event => {
         onKeyDown?.(event);
-        onLocalKeyDown(event);
       },
       "data-container-full-width": containerFullWidth,
       "aria-haspopup": ariaHasPopup,
       children: children
     });
-  }, [ariaHasPopup, children, containerFullWidth, generatedId, isControlled, onKeyDown, onLocalKeyDown, onPointerEvent, tabIndex]);
+  }, [ariaHasPopup, children, containerFullWidth, generatedId, isControlled, onKeyDown, onPointerEvent, tabIndex]);
   if (!text) {
     if (typeof children === 'function') return null;
     return jsx(Fragment, {
@@ -347,8 +369,8 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
     event.nativeEvent.stopImmediatePropagation();
   };
   return jsxs(Fragment, {
-    children: [renderChildren(), visibleInDom ? /*#__PURE__*/createPortal(jsx(StyledTooltip, {
-      ref: innerTooltipRef,
+    children: [renderChildren(), visibleInDom ? /*#__PURE__*/createPortal(jsx(StyledPopup, {
+      ref: innerPopupRef,
       positions: positions,
       maxWidth: maxWidth,
       maxHeight: maxHeight,
@@ -360,8 +382,10 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
       "data-has-arrow": hasArrow,
       onClick: stopClickPropagation,
       animationDuration: animationDuration,
+      onKeyDown: role === 'dialog' ? handleFocusTrap : undefined,
+      isDialog: role === 'dialog',
       children: text
-    }), document.body) : null]
+    }), popupPortalTarget) : null]
   });
 });
 

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

@@ -1,6 +1,6 @@
 import _styled from '@emotion/styled/base';
 import { Icon } from '@ultraviolet/icons';
-import { useState, Children } from 'react';
+import { useReducer, Children } from 'react';
 import { CopyButton } from '../CopyButton/index.js';
 import { Expandable } from '../Expandable/index.js';
 import { Stack } from '../Stack/index.js';
@@ -196,9 +196,10 @@ const Snippet = _ref19 => {
     hideText = 'Hide',
     prefix,
     className,
-    'data-testid': dataTestId
+    'data-testid': dataTestId,
+    initiallyExpanded
   } = _ref19;
-  const [showMore, setShowMore] = useState(false);
+  const [showMore, setShowMore] = useReducer(value => !value, initiallyExpanded ?? false);
   const lines = children.split(LINES_BREAK_REGEX).filter(Boolean);
   const numberOfLines = lines.length;
   const multiline = numberOfLines > 1;
@@ -235,7 +236,7 @@ const Snippet = _ref19 => {
         showMore: showMore,
         children: jsx(StyledButton, {
           type: "button",
-          onClick: () => setShowMore(!showMore),
+          onClick: setShowMore,
           "aria-expanded": showMore,
           children: jsxs(AlignCenterText, {
             as: "span",

package/dist/src/components/Tabs/Tab.js

@@ -1,12 +1,14 @@
 import _styled from '@emotion/styled/base';
 import { forwardRef, useMemo } from 'react';
 import { Badge } from '../Badge/index.js';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/index.js';
 import { Tooltip } from '../Tooltip/index.js';
 import { useTabsContext } from './TabsContext.js';
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
 const StyledBadge = /*#__PURE__*/_styled(Badge, {
-  target: "e1hzf7cr3"
+  target: "e1hzf7cr4"
 })("padding:0 ", _ref => {
   let {
     theme
@@ -18,6 +20,9 @@ const StyledBadge = /*#__PURE__*/_styled(Badge, {
   } = _ref2;
   return theme.space['1'];
 }, ";");
+const StyledText = /*#__PURE__*/_styled(Text, {
+  target: "e1hzf7cr3"
+})();
 const StyledTooltip = /*#__PURE__*/_styled(Tooltip, {
   target: "e1hzf7cr2"
 })();
@@ -36,7 +41,7 @@ const StyledTabButton = /*#__PURE__*/_styled('button', {
     theme
   } = _ref4;
   return `${theme.space['1']} ${theme.space['2']}`;
-}, ";cursor:pointer;justify-content:center;align-items:center;white-space:nowrap;color:", _ref5 => {
+}, ";cursor:pointer;justify-content:center;align-items:baseline;white-space:nowrap;color:", _ref5 => {
   let {
     theme
   } = _ref5;
@@ -81,33 +86,43 @@ const StyledTabButton = /*#__PURE__*/_styled('button', {
     theme
   } = _ref13;
   return theme.colors.primary.border;
-}, ";}&[aria-disabled='false']:not(:disabled){&:hover,&:focus,&:active{outline:none;color:", _ref14 => {
+}, ";", StyledText, "{color:", _ref14 => {
   let {
     theme
   } = _ref14;
   return theme.colors.primary.text;
-}, ";border-bottom-color:", _ref15 => {
+}, ";}}&[aria-disabled='false']:not(:disabled){&:hover,&:focus,&:active{outline:none;color:", _ref15 => {
   let {
     theme
   } = _ref15;
-  return theme.colors.primary.border;
-}, ";&[data-is-selected='false']{", StyledBadge, "{background-color:", _ref16 => {
+  return theme.colors.primary.text;
+}, ";border-bottom-color:", _ref16 => {
   let {
     theme
   } = _ref16;
-  return theme.colors.primary.background;
-}, ";border-color:", _ref17 => {
+  return theme.colors.primary.border;
+}, ";&[data-is-selected='false']{", StyledBadge, "{background-color:", _ref17 => {
   let {
     theme
   } = _ref17;
   return theme.colors.primary.background;
-}, ";color:", _ref18 => {
+}, ";border-color:", _ref18 => {
   let {
     theme
   } = _ref18;
+  return theme.colors.primary.background;
+}, ";color:", _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.colors.primary.text;
+}, ";}", StyledText, "{color:", _ref20 => {
+  let {
+    theme
+  } = _ref20;
   return theme.colors.primary.text;
 }, ";}}}}&[aria-disabled='true'],&:disabled{cursor:not-allowed;filter:grayscale(1) opacity(50%);}");
-const Tab = /*#__PURE__*/forwardRef((_ref19, ref) => {
+const Tab = /*#__PURE__*/forwardRef((_ref21, ref) => {
   let {
     as,
     badge,
@@ -115,12 +130,13 @@ const Tab = /*#__PURE__*/forwardRef((_ref19, ref) => {
     className,
     counter,
     disabled = false,
-    value,
     onClick,
     onKeyDown,
+    subtitle,
     tooltip,
+    value,
     ...props
-  } = _ref19;
+  } = _ref21;
   const {
     selected,
     onChange
@@ -129,7 +145,7 @@ const Tab = /*#__PURE__*/forwardRef((_ref19, ref) => {
   const isSelected = useMemo(() => value !== undefined && selected === value, [value, selected]);
   return jsx(StyledTooltip, {
     text: tooltip,
-    children: jsxs(StyledTabButton, {
+    children: jsx(StyledTabButton, {
       role: "tab",
       ref: ref,
       className: className,
@@ -151,14 +167,31 @@ const Tab = /*#__PURE__*/forwardRef((_ref19, ref) => {
       },
       "data-is-selected": isSelected,
       ...props,
-      children: [children, typeof counter === 'number' || typeof counter === 'string' ? jsx(StyledBadge, {
-        sentiment: isSelected ? 'primary' : 'neutral',
-        prominence: isSelected ? 'strong' : 'default',
-        size: "medium",
-        children: counter
-      }) : null, badge ? jsx(BadgeContainer, {
-        children: badge
-      }) : null]
+      children: jsxs(Stack, {
+        direction: "column",
+        gap: 0.5,
+        children: [jsxs(Stack, {
+          direction: "row",
+          alignItems: "center",
+          children: [children, typeof counter === 'number' || typeof counter === 'string' ? jsx(StyledBadge, {
+            sentiment: isSelected ? 'primary' : 'neutral',
+            prominence: isSelected ? 'strong' : 'default',
+            size: "medium",
+            children: counter
+          }) : null, badge ? jsx(BadgeContainer, {
+            children: badge
+          }) : null]
+        }), subtitle ? jsx(Stack, {
+          direction: "row",
+          children: jsx(StyledText, {
+            as: "span",
+            variant: "bodySmall",
+            sentiment: "neutral",
+            prominence: "weak",
+            children: subtitle
+          })
+        }) : null]
+      })
     })
   });
 });

package/dist/src/components/Tabs/TabMenu.js

@@ -23,6 +23,7 @@ const TabMenu = /*#__PURE__*/forwardRef((_ref2, ref) => {
     visible,
     id,
     disabled,
+    className,
     ...props
   } = _ref2;
   return jsx(Menu, {
@@ -34,6 +35,7 @@ const TabMenu = /*#__PURE__*/forwardRef((_ref2, ref) => {
       "aria-disabled": disabled ?? 'false',
       disabled: disabled,
       "aria-haspopup": "menu",
+      className: className,
       ...props,
       children: [disclosure, jsx(ArrowIcon, {
         name: "arrow-down"

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

@@ -1,5 +1,5 @@
 import _styled from '@emotion/styled/base';
-import { useRef, useState, useMemo, useEffect } from 'react';
+import { useRef, useState, useMemo, useEffect, Children, isValidElement, cloneElement } from 'react';
 import { Tab, StyledTabButton } from './Tab.js';
 import { TabMenu } from './TabMenu.js';
 import { TabMenuItem } from './TabMenuItem.js';
@@ -23,7 +23,9 @@ const MenuContainer = /*#__PURE__*/_styled("div", {
     theme
   } = _ref3;
   return `${theme.space['1']} ${theme.space['2']}`;
-}, ";border-bottom-width:1px;width:100%;cursor:pointer;min-width:110px;background-color:transparent;}");
+}, ";border-bottom-width:1.5px;width:100%;cursor:pointer;min-width:110px;background-color:transparent;&[aria-disabled='true'],&:disabled{cursor:not-allowed;filter:grayscale(1) opacity(50%);}}");
+
+// Migration to MenuV2 will not work as expected here.
 const StyledTabMenu = /*#__PURE__*/_styled(TabMenu, {
   target: "ewug27g1"
 })("position:sticky;right:0;top:0;bottom:0;background:", _ref4 => {
@@ -61,7 +63,7 @@ const Tabs = _ref7 => {
     ...props
   } = _ref7;
   const tabsRef = useRef({});
-  const moreStaticRef = useRef({});
+  const moreStaticRef = useRef(null);
   const [displayMore, setDisplayMore] = useState(false);
   const value = useMemo(() => ({
     onChange,
@@ -82,12 +84,14 @@ const Tabs = _ref7 => {
     }
   }, [selected]);
 
-  // Change the moreButton style automatically based on the scroll
+  // Change the moreButton style automatically based on the scroll to show that a scroll effect is possible.
   useEffect(() => {
     const element = tabsRef.current;
     const moreElement = moreStaticRef.current;
     const handler = () => {
-      moreElement.style.boxShadow = element.scrollLeft + SHADOW_THRESHOLD > element.scrollWidth - element.clientWidth ? 'none' : '';
+      if (moreElement?.style) {
+        moreElement.style.boxShadow = element.scrollLeft + SHADOW_THRESHOLD > element.scrollWidth - element.clientWidth ? 'none' : '';
+      }
     };
     if (displayMore) {
       element.addEventListener('scroll', handler);
@@ -96,6 +100,17 @@ const Tabs = _ref7 => {
       if (displayMore) element.removeEventListener('scroll', handler);
     };
   }, [displayMore]);
+
+  // mapping of tab children to avoid using subtitle props
+  const menuItemChildren = Children.map(children, child => {
+    if ( /*#__PURE__*/isValidElement(child)) {
+      return /*#__PURE__*/cloneElement(child, {
+        ...child.props,
+        subtitle: null
+      });
+    }
+    return null;
+  });
   return jsx(TabsContext.Provider, {
     value: value,
     children: jsxs(TabsContainer, {
@@ -108,7 +123,7 @@ const Tabs = _ref7 => {
         ref: moreStaticRef,
         disclosure: moreDisclosure,
         children: jsx(MenuContainer, {
-          children: children
+          children: menuItemChildren
         })
       }) : null]
     })

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

@@ -31,7 +31,8 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref, tooltipRef) => {
     visible,
     innerRef,
     role = 'tooltip',
-    'data-testid': dataTestId
+    'data-testid': dataTestId,
+    portalTarget
   } = _ref;
   return jsx(StyledPopup, {
     id: id,
@@ -45,6 +46,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref, tooltipRef) => {
     placement: placement,
     text: text,
     innerRef: innerRef,
+    portalTarget: portalTarget,
     children: children
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -39,7 +39,7 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.23.2",
+    "@babel/core": "7.23.3",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
@@ -67,7 +67,7 @@
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.5.0",
-    "@ultraviolet/icons": "2.5.4"
+    "@ultraviolet/icons": "2.5.5"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs"