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

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.9.2-alpha.6",
-        "@lumx/icons": "^3.9.2-alpha.6",
+        "@lumx/core": "^3.9.2-alpha.7",
+        "@lumx/icons": "^3.9.2-alpha.7",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -57,7 +57,7 @@
         "jest-environment-jsdom": "29.1.2",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "rollup": "2.26.10",
+        "rollup": "2.79.2",
         "rollup-plugin-analyzer": "^3.3.0",
         "rollup-plugin-babel": "^4.4.0",
         "rollup-plugin-cleaner": "^1.0.0",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.9.2-alpha.6"
+    "version": "3.9.2-alpha.7"
 }

package/src/components/image-lightbox/ImageLightbox.test.tsx

@@ -145,11 +145,18 @@ describe(`<${ImageLightbox.displayName}>`, () => {
 
             // Focus moved to the close button
             const imageLightbox = queries.getImageLightbox();
-            expect(queries.queryCloseButton(imageLightbox)).toHaveFocus();
+            const closeButton = queries.queryCloseButton(imageLightbox);
+            expect(closeButton).toHaveFocus();
+            const tooltip = screen.getByRole('tooltip', { name: 'Close' });
+            expect(tooltip).toBeInTheDocument();
 
             // Image lightbox opened on the correct image
             expect(queries.queryImage(imageLightbox, 'Image 2')).toBeInTheDocument();
 
+            // Close tooltip
+            await userEvent.keyboard('{escape}');
+            expect(tooltip).not.toBeInTheDocument();
+
             // Close on escape
             await userEvent.keyboard('{escape}');
             expect(imageLightbox).not.toBeInTheDocument();

package/src/components/image-lightbox/useImageLightbox.tsx

@@ -41,13 +41,12 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
     const propsRef = React.useRef(props);
 
     React.useEffect(() => {
-        const newProps = { ...props };
-        if (newProps?.images) {
-            newProps.images = newProps.images.map((image) => ({ imgRef: React.createRef(), ...image }));
-        }
-        propsRef.current = newProps;
+        propsRef.current = props;
     }, [props]);
 
+    // Keep reference for each image elements
+    const imageRefsRef = React.useRef<Array<React.RefObject<HTMLImageElement>>>([]);
+
     const currentImageRef = React.useRef<HTMLImageElement>(null);
     const [imageLightboxProps, setImageLightboxProps] = React.useState(
         () => ({ ...EMPTY_PROPS, ...props }) as ManagedProps & P,
@@ -61,8 +60,8 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
             if (!currentImage) {
                 return;
             }
-            const currentIndex = propsRef.current?.images?.findIndex(
-                ({ imgRef }) => (imgRef as any)?.current === currentImage,
+            const currentIndex = imageRefsRef.current.findIndex(
+                (imageRef) => imageRef.current === currentImage,
             ) as number;
 
             await startViewTransition({
@@ -83,12 +82,20 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
             // If we find an image inside the trigger, animate it in transition with the opening image
             const triggerImage = triggerImageRefs[activeImageIndex as any]?.current || findImage(triggerElement);
 
-            // Inject the trigger image as loading placeholder for better loading state
-            const imagesWithFallbackSize = propsRef.current?.images?.map((image, idx) => {
-                if (triggerImage && idx === activeImageIndex && !image.loadingPlaceholderImageRef) {
-                    return { ...image, loadingPlaceholderImageRef: { current: triggerImage } };
+            // Inject refs to improve transition and loading style
+            const images = propsRef.current?.images?.map((image, idx) => {
+                // Get or create image reference
+                let imgRef = imageRefsRef.current[idx];
+                if (!imgRef) {
+                    imgRef = React.createRef();
+                    imageRefsRef.current[idx] = imgRef;
                 }
-                return image;
+
+                // Try to use the trigger image as the loading placeholder
+                const loadingPlaceholderImageRef =
+                    triggerImage && idx === activeImageIndex ? { current: triggerImage } : undefined;
+
+                return { loadingPlaceholderImageRef, ...image, imgRef };
             });
 
             await startViewTransition({
@@ -104,7 +111,7 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
                             close();
                             prevProps?.onClose?.();
                         },
-                        images: imagesWithFallbackSize,
+                        images,
                         activeImageIndex: activeImageIndex || 0,
                     }));
                 },

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

@@ -2,8 +2,10 @@ import { Button, Dialog, Dropdown, Placement, Tooltip } from '@lumx/react';
 import React, { useState } from 'react';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { withChromaticForceScreenSize } from '@lumx/react/stories/decorators/withChromaticForceScreenSize';
+import { ARIA_LINK_MODES } from '@lumx/react/components/tooltip/constants';
 
 const placements = [Placement.TOP, Placement.BOTTOM, Placement.RIGHT, Placement.LEFT];
+const CLOSE_MODES = ['hide', 'unmount'];
 
 export default {
     title: 'LumX components/tooltip/Tooltip',
@@ -11,6 +13,9 @@ export default {
     args: Tooltip.defaultProps,
     argTypes: {
         placement: getSelectArgType(placements),
+        children: { control: false },
+        closeMode: { control: { type: 'inline-radio' }, options: CLOSE_MODES },
+        ariaLinkMode: { control: { type: 'inline-radio' }, options: ARIA_LINK_MODES },
     },
     decorators: [
         // Force minimum chromatic screen size to make sure the dialog appears in view.

package/src/components/tooltip/Tooltip.tsx

@@ -13,6 +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 { useInjectTooltipRef } from './useInjectTooltipRef';
 import { useTooltipOpen } from './useTooltipOpen';
 
@@ -34,7 +35,7 @@ export interface TooltipProps extends GenericProps, HasCloseMode {
     /** Placement of the tooltip relative to the anchor. */
     placement?: TooltipPlacement;
     /** Choose how the tooltip text should link to the anchor */
-    ariaLinkMode?: 'aria-describedby' | 'aria-labelledby';
+    ariaLinkMode?: (typeof ARIA_LINK_MODES)[number];
 }
 
 /**

package/src/components/tooltip/constants.ts

@@ -0,0 +1 @@
+export const ARIA_LINK_MODES = ['aria-describedby', 'aria-labelledby'] as const;

package/src/components/tooltip/useInjectTooltipRef.tsx

@@ -1,4 +1,4 @@
-import React, { AriaAttributes, cloneElement, ReactNode, useMemo } from 'react';
+import React, { cloneElement, ReactNode, useMemo } from 'react';
 
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 

package/src/utils/type.ts

@@ -59,7 +59,6 @@ export interface HasClassName {
     className?: string;
 }
 
-
 export interface HasCloseMode {
     /**
      * Choose how the children are hidden when closed