@ultraviolet/ui 1.24.2 → 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';
@@ -407,11 +407,8 @@ declare const extendTheme: (extendedTheme: RecursivePartial<UltravioletUITheme>)
                     blue: string;
                     emerald: string;
                     fuschia: string;
-                    gold: string;
                     magenta: string;
                     primary: string;
-                    purple: string;
-                    strong: string;
                 };
             };
             icon: {
@@ -639,6 +636,15 @@ declare const extendTheme: (extendedTheme: RecursivePartial<UltravioletUITheme>)
             textWeakDisabled: string;
             textWeakHover: string;
         };
+        other: {
+            gradients: {
+                background: {
+                    gold: string;
+                    purple: string;
+                    strong: string;
+                };
+            };
+        };
     };
     radii: {
         circle: string;
@@ -1226,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;
@@ -1323,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 = {
@@ -1689,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';
@@ -1850,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;
@@ -1909,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;
@@ -1955,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: {
@@ -1977,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: {
@@ -2000,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>;
@@ -2034,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.
@@ -2194,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 }: {
@@ -2252,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;
@@ -2308,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 = {
@@ -2479,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;
@@ -2563,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 = {
     /**
@@ -2592,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;
@@ -2794,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.
@@ -2832,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 = {
@@ -2873,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/Banner/index.js

@@ -7,12 +7,6 @@ import { Stack } from '../Stack/index.js';
 import { Text } from '../Text/index.js';
 import defaultIllustrationSmall from './assets/default-image-small.svg.js';
 import defaultIllustration from './assets/default-image.svg.js';
-import introCompactLeftPattern from './assets/intro-compact-left-pattern.svg.js';
-import introCompactRightPattern from './assets/intro-compact-right-pattern.svg.js';
-import introPattern from './assets/intro-pattern.svg.js';
-import promotionCompactLeftPattern from './assets/promotion-compact-left-pattern.svg.js';
-import promotionCompactRightPattern from './assets/promotion-compact-right-pattern.svg.js';
-import promotionPattern from './assets/promotion-pattern.svg.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
 const styles = _ref => {
@@ -23,18 +17,18 @@ const styles = _ref => {
   } = _ref;
   if (size === 'small') {
     if (variant === 'intro') {
-      return /*#__PURE__*/css("background:", theme.colors.primary.background, ";background-image:url(", introCompactLeftPattern, "),url(", introCompactRightPattern, ");background-position:left,right;background-repeat:no-repeat,no-repeat;background-size:contain,contain;");
+      return /*#__PURE__*/css("background:", theme.colors.primary.background, ";background-position:left,right;background-repeat:no-repeat,no-repeat;background-size:contain,contain;");
     }
     if (variant === 'promotional') {
-      return /*#__PURE__*/css("background-image:url(", promotionCompactLeftPattern, "),url(", promotionCompactRightPattern, "),", theme.colors.other.gradients.background.purple, ";background-position:left,right;background-repeat:no-repeat,no-repeat;background-size:contain,contain;");
+      return /*#__PURE__*/css("background-position:left,right;background-image:", theme.colors.other.gradients.background.aqua, ";background-repeat:no-repeat,no-repeat;background-size:contain,contain;");
     }
   }
   if (size === 'medium') {
     if (variant === 'intro') {
-      return /*#__PURE__*/css("background:", theme.colors.primary.background, ";background-image:url(", introPattern, ");background-position:right;background-repeat:no-repeat;background-size:contain;");
+      return /*#__PURE__*/css("background:", theme.colors.primary.background, ";background-position:right;background-repeat:no-repeat;background-size:contain;");
     }
     if (variant === 'promotional') {
-      return /*#__PURE__*/css("background-image:url(", promotionPattern, "),", theme.colors.other.gradients.background.purple, ";background-position:right;background-repeat:no-repeat;background-size:contain;");
+      return /*#__PURE__*/css("background-image:", theme.colors.other.gradients.background.aqua, ";background-position:right;background-repeat:no-repeat;background-size:contain;");
     }
   }
   return null;
@@ -149,7 +143,7 @@ const Banner = _ref8 => {
           prominence: variant === 'intro' || variant === 'promotional' && theme !== 'light' ? 'default' : 'stronger',
           children: children
         })]
-      }), jsxs(Stack, {
+      }), buttonText || linkText ? jsxs(Stack, {
         direction: "row",
         gap: 2,
         alignItems: "center",
@@ -167,7 +161,7 @@ const Banner = _ref8 => {
           prominence: variant === 'intro' || theme !== 'light' ? 'default' : 'strong',
           children: linkText
         }) : null]
-      })]
+      }) : null]
     }), closable ? jsx(Button, {
       icon: "close",
       size: "small",

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 };