@lumx/react 3.11.1-alpha.2 → 3.11.1-alpha.3

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.11.1-alpha.2",
-        "@lumx/icons": "^3.11.1-alpha.2",
+        "@lumx/core": "^3.11.1-alpha.3",
+        "@lumx/icons": "^3.11.1-alpha.3",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.11.1-alpha.2"
+    "version": "3.11.1-alpha.3"
 }

package/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';
@@ -167,6 +167,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}

package/src/components/popover/usePopoverStyle.tsx

@@ -170,9 +170,6 @@ export function usePopoverStyle({
             newStyles.maxHeight = WINDOW?.innerHeight || DOCUMENT?.documentElement.clientHeight;
         }
 
-        // Do not show the popover while it's not properly placed
-        if (!newStyles.transform) newStyles.opacity = 0;
-
         return newStyles;
     }, [style, styles.popper, zIndex, fitWithinViewportHeight]);