@lumx/react 3.20.1-alpha.35 → 3.20.1-alpha.36

package/_internal/035c132d.js

@@ -0,0 +1,314 @@
+import React__default, { useState, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { u as useMergeRefs } from './f0d7d6ea.js';
+import { AspectRatio, Theme, Size } from '@lumx/core/js/constants';
+import { u as useTheme } from './3181f000.js';
+import { f as forwardRef } from './8bce732e.js';
+import { R as RawClickable } from './2c2b6a89.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useDisableStateProps } from './utils/disabled/index-075b99c3.js';
+import { I as Icon } from './bace1bf1.js';
+
+const mdiImageBroken = 'M19 3a2 2 0 0 1 2 2v6h-2v2h-2v2h-2v2h-2v2h-2v2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm2 12v4a2 2 0 0 1-2 2h-4v-2h2v-2h2v-2zm-2-6.5a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5H11v-1h2v-2h2v-2h2V9h2z';
+
+function getState(img, event) {
+  // Error event occurred or image has no source.
+  if (event?.type === 'error' || img?.complete && !img.getAttribute('src')) {
+    return 'hasError';
+  }
+  // Image is undefined or incomplete.
+  if (!img || !img.complete) {
+    return 'isLoading';
+  }
+  // Else loaded.
+  return 'isLoaded';
+}
+function useImageLoad(imageURL, imgRef) {
+  const [state, setState] = useState(getState(imgRef));
+
+  // Update state when changing image URL or DOM reference.
+  useEffect(() => {
+    setState(getState(imgRef));
+  }, [imageURL, imgRef]);
+
+  // Listen to `load` and `error` event on image
+  useEffect(() => {
+    const img = imgRef;
+    if (!img) return undefined;
+    const update = event => setState(getState(img, event));
+    img.addEventListener('load', update);
+    img.addEventListener('error', update);
+    return () => {
+      img.removeEventListener('load', update);
+      img.removeEventListener('error', update);
+    };
+  }, [imgRef, imgRef?.src]);
+  return state;
+}
+
+// Calculate shift to center the focus point in the container.
+function shiftPosition({
+  scale,
+  focusPoint,
+  imageSize,
+  containerSize
+}) {
+  const scaledSize = imageSize / scale;
+  if (scaledSize === containerSize) return 0;
+  const scaledFocusHeight = focusPoint * scaledSize;
+  const startFocus = scaledFocusHeight - containerSize / 2;
+  const shift = startFocus / (scaledSize - containerSize);
+  return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);
+}
+
+// Compute CSS properties to apply the focus point.
+const useFocusPointStyle = ({
+  image,
+  aspectRatio,
+  focusPoint,
+  imgProps: {
+    width,
+    height
+  } = {}
+}, element, isLoaded) => {
+  // Get natural image size from imgProps or img element.
+  const imageSize = 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
+    };
+    if (element && isLoaded) return {
+      width: element.naturalWidth,
+      height: element.naturalHeight
+    };
+    return undefined;
+  }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);
+
+  // Get container size (dependant on imageSize).
+  const [containerSize, setContainerSize] = useState(undefined);
+  useEffect(function updateContainerSize() {
+    const cWidth = element?.offsetWidth;
+    const cHeight = element?.offsetHeight;
+    if (cWidth && cHeight) {
+      // Update only if needed.
+      setContainerSize(oldContainerSize => oldContainerSize?.width === cWidth && oldContainerSize.height === cHeight ? oldContainerSize : {
+        width: cWidth,
+        height: cHeight
+      });
+    } else if (imageSize) {
+      // Wait for a render (in case the container size is dependent on the image size).
+      requestAnimationFrame(updateContainerSize);
+    }
+  }, [element?.offsetHeight, element?.offsetWidth, imageSize]);
+
+  // Compute style.
+  const style = useMemo(() => {
+    // Focus point is not applicable => exit early
+    if (!image || aspectRatio === AspectRatio.original || !focusPoint?.x && !focusPoint?.y) {
+      return {};
+    }
+    if (!element || !imageSize) {
+      // Focus point can be computed but now right now (image size unknown).
+      return {
+        visibility: 'hidden'
+      };
+    }
+    if (!containerSize || !imageSize.height || !imageSize.width) {
+      // Missing container or image size abort focus point compute.
+      return {};
+    }
+    const heightScale = imageSize.height / containerSize.height;
+    const widthScale = imageSize.width / containerSize.width;
+    const scale = Math.min(widthScale, heightScale);
+
+    // Focus Y relative to the top (instead of the center)
+    const focusPointFromTop = Math.abs((focusPoint?.y || 0) - 1) / 2;
+    const y = shiftPosition({
+      scale,
+      focusPoint: focusPointFromTop,
+      imageSize: imageSize.height,
+      containerSize: containerSize.height
+    });
+
+    // Focus X relative to the left (instead of the center)
+    const focusPointFromLeft = Math.abs((focusPoint?.x || 0) + 1) / 2;
+    const x = shiftPosition({
+      scale,
+      focusPoint: focusPointFromLeft,
+      imageSize: imageSize.width,
+      containerSize: containerSize.width
+    });
+    const objectPosition = `${x}% ${y}%`;
+    return {
+      objectPosition
+    };
+  }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);
+  return style;
+};
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Thumbnail';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  fallback: mdiImageBroken,
+  loading: 'lazy'
+};
+
+/**
+ * Thumbnail component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Thumbnail = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    otherProps,
+    disabledStateProps
+  } = useDisableStateProps(props);
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    align,
+    alt,
+    aspectRatio = AspectRatio.original,
+    badge,
+    className,
+    crossOrigin,
+    fallback = DEFAULT_PROPS.fallback,
+    fillHeight,
+    // `focusPoint` needs to be here to remove it from `forwardedProps`.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    focusPoint,
+    image,
+    imgProps,
+    imgRef: propImgRef,
+    isLoading: isLoadingProp,
+    objectFit,
+    loading = DEFAULT_PROPS.loading,
+    loadingPlaceholderImageRef,
+    size,
+    theme = defaultTheme,
+    variant,
+    linkProps,
+    linkAs,
+    ...forwardedProps
+  } = otherProps;
+  const [imgElement, setImgElement] = useState();
+
+  // Image loading state.
+  const loadingState = useImageLoad(image, imgElement);
+  const isLoaded = loadingState === 'isLoaded';
+  const isLoading = isLoadingProp || loadingState === 'isLoading';
+  const hasError = loadingState === 'hasError';
+
+  // Focus point.
+  const focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);
+  const hasIconErrorFallback = hasError && typeof fallback === 'string';
+  const hasCustomErrorFallback = hasError && !hasIconErrorFallback;
+  const imageErrorStyle = {};
+  if (hasIconErrorFallback) {
+    // Keep the image layout on icon fallback.
+    imageErrorStyle.visibility = 'hidden';
+  } else if (hasCustomErrorFallback) {
+    // Remove the image on custom fallback.
+    imageErrorStyle.display = 'none';
+  }
+  const isLink = Boolean(linkProps?.href || linkAs);
+  const isClickable = !isAnyDisabled && Boolean(isLink || !!forwardedProps.onClick);
+  const Wrapper = isClickable ? RawClickable : 'div';
+  const wrapperProps = {
+    ...forwardedProps
+  };
+  if (isClickable) {
+    Object.assign(wrapperProps, {
+      as: linkAs || (linkProps?.href ? 'a' : 'button')
+    }, disabledStateProps);
+    if (isLink) {
+      Object.assign(wrapperProps, linkProps);
+    } else {
+      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 /*#__PURE__*/jsxs(Wrapper, {
+    ...wrapperProps,
+    ref: ref,
+    className: classNames(linkProps?.className, className, handleBasicClasses({
+      align,
+      aspectRatio,
+      prefix: CLASSNAME,
+      size,
+      theme,
+      variant,
+      isClickable,
+      hasError,
+      hasIconErrorFallback,
+      hasCustomErrorFallback,
+      isLoading,
+      objectFit,
+      hasBadge: !!badge
+    }), fillHeight && `${CLASSNAME}--fill-height`),
+    children: [/*#__PURE__*/jsxs("span", {
+      className: `${CLASSNAME}__background`,
+      children: [/*#__PURE__*/jsx("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: useMergeRefs(setImgElement, propImgRef),
+        className: classNames(handleBasicClasses({
+          prefix: `${CLASSNAME}__image`,
+          isLoading,
+          hasDefinedSize: Boolean(imgProps?.height && imgProps.width)
+        }), imgProps?.className),
+        crossOrigin: crossOrigin,
+        src: image,
+        alt: alt,
+        loading: loading
+      }), !isLoading && hasError && /*#__PURE__*/jsx("span", {
+        className: `${CLASSNAME}__fallback`,
+        children: hasIconErrorFallback ? /*#__PURE__*/jsx(Icon, {
+          icon: fallback,
+          size: Size.xxs,
+          theme: theme
+        }) : fallback
+      })]
+    }), badge && /*#__PURE__*/React__default.cloneElement(badge, {
+      className: classNames(`${CLASSNAME}__badge`, badge.props.className)
+    })]
+  });
+});
+Thumbnail.displayName = COMPONENT_NAME;
+Thumbnail.className = CLASSNAME;
+Thumbnail.defaultProps = DEFAULT_PROPS;
+
+export { Thumbnail as T, useFocusPointStyle as u };

package/_internal/0b9c76cb.js

@@ -0,0 +1,5 @@
+const mdiChevronDown = 'M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6z';
+
+const mdiChevronUp = 'M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z';
+
+export { mdiChevronDown as a, mdiChevronUp as m };