@lumx/react 3.9.0 → 3.9.1-alpha.0

package/package.json

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

package/src/components/image-lightbox/internal/ImageSlideshow.tsx

@@ -89,7 +89,7 @@ export const ImageSlideshow: React.FC<ImageSlideshowProps> = ({
     const zoomOut = React.useCallback(() => onScaleChange?.(0.5), [onScaleChange]);
     React.useEffect(() => {
         // Reset scale on slide change
-        if (activeIndex) setScale(undefined);
+        if (typeof activeIndex === 'number') setScale(undefined);
     }, [activeIndex]);
     const zoomControls = zoomEnabled && (
         <>

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

@@ -25,10 +25,10 @@ type TriggerOptions = Pick<ImageLightboxProps, 'activeImageIndex'>;
  * - Associate a trigger with an image to display on open
  * - Automatically provide a view transition between an image trigger and the displayed image on open & close
  *
- * @param initialProps Images to display in the image lightbox
+ * @param props Images to display in the image lightbox
  */
 export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
-    initialProps: P,
+    props: P,
 ): {
     /**
      * Generates trigger props
@@ -38,16 +38,19 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
     /** Props to forward to the ImageLightbox */
     imageLightboxProps: ManagedProps & P;
 } {
-    const { images = [], ...otherProps } = initialProps;
+    const propsRef = React.useRef(props);
 
-    const imagesPropsRef = React.useRef(images);
     React.useEffect(() => {
-        imagesPropsRef.current = images.map((props) => ({ imgRef: React.createRef(), ...props }));
-    }, [images]);
+        const newProps = { ...props };
+        if (newProps?.images) {
+            newProps.images = newProps.images.map((image) => ({ imgRef: React.createRef(), ...image }));
+        }
+        propsRef.current = newProps;
+    }, [props]);
 
     const currentImageRef = React.useRef<HTMLImageElement>(null);
     const [imageLightboxProps, setImageLightboxProps] = React.useState(
-        () => ({ ...EMPTY_PROPS, ...otherProps }) as ManagedProps & P,
+        () => ({ ...EMPTY_PROPS, ...props }) as ManagedProps & P,
     );
 
     const getTriggerProps = React.useMemo(() => {
@@ -58,9 +61,9 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
             if (!currentImage) {
                 return;
             }
-            const currentIndex = imagesPropsRef.current.findIndex(
+            const currentIndex = propsRef.current?.images?.findIndex(
                 ({ imgRef }) => (imgRef as any)?.current === currentImage,
-            );
+            ) as number;
 
             await startViewTransition({
                 changes() {
@@ -81,7 +84,7 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
             const triggerImage = triggerImageRefs[activeImageIndex as any]?.current || findImage(triggerElement);
 
             // Inject the trigger image as loading placeholder for better loading state
-            const imagesWithFallbackSize = imagesPropsRef.current.map((image, idx) => {
+            const imagesWithFallbackSize = propsRef.current?.images?.map((image, idx) => {
                 if (triggerImage && idx === activeImageIndex && !image.loadingPlaceholderImageRef) {
                     return { ...image, loadingPlaceholderImageRef: { current: triggerImage } };
                 }
@@ -93,6 +96,7 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
                     // Open lightbox with setup props
                     setImageLightboxProps((prevProps) => ({
                         ...prevProps,
+                        ...propsRef.current,
                         activeImageRef: currentImageRef,
                         parentElement: { current: triggerElement },
                         isOpen: true,

package/src/components/tooltip/Tooltip.tsx

@@ -66,9 +66,9 @@ const ARROW_SIZE = 8;
  */
 export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {
     const { label, children, className, delay, placement, forceOpen, ...forwardedProps } = props;
-    // Disable in SSR or without a label.
-    if (!DOCUMENT || !label) {
-        return <TooltipContextProvider>{children}</TooltipContextProvider>;
+    // Disable in SSR.
+    if (!DOCUMENT) {
+        return <>{children}</>;
     }
 
     const id = useId();
@@ -87,7 +87,7 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
 
     const position = attributes?.popper?.['data-popper-placement'] ?? placement;
     const { isOpen: isActivated, onPopperMount } = useTooltipOpen(delay, anchorElement);
-    const isOpen = isActivated || forceOpen;
+    const isOpen = (isActivated || forceOpen) && !!label;
     const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen, id, label);
 
     return (

package/src/components/tooltip/useInjectTooltipRef.tsx

@@ -19,12 +19,14 @@ export const useInjectTooltipRef = (
     setAnchorElement: (e: HTMLDivElement) => void,
     isOpen: boolean | undefined,
     id: string,
-    label: string,
+    label?: string | null | false,
 ): ReactNode => {
     // Only add description when open
     const describedBy = isOpen ? id : undefined;
 
     return useMemo(() => {
+        if (!label) return children;
+
         // Non-disabled element
         if (React.isValidElement(children) && children.props.disabled !== true && children.props.isDisabled !== true) {
             const ref = mergeRefs((children as any).ref, setAnchorElement);