@ultraviolet/ui 1.15.1 → 1.16.0

package/dist/index.d.ts

@@ -1414,7 +1414,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 +1426,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 +1442,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 +1723,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 +1759,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: {
@@ -2592,6 +2594,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 +2674,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, 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/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/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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.15.1",
+  "version": "1.16.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.22.17",
+    "@babel/core": "7.22.19",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.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-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.0.3"
   }
 }