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

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.4",
+        "@lumx/icons": "^3.11.1-alpha.4",
         "@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.4"
 }

package/src/components/button/Button.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
@@ -21,14 +21,14 @@ export const ButtonEmphasis = Emphasis;
  * Defines the props of the component.
  */
 export interface ButtonProps extends BaseButtonProps {
-    /** Button content. */
-    children?: ReactNode;
     /** Left icon (SVG path). */
     leftIcon?: string;
     /** Right icon (SVG path). */
     rightIcon?: string;
     /** When `true`, the button gets as large as possible. */
     fullWidth?: boolean;
+    /** Children */
+    children?: React.ReactNode;
 }
 
 /**

package/src/components/button/ButtonRoot.tsx

@@ -44,8 +44,6 @@ export interface BaseButtonProps
     type?: HTMLButtonProps['type'];
     /** Custom react component for the link (can be used to inject react router Link). */
     linkAs?: 'a' | any;
-    /** Children */
-    children?: React.ReactNode;
 }
 
 export interface ButtonRootProps extends BaseButtonProps {

package/src/components/popover/Popover.stories.tsx

@@ -16,7 +16,6 @@ import {
     Elevation,
     Message,
     FlexBox,
-    FlexBoxProps,
     IconButtonProps,
 } from '@lumx/react';
 import range from 'lodash/range';
@@ -165,28 +164,25 @@ export const TestUpdatingChildrenAndMovingAnchor = {
 
         const [text, setText] = useState('Initial large span of text');
         const [anchorSize, setAnchorSize] = useState<IconButtonProps['size']>('m');
-        const [anchorPosition, setAnchorPosition] = useState<FlexBoxProps['vAlign']>('center');
         useEffect(() => {
             if (isOpen) {
                 const timers = [
+                    // Update popover size
                     setTimeout(() => setText('Text'), 1000),
-                    setTimeout(() => setAnchorSize('s'), 1500),
-                    setTimeout(() => setAnchorPosition('left'), 2000),
+                    // Update anchor size
+                    setTimeout(() => setAnchorSize('s'), 1000),
                 ];
                 return () => timers.forEach(clearTimeout);
             }
             setText('Initial large span of text');
             setAnchorSize('m');
-            setAnchorPosition('center');
             return undefined;
         }, [isOpen]);
 
         return (
             <FlexBox orientation="vertical" gap="huge">
-                <Message kind="info">
-                    Test popover text resize (after 1sec), anchor resize (after 1.5sec) and anchor move (after 2sec)
-                </Message>
-                <FlexBox orientation="horizontal" vAlign={anchorPosition}>
+                <Message kind="info">Test popover text resize (after 1sec) and anchor resize (after 1.5sec)</Message>
+                <FlexBox orientation="horizontal" vAlign="center">
                     <IconButton
                         label="Notifications"
                         className="lumx-spacing-margin-right-huge"

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

@@ -141,19 +141,10 @@ export function usePopoverStyle({
         if (!update || !popperElement || !anchorElement || !WINDOW?.ResizeObserver) {
             return undefined;
         }
-
-        // Only update once per frame
-        let frame: number | undefined;
-        function limitedUpdate() {
-            if (frame) return;
-            frame = requestAnimationFrame(() => {
-                update?.();
-                frame = undefined;
-            });
-        }
+        update();
 
         // On anchor or popover resize
-        const resizeObserver = new ResizeObserver(limitedUpdate);
+        const resizeObserver = new ResizeObserver(update);
         resizeObserver.observe(anchorElement);
         resizeObserver.observe(popperElement);
         return () => {
@@ -170,9 +161,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]);