@ultraviolet/ui 1.15.1 → 1.17.0

package/README.md

@@ -20,13 +20,13 @@ You will also need to import fonts in your project by adding:
 ### Usage
 
 ```js
-import { theme, normalize, Button } from '@ultraviolet/ui'
-import { Global, css, ThemeProvider } from '@emotion/react'
+import { Global, ThemeProvider, css } from '@emotion/react'
+import { Button, normalize, theme } from '@ultraviolet/ui'
 
 const App = () => (
   <ThemeProvider theme={theme}>
     <Global styles={css`${normalize()}`} />
-    <Button variant="primary" onClick={() => console.log('clicked')}>
+    <Button onClick={() => console.log('clicked')}>
       Click Me
     </Button>
   </ThemeProvider>
@@ -42,10 +42,10 @@ Example, in a `emotion.d.ts` file:
 
 ```ts
 import '@emotion/react'
-import type { SCWUITheme } from '@ultraviolet/ui'
+import type { UltravioletUITheme } from '@ultraviolet/ui'
 
 declare module '@emotion/react' {
-  export interface Theme extends SCWUITheme {}
+  export interface Theme extends UltravioletUITheme {}
 }
 ```
 

package/dist/index.d.ts

@@ -37,7 +37,11 @@ type ActionBarProps = {
 declare const ActionBar: ({ children, role, rank, className, "data-testid": dataTestId, }: ActionBarProps) => react.ReactPortal;
 
 type ScreenSize = keyof typeof consoleLightTheme.screens;
+/**
+ * @deprecated use UltravioletUITheme instead
+ */
 type SCWUITheme = typeof consoleLightTheme;
+type UltravioletUITheme = typeof consoleLightTheme;
 declare const typography: {
     body: {
         fontFamily: string;
@@ -177,10 +181,10 @@ type RecursivePartial<T> = {
 };
 /**
  * Will extend theme with new theme properties
- * @param {SCWUITheme} baseTheme the theme you want to extend from, by default it is set to light theme
- * @param {RecursivePartial<SCWUITheme>} extendedTheme the properties of a new theme you want to apply from baseTheme
+ * @param {UltravioletUITheme} baseTheme the theme you want to extend from, by default it is set to light theme
+ * @param {RecursivePartial<UltravioletUITheme>} extendedTheme the properties of a new theme you want to apply from baseTheme
  */
-declare const extendTheme: (extendedTheme: RecursivePartial<SCWUITheme>) => {
+declare const extendTheme: (extendedTheme: RecursivePartial<UltravioletUITheme>) => {
     colors: {
         danger: {
             background: string;
@@ -803,6 +807,9 @@ type CommonProps = {
     onClick?: MouseEventHandler<HTMLElement>;
     tooltip?: string;
     tabIndex?: ButtonHTMLAttributes<HTMLButtonElement>['tabIndex'];
+    onMouseDown?: MouseEventHandler<HTMLElement>;
+    onMouseUp?: MouseEventHandler<HTMLElement>;
+    onMouseOut?: MouseEventHandler<HTMLElement>;
 };
 type FinalProps = CommonProps & ({
     children: ReactNode;
@@ -1414,7 +1421,7 @@ type LoaderProps = {
  */
 declare const Loader: ({ percentage, text, size, strokeWidth, color, trailColor, active, label, }: LoaderProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type DisclosureElement = ((popover: Partial<PopoverStateReturn>) => ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>) | (ReactElement<ButtonHTMLAttributes<HTMLButtonElement>> & {
+type DisclosureElement$1 = ((popover: Partial<PopoverStateReturn>) => ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>) | (ReactElement<ButtonHTMLAttributes<HTMLButtonElement>> & {
     ref?: Ref<HTMLButtonElement>;
 });
 declare const arrowPlacementStyles: {
@@ -1426,13 +1433,13 @@ declare const arrowPlacementStyles: {
     readonly 'top-start': (theme: Theme) => _emotion_react.SerializedStyles;
 };
 type ArrowPlacement = keyof typeof arrowPlacementStyles;
-type MenuProps = {
+type MenuProps$1 = {
     ariaLabel?: string;
     id?: string;
     placement?: ArrowPlacement;
     children?: ((props: PopoverStateReturn) => ReactNode) | ReactNode;
     className?: string;
-    disclosure: DisclosureElement;
+    disclosure: DisclosureElement$1;
     hasArrow?: boolean;
     visible?: boolean;
     'data-testid'?: string;
@@ -1442,8 +1449,9 @@ type MenuProps = {
  * A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a
  * sub menu, or by invoking a command, such as `Shift + F10` on Windows, that opens a context specific menu.
  * When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.
+ * @deprecated use MenuV2 component instead
  */
-declare const Menu: react.ForwardRefExoticComponent<MenuProps & react.RefAttributes<HTMLButtonElement>> & {
+declare const Menu: react.ForwardRefExoticComponent<MenuProps$1 & react.RefAttributes<HTMLButtonElement>> & {
     Item: react.ForwardRefExoticComponent<{
         href?: string | undefined;
         disabled?: boolean | undefined;
@@ -1722,7 +1730,7 @@ declare const PieChart: ({ height, width, data, emptyLegend, content, withLegend
 
 type PopupPlacement = 'top' | 'right' | 'bottom' | 'left' | 'auto';
 
-type TooltipProps$1 = {
+type PopupProps = {
     /**
      * Id is automatically generated if not set. It is used for associating tooltip wrapper with tooltip portal.
      */
@@ -1758,10 +1766,11 @@ type TooltipProps$1 = {
     'data-testid'?: string;
     hasArrow?: boolean;
     onClose?: () => void;
+    tabIndex?: number;
     onKeyDown?: KeyboardEventHandler;
     'aria-haspopup'?: HTMLAttributes<HTMLDivElement>['aria-haspopup'];
 };
-declare const Popup: react.ForwardRefExoticComponent<TooltipProps$1 & react.RefAttributes<HTMLDivElement>>;
+declare const Popup: react.ForwardRefExoticComponent<PopupProps & react.RefAttributes<HTMLDivElement>>;
 
 type SentimentType = 'neutral' | 'primary';
 declare const SIZES_WIDTH: {
@@ -1825,7 +1834,7 @@ type RowProps = {
     'data-testid'?: string;
     children: ReactNode;
     templateColumns: string;
-    gap?: keyof SCWUITheme['space'] | number;
+    gap?: keyof UltravioletUITheme['space'] | number;
     alignItems?: CSSProperties['alignItems'];
     justifyContent?: CSSProperties['justifyContent'];
 };
@@ -2002,7 +2011,7 @@ type SnippetProps = {
 declare const Snippet: ({ children, copyText, copiedText, showText, hideText, prefix, className, "data-testid": dataTestId, }: SnippetProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type StackProps = {
-    gap?: keyof SCWUITheme['space'] | number;
+    gap?: keyof UltravioletUITheme['space'] | number;
     direction?: 'row' | 'column';
     alignItems?: CSSProperties['alignItems'];
     justifyContent?: CSSProperties['justifyContent'];
@@ -2592,6 +2601,43 @@ declare const RadioGroup: {
     Radio: ({ onFocus, onBlur, disabled, error, name, value, label, helper, className, autoFocus, onKeyDown, "data-testid": dataTestId, }: RadioGroupRadioProps) => _emotion_react_jsx_runtime.JSX.Element;
 };
 
+type DisclosureProps = {
+    visible: boolean;
+};
+type DisclosureElement = ((disclosure: DisclosureProps) => ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>) | (ReactElement<ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: Ref<HTMLButtonElement>;
+});
+type MenuProps = {
+    id?: string;
+    ariaLabel?: string;
+    placement?: ComponentProps<typeof Popup>['placement'];
+    children?: ReactNode;
+    className?: string;
+    disclosure: DisclosureElement;
+    hasArrow?: boolean;
+    visible?: boolean;
+    'data-testid'?: string;
+};
+/**
+ * A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
+ * A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a
+ * sub menu, or by invoking a command, such as `Shift + F10` on Windows, that opens a context specific menu.
+ * When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.
+ */
+declare const MenuV2: react.ForwardRefExoticComponent<MenuProps & react.RefAttributes<HTMLButtonElement>> & {
+    Item: react.ForwardRefExoticComponent<{
+        href?: string | undefined;
+        disabled?: boolean | undefined;
+        tooltip?: string | undefined;
+        className?: string | undefined;
+        children: ReactNode;
+        onClick?: react.MouseEventHandler<HTMLElement> | undefined;
+        borderless?: boolean | undefined;
+        sentiment?: ("neutral" | "danger") | undefined;
+        'data-testid'?: string | undefined;
+    } & react.RefAttributes<HTMLElement>>;
+};
+
 declare const getUUID: (prefix?: string) => string;
 
 declare const bounce: _emotion_react.Keyframes;
@@ -2635,4 +2681,4 @@ declare const down: (size: ScreenSize, rules: string) => string;
 
 declare const normalize: () => string;
 
-export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, LineChart, Link, List, Loader, Menu, Meter, Modal, Notice, NumberInput, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, ProgressBar, Radio, RadioGroup, Row, type SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextInput, TimeInput, ToastContainer, Toggle, ToggleGroup, Tooltip, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };
+export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, NumberInput, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, ProgressBar, Radio, RadioGroup, Row, type SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextInput, TimeInput, ToastContainer, Toggle, ToggleGroup, Tooltip, type UltravioletUITheme, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };

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

@@ -115,7 +115,7 @@ const Alert = _ref6 => {
           children: [title ? jsx(Text, {
             variant: "bodyStronger",
             as: "span",
-            color: sentiment,
+            sentiment: sentiment,
             children: title
           }) : null, typeof children === 'string' ? jsx(Text, {
             variant: "body",

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

@@ -7,15 +7,6 @@ import capitalize from '../../utils/capitalize.js';
 import { Text } from '../Text/index.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
-const StyledText = /*#__PURE__*/_styled(Text, {
-  target: "ej33bna1"
-})("text-transform:uppercase;font-size:", _ref => {
-  let {
-    fontSize
-  } = _ref;
-  return fontSize;
-}, "px;color:inherit;");
-
 // TODO: remove when typography has been created
 const TEXT_SIZES = {
   large: 14,
@@ -35,11 +26,11 @@ const PROMINENCES = {
 /**
  * Generate all styles available for badge based on prominence and sentiments
  */
-const generateStyles = _ref2 => {
+const generateStyles = _ref => {
   let {
     prominence,
     theme
-  } = _ref2;
+  } = _ref;
   const definedProminence = prominence === PROMINENCES.strong ? capitalize(PROMINENCES.strong) : '';
   const text = `text${definedProminence}`;
   const background = `background${definedProminence}`;
@@ -64,36 +55,41 @@ const generateStyles = _ref2 => {
     `
   };
 };
-const StyledSpan = /*#__PURE__*/_styled('span', {
-  shouldForwardProp: prop => !['sentiment', 'size'].includes(prop),
+const StyledSpan = /*#__PURE__*/_styled(Text, {
+  shouldForwardProp: prop => !['sentimentStyles', 'size', 'fontSize'].includes(prop),
   target: "ej33bna0"
-})("display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:", _ref3 => {
+})("display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:", _ref2 => {
   let {
     theme
-  } = _ref3;
+  } = _ref2;
   return theme.radii.xlarge;
-}, ";padding:0 ", _ref4 => {
+}, ";padding:0 ", _ref3 => {
   let {
     theme,
     size
-  } = _ref4;
+  } = _ref3;
   return size === SIZES.small ? theme.space['1'] : theme.space['2'];
-}, ";gap:", _ref5 => {
+}, ";gap:", _ref4 => {
   let {
     theme,
     size
-  } = _ref5;
+  } = _ref4;
   return size === SIZES.small ? theme.space['0.5'] : theme.space['1'];
-}, ";width:fit-content;height:", _ref6 => {
+}, ";width:fit-content;height:", _ref5 => {
   let {
     size
-  } = _ref6;
+  } = _ref5;
   return size;
-}, "px;", _ref7 => {
+}, "px;text-transform:uppercase;font-size:", _ref6 => {
+  let {
+    fontSize
+  } = _ref6;
+  return fontSize;
+}, "px;color:inherit;", _ref7 => {
   let {
-    sentiment
+    sentimentStyles
   } = _ref7;
-  return sentiment;
+  return sentimentStyles;
 }, ";");
 /**
  * Badge component is used to display a status or a label in a small container.
@@ -121,22 +117,19 @@ const Badge = _ref8 => {
   }), [prominence, theme]);
   const sizeValue = SIZES[size];
   return jsxs(StyledSpan, {
-    role: "status",
     "aria-label": ariaLabel,
-    sentiment: disabled ? generatedStyles['disabled'] : generatedStyles[sentiment],
+    sentimentStyles: disabled ? generatedStyles['disabled'] : generatedStyles[sentiment],
     size: sizeValue,
+    variant: "bodyStrong",
+    as: "span",
+    fontSize: TEXT_SIZES[size],
+    prominence: disabled ? 'weak' : 'default',
     className: className,
     "data-testid": dataTestId,
     children: [icon && sizeValue !== SIZES.small ? jsx(Icon, {
       name: icon,
       size: 16
-    }) : null, jsx(StyledText, {
-      variant: "bodyStrong",
-      as: "p",
-      fontSize: TEXT_SIZES[size],
-      prominence: disabled ? 'weak' : 'default',
-      children: children
-    })]
+    }) : null, children]
   });
 };
 

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

@@ -135,13 +135,13 @@ const Banner = _ref8 => {
         children: [jsx(Text, {
           as: "p",
           variant: size === 'medium' ? 'headingSmall' : 'bodyStronger',
-          color: variant === 'promotional' && theme !== 'light' ? 'neutral' : 'primary',
+          sentiment: variant === 'promotional' && theme !== 'light' ? 'neutral' : 'primary',
           prominence: variant === 'intro' ? 'default' : 'strong',
           children: title
         }), jsx(Text, {
           as: "p",
           variant: "body",
-          color: "neutral",
+          sentiment: "neutral",
           prominence: variant === 'intro' || variant === 'promotional' && theme !== 'light' ? 'default' : 'stronger',
           children: children
         })]

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

@@ -48,7 +48,7 @@ const BarChartToolTip = _ref5 => {
       children: [jsx(Text, {
         variant: "bodyStronger",
         as: "p",
-        color: "primary",
+        sentiment: "primary",
         children: formattedValue
       }), jsx(Text, {
         variant: "bodySmall",

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

@@ -231,6 +231,9 @@ const Button = /*#__PURE__*/forwardRef((_ref10, ref) => {
     isLoading = false,
     children,
     onClick,
+    onMouseDown,
+    onMouseUp,
+    onMouseOut,
     name,
     'aria-label': ariaLabel,
     'aria-current': ariaCurrent,
@@ -289,6 +292,9 @@ const Button = /*#__PURE__*/forwardRef((_ref10, ref) => {
         iconOnly: !!icon && !children,
         tabIndex: tabIndex,
         autoFocus: autoFocus,
+        onMouseDown: onMouseDown,
+        onMouseUp: onMouseUp,
+        onMouseOut: onMouseOut,
         children: content
       })
     });
@@ -318,6 +324,9 @@ const Button = /*#__PURE__*/forwardRef((_ref10, ref) => {
       iconOnly: !!icon && !children,
       tabIndex: tabIndex,
       autoFocus: autoFocus,
+      onMouseDown: onMouseDown,
+      onMouseUp: onMouseUp,
+      onMouseOut: onMouseOut,
       children: content
     })
   });

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

@@ -480,12 +480,12 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref64, ref) => {
           variant: "bodySmall",
           as: "p",
           prominence: "weak",
-          color: "neutral",
+          sentiment: "neutral",
           children: helper
         }) : null, error ? jsx(ErrorText, {
           variant: "bodySmall",
           as: "p",
-          color: "danger",
+          sentiment: "danger",
           children: error
         }) : null]
       })]

package/dist/src/components/LineChart/CustomLegend.js

@@ -117,7 +117,7 @@ const CustomLegend = _ref3 => {
                 children: [jsx(Text, {
                   as: "span",
                   variant: "bodySmall",
-                  color: "neutral",
+                  sentiment: "neutral",
                   children: row?.['label']
                 }), jsx("div", {
                   "data-testid": `label-${id}`,

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

@@ -40,13 +40,13 @@ const LineChartTooltip = _ref5 => {
     }), jsxs("div", {
       children: [jsx(Text, {
         variant: "bodyStronger",
-        color: "neutral",
+        sentiment: "neutral",
         prominence: "stronger",
         as: "div",
         children: point.data.yFormatted
       }), jsx(Text, {
         variant: "bodySmall",
-        color: "neutral",
+        sentiment: "neutral",
         prominence: "stronger",
         as: "div",
         children: point.data.xFormatted

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

@@ -119,7 +119,7 @@ const Link = /*#__PURE__*/forwardRef((_ref9, ref) => {
   const usedRef = ref ?? elementRef;
   const finalStringChildren = recursivelyGetChildrenString(children);
   useEffect(() => {
-    if (oneLine && usedRef && usedRef.current) {
+    if (oneLine && usedRef?.current) {
       const {
         offsetWidth,
         scrollWidth

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

@@ -145,6 +145,7 @@ const FwdMenu = /*#__PURE__*/forwardRef((_ref9, ref) => {
  * A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a
  * sub menu, or by invoking a command, such as `Shift + F10` on Windows, that opens a context specific menu.
  * When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.
+ * @deprecated use MenuV2 component instead
  */
 const Menu = /*#__PURE__*/Object.assign(FwdMenu, {
   Item

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

@@ -0,0 +1,122 @@
+import _styled from '@emotion/styled/base';
+import { forwardRef } from 'react';
+import { Tooltip } from '../Tooltip/index.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const itemCoreStyle = _ref => {
+  let {
+    theme,
+    borderless,
+    sentiment,
+    disabled
+  } = _ref;
+  return `
+  display: inline-block;
+  font-size: ${theme.typography.bodySmall.fontSize};
+  line-height: ${theme.typography.bodySmall.lineHeight};
+  font-weight: inherit;
+  padding: ${`${theme.space['0.5']} ${theme.space['1']}`};
+  border: none;
+  ${borderless ? '' : `border-bottom: 1px solid ${theme.colors.neutral.border};`}
+  cursor: pointer;
+  min-width: 110px;
+
+  color: ${theme.colors[sentiment][disabled ? 'textDisabled' : 'text']};
+  svg {
+    fill: ${theme.colors[sentiment][disabled ? 'textDisabled' : 'text']};
+  }
+
+  ${disabled ? `
+        cursor: not-allowed;
+      ` : `
+          &:hover,
+          &:focus {
+            color: ${theme.colors[sentiment].textHover};
+            svg {
+              fill: ${theme.colors[sentiment].textHover};
+            }
+          }`}
+  `;
+};
+const StyledItem = /*#__PURE__*/_styled('button', {
+  shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
+  target: "ei26g5y1"
+})(_ref2 => {
+  let {
+    theme,
+    borderless,
+    sentiment,
+    disabled
+  } = _ref2;
+  return itemCoreStyle({
+    theme,
+    borderless,
+    sentiment,
+    disabled
+  });
+}, " background:none;");
+const StyledLinkItem = /*#__PURE__*/_styled('a', {
+  shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
+  target: "ei26g5y0"
+})(_ref3 => {
+  let {
+    theme,
+    borderless,
+    sentiment,
+    disabled
+  } = _ref3;
+  return itemCoreStyle({
+    theme,
+    borderless,
+    sentiment,
+    disabled
+  });
+}, " text-decoration:none;&:focus{text-decoration:none;}");
+const Item = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  let {
+    borderless = false,
+    disabled = false,
+    onClick,
+    sentiment = 'neutral',
+    href,
+    children,
+    tooltip,
+    className,
+    'data-testid': dataTestId
+  } = _ref4;
+  if (href && !disabled) {
+    return jsx(Tooltip, {
+      text: tooltip,
+      children: jsx(StyledLinkItem, {
+        borderless: true,
+        href: href,
+        ref: ref,
+        onClick: disabled ? undefined : onClick,
+        role: "menuitem",
+        disabled: disabled,
+        sentiment: sentiment,
+        className: className,
+        "data-testid": dataTestId,
+        children: children
+      })
+    });
+  }
+  return jsx(Tooltip, {
+    text: tooltip,
+    children: jsx(StyledItem, {
+      type: "button",
+      ref: ref,
+      role: "menuitem",
+      disabled: disabled,
+      onClick: onClick,
+      borderless: borderless,
+      sentiment: sentiment,
+      className: className,
+      "data-testid": dataTestId,
+      children: children
+    })
+  });
+});
+var Item$1 = Item;
+
+export { Item$1 as default };

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

@@ -0,0 +1,126 @@
+import _styled from '@emotion/styled/base';
+import { forwardRef, useState, useRef, useId, isValidElement, useImperativeHandle, cloneElement } from 'react';
+import { Stack } from '../Stack/index.js';
+import Item from './Item.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Popup } from '../../internalComponents/Popup/index.js';
+
+const StyledPopup = /*#__PURE__*/_styled(Popup, {
+  target: "e1jn11gg1"
+})("background-color:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.background;
+}, ";box-shadow:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.shadows.menu;
+}, ";padding:0;&[data-has-arrow='true']{&::after{border-color:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral.background;
+}, " transparent transparent transparent;}}");
+const MenuList = /*#__PURE__*/_styled(Stack, {
+  target: "e1jn11gg0"
+})("&:after,&:before{border:solid transparent;border-width:9px;content:' ';height:0;width:0;position:absolute;pointer-events:none;}&:after{border-color:transparent;}&:before{border-color:transparent;}background-color:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.neutral.backgroundWeakElevated;
+}, ";color:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral.text;
+}, ";border-radius:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.radii.default;
+}, ";position:relative;");
+const FwdMenu = /*#__PURE__*/forwardRef((_ref7, ref) => {
+  let {
+    id,
+    ariaLabel = 'Menu',
+    children,
+    disclosure,
+    hasArrow = true,
+    placement = 'bottom',
+    visible = false,
+    className,
+    'data-testid': dataTestId
+  } = _ref7;
+  const [isVisible, setIsVisible] = useState(visible);
+  const popupRef = useRef(null);
+  const disclosureRef = useRef(null);
+  const tempId = useId();
+  const finalId = `menu-${id ?? tempId}`;
+
+  // if you need dialog inside your component, use function, otherwise component is fine
+  const target = /*#__PURE__*/isValidElement(disclosure) ? disclosure : disclosure({
+    visible: isVisible
+  });
+  const innerRef = useRef(target);
+  useImperativeHandle(ref, () => innerRef.current);
+  const toggleVisible = () => {
+    setIsVisible(!isVisible);
+
+    // Focus the first item when the menu is opened
+    if (!isVisible) {
+      requestIdleCallback(() => {
+        // 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();
+        }
+      });
+    }
+  };
+  const onClose = () => {
+    setIsVisible(false);
+
+    // Focus the disclosure when the menu is closed
+    disclosureRef.current?.focus();
+  };
+  const finalDisclosure = /*#__PURE__*/cloneElement(target, {
+    onClick: toggleVisible,
+    'aria-haspopup': 'dialog',
+    'aria-expanded': isVisible,
+    // @ts-expect-error not sure how to fix this
+    ref: disclosureRef
+  });
+  return jsx(StyledPopup, {
+    "aria-label": ariaLabel,
+    className: className,
+    visible: isVisible,
+    placement: placement,
+    hasArrow: hasArrow,
+    "data-has-arrow": hasArrow,
+    role: "dialog",
+    id: finalId,
+    ref: popupRef,
+    onClose: onClose,
+    tabIndex: -1,
+    text: jsx(MenuList, {
+      "data-testid": dataTestId,
+      className: className,
+      role: "menu",
+      children: children
+    }),
+    children: finalDisclosure
+  });
+});
+
+/**
+ * A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
+ * A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a
+ * sub menu, or by invoking a command, such as `Shift + F10` on Windows, that opens a context specific menu.
+ * When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.
+ */
+const MenuV2 = /*#__PURE__*/Object.assign(FwdMenu, {
+  Item
+});
+
+export { MenuV2 };

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

@@ -56,7 +56,7 @@ const Modal = _ref3 => {
     } else {
       const promise = onBeforeClose?.();
       if (promise && 'catch' in promise) {
-        promise.catch(undefined);
+        promise.catch(() => null);
       }
       setVisible(false);
     }

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

@@ -1,35 +1,39 @@
+import _styled from '@emotion/styled/base';
 import { Icon } from '@ultraviolet/icons';
-import { Stack } from '../Stack/index.js';
 import { Text } from '../Text/index.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
+const StyledSpan = /*#__PURE__*/_styled(Text, {
+  target: "e19pqvs30"
+})("display:flex;align-items:center;gap:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['1'];
+}, ";");
+
 /**
  * A Notice is used to display a short message to the user.
  */
-const Notice = _ref => {
+const Notice = _ref2 => {
   let {
     children,
     className,
     'data-testid': dataTestId
-  } = _ref;
-  return jsxs(Stack, {
-    direction: "row",
-    alignItems: "center",
-    gap: 1,
+  } = _ref2;
+  return jsxs(StyledSpan, {
+    as: "span",
+    variant: "caption",
+    sentiment: "neutral",
+    prominence: "weak",
     "data-testid": dataTestId,
     className: className,
     children: [jsx(Icon, {
       name: "information-outline",
-      size: 20,
+      size: 16,
       color: "neutral",
       prominence: "weak"
-    }), typeof children === 'string' ? jsx(Text, {
-      as: "p",
-      variant: "caption",
-      color: "neutral",
-      prominence: "weak",
-      children: children
-    }) : children]
+    }), children]
   });
 };
 

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

@@ -359,7 +359,7 @@ const NumberInput = _ref21 => {
       }), typeof error === 'string' ? jsx(Text, {
         as: "span",
         variant: "bodySmall",
-        color: "danger",
+        sentiment: "danger",
         prominence: "weak",
         children: error
       }) : null]

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

@@ -88,7 +88,7 @@ const PasswordStrengthMeter = _ref7 => {
   useEffect(() => {
     setBackgroundColor(strength[score].color);
     handleChange(score);
-    getScore(password).then(s => setScore(s)).catch(null);
+    getScore(password).then(s => setScore(s)).catch(() => null);
     const toValue = (score + 1) / strength.length * 100;
     setWidth(`${toValue}%`);
   }, [getScore, handleChange, password, score, strength]);

package/dist/src/components/Table/HeaderRow.js

@@ -3,7 +3,6 @@ import { HeaderCell } from './HeaderCell.js';
 import { useTableContext } from './TableContext.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
-const SELECT_CHECKBOX_SIZE = 24;
 const HeaderRow = _ref => {
   let {
     children,
@@ -18,18 +17,17 @@ const HeaderRow = _ref => {
   const selectableRowCount = Object.keys(selectedRowIds).length;
   return jsxs("tr", {
     children: [hasSelectAllColumn ? jsx(HeaderCell, {
-      width: `${SELECT_CHECKBOX_SIZE}px`,
+      width: "24px",
       children: jsx(Checkbox, {
         name: "table-select-all-checkbox",
         value: "all",
         "aria-label": "select all",
         checked: allRowSelectValue,
         onChange: allRowSelectValue === false ? selectAll : unselectAll,
-        disabled: selectableRowCount === 0,
-        size: SELECT_CHECKBOX_SIZE
+        disabled: selectableRowCount === 0
       })
     }) : null, children]
   });
 };
 
-export { HeaderRow, SELECT_CHECKBOX_SIZE };
+export { HeaderRow };

package/dist/src/components/Table/Row.js

@@ -3,7 +3,6 @@ import { useEffect } from 'react';
 import { Checkbox } from '../Checkbox/index.js';
 import { Tooltip } from '../Tooltip/index.js';
 import { Cell } from './Cell.js';
-import { SELECT_CHECKBOX_SIZE } from './HeaderRow.js';
 import { useTableContext } from './TableContext.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
@@ -58,8 +57,7 @@ const Row = _ref2 => {
                 selectRow(id);
               }
             },
-            disabled: selectDisabled !== undefined,
-            size: SELECT_CHECKBOX_SIZE
+            disabled: selectDisabled !== undefined
           })
         })
       })

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

@@ -82,7 +82,7 @@ const Text = _ref2 => {
   const elementRef = useRef(null);
   const finalStringChildren = recursivelyGetChildrenString(children);
   useEffect(() => {
-    if (oneLine && elementRef && elementRef.current) {
+    if (oneLine && elementRef?.current) {
       const {
         offsetWidth,
         scrollWidth

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

@@ -149,7 +149,7 @@ const StyledNotice = /*#__PURE__*/_styled(Notice, {
   let {
     theme
   } = _ref13;
-  return theme.space['1'];
+  return theme.space['0.5'];
 }, ";");
 const StyledInput = /*#__PURE__*/_styled('input', {
   shouldForwardProp: prop => !['as', 'error', 'fillAvailable', 'hasLabel', 'isPlaceholderVisible', 'multiline', 'resizable', 'inputSize', 'paddingRightFactor'].includes(prop),

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

@@ -50,34 +50,34 @@ const CloseButton = _ref3 => {
 };
 const Content = _ref4 => {
   let {
-    variant,
+    sentiment,
     children
   } = _ref4;
   return jsxs(Stack, {
     gap: 2,
     direction: "row",
     children: [jsx(Icon, {
-      name: TOAST_ICONS[variant],
+      name: TOAST_ICONS[sentiment],
       size: 24
     }), jsx(Text, {
       variant: "body",
       as: "span",
-      color: variant,
+      sentiment: sentiment,
       children: children
     })]
   });
 };
 const toast = {
   error: (children, options) => toast$1.error(jsx(Content, {
-    variant: "danger",
+    sentiment: "danger",
     children: children
   }), options),
   info: (children, options) => toast$1.info(jsx(Content, {
-    variant: "info",
+    sentiment: "info",
     children: children
   }), options),
   success: (children, options) => toast$1.success(jsx(Content, {
-    variant: "success",
+    sentiment: "success",
     children: children
   }), options)
 };

package/dist/src/index.js

@@ -65,3 +65,4 @@ export { Tooltip } from './components/Tooltip/index.js';
 export { VerificationCode } from './components/VerificationCode/index.js';
 export { RadioGroup } from './components/RadioGroup/index.js';
 export { Icon } from '@ultraviolet/icons';
+export { MenuV2 } from './components/MenuV2/index.js';

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

@@ -119,6 +119,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
     'data-testid': dataTestId,
     hasArrow = true,
     onClose,
+    tabIndex = 0,
     onKeyDown,
     'aria-haspopup': ariaHasPopup
   } = _ref13;
@@ -291,7 +292,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
       onPointerEnter: !isControlled ? onPointerEvent(true) : noop,
       onPointerLeave: !isControlled ? onPointerEvent(false) : noop,
       ref: childrenRef,
-      tabIndex: 0,
+      tabIndex: tabIndex,
       onKeyDown: event => {
         onKeyDown?.(event);
         onLocalKeyDown(event);
@@ -300,7 +301,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
       "aria-haspopup": ariaHasPopup,
       children: children
     });
-  }, [ariaHasPopup, children, containerFullWidth, generatedId, isControlled, onKeyDown, onLocalKeyDown, onPointerEvent]);
+  }, [ariaHasPopup, children, containerFullWidth, generatedId, isControlled, onKeyDown, onLocalKeyDown, onPointerEvent, tabIndex]);
   if (!text) {
     if (typeof children === 'function') return null;
     return jsx(Fragment, {

package/dist/src/theme/index.js

@@ -2,6 +2,10 @@ import { consoleLightTheme } from '@ultraviolet/themes';
 export { consoleDarkTheme as darkTheme, consoleLightTheme as default } from '@ultraviolet/themes';
 import deepmerge from 'deepmerge';
 
+/**
+ * @deprecated use UltravioletUITheme instead
+ */
+
 const {
   colors,
   shadows,
@@ -12,8 +16,8 @@ const {
 } = consoleLightTheme;
 /**
  * Will extend theme with new theme properties
- * @param {SCWUITheme} baseTheme the theme you want to extend from, by default it is set to light theme
- * @param {RecursivePartial<SCWUITheme>} extendedTheme the properties of a new theme you want to apply from baseTheme
+ * @param {UltravioletUITheme} baseTheme the theme you want to extend from, by default it is set to light theme
+ * @param {RecursivePartial<UltravioletUITheme>} extendedTheme the properties of a new theme you want to apply from baseTheme
  */
 const extendTheme = extendedTheme => deepmerge(consoleLightTheme, extendedTheme);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.15.1",
+  "version": "1.17.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -39,11 +39,11 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.22.17",
+    "@babel/core": "7.22.20",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@types/react": "18.2.21",
+    "@types/react": "18.2.22",
     "@types/react-datepicker": "4.15.0",
     "@types/react-dom": "18.2.7",
     "react": "18.2.0",
@@ -60,14 +60,13 @@
     "@scaleway/random-name": "4.0.2",
     "@scaleway/use-media": "2.0.1",
     "deepmerge": "4.3.1",
-    "prop-types": "15.8.1",
-    "react-datepicker": "4.17.0",
+    "react-datepicker": "4.18.0",
     "react-flatten-children": "1.1.2",
-    "react-select": "5.7.4",
+    "react-select": "5.7.5",
     "react-toastify": "9.1.3",
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.2.1",
-    "@ultraviolet/icons": "2.0.2"
+    "@ultraviolet/icons": "2.1.0"
   }
 }