@ultraviolet/ui 1.51.0 → 1.51.1

package/dist/index.d.ts

@@ -1334,7 +1334,7 @@ type AvatarProps = {
 declare const Avatar: ({ image, size, text, textBgColor, textColor, textSize, lock, className, "data-testid": dataTestId, }: AvatarProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type IconName$1 = ComponentProps<typeof Icon>['name'];
-declare const SIZES$1: {
+declare const SIZES: {
     large: number;
     medium: number;
     small: number;
@@ -1345,7 +1345,7 @@ declare const PROMINENCES$3: {
 };
 type BadgeProps = {
     sentiment?: Color;
-    size?: keyof typeof SIZES$1;
+    size?: keyof typeof SIZES;
     prominence?: keyof typeof PROMINENCES$3;
     /**
      * Defines icon to display on left side of badge. **Only available on medium and large sizes**.
@@ -2034,7 +2034,7 @@ declare const arrowPlacementStyles: {
     readonly 'top-start': (theme: Theme) => _emotion_react.SerializedStyles;
 };
 type ArrowPlacement = keyof typeof arrowPlacementStyles;
-type MenuProps$1 = {
+type MenuProps = {
     ariaLabel?: string;
     id?: string;
     placement?: ArrowPlacement;
@@ -2052,7 +2052,7 @@ type MenuProps$1 = {
  * 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$1 & react.RefAttributes<HTMLButtonElement>> & {
+declare const Menu: react.ForwardRefExoticComponent<MenuProps & react.RefAttributes<HTMLButtonElement>> & {
     Item: react.ForwardRefExoticComponent<{
         href?: string | undefined;
         disabled?: boolean | undefined;
@@ -2358,7 +2358,8 @@ declare const Popover: react.ForwardRefExoticComponent<{
     maxHeight?: string | number | undefined;
     disableAnimation?: boolean | undefined;
     portalTarget?: HTMLElement | undefined;
-} & react.RefAttributes<HTMLDivElement>, "placement"> & react.RefAttributes<HTMLDivElement>>;
+    dynamicDomRendering?: boolean | undefined;
+} & react.RefAttributes<HTMLDivElement>, "placement" | "dynamicDomRendering"> & react.RefAttributes<HTMLDivElement>>;
 
 type PopupProps = {
     /**
@@ -2418,6 +2419,12 @@ type PopupProps = {
      * behavior by setting a portalTarget prop.
      */
     portalTarget?: HTMLElement;
+    /**
+     * If you set this to true, the popup will be rendered in the DOM only when it is visible.
+     * When set to false, the popup will always be rendered in the DOM. By default this value is set to `true`, if for some
+     * reason you need to disable it, you can set it to `false`.
+     */
+    dynamicDomRendering?: boolean;
 };
 /**
  * @experimental This component is experimental and may be subject to breaking changes in the future.
@@ -3364,11 +3371,6 @@ 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;
 };
 
-declare const SIZES: {
-    small: string;
-    medium: string;
-    large: string;
-};
 type DisclosureProps = {
     visible: boolean;
 };
@@ -3378,40 +3380,68 @@ type DisclosureElement = ((disclosure: DisclosureProps) => ReactElement<ButtonHT
 type ChildMenuProps = {
     toggle: () => void;
 };
-type MenuProps = {
-    id?: string;
-    ariaLabel?: string;
-    placement?: ComponentProps<typeof Popup>['placement'];
+/**
+ * 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<{
+    id?: string | undefined;
+    ariaLabel?: string | undefined;
     children?: ReactNode | (({ toggle }: ChildMenuProps) => ReactNode);
-    className?: string;
+    className?: string | undefined;
     disclosure: DisclosureElement;
-    hasArrow?: boolean;
-    visible?: boolean;
-    'data-testid'?: string;
-    maxHeight?: string;
+    hasArrow?: boolean | undefined;
+    visible?: boolean | undefined;
+    'data-testid'?: string | undefined;
+    maxHeight?: string | undefined;
     /**
      * @deprecated: use `size` instead
      */
-    maxWidth?: string;
+    maxWidth?: 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;
-    size?: keyof typeof SIZES;
+    portalTarget?: HTMLElement | undefined;
+    size?: "large" | "small" | "medium" | undefined;
     /**
      * The behavior of the menu when it is opened. If set to `click`, the menu will open when the user clicks on the disclosure.
      * If set to `hover`, the menu will open when the user hovers over the disclosure.
      */
-    triggerMethod?: 'click' | 'hover';
-};
-/**
- * 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>> & {
+    triggerMethod?: "click" | "hover" | undefined;
+} & Pick<{
+    id?: string | undefined;
+    children: ReactNode | ((renderProps: {
+        className?: string | undefined;
+        onBlur: () => void;
+        onFocus: () => void;
+        onPointerEnter: () => void;
+        onPointerLeave: () => void;
+        ref: react.RefObject<HTMLDivElement>;
+    }) => ReactNode);
+    maxWidth?: string | number | undefined;
+    placement?: PopupPlacement | undefined;
+    text?: ReactNode;
+    className?: string | undefined;
+    containerFullWidth?: boolean | undefined;
+    visible?: boolean | undefined;
+    innerRef?: Ref<HTMLDivElement | null> | undefined;
+    role?: string | undefined;
+    'data-testid'?: string | undefined;
+    hasArrow?: boolean | undefined;
+    onClose?: (() => void) | undefined;
+    tabIndex?: number | undefined;
+    onKeyDown?: react.KeyboardEventHandler | undefined;
+    'aria-haspopup'?: boolean | "menu" | "dialog" | "grid" | "listbox" | "tree" | "false" | "true" | undefined;
+    hideOnClickOutside?: boolean | undefined;
+    debounceDelay?: number | undefined;
+    maxHeight?: string | number | undefined;
+    disableAnimation?: boolean | undefined;
+    portalTarget?: HTMLElement | undefined;
+    dynamicDomRendering?: boolean | undefined;
+} & react.RefAttributes<HTMLDivElement>, "placement" | "dynamicDomRendering"> & react.RefAttributes<HTMLButtonElement>> & {
     Item: react.ForwardRefExoticComponent<{
         href?: string | undefined;
         disabled?: boolean | undefined;

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

@@ -48,7 +48,8 @@ const FwdMenu = /*#__PURE__*/forwardRef(({
   maxWidth,
   portalTarget,
   size = 'small',
-  triggerMethod = 'click'
+  triggerMethod = 'click',
+  dynamicDomRendering
 }, ref) => {
   const [isVisible, setIsVisible] = useState(visible);
   const popupRef = useRef(null);
@@ -98,6 +99,7 @@ const FwdMenu = /*#__PURE__*/forwardRef(({
       }) : children
     }),
     portalTarget: portalTarget,
+    dynamicDomRendering: dynamicDomRendering,
     children: finalDisclosure
   });
 });

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

@@ -101,7 +101,8 @@ const Popover = /*#__PURE__*/forwardRef(({
   maxWidth,
   maxHeight,
   'data-testid': dataTestId,
-  portalTarget
+  portalTarget,
+  dynamicDomRendering
 }, ref) => {
   const innerRef = useRef(null);
   const [localVisible, setLocalVisible] = useState(visible);
@@ -137,6 +138,7 @@ const Popover = /*#__PURE__*/forwardRef(({
     maxWidth: maxWidth,
     maxHeight: maxHeight,
     portalTarget: portalTarget,
+    dynamicDomRendering: dynamicDomRendering,
     children: children
   });
 });

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

@@ -2,13 +2,13 @@ const ARROW_WIDTH = 8; // in px
 const SPACE = 4; // in px
 const TOTAL_USED_SPACE = 0; // in px
 const DEFAULT_POSITIONS = {
-  arrowLeft: -999,
-  arrowTop: -999,
+  arrowLeft: 0,
+  arrowTop: 0,
   arrowTransform: 'translate(-50%, -50)',
   placement: 'top',
   rotate: 135,
-  popupInitialPosition: 'translate3d(-999px, -999px, 0)',
-  popupPosition: 'translate3d(-999px, -999px, 0)'
+  popupInitialPosition: 'translate3d(0px, 0px, 0)',
+  popupPosition: 'translate3d(0px, 0px, 0)'
 };
 /**
  * This function will find the best placement in a window for popup based on children position and popup size

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

@@ -28,7 +28,7 @@ const StyledPopup = /*#__PURE__*/_styled('div', {
   maxHeight
 }) => typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight, ";overflow:", ({
   maxHeight
-}) => maxHeight ? 'auto' : undefined, ";overflow-wrap:break-word;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;z-index:1;transform:", ({
+}) => maxHeight ? 'auto' : undefined, ";overflow-wrap:break-word;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;opacity:0;z-index:1;transform:", ({
   positions
 }) => positions.popupPosition, ";animation:", ({
   positions,
@@ -45,7 +45,7 @@ const StyledPopup = /*#__PURE__*/_styled('div', {
   positions
 }) => positions.rotate, "deg);margin-left:-", ARROW_WIDTH, "px;border-width:", ARROW_WIDTH, "px;border-style:solid;border-color:", ({
   theme
-}) => theme.colors.neutral.backgroundStronger, " transparent transparent transparent;pointer-events:none;}}");
+}) => theme.colors.neutral.backgroundStronger, " transparent transparent transparent;pointer-events:none;}}&[data-visible-in-dom='false']{display:none;}");
 const StyledChildrenContainer = /*#__PURE__*/_styled("div", {
   target: "e4h1g860"
 })(process.env.NODE_ENV === "production" ? {
@@ -80,7 +80,8 @@ const Popup = /*#__PURE__*/forwardRef(({
   hideOnClickOutside = false,
   debounceDelay = DEFAULT_DEBOUNCE_DURATION,
   disableAnimation = false,
-  portalTarget
+  portalTarget,
+  dynamicDomRendering = true
 }, ref) => {
   const childrenRef = useRef(null);
   useImperativeHandle(innerRef, () => childrenRef.current);
@@ -226,6 +227,15 @@ const Popup = /*#__PURE__*/forwardRef(({
     };
   }, [generatePopupPositions, onWindowChangeDetected, visibleInDom, maxWidth, popupPortalTarget]);
 
+  // This will be triggered when positions are computed and popup is visible in the dom.
+  useEffect(() => {
+    if (visibleInDom && innerPopupRef.current) {
+      innerPopupRef.current.style.opacity = '1';
+    }
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [positions]);
+
   /**
    * 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.
@@ -324,6 +334,15 @@ const Popup = /*#__PURE__*/forwardRef(({
       children: children
     });
   }, [ariaHasPopup, children, containerFullWidth, generatedId, isControlled, onKeyDown, onPointerEvent, tabIndex]);
+  const shouldRender = useMemo(() => {
+    if (!dynamicDomRendering) {
+      return true;
+    }
+    if (dynamicDomRendering && visibleInDom) {
+      return true;
+    }
+    return false;
+  }, [dynamicDomRendering, visibleInDom]);
   if (!text) {
     if (typeof children === 'function') return null;
     return jsx(Fragment, {
@@ -338,7 +357,7 @@ const Popup = /*#__PURE__*/forwardRef(({
     event.nativeEvent.stopImmediatePropagation();
   };
   return jsxs(Fragment, {
-    children: [renderChildren(), visibleInDom ? /*#__PURE__*/createPortal(jsx(StyledPopup, {
+    children: [renderChildren(), shouldRender ? /*#__PURE__*/createPortal(jsx(StyledPopup, {
       ref: innerPopupRef,
       positions: positions,
       maxWidth: maxWidth,
@@ -355,6 +374,7 @@ const Popup = /*#__PURE__*/forwardRef(({
       animationDuration: animationDuration,
       onKeyDown: role === 'dialog' ? handleFocusTrap : undefined,
       isDialog: role === 'dialog',
+      "data-visible-in-dom": !dynamicDomRendering ? visibleInDom : undefined,
       children: text
     }), popupPortalTarget) : null]
   });

package/dist/src/components/SelectInputV2/SearchBarDropdown.js

@@ -1,6 +1,6 @@
 import _styled from '@emotion/styled/base';
 import { Icon } from '@ultraviolet/icons';
-import { useRef, useEffect } from 'react';
+import { useRef } from 'react';
 import { TextInputV2 } from '../TextInputV2/index.js';
 import { useSelectInput } from './SelectInputProvider.js';
 import { jsx } from '@emotion/react/jsx-runtime';
@@ -99,13 +99,6 @@ const SearchBarDropdown = ({
       }
     }
   };
-  useEffect(() => {
-    // TODO: Remove me and use autoFocus when popup is fixed
-    // Explanation : Actually the component render at -999px -999px then it will be placed according to child position and it broke the autoFocus (scroll -999px to top)
-    setTimeout(() => {
-      searchInputRef.current?.focus();
-    }, 50);
-  }, []);
   return jsx(StyledInput, {
     value: searchInput,
     onChange: event => handleChange(event),
@@ -120,6 +113,7 @@ const SearchBarDropdown = ({
     }),
     onKeyDown: event => handleKeyDown(event.key, searchInput),
     size: "medium",
+    autoFocus: true,
     "aria-label": "search-bar",
     ref: searchInputRef
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.51.0",
+  "version": "1.51.1",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -35,19 +35,19 @@
   "peerDependencies": {
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@babel/core": "7.24.4",
+    "@babel/core": "7.24.5",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.1",
     "@types/react-datepicker": "4.19.6",
-    "@types/react-dom": "18.2.25",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "@types/react-dom": "18.3.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "dependencies": {
     "@emotion/serialize": "1.1.4",