@lumx/react 3.11.3-alpha.0 → 3.11.3-alpha.2

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.11.3-alpha.0",
-        "@lumx/icons": "^3.11.3-alpha.0",
+        "@lumx/core": "^3.11.3-alpha.2",
+        "@lumx/icons": "^3.11.3-alpha.2",
         "@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.3-alpha.0"
+    "version": "3.11.3-alpha.2"
 }

package/src/components/popover/usePopoverStyle.tsx

@@ -141,10 +141,18 @@ export function usePopoverStyle({
         if (!update || !popperElement || !anchorElement || !WINDOW?.ResizeObserver) {
             return undefined;
         }
-        update();
+        let running: ReturnType<typeof setTimeout> | undefined;
+        function updateRateLimited() {
+            if (running) return;
+            update?.();
+            running = setTimeout(() => {
+                running = undefined;
+            }, 100);
+        }
+        updateRateLimited();
 
         // On anchor or popover resize
-        const resizeObserver = new ResizeObserver(update);
+        const resizeObserver = new ResizeObserver(updateRateLimited);
         resizeObserver.observe(anchorElement);
         resizeObserver.observe(popperElement);
         return () => {

package/src/components/tooltip/Tooltip.test.tsx

@@ -144,6 +144,8 @@ describe(`<${Tooltip.displayName}>`, () => {
                 });
                 expect(tooltip).toBeInTheDocument();
                 expect(tooltip).toHaveClass(VISUALLY_HIDDEN);
+                // Popper styles should not be applied when closed.
+                expect(tooltip?.style?.transform).toBe('');
 
                 const anchor = screen.getByRole('button', { name: 'Anchor' });
                 await userEvent.hover(anchor);

package/src/hooks/usePopper.ts

@@ -3,7 +3,10 @@ import { IS_BROWSER } from '@lumx/react/constants';
 
 /** Stub usePopper for use outside of browsers */
 const useStubPopper: typeof usePopperHook = (_a, _p, { placement }: any) =>
-    ({ attributes: { popper: { 'data-popper-placement': placement } }, styles: {} }) as any;
+    ({
+        attributes: { popper: { 'data-popper-placement': placement } },
+        styles: { popper: { transform: 'translate(1, 1)' } },
+    }) as any;
 
 /** Switch hook implementation between environment */
 export const usePopper: typeof usePopperHook = IS_BROWSER ? usePopperHook : useStubPopper;