@lumx/react 3.7.6-alpha.13 → 3.7.6-alpha.15

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.7.6-alpha.13",
-        "@lumx/icons": "^3.7.6-alpha.13",
+        "@lumx/core": "^3.7.6-alpha.15",
+        "@lumx/icons": "^3.7.6-alpha.15",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -112,5 +112,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.7.6-alpha.13"
+    "version": "3.7.6-alpha.15"
 }

package/src/components/heading/Heading.test.tsx

@@ -21,13 +21,15 @@ describe(`<${Heading.displayName}>`, () => {
             const heading = screen.getByRole('heading', { level: 1, name: 'Some text' });
             expect(heading).toBeInTheDocument();
             expect(heading).toHaveClass(CLASSNAME);
+            expect(heading).toHaveClass('lumx-typography-display1');
         });
 
-        it('should render with as', () => {
+        it('should render with as with the correct default typography', () => {
             setup({ children: 'Some text', as: 'h2' });
             const heading = screen.getByRole('heading', { level: 2, name: 'Some text' });
             expect(heading).toBeInTheDocument();
             expect(heading).toHaveClass(CLASSNAME);
+            expect(heading).toHaveClass('lumx-typography-headline');
         });
 
         it('should correctly render levels nested in HeadingLevel', () => {

package/src/components/heading/Heading.tsx

@@ -40,6 +40,7 @@ export const Heading: Comp<HeadingProps> = forwardRef((props, ref) => {
     const { children, as, className, ...forwardedProps } = props;
     const { headingElement } = useHeadingLevel();
 
+    const computedHeadingElement = as || headingElement;
     return (
         <Text
             ref={ref}
@@ -49,8 +50,8 @@ export const Heading: Comp<HeadingProps> = forwardRef((props, ref) => {
                     prefix: CLASSNAME,
                 }),
             )}
-            as={as || headingElement}
-            typography={DEFAULT_TYPOGRAPHY_BY_LEVEL[headingElement]}
+            as={computedHeadingElement}
+            typography={DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]}
             {...forwardedProps}
         >
             {children}

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

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import isEqual from 'lodash/isEqual';
 import { SlideshowItem, Thumbnail } from '@lumx/react';
 import { mergeRefs } 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 { isEqual } from '@lumx/react/utils/object/isEqual';
 
 import { CLASSNAME } from '../constants';
 import { usePointerZoom } from './usePointerZoom';

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

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import uniqueId from 'lodash/uniqueId';
+
 import { mdiAbTesting } from '@lumx/icons';
 import {
     Alignment,
@@ -427,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"
-                        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 } 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,16 +199,19 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         >
             <span className={`${CLASSNAME}__background`}>
                 <img
+                    // Use placeholder image size
+                    width={loadingPlaceholderImage?.naturalWidth}
+                    height={loadingPlaceholderImage?.naturalHeight}
                     {...imgProps}
-                    width={imgProps?.width || loadingPlaceholderImage?.naturalWidth}
-                    height={imgProps?.height || loadingPlaceholderImage?.naturalHeight}
                     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`,

package/src/utils/object/isEqual.test.js

@@ -0,0 +1,25 @@
+import { isEqual } from './isEqual';
+
+test(isEqual, () => {
+    expect(isEqual('', '')).toBe(true);
+    expect(isEqual(0, 0)).toBe(true);
+    expect(isEqual(Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY)).toBe(true);
+
+    expect(isEqual('', 0)).toBe(false);
+
+    expect(isEqual({}, {})).toBe(true);
+    expect(isEqual({ a: 1 }, { a: 1 })).toBe(true);
+    expect(isEqual({ a: { a: 1 } }, { a: { a: 1 } })).toBe(true);
+
+    expect(isEqual([], [])).toBe(true);
+
+    expect(isEqual([1], [2])).toBe(false);
+    expect(isEqual([1], [1, 2])).toBe(false);
+    expect(isEqual([1, 2], [2, 1])).toBe(false);
+
+    expect(isEqual({ a: 1 }, { a: 2 })).toBe(false);
+    expect(isEqual({ a: 1 }, {})).toBe(false);
+    expect(isEqual({}, { a: 1 })).toBe(false);
+    expect(isEqual({ a: { a: 1 } }, { a: { a: 2 } })).toBe(false);
+    expect(isEqual({ a: 1 }, { a: 1, b: 1 })).toBe(false);
+});

package/src/utils/object/isEqual.ts

@@ -0,0 +1,11 @@
+/** Minimal recursive deep equal of JS values */
+export function isEqual(obj1: any, obj2: any): boolean {
+    if (obj1 === obj2) return true;
+    if (typeof obj1 === 'object' && typeof obj2 === 'object') {
+        const keys1 = Object.keys(obj1);
+        const keys2 = Object.keys(obj2);
+        if (keys1.length !== keys2.length) return false;
+        return keys1.every((key1) => isEqual(obj1[key1], obj2[key1]));
+    }
+    return false;
+}