@lumx/react 2.1.8 → 2.1.9-alpha-thumbnail4

package/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap

@@ -3,37 +3,41 @@
 exports[`<UserBlock> Snapshots and structure should render story 'InList' 1`] = `
 Array [
   <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
+    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
   >
-    <Avatar
-      alt="Avatar"
-      badge={
-        <Badge
-          color="blue"
-        >
-          <Icon
-            icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
-          />
-        </Badge>
-      }
+    <div
       className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      onClick={[Function]}
-      size="m"
-      theme="light"
-    />
+    >
+      <Avatar
+        alt="Avatar"
+        badge={
+          <Badge
+            color="blue"
+          >
+            <Icon
+              icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
+            />
+          </Badge>
+        }
+        image="/demo-assets/avatar1.jpg"
+        onClick={[Function]}
+        size="m"
+        tabIndex={0}
+        theme="light"
+      />
+    </div>
     <div
       className="lumx-user-block__wrapper"
     >
-      <button
-        className="lumx-user-block__name lumx-user-block__name--is-clickable"
+      <span
+        className="lumx-user-block__name"
         onClick={[Function]}
-        type="button"
+        tabIndex={0}
       >
         Emmitt O. Lum
-      </button>
+      </span>
       <div
         className="lumx-user-block__fields"
       >
@@ -53,37 +57,41 @@ Array [
     </div>
   </div>,
   <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
+    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
   >
-    <Avatar
-      alt="Avatar"
-      badge={
-        <Badge
-          color="blue"
-        >
-          <Icon
-            icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
-          />
-        </Badge>
-      }
+    <div
       className="lumx-user-block__avatar"
-      image="/demo-assets/avatar2.jpg"
-      onClick={[Function]}
-      size="m"
-      theme="light"
-    />
+    >
+      <Avatar
+        alt="Avatar"
+        badge={
+          <Badge
+            color="blue"
+          >
+            <Icon
+              icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
+            />
+          </Badge>
+        }
+        image="/demo-assets/avatar2.jpg"
+        onClick={[Function]}
+        size="m"
+        tabIndex={0}
+        theme="light"
+      />
+    </div>
     <div
       className="lumx-user-block__wrapper"
     >
-      <button
-        className="lumx-user-block__name lumx-user-block__name--is-clickable"
+      <span
+        className="lumx-user-block__name"
         onClick={[Function]}
-        type="button"
+        tabIndex={0}
       >
         Emmitt O. Lum
-      </button>
+      </span>
       <div
         className="lumx-user-block__fields"
       >
@@ -103,37 +111,41 @@ Array [
     </div>
   </div>,
   <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
+    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
   >
-    <Avatar
-      alt="Avatar"
-      badge={
-        <Badge
-          color="blue"
-        >
-          <Icon
-            icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
-          />
-        </Badge>
-      }
+    <div
       className="lumx-user-block__avatar"
-      image="/demo-assets/avatar3.jpg"
-      onClick={[Function]}
-      size="m"
-      theme="light"
-    />
+    >
+      <Avatar
+        alt="Avatar"
+        badge={
+          <Badge
+            color="blue"
+          >
+            <Icon
+              icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
+            />
+          </Badge>
+        }
+        image="/demo-assets/avatar3.jpg"
+        onClick={[Function]}
+        size="m"
+        tabIndex={0}
+        theme="light"
+      />
+    </div>
     <div
       className="lumx-user-block__wrapper"
     >
-      <button
-        className="lumx-user-block__name lumx-user-block__name--is-clickable"
+      <span
+        className="lumx-user-block__name"
         onClick={[Function]}
-        type="button"
+        tabIndex={0}
       >
         Emmitt O. Lum
-      </button>
+      </span>
       <div
         className="lumx-user-block__fields"
       >
@@ -158,53 +170,61 @@ Array [
 exports[`<UserBlock> Snapshots and structure should render story 'Sizes' 1`] = `
 Array [
   <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-s lumx-user-block--theme-light lumx-user-block--is-clickable"
+    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-s lumx-user-block--theme-light"
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
   >
-    <Avatar
-      alt="Avatar"
+    <div
       className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      onClick={[Function]}
-      size="s"
-      theme="light"
-    />
+    >
+      <Avatar
+        alt="Avatar"
+        image="/demo-assets/avatar1.jpg"
+        onClick={[Function]}
+        size="s"
+        tabIndex={0}
+        theme="light"
+      />
+    </div>
     <div
       className="lumx-user-block__wrapper"
     >
-      <button
-        className="lumx-user-block__name lumx-user-block__name--is-clickable"
+      <span
+        className="lumx-user-block__name"
         onClick={[Function]}
-        type="button"
+        tabIndex={0}
       >
         Emmitt O. Lum
-      </button>
+      </span>
     </div>
   </div>,
   <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
+    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
   >
-    <Avatar
-      alt="Avatar"
+    <div
       className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      onClick={[Function]}
-      size="m"
-      theme="light"
-    />
+    >
+      <Avatar
+        alt="Avatar"
+        image="/demo-assets/avatar1.jpg"
+        onClick={[Function]}
+        size="m"
+        tabIndex={0}
+        theme="light"
+      />
+    </div>
     <div
       className="lumx-user-block__wrapper"
     >
-      <button
-        className="lumx-user-block__name lumx-user-block__name--is-clickable"
+      <span
+        className="lumx-user-block__name"
         onClick={[Function]}
-        type="button"
+        tabIndex={0}
       >
         Emmitt O. Lum
-      </button>
+      </span>
       <div
         className="lumx-user-block__fields"
       >
@@ -224,28 +244,32 @@ Array [
     </div>
   </div>,
   <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-l lumx-user-block--theme-light lumx-user-block--is-clickable"
+    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-l lumx-user-block--theme-light"
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
   >
-    <Avatar
-      alt="Avatar"
+    <div
       className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      onClick={[Function]}
-      size="l"
-      theme="light"
-    />
+    >
+      <Avatar
+        alt="Avatar"
+        image="/demo-assets/avatar1.jpg"
+        onClick={[Function]}
+        size="l"
+        tabIndex={0}
+        theme="light"
+      />
+    </div>
     <div
       className="lumx-user-block__wrapper"
     >
-      <button
-        className="lumx-user-block__name lumx-user-block__name--is-clickable"
+      <span
+        className="lumx-user-block__name"
         onClick={[Function]}
-        type="button"
+        tabIndex={0}
       >
         Emmitt O. Lum
-      </button>
+      </span>
       <div
         className="lumx-user-block__fields"
       >
@@ -273,27 +297,34 @@ exports[`<UserBlock> Snapshots and structure should render story 'WithBadge' 1`]
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
-  <Avatar
-    alt="Avatar"
-    badge={
-      <Badge
-        color="blue"
-      >
-        <Icon
-          icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
-        />
-      </Badge>
-    }
+  <div
     className="lumx-user-block__avatar"
-    image="/demo-assets/avatar1.jpg"
-    size="m"
-    theme="light"
-  />
+  >
+    <Avatar
+      alt="Avatar"
+      badge={
+        <Badge
+          color="blue"
+        >
+          <Icon
+            icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
+          />
+        </Badge>
+      }
+      image="/demo-assets/avatar1.jpg"
+      onClick={[Function]}
+      size="m"
+      tabIndex={0}
+      theme="light"
+    />
+  </div>
   <div
     className="lumx-user-block__wrapper"
   >
     <span
       className="lumx-user-block__name"
+      onClick={[Function]}
+      tabIndex={0}
     >
       Emmitt O. Lum
     </span>
@@ -316,133 +347,3 @@ exports[`<UserBlock> Snapshots and structure should render story 'WithBadge' 1`]
   </div>
 </div>
 `;
-
-exports[`<UserBlock> Snapshots and structure should render story 'WithLinks' 1`] = `
-Array [
-  <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-s lumx-user-block--theme-light lumx-user-block--is-clickable"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  >
-    <Avatar
-      alt="Avatar"
-      className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      linkProps={
-        Object {
-          "href": "https://www.lumapps.com",
-          "target": "_blank",
-        }
-      }
-      onClick={[Function]}
-      size="s"
-      theme="light"
-    />
-    <div
-      className="lumx-user-block__wrapper"
-    >
-      <a
-        className="lumx-user-block__name lumx-user-block__name--is-clickable"
-        href="https://www.lumapps.com"
-        target="_blank"
-      >
-        Emmitt O. Lum
-      </a>
-    </div>
-  </div>,
-  <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  >
-    <Avatar
-      alt="Avatar"
-      className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      linkProps={
-        Object {
-          "href": "https://www.lumapps.com",
-          "target": "_blank",
-        }
-      }
-      onClick={[Function]}
-      size="m"
-      theme="light"
-    />
-    <div
-      className="lumx-user-block__wrapper"
-    >
-      <a
-        className="lumx-user-block__name lumx-user-block__name--is-clickable"
-        href="https://www.lumapps.com"
-        target="_blank"
-      >
-        Emmitt O. Lum
-      </a>
-      <div
-        className="lumx-user-block__fields"
-      >
-        <span
-          className="lumx-user-block__field"
-          key="0"
-        >
-          Creative developer
-        </span>
-        <span
-          className="lumx-user-block__field"
-          key="1"
-        >
-          Denpasar
-        </span>
-      </div>
-    </div>
-  </div>,
-  <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-l lumx-user-block--theme-light lumx-user-block--is-clickable"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  >
-    <Avatar
-      alt="Avatar"
-      className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      linkProps={
-        Object {
-          "href": "https://www.lumapps.com",
-          "target": "_blank",
-        }
-      }
-      onClick={[Function]}
-      size="l"
-      theme="light"
-    />
-    <div
-      className="lumx-user-block__wrapper"
-    >
-      <a
-        className="lumx-user-block__name lumx-user-block__name--is-clickable"
-        href="https://www.lumapps.com"
-        target="_blank"
-      >
-        Emmitt O. Lum
-      </a>
-      <div
-        className="lumx-user-block__fields"
-      >
-        <span
-          className="lumx-user-block__field"
-          key="0"
-        >
-          Creative developer
-        </span>
-        <span
-          className="lumx-user-block__field"
-          key="1"
-        >
-          Denpasar
-        </span>
-      </div>
-    </div>
-  </div>,
-]
-`;

package/src/hooks/useOnResize.ts

@@ -23,6 +23,12 @@ export function useOnResize(element: HTMLElement | Falsy, update: RefObject<Call
                     return;
                 }
 
+                // Do not update on first resize.
+                if (previousSize.current && previousSize.current.height <= 1) {
+                    return;
+                }
+
+                // Do not update if size hasn't really changed.
                 const { width, height } = entry.contentRect;
                 if (previousSize.current?.width === width && previousSize.current?.height === height) {
                     return;

package/src/stories/knobs/image.ts

@@ -6,18 +6,19 @@ const avatar3 = '/demo-assets/avatar3.jpg';
 const avatar4 = '/demo-assets/avatar4.jpg';
 const landscape1 = '/demo-assets/landscape1.jpg';
 const landscape2 = '/demo-assets/landscape2.jpg';
+const landscape1s200 = '/demo-assets/landscape1-s200.jpg';
 const landscape3 = '/demo-assets/landscape3.jpg';
 const portrait1 = '/demo-assets/portrait1.jpg';
+const portrait1s200 = '/demo-assets/portrait1-s200.jpg';
 const portrait2 = '/demo-assets/portrait2.jpg';
 const portrait3 = '/demo-assets/portrait3.jpg';
 const square1 = '/demo-assets/square1.jpg';
 const square2 = '/demo-assets/square2.jpg';
 
 export const AVATAR_IMAGES = { avatar1, avatar2, avatar3, avatar4 };
-
 export const SQUARE_IMAGES = { square1, square2 };
-export const LANDSCAPE_IMAGES = { landscape1, landscape2, landscape3 };
-export const PORTRAIT_IMAGES = { portrait1, portrait2, portrait3 };
+export const LANDSCAPE_IMAGES = { landscape1, landscape1s200, landscape2, landscape3 };
+export const PORTRAIT_IMAGES = { portrait1, portrait1s200, portrait2, portrait3 };
 
 export const IMAGES = { ...LANDSCAPE_IMAGES, ...PORTRAIT_IMAGES, ...SQUARE_IMAGES, ...AVATAR_IMAGES };
 
@@ -35,3 +36,34 @@ export const squareImageKnob = (name = 'Image', value = Object.values(SQUARE_IMA
 
 export const imageKnob = (name = 'Image', value = Object.values(IMAGES)[0], groupId?: string) =>
     select(name, IMAGES, value, groupId);
+
+type Size = { width: number; height: number };
+
+export const AVATAR_IMAGE_SIZES: Record<keyof typeof AVATAR_IMAGES, Size> = {
+    avatar1: { width: 128, height: 128 },
+    avatar2: { width: 150, height: 150 },
+    avatar3: { width: 128, height: 128 },
+    avatar4: { width: 128, height: 128 },
+};
+export const SQUARE_IMAGE_SIZES: Record<keyof typeof SQUARE_IMAGES, Size> = {
+    square1: { width: 72, height: 72 },
+    square2: { width: 300, height: 300 },
+};
+export const LANDSCAPE_IMAGE_SIZES: Record<keyof typeof LANDSCAPE_IMAGES, Size> = {
+    landscape1: { width: 800, height: 546 },
+    landscape1s200: { width: 200, height: 150 },
+    landscape2: { width: 800, height: 600 },
+    landscape3: { width: 640, height: 480 },
+};
+export const PORTRAIT_IMAGE_SIZES: Record<keyof typeof PORTRAIT_IMAGES, Size> = {
+    portrait1: { width: 275, height: 500 },
+    portrait1s200: { width: 200, height: 364 },
+    portrait2: { width: 350, height: 500 },
+    portrait3: { width: 300, height: 500 },
+};
+export const IMAGE_SIZES: Record<keyof typeof IMAGES, Size> = {
+    ...LANDSCAPE_IMAGE_SIZES,
+    ...PORTRAIT_IMAGE_SIZES,
+    ...SQUARE_IMAGE_SIZES,
+    ...AVATAR_IMAGE_SIZES,
+};

package/types.d.ts

@@ -440,10 +440,6 @@ export interface AvatarProps extends GenericProps {
 	theme?: Theme;
 	/** Props to pass to the thumbnail (minus those already set by the Avatar props). */
 	thumbnailProps?: Omit<ThumbnailProps, "image" | "alt" | "size" | "theme" | "align" | "fillHeight" | "variant" | "aspectRatio">;
-	/** Props to pass to the link wrapping the thumbnail. */
-	linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
-	/** Custom react component for the link (can be used to inject react router Link). */
-	linkAs?: "a" | any;
 }
 /**
  * Avatar component.
@@ -1237,6 +1233,8 @@ export interface ThumbnailProps extends GenericProps {
 	imgProps?: ImgHTMLProps;
 	/** Reference to the native <img> element. */
 	imgRef?: Ref<HTMLImageElement>;
+	/** Set to true to force the display of the loading skeleton. */
+	isLoading?: boolean;
 	/** Size variant of the component. */
 	size?: ThumbnailSize;
 	/** Image loading mode. */
@@ -2529,10 +2527,6 @@ export declare type UserBlockSize = Extract<Size, "s" | "m" | "l">;
 export interface UserBlockProps extends GenericProps {
 	/** Props to pass to the avatar. */
 	avatarProps?: AvatarProps;
-	/** Props to pass to the link wrapping the avatar thumbnail. */
-	linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
-	/** Custom react component for the link (can be used to inject react router Link). */
-	linkAs?: "a" | any;
 	/** Simple action toolbar content. */
 	simpleAction?: ReactNode;
 	/** Multiple action toolbar content. */

package/esm/_internal/clamp.js

@@ -1,22 +0,0 @@
-/**
- * Clamp value in range.
- *
- * @param value Value to clamp.
- * @param min   Minimum value.
- * @param max   Maximum value.
- * @return Clamped value.
- */
-var clamp = function clamp(value, min, max) {
-  if (value < min) {
-    return min;
-  }
-
-  if (value > max) {
-    return max;
-  }
-
-  return value;
-};
-
-export { clamp as c };
-//# sourceMappingURL=clamp.js.map

package/esm/_internal/clamp.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"clamp.js","sources":["../../../src/utils/clamp.ts"],"sourcesContent":["/**\n * Clamp value in range.\n *\n * @param value Value to clamp.\n * @param min   Minimum value.\n * @param max   Maximum value.\n * @return Clamped value.\n */\nexport const clamp = (value: number, min: number, max: number): number => {\n    if (value < min) {\n        return min;\n    }\n    if (value > max) {\n        return max;\n    }\n    return value;\n};\n"],"names":["clamp","value","min","max"],"mappings":"AAAA;;;;;;;;IAQaA,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD,EAAgBC,GAAhB,EAA6BC,GAA7B,EAAqD;AACtE,MAAIF,KAAK,GAAGC,GAAZ,EAAiB;AACb,WAAOA,GAAP;AACH;;AACD,MAAID,KAAK,GAAGE,GAAZ,EAAiB;AACb,WAAOA,GAAP;AACH;;AACD,SAAOF,KAAP;AACH;;;;"}