@lumx/react 3.11.2 → 3.11.3-alpha.1

package/package.json

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

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/components/tooltip/Tooltip.tsx

@@ -145,7 +145,7 @@ export const Tooltip = forwardRef<TooltipProps, HTMLDivElement>((props, ref) =>
                             }),
                             isHidden && VISUALLY_HIDDEN,
                         )}
-                        style={{ ...styles.popper, zIndex }}
+                        style={{ ...(isHidden ? undefined : styles.popper), zIndex }}
                         {...attributes.popper}
                     >
                         <div className={`${CLASSNAME}__arrow`} />

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;