fix(popover): fix improper first placment on React 18

Author: gcornut

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 -   `IconButton`: remove the children prop as it's not actually supported by the component
+-   `Popover`: fix improper first placement on React 18
 
 ## [3.11.0][] - 2025-02-05
 

packages/lumx-react/src/components/popover/Popover.tsx

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useFocus } from '@lumx/react/hooks/useFocus';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
-import { DOCUMENT } from '@lumx/react/constants';
+import { DOCUMENT, VISUALLY_HIDDEN } from '@lumx/react/constants';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
@@ -168,6 +168,8 @@ const _InnerPopover = forwardRef<PopoverProps, HTMLDivElement>((props, ref) => {
                           elevation: Math.min(elevation || 0, 5),
                           position,
                       }),
+                      // Do not show the popover while it's not properly placed
+                      !styles.popover?.transform ? VISUALLY_HIDDEN : undefined,
                   )}
                   style={styles.popover}
                   {...attributes.popper}

packages/lumx-react/src/components/popover/usePopoverStyle.tsx

@@ -103,7 +103,6 @@ export function usePopoverStyle({
     zIndex,
 }: Options): Output {
     const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);
-
     const [arrowElement, setArrowElement] = useState<null | HTMLElement>(null);
 
     const actualOffset: [number, number] = [offset?.along ?? 0, (offset?.away ?? 0) + (hasArrow ? ARROW_SIZE : 0)];
@@ -152,6 +151,7 @@ export function usePopoverStyle({
 
         return newStyles;
     }, [style, styles.popper, zIndex, fitWithinViewportHeight]);
+
     return {
         styles: { arrow: styles.arrow, popover: popoverStyle },
         attributes,