@lumx/react 3.7.6-test.1 → 3.8.0

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-test.1",
-        "@lumx/icons": "^3.7.6-test.1",
+        "@lumx/core": "^3.8.0",
+        "@lumx/icons": "^3.8.0",
         "@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-test.1"
+    "version": "3.8.0"
 }

package/src/components/checkbox/Checkbox.stories.tsx

@@ -33,6 +33,15 @@ export const LabelAndHelper = {
     },
 };
 
+/**
+ * With intermediate state
+ */
+export const IntermediateState = {
+    args: {
+        isChecked: 'intermediate',
+    },
+};
+
 /**
  * Disabled
  */

package/src/components/checkbox/Checkbox.test.tsx

@@ -39,6 +39,7 @@ describe(`<${Checkbox.displayName}>`, () => {
 
             expect(input).toBeInTheDocument();
             expect(input).not.toBeChecked();
+            expect(input).toHaveAttribute('aria-checked', 'false');
             expect(input).not.toBeDisabled();
         });
 
@@ -51,9 +52,20 @@ describe(`<${Checkbox.displayName}>`, () => {
             expect(checkbox).toHaveClass('lumx-checkbox--is-checked');
 
             expect(input).toBeChecked();
+            expect(input).toHaveAttribute('aria-checked', 'true');
             expect(input).toBeDisabled();
         });
 
+        it('should render intermediate state', () => {
+            const { checkbox, input } = setup({
+                isChecked: 'intermediate',
+            });
+            expect(checkbox).toHaveClass('lumx-checkbox--is-checked');
+
+            expect(input).toBeChecked();
+            expect(input).toHaveAttribute('aria-checked', 'mixed');
+        });
+
         it('should render helper and label', () => {
             const id = 'checkbox1';
             const { props, helper, label, input } = setup({

package/src/components/checkbox/Checkbox.tsx

@@ -1,13 +1,19 @@
-import React, { useMemo, forwardRef, ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
+import React, { forwardRef, InputHTMLAttributes, ReactNode, SyntheticEvent, useMemo } from 'react';
 
 import classNames from 'classnames';
 import { uid } from 'uid';
 
-import { mdiCheck } from '@lumx/icons';
+import { mdiCheck, mdiMinus } from '@lumx/icons';
 
 import { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
+
+/**
+ * Intermediate state of checkbox.
+ */
+const INTERMEDIATE_STATE = 'intermediate';
 
 /**
  * Defines the props of the component.
@@ -19,8 +25,8 @@ export interface CheckboxProps extends GenericProps, HasTheme {
     id?: string;
     /** Native input ref. */
     inputRef?: React.Ref<HTMLInputElement>;
-    /** Whether it is checked or not. */
-    isChecked?: boolean;
+    /** Whether it is checked or not or intermediate. */
+    isChecked?: boolean | 'intermediate';
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
     /** Label text. */
@@ -29,10 +35,10 @@ export interface CheckboxProps extends GenericProps, HasTheme {
     name?: string;
     /** Native input value property. */
     value?: string;
-    /** On change callback. */
-    onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;
     /** optional props for input */
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /** On change callback. */
+    onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;
 }
 
 /**
@@ -77,6 +83,7 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
         inputProps = {},
         ...forwardedProps
     } = props;
+    const localInputRef = React.useRef<HTMLInputElement>(null);
     const inputId = useMemo(() => id || `${CLASSNAME.toLowerCase()}-${uid()}`, [id]);
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -85,6 +92,13 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
         }
     };
 
+    const intermediateState = isChecked === INTERMEDIATE_STATE;
+
+    React.useEffect(() => {
+        const input = localInputRef.current;
+        if (input) input.indeterminate = intermediateState;
+    }, [intermediateState]);
+
     return (
         <div
             ref={ref}
@@ -92,7 +106,8 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
             className={classNames(
                 className,
                 handleBasicClasses({
-                    isChecked,
+                    // Whether state is intermediate class name will "-checked"
+                    isChecked: intermediateState ? true : isChecked,
                     isDisabled,
                     isUnchecked: !isChecked,
                     prefix: CLASSNAME,
@@ -102,7 +117,7 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
         >
             <div className={`${CLASSNAME}__input-wrapper`}>
                 <input
-                    ref={inputRef}
+                    ref={useMergeRefs(inputRef, localInputRef)}
                     type="checkbox"
                     id={inputId}
                     className={`${CLASSNAME}__input-native`}
@@ -113,6 +128,7 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
                     checked={isChecked}
                     onChange={handleChange}
                     aria-describedby={helper ? `${inputId}-helper` : undefined}
+                    aria-checked={intermediateState ? 'mixed' : Boolean(isChecked)}
                     {...inputProps}
                 />
 
@@ -120,7 +136,7 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
                     <div className={`${CLASSNAME}__input-background`} />
 
                     <div className={`${CLASSNAME}__input-indicator`}>
-                        <Icon icon={mdiCheck} />
+                        <Icon icon={intermediateState ? mdiMinus : mdiCheck} />
                     </div>
                 </div>
             </div>

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

@@ -1,10 +1,13 @@
 import React from 'react';
 
+import uniqueId from 'lodash/uniqueId';
+
 import { mdiAbTesting } from '@lumx/icons';
 import {
     Alignment,
     AspectRatio,
     Badge,
+    Button,
     FlexBox,
     GridColumn,
     Icon,
@@ -411,3 +414,35 @@ export const ObjectFit = {
         withWrapper({ maxColumns: 3, itemMinWidth: 350 }, GridColumn),
     ],
 };
+
+/**
+ * Demonstrate loading a small image and then use it as the loading placeholder image when loading a bigger image
+ */
+export const LoadingPlaceholderImage = () => {
+    const [isShown, setShown] = React.useState(false);
+    const imgRef = React.useRef() as React.RefObject<HTMLImageElement>;
+    return (
+        <>
+            <Button onClick={() => setShown((shown) => !shown)}>
+                Display bigger image using the small image as a placeholder
+            </Button>
+            <FlexBox orientation="horizontal">
+                <Thumbnail alt="Small image" imgRef={imgRef} image="https://picsum.photos/id/15/128/85" />
+                {isShown && (
+                    <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>
+        </>
+    );
+};
+// Disables Chromatic snapshot (not relevant for this story).
+LoadingPlaceholderImage.parameters = { chromatic: { disable: true } };

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';
@@ -58,6 +58,8 @@ export interface ThumbnailProps extends GenericProps, HasTheme {
     size?: ThumbnailSize;
     /** Image loading mode. */
     loading?: ImgHTMLProps['loading'];
+    /** Ref of an existing placeholder image to display while loading. */
+    loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;
     /** On click callback. */
     onClick?: MouseEventHandler<HTMLDivElement>;
     /** On key press callback. */
@@ -115,6 +117,7 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         isLoading: isLoadingProp,
         objectFit,
         loading,
+        loadingPlaceholderImageRef,
         size,
         theme,
         variant,
@@ -159,6 +162,16 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
     }
 
+    // If we have a loading placeholder image that is really loaded (complete)
+    const loadingPlaceholderImage =
+        (isLoading && loadingPlaceholderImageRef?.current?.complete && loadingPlaceholderImageRef?.current) ||
+        undefined;
+
+    // Set loading placeholder image as background
+    const loadingStyle = loadingPlaceholderImage
+        ? { backgroundImage: `url(${loadingPlaceholderImage.src})` }
+        : undefined;
+
     return (
         <Wrapper
             {...wrapperProps}
@@ -186,13 +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}
                     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/hooks/useOnResize.ts

@@ -1,41 +0,0 @@
-import { Callback, Falsy } from '@lumx/react/utils/type';
-import { MutableRefObject, RefObject, useEffect, useRef } from 'react';
-import { WINDOW } from '@lumx/react/constants';
-import { ResizeObserver as Polyfill } from '@juggle/resize-observer';
-
-const ResizeObserver: typeof Polyfill = (WINDOW as any)?.ResizeObserver || Polyfill;
-
-export function useOnResize(element: HTMLElement | Falsy, update: RefObject<Callback>): void {
-    const observerRef = useRef(null) as MutableRefObject<Polyfill | null>;
-    const previousSize = useRef<{ width: number; height: number }>();
-
-    useEffect(() => {
-        if (!element || !update) {
-            return undefined;
-        }
-
-        previousSize.current = undefined;
-        const observer =
-            observerRef.current ||
-            new ResizeObserver(([entry]) => {
-                const updateFunction = update.current;
-                if (!updateFunction) {
-                    return;
-                }
-
-                const { width, height } = entry.contentRect;
-                if (previousSize.current?.width === width && previousSize.current?.height === height) {
-                    return;
-                }
-
-                window.requestAnimationFrame(() => updateFunction());
-                previousSize.current = entry.contentRect;
-            });
-        if (!observerRef.current) observerRef.current = observer;
-
-        observer.observe(element);
-        return () => {
-            observer.unobserve(element);
-        };
-    }, [element, update]);
-}