@temp-spotwork/ui 1.8.3 → 1.9.1

package/dist/components/atoms/avatar/avatar.d.ts

@@ -35,5 +35,10 @@ export type AvatarProps = {
      * Size of the avatar container in rem. Default is 5.5rem for square and 5rem for circular.
      */
     size?: number;
+    /**
+     * Loads the image only when the avatar is near the viewport, and decodes it off the main thread.
+     * For long lists. Default is false, which loads the image immediately.
+     */
+    lazyLoad?: boolean;
 };
-export declare function Avatar({ id, hasBorder, variant, image, textView, isActive, isOnline, onClick, size, }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Avatar({ id, hasBorder, variant, image, textView, isActive, isOnline, onClick, size, lazyLoad, }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/avatar/avatar.js

@@ -1,79 +1,82 @@
-import { jsx as r, Fragment as b, jsxs as _ } from "react/jsx-runtime";
+import { jsx as r, Fragment as b, jsxs as y } from "react/jsx-runtime";
 import { Typography as I } from "../../styles/typography/typography.js";
-import { classesMap as y } from "./styles.js";
-import D from "./statusIndicatorIcon.js";
+import { classesMap as D } from "./styles.js";
+import F from "./statusIndicatorIcon.js";
 import { t as c } from "../../../bundle-mjs-BjFsLjkg.js";
-function j({
-  id: g,
+function B({
+  id: v,
   hasBorder: i = !1,
   variant: d,
   image: m,
   textView: E = "NN",
   isActive: n,
-  isOnline: v = !1,
+  isOnline: C = !1,
   onClick: s,
-  size: t
+  size: t,
+  lazyLoad: u = !1
 }) {
-  const C = (() => {
+  const S = (() => {
     const e = (E ?? "").trim().split(/\s+/).filter(Boolean);
     return e.length === 0 ? "NN" : e.length === 1 ? e[0][0].toUpperCase() : (e[0][0] + e[e.length - 1][0]).toUpperCase();
-  })(), a = d === "circular", o = a ? 5 : 5.5, l = t ? t / o : 1, u = y[d](i), p = !a && i && n ? "border-bcolor-active" : "border-bcolor-divider", S = t && o > t ? 1 : 7, U = () => {
-    s && s(g);
-  }, x = m ? /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(
+  })(), a = d === "circular", o = a ? 5 : 5.5, l = t ? t / o : 1, p = D[d](i), f = !a && i && n ? "border-bcolor-active" : "border-bcolor-divider", U = t && o > t ? 1 : 7, x = () => {
+    s && s(v);
+  }, A = m ? /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(
     "img",
     {
-      className: c(u.image, p),
+      className: c(p.image, f),
       src: m,
-      alt: "avatar-image"
+      alt: "avatar-image",
+      loading: u ? "lazy" : void 0,
+      decoding: u ? "async" : void 0
     }
   ) }) : /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(
     "div",
     {
       "data-testid": "avatar-text-box",
-      className: c(u.textBox, p),
+      className: c(p.textBox, f),
       children: /* @__PURE__ */ r(
         I,
         {
-          swStyle: S,
-          children: C,
+          swStyle: U,
+          children: S,
           color: "visualPlaceholderDefault"
         }
       )
     }
-  ) }), f = 0.25, A = a && v && !n && /* @__PURE__ */ r(
+  ) }), h = 0.25, N = a && C && !n && /* @__PURE__ */ r(
     "div",
     {
       className: "absolute",
       style: {
-        bottom: `${l * f}rem`,
-        right: `${l * f}rem`
+        bottom: `${l * h}rem`,
+        right: `${l * h}rem`
       },
       "data-testid": "avatar-online-status",
-      children: /* @__PURE__ */ r(D, { scalingFactor: l })
+      children: /* @__PURE__ */ r(F, { scalingFactor: l })
     }
-  ), h = s ? "button" : "div", N = () => a && n ? "border-bcolor-active" : "border-[transparent]";
-  return /* @__PURE__ */ _(
-    h,
+  ), g = s ? "button" : "div", _ = () => a && n ? "border-bcolor-active" : "border-[transparent]";
+  return /* @__PURE__ */ y(
+    g,
     {
       "data-testid": "avatar-container",
-      onClick: U,
+      onClick: x,
       style: {
         width: `${t || o}rem`,
         height: `${t || o}rem`
       },
       className: c(
         "flex items-center justify-center flex-shrink-0 flex-grow-0 relative",
-        N(),
+        _(),
         "aspect-square"
       ),
-      ...h === "button" ? { type: "button" } : {},
+      ...g === "button" ? { type: "button" } : {},
       children: [
-        x,
-        A
+        A,
+        N
       ]
     }
   );
 }
 export {
-  j as Avatar
+  B as Avatar
 };

package/dist/components/molecules/collapsible-card/collapsible-card.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { AvatarProps } from '../../atoms/avatar';
 import { ButtonProps } from '../button';
+import { GlyphColor } from '../../styles/colors/colormap';
 import { ProgressBarProps } from '../dataviz/progress-bar';
 
 export type CollapsibleCardProps = {
@@ -13,13 +14,22 @@ export type CollapsibleCardProps = {
      */
     setOpen: () => void;
     /**
-     * The avatar to be displayed on the card (object).
+     * The avatar to be displayed on the card (object). Omit it when using `leadingContent` instead.
      */
-    avatar: AvatarProps;
+    avatar?: AvatarProps;
+    /**
+     * Optional interactive content (e.g. a select-all checkbox) rendered before the title, in the
+     * avatar's place. Clicks inside it don't toggle the card open/closed.
+     */
+    leadingContent?: ReactNode;
     /**
      * The title of the card.
      */
     title: string;
+    /**
+     * Text color for the title. Defaults to 'active'.
+     */
+    titleColor?: GlyphColor;
     /**
      * An optional subtitle for the card.
      */
@@ -41,4 +51,4 @@ export type CollapsibleCardProps = {
      */
     expandedContent: ReactNode;
 };
-export declare function CollapsibleCard({ open, setOpen, avatar, title, subtitle, buttonGroup, dataViz, expandedContent, additionalHeaderRightSideContent, }: CollapsibleCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function CollapsibleCard({ open, setOpen, avatar, leadingContent, title, titleColor, subtitle, buttonGroup, dataViz, expandedContent, additionalHeaderRightSideContent, }: CollapsibleCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/collapsible-card/collapsible-card.js

@@ -1,21 +1,23 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { Avatar as h } from "../../atoms/avatar/avatar.js";
-import { Icons as w } from "../../atoms/icons/icons.js";
+import { Avatar as w } from "../../atoms/avatar/avatar.js";
+import { Icons as x } from "../../atoms/icons/icons.js";
 import "../../atoms/icons/iconsSVGs/Large/Profile.js";
 import "../../atoms/icons/iconsSVGs/Small/Profile.js";
-import { Button as x } from "../button/button.js";
-import { Typography as c } from "../../styles/typography/typography.js";
-import { ProgressBar as p } from "../dataviz/progress-bar/progress-bar.js";
-function b({
-  open: l,
-  setOpen: i,
-  avatar: d,
-  title: n,
-  subtitle: s,
-  buttonGroup: o,
-  dataViz: a,
-  expandedContent: f,
-  additionalHeaderRightSideContent: t
+import { Button as v } from "../button/button.js";
+import { Typography as n } from "../../styles/typography/typography.js";
+import { ProgressBar as C } from "../dataviz/progress-bar/progress-bar.js";
+function D({
+  open: i,
+  setOpen: o,
+  avatar: c,
+  leadingContent: m,
+  title: f,
+  titleColor: t = "active",
+  subtitle: a,
+  buttonGroup: s,
+  dataViz: d,
+  expandedContent: h,
+  additionalHeaderRightSideContent: p
 }) {
   return /* @__PURE__ */ r(
     "div",
@@ -27,24 +29,26 @@ function b({
             "div",
             {
               className: "flex flex-row gap-[1rem] items-center cursor-pointer min-w-0 grow",
-              onClick: i,
+              onClick: o,
               children: [
-                /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(h, { ...d }) }),
+                m && // The whole header toggles the card; stop clicks on interactive leading content from bubbling into it.
+                /* @__PURE__ */ e("div", { onClick: (l) => l.stopPropagation(), children: m }),
+                c && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(w, { ...c }) }),
                 /* @__PURE__ */ r("div", { className: "flex flex-col justify-between min-w-0", children: [
                   /* @__PURE__ */ e(
-                    c,
+                    n,
                     {
                       swStyle: 8,
-                      children: n,
-                      color: "active",
+                      children: f,
+                      color: t,
                       className: "whitespace-nowrap overflow-hidden text-ellipsis"
                     }
                   ),
-                  s && !l && /* @__PURE__ */ e(
-                    c,
+                  a && !i && /* @__PURE__ */ e(
+                    n,
                     {
                       swStyle: 1,
-                      children: s,
+                      children: a,
                       color: "subdued",
                       className: "whitespace-nowrap overflow-hidden text-ellipsis"
                     }
@@ -54,34 +58,34 @@ function b({
             }
           ),
           /* @__PURE__ */ r("div", { className: "flex flex-row gap-[2rem] items-center flex-shrink-0", children: [
-            t,
-            !l && a && /* @__PURE__ */ e(
+            p,
+            !i && d && /* @__PURE__ */ e(
               "div",
               {
                 className: "w-[16rem] flex-shrink-0 cursor-pointer",
-                onClick: i,
-                children: /* @__PURE__ */ e(p, { hasTotalCount: !0, ...a })
+                onClick: o,
+                children: /* @__PURE__ */ e(C, { hasTotalCount: !0, ...d })
               }
             ),
             /* @__PURE__ */ r("div", { className: "flex flex-row gap-[1rem]", children: [
-              o == null ? void 0 : o.map((m) => /* @__PURE__ */ e(x, { ...m }, m.text)),
+              s == null ? void 0 : s.map((l) => /* @__PURE__ */ e(v, { ...l }, l.text)),
               /* @__PURE__ */ e(
-                w,
+                x,
                 {
-                  id: l ? "ChevronUp" : "ChevronDown",
-                  icon: l ? "ChevronUp" : "ChevronDown",
+                  id: i ? "ChevronUp" : "ChevronDown",
+                  icon: i ? "ChevronUp" : "ChevronDown",
                   button: !0,
-                  handleClick: i
+                  handleClick: o
                 }
               )
             ] })
           ] })
         ] }),
-        l && f
+        i && h
       ]
     }
   );
 }
 export {
-  b as CollapsibleCard
+  D as CollapsibleCard
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@temp-spotwork/ui",
   "private": false,
-  "version": "1.8.3",
+  "version": "1.9.1",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",