@lumx/react 3.7.5 → 3.7.6-alpha.0

package/src/components/lightbox/Lightbox.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 
 import { mdiClose } from '@lumx/icons';
-import { ColorPalette, Emphasis, IconButton, IconButtonProps } from '@lumx/react';
+import { IconButton, IconButtonProps } from '@lumx/react';
 import { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
@@ -145,17 +145,18 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
             style={{ zIndex }}
         >
             {closeButtonProps && (
-                <IconButton
-                    {...closeButtonProps}
-                    ref={closeButtonRef}
-                    className={`${CLASSNAME}__close`}
-                    color={ColorPalette.light}
-                    emphasis={Emphasis.low}
-                    icon={mdiClose}
-                    theme={theme}
-                    type="button"
-                    onClick={onClose}
-                />
+                <div className={`${CLASSNAME}__close`}>
+                    <IconButton
+                        {...closeButtonProps}
+                        ref={closeButtonRef}
+                        emphasis="low"
+                        hasBackground
+                        icon={mdiClose}
+                        theme="dark"
+                        type="button"
+                        onClick={onClose}
+                    />
+                </div>
             )}
             <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>
                 <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role="presentation">

package/src/components/thumbnail/useFocusPointStyle.tsx

@@ -1,6 +1,7 @@
 import { CSSProperties, useEffect, useMemo, useState } from 'react';
 import { AspectRatio } from '@lumx/react/components';
 import { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';
+import { RectSize } from '@lumx/react/utils/type';
 
 // Calculate shift to center the focus point in the container.
 export function shiftPosition({
@@ -24,8 +25,6 @@ export function shiftPosition({
     return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);
 }
 
-type Size = { width: number; height: number };
-
 // Compute CSS properties to apply the focus point.
 export const useFocusPointStyle = (
     { image, aspectRatio, focusPoint, imgProps: { width, height } = {} }: ThumbnailProps,
@@ -33,7 +32,7 @@ export const useFocusPointStyle = (
     isLoaded: boolean,
 ): CSSProperties => {
     // Get natural image size from imgProps or img element.
-    const imageSize: Size | undefined = useMemo(() => {
+    const imageSize: RectSize | undefined = useMemo(() => {
         // Focus point is not applicable => exit early
         if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) return undefined;
         if (typeof width === 'number' && typeof height === 'number') return { width, height };
@@ -42,7 +41,7 @@ export const useFocusPointStyle = (
     }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);
 
     // Get container size (dependant on imageSize).
-    const [containerSize, setContainerSize] = useState<Size | undefined>(undefined);
+    const [containerSize, setContainerSize] = useState<RectSize | undefined>(undefined);
     useEffect(
         function updateContainerSize() {
             const cWidth = element?.offsetWidth;

package/src/hooks/useElementSizeDependentOfWindowSize.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { RectSize } from '@lumx/react/utils/type';
+import throttle from 'lodash/throttle';
+
+/**
+ * Observe element size (only works if it's size depends on the window size).
+ *
+ * (Not using ResizeObserver for better browser backward compat)
+ *
+ * @param elementRef Element to observe
+ * @return the size and a manual update callback
+ */
+export function useElementSizeDependentOfWindowSize(
+    elementRef: React.RefObject<HTMLElement>,
+): [RectSize | null, () => void] {
+    const [size, setSize] = React.useState<null | RectSize>(null);
+    const updateSize = React.useMemo(
+        () =>
+            throttle(() => {
+                const newSize = elementRef?.current?.getBoundingClientRect();
+                if (newSize) setSize(newSize);
+            }, 10),
+        [elementRef],
+    );
+    React.useEffect(() => {
+        updateSize();
+        window.addEventListener('resize', updateSize);
+        return () => window.removeEventListener('resize', updateSize);
+    }, [updateSize]);
+    return [size, updateSize];
+}

package/src/hooks/useImageSize.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { RectSize } from '@lumx/react/utils/type';
+
+/** Get natural image size after load. */
+export function useImageSize(imgRef: React.RefObject<HTMLImageElement>, getInitialSize?: () => RectSize | null) {
+    const [imageSize, setImageSize] = React.useState<null | RectSize>(getInitialSize || null);
+    React.useEffect(() => {
+        const { current: img } = imgRef;
+        if (!img) {
+            return undefined;
+        }
+        const onLoad = () => setImageSize({ width: img.naturalWidth, height: img.naturalHeight });
+        img.addEventListener('load', onLoad);
+        return () => img.removeEventListener('load', onLoad);
+    }, [imgRef]);
+    return imageSize;
+}

package/src/index.ts

@@ -25,6 +25,7 @@ export * from './components/grid';
 export * from './components/grid-column';
 export * from './components/icon';
 export * from './components/image-block';
+export * from './components/image-lightbox';
 export * from './components/inline-list';
 export * from './components/input-helper';
 export * from './components/input-label';

package/src/utils/findImage.tsx

@@ -0,0 +1,3 @@
+/** Find image in element including the element */
+export const findImage = (element: HTMLElement | null) =>
+    element?.matches('img') ? (element as HTMLImageElement) : element?.querySelector('img');

package/src/utils/getPrefersReducedMotion.ts

@@ -0,0 +1,6 @@
+import { WINDOW } from '@lumx/react/constants';
+
+/** Check if user prefers reduced motion */
+export function getPrefersReducedMotion() {
+    return WINDOW?.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+}

package/src/utils/startViewTransition.ts

@@ -0,0 +1,54 @@
+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';
+
+function setTransitionViewName(elementRef: MaybeElementOrRef<HTMLElement>, name: string | null | undefined) {
+    const element = unref(elementRef) as any;
+    if (element) element.style.viewTransitionName = name;
+}
+
+/**
+ * Wrapper around the `document.startViewTransition` handling browser incompatibilities, react DOM flush and
+ * user preference.
+ *
+ * @param changes                callback containing the changes to apply within the view transition.
+ * @param setViewTransitionName  set the `viewTransitionName` style on a `source` & `target` to morph these elements.
+ */
+export async function startViewTransition({
+    changes,
+    viewTransitionName,
+}: {
+    changes: () => void;
+    viewTransitionName: {
+        source: MaybeElementOrRef<HTMLElement>;
+        target: MaybeElementOrRef<HTMLElement>;
+        name: string;
+    };
+}) {
+    const start = (document as any)?.startViewTransition?.bind(document);
+    const prefersReducedMotion = getPrefersReducedMotion();
+    const { flushSync } = ReactDOM as any;
+    if (prefersReducedMotion || !start || !flushSync || !viewTransitionName?.source || !viewTransitionName?.target) {
+        // Skip, apply changes without a transition
+        changes();
+        return;
+    }
+
+    // Set transition name on source element
+    setTransitionViewName(viewTransitionName.source, viewTransitionName.name);
+
+    // Start view transition, apply changes & flush to DOM
+    await start(() => {
+        // Un-set transition name on source element
+        setTransitionViewName(viewTransitionName.source, null);
+
+        flushSync(changes);
+
+        // Set transition name on target element
+        setTransitionViewName(viewTransitionName.target, viewTransitionName.name);
+    }).updateCallbackDone;
+
+    // Un-set transition name on target element
+    setTransitionViewName(viewTransitionName.target, null);
+}

package/src/utils/type.ts

@@ -139,3 +139,18 @@ export type ComponentRef<C> = C extends keyof JSX.IntrinsicElements
       : C extends React.JSXElementConstructor<{ ref?: infer R }>
         ? R
         : never;
+
+/**
+ * Rectangle size
+ */
+export type RectSize = { width: number; height: number };
+
+/**
+ * Maybe a HTMLElement or a React ref of a HTMLElement
+ */
+export type MaybeElementOrRef<E extends HTMLElement> = E | React.RefObject<E | null> | null | undefined;
+
+/**
+ * A point coordinate in 2D space
+ */
+export type Point = { x: number; y: number };

package/src/utils/unref.ts

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

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]);
-}