@lumx/react 3.9.2-alpha.7 → 3.9.2-alpha.9

package/package.json

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

package/src/components/popover/Popover.tsx

@@ -15,7 +15,7 @@ import { skipRender } from '@lumx/react/utils/skipRender';
 
 import { useRestoreFocusOnClose } from './useRestoreFocusOnClose';
 import { usePopoverStyle } from './usePopoverStyle';
-import { Elevation, FitAnchorWidth, Offset, Placement } from './constants';
+import { Elevation, FitAnchorWidth, Offset, Placement, POPOVER_ZINDEX } from './constants';
 
 /**
  * Defines the props of the component.
@@ -88,7 +88,7 @@ const DEFAULT_PROPS: Partial<PopoverProps> = {
     placement: Placement.AUTO,
     focusAnchorOnClose: true,
     usePortal: true,
-    zIndex: 9999,
+    zIndex: POPOVER_ZINDEX,
 };
 
 /** Method to render the popover inside a portal if usePortal is true */

package/src/components/popover/constants.ts

@@ -55,3 +55,8 @@ export type FitAnchorWidth = ValueOf<typeof FitAnchorWidth>;
  * Arrow size (in pixel).
  */
 export const ARROW_SIZE = 14;
+
+/**
+ * Popover default z-index
+ */
+export const POPOVER_ZINDEX = 9999;

package/src/components/tooltip/Tooltip.tsx

@@ -13,7 +13,7 @@ import { TooltipContextProvider } from '@lumx/react/components/tooltip/context';
 import { useId } from '@lumx/react/hooks/useId';
 import { usePopper } from '@lumx/react/hooks/usePopper';
 
-import { ARIA_LINK_MODES } from '@lumx/react/components/tooltip/constants';
+import { ARIA_LINK_MODES, TOOLTIP_ZINDEX } from '@lumx/react/components/tooltip/constants';
 import { useInjectTooltipRef } from './useInjectTooltipRef';
 import { useTooltipOpen } from './useTooltipOpen';
 
@@ -55,6 +55,7 @@ const DEFAULT_PROPS: Partial<TooltipProps> = {
     placement: Placement.BOTTOM,
     closeMode: 'unmount',
     ariaLinkMode: 'aria-describedby',
+    zIndex: TOOLTIP_ZINDEX,
 };
 
 /**
@@ -70,8 +71,18 @@ const ARROW_SIZE = 8;
  * @return React element.
  */
 export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { label, children, className, delay, placement, forceOpen, closeMode, ariaLinkMode, ...forwardedProps } =
-        props;
+    const {
+        label,
+        children,
+        className,
+        delay,
+        placement,
+        forceOpen,
+        closeMode,
+        ariaLinkMode,
+        zIndex,
+        ...forwardedProps
+    } = props;
     // Disable in SSR.
     if (!DOCUMENT) {
         return <>{children}</>;
@@ -81,7 +92,7 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
 
     const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);
     const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);
-    const { styles, attributes } = usePopper(anchorElement, popperElement, {
+    const { styles, attributes, update } = usePopper(anchorElement, popperElement, {
         placement,
         modifiers: [
             {
@@ -104,6 +115,11 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
         ariaLinkMode: ariaLinkMode as any,
     });
 
+    // Update on open
+    React.useEffect(() => {
+        if (isOpen) update?.();
+    }, [isOpen, update]);
+
     const labelLines = label ? label.split('\n') : [];
 
     const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);
@@ -126,7 +142,7 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
                                 hidden: !isOpen && closeMode === 'hide',
                             }),
                         )}
-                        style={styles.popper}
+                        style={{ ...styles.popper, zIndex }}
                         {...attributes.popper}
                     >
                         <div className={`${CLASSNAME}__arrow`} />

package/src/components/tooltip/constants.ts

@@ -1 +1,8 @@
+import { POPOVER_ZINDEX } from '../popover/constants';
+
 export const ARIA_LINK_MODES = ['aria-describedby', 'aria-labelledby'] as const;
+
+/**
+ * Make sure tooltip appear above popovers.
+ */
+export const TOOLTIP_ZINDEX = POPOVER_ZINDEX + 1;

package/src/stories/generated/TextField/Demos.stories.tsx

@@ -10,6 +10,7 @@ export { App as Disabled } from './disabled';
 export { App as Helper } from './helper';
 export { App as Icon } from './icon';
 export { App as Invalid } from './invalid';
+export { App as Number } from './number';
 export { App as Placeholder } from './placeholder';
 export { App as Required } from './required';
 export { App as TextAreaInvalid } from './text-area-invalid';