@lumx/react 3.7.6-alpha.14 → 3.7.6-alpha.16

package/package.json

@@ -6,9 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.7.6-alpha.14",
-        "@lumx/icons": "^3.7.6-alpha.14",
+        "@lumx/core": "^3.7.6-alpha.16",
+        "@lumx/icons": "^3.7.6-alpha.16",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -112,5 +111,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.7.6-alpha.14"
+    "version": "3.7.6-alpha.16"
 }

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

@@ -1,10 +1,10 @@
 import React from 'react';
 
 import { SlideshowItem, Thumbnail } from '@lumx/react';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useElementSizeDependentOfWindowSize } from '@lumx/react/hooks/useElementSizeDependentOfWindowSize';
 import { useImageSize } from '@lumx/react/hooks/useImageSize';
-import { getPrefersReducedMotion } from '@lumx/react/utils/getPrefersReducedMotion';
+import { getPrefersReducedMotion } from '@lumx/react/utils/browser/getPrefersReducedMotion';
 import { isEqual } from '@lumx/react/utils/object/isEqual';
 
 import { CLASSNAME } from '../constants';
@@ -84,7 +84,7 @@ export const ImageSlide = React.memo((props: ImageSlideProps) => {
             className={`${CLASSNAME}__image-slide`}
         >
             <Thumbnail
-                imgRef={mergeRefs(imgRef, propImgRef)}
+                imgRef={useMergeRefs(imgRef, propImgRef)}
                 image={image}
                 alt={alt}
                 className={`${CLASSNAME}__thumbnail`}

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

@@ -2,8 +2,8 @@ import React from 'react';
 
 import memoize from 'lodash/memoize';
 
-import { startViewTransition } from '@lumx/react/utils/startViewTransition';
-import { findImage } from '@lumx/react/utils/findImage';
+import { startViewTransition } from '@lumx/react/utils/DOM/startViewTransition';
+import { findImage } from '@lumx/react/utils/DOM/findImage';
 
 import type { ImageLightboxProps } from './types';
 import { CLASSNAME } from './constants';

package/src/components/thumbnail/Thumbnail.stories.tsx

@@ -24,7 +24,6 @@ import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps'
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
 
-
 const aligns = [Alignment.center, Alignment.left, Alignment.right];
 const variants = [ThumbnailVariant.squared, ThumbnailVariant.rounded];
 
@@ -430,14 +429,16 @@ export const LoadingPlaceholderImage = () => {
             <FlexBox orientation="horizontal">
                 <Thumbnail alt="Small image" imgRef={imgRef} image="https://picsum.photos/id/15/128/85" />
                 {isShown && (
-                    <Thumbnail
-                        image={`https://picsum.photos/id/15/2500/1667?cacheBust${uniqueId()}`}
-                        alt="Large image"
-                        // Loading placeholder image
-                        loadingPlaceholderImageRef={imgRef}
-                        // Reserve space
-                        imgProps={{ width: 2500, height: 1667 }}
-                    />
+                    <div style={{ maxHeight: 400 }}>
+                        <Thumbnail
+                            image={`https://picsum.photos/id/15/2500/1667?cacheBust${uniqueId()}`}
+                            alt="Large image"
+                            // Loading placeholder image
+                            loadingPlaceholderImageRef={imgRef}
+                            // Reserve space
+                            imgProps={{ width: 2500, height: 1667 }}
+                        />
+                    </div>
                 )}
             </FlexBox>
         </>

package/src/components/thumbnail/Thumbnail.tsx

@@ -17,7 +17,7 @@ import { Comp, Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { mdiImageBroken } from '@lumx/icons';
-import { mergeRefs, useMergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';
 import { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';
 import { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';
@@ -199,21 +199,24 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         >
             <span className={`${CLASSNAME}__background`}>
                 <img
+                    // Use placeholder image size
                     width={loadingPlaceholderImage?.naturalWidth}
                     height={loadingPlaceholderImage?.naturalHeight}
                     {...imgProps}
                     style={{
+                        // Reserve space while loading (when possible)
+                        width: isLoading ? imgProps?.width || loadingPlaceholderImage?.naturalWidth : undefined,
                         ...imgProps?.style,
                         ...imageErrorStyle,
                         ...focusPointStyle,
                         ...loadingStyle,
                     }}
-                    ref={mergeRefs(setImgElement, propImgRef)}
+                    ref={useMergeRefs(setImgElement, propImgRef)}
                     className={classNames(
                         handleBasicClasses({
                             prefix: `${CLASSNAME}__image`,
                             isLoading,
-                            hasDefinedSize: !isLoading && Boolean(imgProps?.height && imgProps.width),
+                            hasDefinedSize: Boolean(imgProps?.height && imgProps.width),
                         }),
                         imgProps?.className,
                     )}

package/src/utils/{startViewTransition.ts → DOM/startViewTransition.ts}

@@ -1,7 +1,9 @@
 import ReactDOM from 'react-dom';
-import { getPrefersReducedMotion } from '@lumx/react/utils/getPrefersReducedMotion';
+
 import { MaybeElementOrRef } from '@lumx/react/utils/type';
-import { unref } from '@lumx/react/utils/unref';
+
+import { unref } from '../react/unref';
+import { getPrefersReducedMotion } from '../browser/getPrefersReducedMotion';
 
 function setTransitionViewName(elementRef: MaybeElementOrRef<HTMLElement>, name: string | null | undefined) {
     const element = unref(elementRef) as any;

package/src/utils/object/{isEqual.test.js → isEqual.test.ts}

@@ -1,6 +1,6 @@
 import { isEqual } from './isEqual';
 
-test(isEqual, () => {
+test(isEqual.name, () => {
     expect(isEqual('', '')).toBe(true);
     expect(isEqual(0, 0)).toBe(true);
     expect(isEqual(Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY)).toBe(true);

package/src/utils/react/unref.ts

@@ -0,0 +1,7 @@
+import { MaybeElementOrRef } from '@lumx/react/utils/type';
+
+/** Unref a react ref or element */
+export function unref(maybeElement: MaybeElementOrRef<HTMLElement>) {
+    if (maybeElement instanceof HTMLElement) return maybeElement;
+    return maybeElement?.current;
+}

package/src/utils/unref.ts

@@ -1,6 +0,0 @@
-import { MaybeElementOrRef } from '@lumx/react/utils/type';
-
-export function unref(maybeElement: MaybeElementOrRef<HTMLElement>) {
-    if (maybeElement instanceof HTMLElement) return maybeElement;
-    return maybeElement?.current;
-}