@mattermost/compass-ui 0.1.0-alpha.27 → 0.1.0-alpha.29

package/dist/components/user-avatar/UserAvatar.d.ts

@@ -1,16 +1,18 @@
 import { ImgHTMLAttributes } from 'react';
+import { StatusBadgeStatus } from '../status-badge/StatusBadge';
 /** Figma User Avatar sizes. */
-export type UserAvatarSize = '12' | '16' | '20' | '24' | '28' | '32' | '40' | '48' | '56' | '64' | '72' | '80' | '96' | '120';
+export type UserAvatarSize = '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '48' | '50' | '56' | '64' | '72' | '80' | '96' | '120' | '128';
 /** Figma User Avatar Fallback colour variants. */
-export type UserAvatarFallbackColor = 'red' | 'purple' | 'neutral' | 'blue' | 'cyan' | 'yellow' | 'green' | 'orange';
+export type UserAvatarFallbackColor = 'red' | 'purple' | 'neutral' | 'charcoal' | 'indigo' | 'teal' | 'blue' | 'cyan' | 'yellow' | 'green' | 'orange';
 export interface UserAvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'width' | 'height'> {
     /** Alt text for the avatar image. */
     alt: string;
     /** Optional CSS class name. */
     className?: string;
     /**
-     * Image URL for the avatar. When omitted, the avatar renders as Fallback
-     * (initials on a deterministic colour background).
+     * Image URL for the avatar. When omitted, or when the image fails to load,
+     * the avatar renders as Fallback (initials on a deterministic colour
+     * background). A failed image sets `data-image-failed="true"` on the root.
      */
     src?: string;
     /**
@@ -22,13 +24,21 @@ export interface UserAvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement
     fallbackColor?: UserAvatarFallbackColor;
     /** Size variant. Figma: Size. Default: 48. */
     size?: UserAvatarSize;
-    /** When true, shows online status badge (green dot with check). Figma: Status = On. */
-    status?: boolean;
+    /**
+     * Status badge shown on the avatar: `online`, `away`, `do-not-disturb` or `offline`.
+     * Omit (or `false`) to hide it. `true` is kept for backwards compatibility and
+     * means `online`. The badge size follows the avatar `size`.
+     */
+    status?: boolean | StatusBadgeStatus;
+    /** Accessible name for the status badge. Defaults to the status value; pass a translated string. */
+    statusLabel?: string;
 }
 /**
  * User Avatars represent a person — usually their uploaded photo, with initials on a colour
  * background as a fallback. Their circular shape distinguishes them from rounded-square Team
- * Avatars at a glance.
+ * Avatars at a glance. `ref` points at the root element, which is present for both the image and
+ * the fallback, so it works as a tooltip or popover anchor.
  */
-export default function UserAvatar({ alt, className, src, name, fallbackColor, size, status, ...imgProps }: UserAvatarProps): import("react/jsx-runtime").JSX.Element;
+declare const UserAvatar: import('react').ForwardRefExoticComponent<UserAvatarProps & import('react').RefAttributes<HTMLDivElement>>;
+export default UserAvatar;
 //# sourceMappingURL=UserAvatar.d.ts.map

package/dist/components/user-avatar/UserAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM/C,+BAA+B;AAC/B,MAAM,MAAM,cAAc,GACtB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,CAAC;AAEV,kDAAkD;AAClD,MAAM,MAAM,uBAAuB,GAC/B,KAAK,GACL,QAAQ,GACR,SAAS,GACT,MAAM,GACN,MAAM,GACN,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AAEb,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,iBAAiB,CAAC,gBAAgB,CAAC,EACnC,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CACnC;IACC,qCAAqC;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,8CAA8C;IAC9C,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,uFAAuF;IACvF,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA8CD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,GAAG,EACH,SAAc,EACd,GAAG,EACH,IAAI,EACJ,aAAa,EACb,IAAW,EACX,MAAc,EACd,GAAG,QAAQ,EACZ,EAAE,eAAe,2CA2CjB"}
+{"version":3,"file":"UserAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAEV,iBAAiB,EAClB,MAAM,sCAAsC,CAAC;AAI9C,+BAA+B;AAC/B,MAAM,MAAM,cAAc,GACtB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,CAAC;AAEV,kDAAkD;AAClD,MAAM,MAAM,uBAAuB,GAC/B,KAAK,GACL,QAAQ,GACR,SAAS,GACT,UAAU,GACV,QAAQ,GACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AAEb,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,iBAAiB,CAAC,gBAAgB,CAAC,EACnC,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CACnC;IACC,qCAAqC;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,8CAA8C;IAC9C,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACrC,oGAAoG;IACpG,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAqDD;;;;;GAKG;AACH,QAAA,MAAM,UAAU,4GAiFf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/user-avatar/UserAvatar.js

@@ -1,8 +1,9 @@
-import { jsxs as x, jsx as o } from "react/jsx-runtime";
-import C from "../status-badge/StatusBadge.js";
-import { toKebab as m } from "../../utils/string.js";
-import e from "./UserAvatar.module.scss.js";
-const c = [
+import { jsxs as j, jsx as o } from "react/jsx-runtime";
+import { forwardRef as w, useState as L } from "react";
+import R from "../status-badge/StatusBadge.js";
+import { toKebab as f } from "../../utils/string.js";
+import t from "./UserAvatar.module.scss.js";
+const g = [
   "red",
   "purple",
   "neutral",
@@ -10,71 +11,102 @@ const c = [
   "cyan",
   "yellow",
   "green",
-  "orange"
-], v = {
+  "orange",
+  "charcoal",
+  "indigo",
+  "teal"
+], U = {
   12: "xx-small",
   16: "xx-small",
   20: "x-small",
   24: "x-small",
   28: "x-small",
   32: "small",
+  36: "small",
   40: "small",
   48: "small",
+  50: "small",
   56: "medium",
   64: "medium",
   72: "medium",
   80: "medium",
   96: "large",
-  120: "large"
+  120: "large",
+  128: "large"
 };
-function A(l) {
-  let s = 0;
-  for (let a = 0; a < l.length; a++)
-    s = s * 31 + l.charCodeAt(a) | 0;
-  return c[Math.abs(s) % c.length];
+function O(s) {
+  let a = 0;
+  for (let e = 0; e < s.length; e++)
+    a = a * 31 + s.charCodeAt(e) | 0;
+  return g[Math.abs(a) % g.length];
 }
-function N(l) {
-  var r;
-  const s = l.trim();
-  if (!s) return "";
-  const a = s.split(/\s+/)[0];
-  return a[0].toUpperCase() + (((r = a[1]) == null ? void 0 : r.toLowerCase()) ?? "");
+function z(s) {
+  var l;
+  const a = s.trim();
+  if (!a) return "";
+  const e = a.split(/\s+/)[0];
+  return e[0].toUpperCase() + (((l = e[1]) == null ? void 0 : l.toLowerCase()) ?? "");
 }
-function L({
-  alt: l,
-  className: s = "",
-  src: a,
-  name: r,
-  fallbackColor: u,
-  size: t = "48",
-  status: f = !1,
-  ...d
-}) {
-  const h = e[`user-avatar--size-${m(t)}`], p = [e["user-avatar"], h, s].filter(Boolean).join(" "), n = !a, i = r ?? l, _ = n ? N(i) : "", b = u ?? A(i), g = n ? e[`user-avatar__fallback--${m(b)}`] : "";
-  return /* @__PURE__ */ x("div", { className: p, "data-size": t, children: [
-    n ? /* @__PURE__ */ o(
-      "span",
+const G = w(
+  function({
+    alt: a,
+    className: e = "",
+    src: l,
+    name: b,
+    fallbackColor: _,
+    size: r = "48",
+    status: n,
+    statusLabel: h,
+    onError: i,
+    ...p
+  }, v) {
+    const [x, C] = L(), A = t[`user-avatar--size-${f(r)}`], N = [t["user-avatar"], A, e].filter(Boolean).join(" "), c = !!l && l === x, m = !l || c, u = b ?? a, S = m ? z(u) : "", k = _ ?? O(u), y = m ? t[`user-avatar__fallback--${f(k)}`] : "", d = n === !0 ? "online" : n || void 0, B = U[r];
+    return /* @__PURE__ */ j(
+      "div",
       {
-        className: [e["user-avatar__fallback"], g].filter(Boolean).join(" "),
-        role: "img",
-        "aria-label": l,
-        children: _
+        ref: v,
+        className: N,
+        "data-size": r,
+        "data-image-failed": c ? "true" : void 0,
+        children: [
+          m ? /* @__PURE__ */ o(
+            "span",
+            {
+              className: [t["user-avatar__fallback"], y].filter(Boolean).join(" "),
+              role: "img",
+              "aria-label": a,
+              children: S
+            }
+          ) : /* @__PURE__ */ o(
+            "img",
+            {
+              loading: "lazy",
+              ...p,
+              onError: (F) => {
+                i == null || i(F), C(l);
+              },
+              alt: a,
+              className: t["user-avatar__image"],
+              src: l,
+              width: Number(r),
+              height: Number(r)
+            }
+          ),
+          d && /* @__PURE__ */ o("span", { className: t["user-avatar__status"], children: /* @__PURE__ */ o(
+            R,
+            {
+              status: d,
+              size: B,
+              label: h,
+              className: t["user-avatar__badge"]
+            }
+          ) })
+        ]
       }
-    ) : /* @__PURE__ */ o(
-      "img",
-      {
-        ...d,
-        alt: l,
-        className: e["user-avatar__image"],
-        src: a,
-        width: Number(t),
-        height: Number(t)
-      }
-    ),
-    f && /* @__PURE__ */ o("span", { className: e["user-avatar__status"], children: /* @__PURE__ */ o(C, { status: "online", size: v[t] }) })
-  ] });
-}
+    );
+  }
+);
 export {
-  L as default
+  G as default
 };
 //# sourceMappingURL=UserAvatar.js.map

package/dist/components/user-avatar/UserAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserAvatar.js","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import type { ImgHTMLAttributes } from 'react';\nimport StatusBadge from '@/components/status-badge/StatusBadge';\nimport type { StatusBadgeSize } from '@/components/status-badge/StatusBadge';\nimport { toKebab } from '@/utils/string';\nimport styles from './UserAvatar.module.scss';\n\n/** Figma User Avatar sizes. */\nexport type UserAvatarSize =\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '40'\n  | '48'\n  | '56'\n  | '64'\n  | '72'\n  | '80'\n  | '96'\n  | '120';\n\n/** Figma User Avatar Fallback colour variants. */\nexport type UserAvatarFallbackColor =\n  | 'red'\n  | 'purple'\n  | 'neutral'\n  | 'blue'\n  | 'cyan'\n  | 'yellow'\n  | 'green'\n  | 'orange';\n\nexport interface UserAvatarProps extends Omit<\n  ImgHTMLAttributes<HTMLImageElement>,\n  'src' | 'alt' | 'width' | 'height'\n> {\n  /** Alt text for the avatar image. */\n  alt: string;\n  /** Optional CSS class name. */\n  className?: string;\n  /**\n   * Image URL for the avatar. When omitted, the avatar renders as Fallback\n   * (initials on a deterministic colour background).\n   */\n  src?: string;\n  /**\n   * Display name used to derive initials and the fallback colour. Defaults\n   * to `alt` when not provided.\n   */\n  name?: string;\n  /** Force a specific fallback colour. Hashed from `name`/`alt` if omitted. */\n  fallbackColor?: UserAvatarFallbackColor;\n  /** Size variant. Figma: Size. Default: 48. */\n  size?: UserAvatarSize;\n  /** When true, shows online status badge (green dot with check). Figma: Status = On. */\n  status?: boolean;\n}\n\nconst FALLBACK_COLORS: readonly UserAvatarFallbackColor[] = [\n  'red',\n  'purple',\n  'neutral',\n  'blue',\n  'cyan',\n  'yellow',\n  'green',\n  'orange',\n];\n\n/** Map UserAvatar size to StatusBadge size (Figma scale). */\nconst USER_AVATAR_TO_BADGE_SIZE: Record<UserAvatarSize, StatusBadgeSize> = {\n  '12': 'xx-small',\n  '16': 'xx-small',\n  '20': 'x-small',\n  '24': 'x-small',\n  '28': 'x-small',\n  '32': 'small',\n  '40': 'small',\n  '48': 'small',\n  '56': 'medium',\n  '64': 'medium',\n  '72': 'medium',\n  '80': 'medium',\n  '96': 'large',\n  '120': 'large',\n};\n\nfunction hashFallbackColor(s: string): UserAvatarFallbackColor {\n  let h = 0;\n  for (let i = 0; i < s.length; i++) {\n    h = (h * 31 + s.charCodeAt(i)) | 0;\n  }\n  return FALLBACK_COLORS[Math.abs(h) % FALLBACK_COLORS.length];\n}\n\nfunction getInitials(name: string): string {\n  const trimmed = name.trim();\n  if (!trimmed) return '';\n  const firstName = trimmed.split(/\\s+/)[0]!;\n  return firstName[0]!.toUpperCase() + (firstName[1]?.toLowerCase() ?? '');\n}\n\n/**\n * User Avatars represent a person — usually their uploaded photo, with initials on a colour\n * background as a fallback. Their circular shape distinguishes them from rounded-square Team\n * Avatars at a glance.\n */\nexport default function UserAvatar({\n  alt,\n  className = '',\n  src,\n  name,\n  fallbackColor,\n  size = '48',\n  status = false,\n  ...imgProps\n}: UserAvatarProps) {\n  const sizeClass = styles[`user-avatar--size-${toKebab(size)}`];\n  const rootClass = [styles['user-avatar'], sizeClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const isFallback = !src;\n  const displayName = name ?? alt;\n  const initials = isFallback ? getInitials(displayName) : '';\n  const color = fallbackColor ?? hashFallbackColor(displayName);\n  const fallbackColorClass = isFallback\n    ? styles[`user-avatar__fallback--${toKebab(color)}`]\n    : '';\n\n  return (\n    <div className={rootClass} data-size={size}>\n      {isFallback ? (\n        <span\n          className={[styles['user-avatar__fallback'], fallbackColorClass]\n            .filter(Boolean)\n            .join(' ')}\n          role=\"img\"\n          aria-label={alt}\n        >\n          {initials}\n        </span>\n      ) : (\n        <img\n          {...imgProps}\n          alt={alt}\n          className={styles['user-avatar__image']}\n          src={src}\n          width={Number(size)}\n          height={Number(size)}\n        />\n      )}\n      {status && (\n        <span className={styles['user-avatar__status']}>\n          <StatusBadge status=\"online\" size={USER_AVATAR_TO_BADGE_SIZE[size]} />\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["FALLBACK_COLORS","USER_AVATAR_TO_BADGE_SIZE","hashFallbackColor","s","h","i","getInitials","name","trimmed","firstName","_a","UserAvatar","alt","className","src","fallbackColor","size","status","imgProps","sizeClass","styles","toKebab","rootClass","isFallback","displayName","initials","color","fallbackColorClass","jsxs","jsx","StatusBadge"],"mappings":";;;;AA4DA,MAAMA,IAAsD;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGMC,IAAqE;AAAA,EACzE,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,KAAO;AACT;AAEA,SAASC,EAAkBC,GAAoC;AAC7D,MAAIC,IAAI;AACR,WAASC,IAAI,GAAGA,IAAIF,EAAE,QAAQE;AAC5B,IAAAD,IAAKA,IAAI,KAAKD,EAAE,WAAWE,CAAC,IAAK;AAEnC,SAAOL,EAAgB,KAAK,IAAII,CAAC,IAAIJ,EAAgB,MAAM;AAC7D;AAEA,SAASM,EAAYC,GAAsB;;AACzC,QAAMC,IAAUD,EAAK,KAAA;AACrB,MAAI,CAACC,EAAS,QAAO;AACrB,QAAMC,IAAYD,EAAQ,MAAM,KAAK,EAAE,CAAC;AACxC,SAAOC,EAAU,CAAC,EAAG,YAAA,OAAiBC,IAAAD,EAAU,CAAC,MAAX,gBAAAC,EAAc,kBAAiB;AACvE;AAOA,SAAwBC,EAAW;AAAA,EACjC,KAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,KAAAC;AAAA,EACA,MAAAP;AAAA,EACA,eAAAQ;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,GAAGC;AACL,GAAoB;AAClB,QAAMC,IAAYC,EAAO,qBAAqBC,EAAQL,CAAI,CAAC,EAAE,GACvDM,IAAY,CAACF,EAAO,aAAa,GAAGD,GAAWN,CAAS,EAC3D,OAAO,OAAO,EACd,KAAK,GAAG,GAELU,IAAa,CAACT,GACdU,IAAcjB,KAAQK,GACtBa,IAAWF,IAAajB,EAAYkB,CAAW,IAAI,IACnDE,IAAQX,KAAiBb,EAAkBsB,CAAW,GACtDG,IAAqBJ,IACvBH,EAAO,0BAA0BC,EAAQK,CAAK,CAAC,EAAE,IACjD;AAEJ,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAWN,GAAW,aAAWN,GACnC,UAAA;AAAA,IAAAO,IACC,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,CAACT,EAAO,uBAAuB,GAAGO,CAAkB,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QACX,MAAK;AAAA,QACL,cAAYf;AAAA,QAEX,UAAAa;AAAA,MAAA;AAAA,IAAA,IAGH,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGX;AAAA,QACJ,KAAAN;AAAA,QACA,WAAWQ,EAAO,oBAAoB;AAAA,QACtC,KAAAN;AAAA,QACA,OAAO,OAAOE,CAAI;AAAA,QAClB,QAAQ,OAAOA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,IAGtBC,KACC,gBAAAY,EAAC,QAAA,EAAK,WAAWT,EAAO,qBAAqB,GAC3C,UAAA,gBAAAS,EAACC,GAAA,EAAY,QAAO,UAAS,MAAM7B,EAA0Be,CAAI,GAAG,EAAA,CACtE;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"UserAvatar.js","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react';\nimport type { ImgHTMLAttributes } from 'react';\nimport StatusBadge from '@/components/status-badge/StatusBadge';\nimport type {\n  StatusBadgeSize,\n  StatusBadgeStatus,\n} from '@/components/status-badge/StatusBadge';\nimport { toKebab } from '@/utils/string';\nimport styles from './UserAvatar.module.scss';\n\n/** Figma User Avatar sizes. */\nexport type UserAvatarSize =\n  | '12'\n  | '16'\n  | '20'\n  | '24'\n  | '28'\n  | '32'\n  | '36'\n  | '40'\n  | '48'\n  | '50'\n  | '56'\n  | '64'\n  | '72'\n  | '80'\n  | '96'\n  | '120'\n  | '128';\n\n/** Figma User Avatar Fallback colour variants. */\nexport type UserAvatarFallbackColor =\n  | 'red'\n  | 'purple'\n  | 'neutral'\n  | 'charcoal'\n  | 'indigo'\n  | 'teal'\n  | 'blue'\n  | 'cyan'\n  | 'yellow'\n  | 'green'\n  | 'orange';\n\nexport interface UserAvatarProps extends Omit<\n  ImgHTMLAttributes<HTMLImageElement>,\n  'src' | 'alt' | 'width' | 'height'\n> {\n  /** Alt text for the avatar image. */\n  alt: string;\n  /** Optional CSS class name. */\n  className?: string;\n  /**\n   * Image URL for the avatar. When omitted, or when the image fails to load,\n   * the avatar renders as Fallback (initials on a deterministic colour\n   * background). A failed image sets `data-image-failed=\"true\"` on the root.\n   */\n  src?: string;\n  /**\n   * Display name used to derive initials and the fallback colour. Defaults\n   * to `alt` when not provided.\n   */\n  name?: string;\n  /** Force a specific fallback colour. Hashed from `name`/`alt` if omitted. */\n  fallbackColor?: UserAvatarFallbackColor;\n  /** Size variant. Figma: Size. Default: 48. */\n  size?: UserAvatarSize;\n  /**\n   * Status badge shown on the avatar: `online`, `away`, `do-not-disturb` or `offline`.\n   * Omit (or `false`) to hide it. `true` is kept for backwards compatibility and\n   * means `online`. The badge size follows the avatar `size`.\n   */\n  status?: boolean | StatusBadgeStatus;\n  /** Accessible name for the status badge. Defaults to the status value; pass a translated string. */\n  statusLabel?: string;\n}\n\n/** Colours picked by the name hash when `fallbackColor` is not set. */\nconst FALLBACK_COLORS: readonly UserAvatarFallbackColor[] = [\n  'red',\n  'purple',\n  'neutral',\n  'blue',\n  'cyan',\n  'yellow',\n  'green',\n  'orange',\n  'charcoal',\n  'indigo',\n  'teal',\n];\n\n/** Map UserAvatar size to StatusBadge size (Figma scale). */\nconst USER_AVATAR_TO_BADGE_SIZE: Record<UserAvatarSize, StatusBadgeSize> = {\n  '12': 'xx-small',\n  '16': 'xx-small',\n  '20': 'x-small',\n  '24': 'x-small',\n  '28': 'x-small',\n  '32': 'small',\n  '36': 'small',\n  '40': 'small',\n  '48': 'small',\n  '50': 'small',\n  '56': 'medium',\n  '64': 'medium',\n  '72': 'medium',\n  '80': 'medium',\n  '96': 'large',\n  '120': 'large',\n  '128': 'large',\n};\n\nfunction hashFallbackColor(s: string): UserAvatarFallbackColor {\n  let h = 0;\n  for (let i = 0; i < s.length; i++) {\n    h = (h * 31 + s.charCodeAt(i)) | 0;\n  }\n  return FALLBACK_COLORS[Math.abs(h) % FALLBACK_COLORS.length];\n}\n\nfunction getInitials(name: string): string {\n  const trimmed = name.trim();\n  if (!trimmed) return '';\n  const firstName = trimmed.split(/\\s+/)[0]!;\n  return firstName[0]!.toUpperCase() + (firstName[1]?.toLowerCase() ?? '');\n}\n\n/**\n * User Avatars represent a person — usually their uploaded photo, with initials on a colour\n * background as a fallback. Their circular shape distinguishes them from rounded-square Team\n * Avatars at a glance. `ref` points at the root element, which is present for both the image and\n * the fallback, so it works as a tooltip or popover anchor.\n */\nconst UserAvatar = forwardRef<HTMLDivElement, UserAvatarProps>(\n  function UserAvatar(\n    {\n      alt,\n      className = '',\n      src,\n      name,\n      fallbackColor,\n      size = '48',\n      status,\n      statusLabel,\n      onError,\n      ...imgProps\n    },\n    ref,\n  ) {\n    // The src that failed to load; a new src is tried again.\n    const [failedSrc, setFailedSrc] = useState<string>();\n    const sizeClass = styles[`user-avatar--size-${toKebab(size)}`];\n    const rootClass = [styles['user-avatar'], sizeClass, className]\n      .filter(Boolean)\n      .join(' ');\n\n    const imageFailed = !!src && src === failedSrc;\n    const isFallback = !src || imageFailed;\n    const displayName = name ?? alt;\n    const initials = isFallback ? getInitials(displayName) : '';\n    const color = fallbackColor ?? hashFallbackColor(displayName);\n    const fallbackColorClass = isFallback\n      ? styles[`user-avatar__fallback--${toKebab(color)}`]\n      : '';\n\n    const badgeStatus: StatusBadgeStatus | undefined =\n      status === true ? 'online' : status || undefined;\n    const badgeSize = USER_AVATAR_TO_BADGE_SIZE[size];\n\n    return (\n      <div\n        ref={ref}\n        className={rootClass}\n        data-size={size}\n        data-image-failed={imageFailed ? 'true' : undefined}\n      >\n        {isFallback ? (\n          <span\n            className={[styles['user-avatar__fallback'], fallbackColorClass]\n              .filter(Boolean)\n              .join(' ')}\n            role=\"img\"\n            aria-label={alt}\n          >\n            {initials}\n          </span>\n        ) : (\n          <img\n            loading=\"lazy\"\n            {...imgProps}\n            onError={(e) => {\n              onError?.(e);\n              setFailedSrc(src);\n            }}\n            alt={alt}\n            className={styles['user-avatar__image']}\n            src={src}\n            width={Number(size)}\n            height={Number(size)}\n          />\n        )}\n        {badgeStatus && (\n          <span className={styles['user-avatar__status']}>\n            <StatusBadge\n              status={badgeStatus}\n              size={badgeSize}\n              label={statusLabel}\n              className={styles['user-avatar__badge']}\n            />\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nexport default UserAvatar;\n"],"names":["FALLBACK_COLORS","USER_AVATAR_TO_BADGE_SIZE","hashFallbackColor","h","i","getInitials","name","trimmed","firstName","_a","UserAvatar","forwardRef","alt","className","src","fallbackColor","size","status","statusLabel","onError","imgProps","ref","failedSrc","setFailedSrc","useState","sizeClass","styles","toKebab","rootClass","imageFailed","isFallback","displayName","initials","color","fallbackColorClass","badgeStatus","badgeSize","jsxs","jsx","e","StatusBadge"],"mappings":"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"}

package/dist/components/user-avatar/UserAvatar.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./UserAvatar.css');const a={"user-avatar":"_user-avatar_1csb5_2","user-avatar__image":"_user-avatar__image_1csb5_8","user-avatar__fallback":"_user-avatar__fallback_1csb5_16","user-avatar__fallback--red":"_user-avatar__fallback--red_1csb5_29","user-avatar__fallback--purple":"_user-avatar__fallback--purple_1csb5_32","user-avatar__fallback--neutral":"_user-avatar__fallback--neutral_1csb5_35","user-avatar__fallback--blue":"_user-avatar__fallback--blue_1csb5_38","user-avatar__fallback--cyan":"_user-avatar__fallback--cyan_1csb5_41","user-avatar__fallback--yellow":"_user-avatar__fallback--yellow_1csb5_44","user-avatar__fallback--green":"_user-avatar__fallback--green_1csb5_47","user-avatar__fallback--orange":"_user-avatar__fallback--orange_1csb5_50","user-avatar__status":"_user-avatar__status_1csb5_53","user-avatar--size-12":"_user-avatar--size-12_1csb5_62","user-avatar--size-16":"_user-avatar--size-16_1csb5_73","user-avatar--size-20":"_user-avatar--size-20_1csb5_84","user-avatar--size-24":"_user-avatar--size-24_1csb5_95","user-avatar--size-28":"_user-avatar--size-28_1csb5_106","user-avatar--size-32":"_user-avatar--size-32_1csb5_117","user-avatar--size-40":"_user-avatar--size-40_1csb5_128","user-avatar--size-48":"_user-avatar--size-48_1csb5_139","user-avatar--size-56":"_user-avatar--size-56_1csb5_150","user-avatar--size-64":"_user-avatar--size-64_1csb5_161","user-avatar--size-72":"_user-avatar--size-72_1csb5_172","user-avatar--size-80":"_user-avatar--size-80_1csb5_183","user-avatar--size-96":"_user-avatar--size-96_1csb5_194","user-avatar--size-120":"_user-avatar--size-120_1csb5_205"};exports.default=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./UserAvatar.css');const a={"user-avatar":"_user-avatar_enh1y_13","user-avatar__image":"_user-avatar__image_enh1y_19","user-avatar__fallback":"_user-avatar__fallback_enh1y_27","user-avatar__fallback--red":"_user-avatar__fallback--red_enh1y_40","user-avatar__fallback--purple":"_user-avatar__fallback--purple_enh1y_43","user-avatar__fallback--neutral":"_user-avatar__fallback--neutral_enh1y_46","user-avatar__fallback--charcoal":"_user-avatar__fallback--charcoal_enh1y_49","user-avatar__fallback--indigo":"_user-avatar__fallback--indigo_enh1y_52","user-avatar__fallback--teal":"_user-avatar__fallback--teal_enh1y_55","user-avatar__fallback--blue":"_user-avatar__fallback--blue_enh1y_58","user-avatar__fallback--cyan":"_user-avatar__fallback--cyan_enh1y_61","user-avatar__fallback--yellow":"_user-avatar__fallback--yellow_enh1y_64","user-avatar__fallback--green":"_user-avatar__fallback--green_enh1y_67","user-avatar__fallback--orange":"_user-avatar__fallback--orange_enh1y_70","user-avatar__status":"_user-avatar__status_enh1y_73","user-avatar--size-12":"_user-avatar--size-12_enh1y_82","user-avatar--size-16":"_user-avatar--size-16_enh1y_93","user-avatar--size-20":"_user-avatar--size-20_enh1y_104","user-avatar--size-24":"_user-avatar--size-24_enh1y_115","user-avatar--size-28":"_user-avatar--size-28_enh1y_126","user-avatar--size-32":"_user-avatar--size-32_enh1y_137","user-avatar--size-36":"_user-avatar--size-36_enh1y_148","user-avatar--size-40":"_user-avatar--size-40_enh1y_159","user-avatar--size-48":"_user-avatar--size-48_enh1y_170","user-avatar--size-50":"_user-avatar--size-50_enh1y_181","user-avatar--size-56":"_user-avatar--size-56_enh1y_192","user-avatar__badge":"_user-avatar__badge_enh1y_199","user-avatar--size-64":"_user-avatar--size-64_enh1y_207","user-avatar--size-72":"_user-avatar--size-72_enh1y_222","user-avatar--size-80":"_user-avatar--size-80_enh1y_237","user-avatar--size-96":"_user-avatar--size-96_enh1y_252","user-avatar--size-120":"_user-avatar--size-120_enh1y_263","user-avatar--size-128":"_user-avatar--size-128_enh1y_274"};exports.default=a;
 //# sourceMappingURL=UserAvatar.module.scss.cjs.map

package/dist/components/user-avatar/UserAvatar.module.scss.js

@@ -1,30 +1,37 @@
 import './UserAvatar.css';const a = {
-  "user-avatar": "_user-avatar_1csb5_2",
-  "user-avatar__image": "_user-avatar__image_1csb5_8",
-  "user-avatar__fallback": "_user-avatar__fallback_1csb5_16",
-  "user-avatar__fallback--red": "_user-avatar__fallback--red_1csb5_29",
-  "user-avatar__fallback--purple": "_user-avatar__fallback--purple_1csb5_32",
-  "user-avatar__fallback--neutral": "_user-avatar__fallback--neutral_1csb5_35",
-  "user-avatar__fallback--blue": "_user-avatar__fallback--blue_1csb5_38",
-  "user-avatar__fallback--cyan": "_user-avatar__fallback--cyan_1csb5_41",
-  "user-avatar__fallback--yellow": "_user-avatar__fallback--yellow_1csb5_44",
-  "user-avatar__fallback--green": "_user-avatar__fallback--green_1csb5_47",
-  "user-avatar__fallback--orange": "_user-avatar__fallback--orange_1csb5_50",
-  "user-avatar__status": "_user-avatar__status_1csb5_53",
-  "user-avatar--size-12": "_user-avatar--size-12_1csb5_62",
-  "user-avatar--size-16": "_user-avatar--size-16_1csb5_73",
-  "user-avatar--size-20": "_user-avatar--size-20_1csb5_84",
-  "user-avatar--size-24": "_user-avatar--size-24_1csb5_95",
-  "user-avatar--size-28": "_user-avatar--size-28_1csb5_106",
-  "user-avatar--size-32": "_user-avatar--size-32_1csb5_117",
-  "user-avatar--size-40": "_user-avatar--size-40_1csb5_128",
-  "user-avatar--size-48": "_user-avatar--size-48_1csb5_139",
-  "user-avatar--size-56": "_user-avatar--size-56_1csb5_150",
-  "user-avatar--size-64": "_user-avatar--size-64_1csb5_161",
-  "user-avatar--size-72": "_user-avatar--size-72_1csb5_172",
-  "user-avatar--size-80": "_user-avatar--size-80_1csb5_183",
-  "user-avatar--size-96": "_user-avatar--size-96_1csb5_194",
-  "user-avatar--size-120": "_user-avatar--size-120_1csb5_205"
+  "user-avatar": "_user-avatar_enh1y_13",
+  "user-avatar__image": "_user-avatar__image_enh1y_19",
+  "user-avatar__fallback": "_user-avatar__fallback_enh1y_27",
+  "user-avatar__fallback--red": "_user-avatar__fallback--red_enh1y_40",
+  "user-avatar__fallback--purple": "_user-avatar__fallback--purple_enh1y_43",
+  "user-avatar__fallback--neutral": "_user-avatar__fallback--neutral_enh1y_46",
+  "user-avatar__fallback--charcoal": "_user-avatar__fallback--charcoal_enh1y_49",
+  "user-avatar__fallback--indigo": "_user-avatar__fallback--indigo_enh1y_52",
+  "user-avatar__fallback--teal": "_user-avatar__fallback--teal_enh1y_55",
+  "user-avatar__fallback--blue": "_user-avatar__fallback--blue_enh1y_58",
+  "user-avatar__fallback--cyan": "_user-avatar__fallback--cyan_enh1y_61",
+  "user-avatar__fallback--yellow": "_user-avatar__fallback--yellow_enh1y_64",
+  "user-avatar__fallback--green": "_user-avatar__fallback--green_enh1y_67",
+  "user-avatar__fallback--orange": "_user-avatar__fallback--orange_enh1y_70",
+  "user-avatar__status": "_user-avatar__status_enh1y_73",
+  "user-avatar--size-12": "_user-avatar--size-12_enh1y_82",
+  "user-avatar--size-16": "_user-avatar--size-16_enh1y_93",
+  "user-avatar--size-20": "_user-avatar--size-20_enh1y_104",
+  "user-avatar--size-24": "_user-avatar--size-24_enh1y_115",
+  "user-avatar--size-28": "_user-avatar--size-28_enh1y_126",
+  "user-avatar--size-32": "_user-avatar--size-32_enh1y_137",
+  "user-avatar--size-36": "_user-avatar--size-36_enh1y_148",
+  "user-avatar--size-40": "_user-avatar--size-40_enh1y_159",
+  "user-avatar--size-48": "_user-avatar--size-48_enh1y_170",
+  "user-avatar--size-50": "_user-avatar--size-50_enh1y_181",
+  "user-avatar--size-56": "_user-avatar--size-56_enh1y_192",
+  "user-avatar__badge": "_user-avatar__badge_enh1y_199",
+  "user-avatar--size-64": "_user-avatar--size-64_enh1y_207",
+  "user-avatar--size-72": "_user-avatar--size-72_enh1y_222",
+  "user-avatar--size-80": "_user-avatar--size-80_enh1y_237",
+  "user-avatar--size-96": "_user-avatar--size-96_enh1y_252",
+  "user-avatar--size-120": "_user-avatar--size-120_enh1y_263",
+  "user-avatar--size-128": "_user-avatar--size-128_enh1y_274"
 };
 export {
   a as default

package/dist/components/user-avatar/UserAvatar.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserAvatar.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"UserAvatar.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/user-avatar-group/UserAvatarGroup.css

@@ -1 +1 @@
-._user-avatar-group_17zfx_2{display:inline-flex;align-items:center;padding-right:var(--spacing-xxxxs)}._user-avatar-group__item_17zfx_7{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;margin-right:-2px;border-radius:var(--radius-pill);outline:1px solid var(--center-channel-bg, var(--color-neutral-0));transform:scale(1);transition:transform var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._user-avatar-group__item_17zfx_7:hover{z-index:10;transform:scale(1.04);box-shadow:var(--elevation-2)}._user-avatar-group__item_17zfx_7:hover ._user-avatar-group__tooltip-layer_17zfx_26{opacity:1;visibility:visible;transition:opacity var(--duration-quick) var(--ease-entrance),visibility 0s linear 0s}._user-avatar-group__trigger_17zfx_31{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:inherit;overflow:hidden}._user-avatar-group__tooltip-layer_17zfx_26{position:absolute;left:50%;bottom:100%;z-index:20;margin-bottom:var(--spacing-xxxxs);transform:translate(-50%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-exit),visibility 0s linear var(--duration-quick)}._user-avatar-group__tooltip_17zfx_26{flex-shrink:0}._user-avatar-group__overflow_17zfx_55{display:inline-flex;align-items:center;justify-content:center;background-color:var(--center-channel-bg);background-image:linear-gradient(rgba(var(--center-channel-color-rgb),.08),rgba(var(--center-channel-color-rgb),.08));color:rgba(var(--center-channel-color-rgb),.56);font-size:var(--font-size-25);font-weight:var(--font-weight-semibold);letter-spacing:.01em;border-radius:var(--radius-pill)}._user-avatar-group--size-24_17zfx_67{padding-right:3px}._user-avatar-group--size-24_17zfx_67 ._user-avatar-group__item_17zfx_7{width:24px;height:24px;margin-right:-3px;outline-width:1px}._user-avatar-group--size-24_17zfx_67 ._user-avatar-group__overflow_17zfx_55{font-size:var(--font-size-50)}._user-avatar-group--size-28_17zfx_79{padding-right:3px}._user-avatar-group--size-28_17zfx_79 ._user-avatar-group__item_17zfx_7{width:28px;height:28px;margin-right:-3px;outline-width:2px}._user-avatar-group--size-28_17zfx_79 ._user-avatar-group__overflow_17zfx_55{font-size:var(--font-size-75)}._user-avatar-group--size-32_17zfx_91{padding-right:3px}._user-avatar-group--size-32_17zfx_91 ._user-avatar-group__item_17zfx_7{width:32px;height:32px;margin-right:-3px;outline-width:2px}._user-avatar-group--size-32_17zfx_91 ._user-avatar-group__overflow_17zfx_55{font-size:var(--font-size-75)}._user-avatar-group--size-40_17zfx_103{padding-right:5px}._user-avatar-group--size-40_17zfx_103 ._user-avatar-group__item_17zfx_7{width:40px;height:40px;margin-right:-5px;outline-width:2px}._user-avatar-group--size-40_17zfx_103 ._user-avatar-group__overflow_17zfx_55{font-size:var(--font-size-100)}._user-avatar-group--size-48_17zfx_115{padding-right:7px}._user-avatar-group--size-48_17zfx_115 ._user-avatar-group__item_17zfx_7{width:48px;height:48px;margin-right:-7px;outline-width:2px}._user-avatar-group--size-48_17zfx_115 ._user-avatar-group__overflow_17zfx_55{font-size:var(--font-size-200)}._user-avatar-group--size-56_17zfx_127{padding-right:8px}._user-avatar-group--size-56_17zfx_127 ._user-avatar-group__item_17zfx_7{width:56px;height:56px;margin-right:-8px;outline-width:2px}._user-avatar-group--size-56_17zfx_127 ._user-avatar-group__overflow_17zfx_55{font-size:var(--font-size-300)}._user-avatar-group--size-64_17zfx_139{padding-right:9px}._user-avatar-group--size-64_17zfx_139 ._user-avatar-group__item_17zfx_7{width:64px;height:64px;margin-right:-9px;outline-width:2px}._user-avatar-group--size-64_17zfx_139 ._user-avatar-group__overflow_17zfx_55{font-size:var(--font-size-400)}._user-avatar-group--size-72_17zfx_151{padding-right:10px}._user-avatar-group--size-72_17zfx_151 ._user-avatar-group__item_17zfx_7{width:72px;height:72px;margin-right:-10px;outline-width:2px}._user-avatar-group--size-72_17zfx_151 ._user-avatar-group__overflow_17zfx_55{font-size:var(--font-size-500)}
+._user-avatar-group_keccc_13{display:inline-flex;align-items:center;padding-right:var(--spacing-xxxxs)}._user-avatar-group__item_keccc_18{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;margin-right:calc(-1 * var(--spacing-xxxxs));border-radius:var(--radius-pill);outline:1px solid var(--center-channel-bg, var(--color-neutral-0));transform:scale(1);transition:transform var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._user-avatar-group__item_keccc_18:hover{z-index:10;transform:scale(1.04);box-shadow:var(--elevation-2)}._user-avatar-group__item_keccc_18:hover ._user-avatar-group__tooltip-layer_keccc_37{opacity:1;visibility:visible;transition:opacity var(--duration-quick) var(--ease-entrance),visibility 0s linear 0s}._user-avatar-group__trigger_keccc_42{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:inherit;overflow:hidden}._user-avatar-group__tooltip-layer_keccc_37{position:absolute;left:50%;bottom:100%;z-index:20;margin-bottom:var(--spacing-xxxxs);transform:translate(-50%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-exit),visibility 0s linear var(--duration-quick)}._user-avatar-group__tooltip_keccc_37{flex-shrink:0}._user-avatar-group__overflow_keccc_66{display:inline-flex;align-items:center;justify-content:center;background-color:var(--center-channel-bg);background-image:linear-gradient(rgba(var(--center-channel-color-rgb),.08),rgba(var(--center-channel-color-rgb),.08));color:rgba(var(--center-channel-color-rgb),.56);font-size:var(--font-size-25);font-weight:var(--font-weight-semibold);letter-spacing:.01em;border-radius:var(--radius-pill)}._user-avatar-group--size-24_keccc_78{padding-right:3px}._user-avatar-group--size-24_keccc_78 ._user-avatar-group__item_keccc_18{width:24px;height:24px;margin-right:-3px;outline-width:1px}._user-avatar-group--size-24_keccc_78 ._user-avatar-group__overflow_keccc_66{font-size:var(--font-size-50)}._user-avatar-group--size-28_keccc_90{padding-right:3px}._user-avatar-group--size-28_keccc_90 ._user-avatar-group__item_keccc_18{width:28px;height:28px;margin-right:-3px;outline-width:2px}._user-avatar-group--size-28_keccc_90 ._user-avatar-group__overflow_keccc_66{font-size:var(--font-size-75)}._user-avatar-group--size-32_keccc_102{padding-right:3px}._user-avatar-group--size-32_keccc_102 ._user-avatar-group__item_keccc_18{width:32px;height:32px;margin-right:-3px;outline-width:2px}._user-avatar-group--size-32_keccc_102 ._user-avatar-group__overflow_keccc_66{font-size:var(--font-size-75)}._user-avatar-group--size-40_keccc_114{padding-right:5px}._user-avatar-group--size-40_keccc_114 ._user-avatar-group__item_keccc_18{width:40px;height:40px;margin-right:-5px;outline-width:2px}._user-avatar-group--size-40_keccc_114 ._user-avatar-group__overflow_keccc_66{font-size:var(--font-size-100)}._user-avatar-group--size-48_keccc_126{padding-right:7px}._user-avatar-group--size-48_keccc_126 ._user-avatar-group__item_keccc_18{width:48px;height:48px;margin-right:-7px;outline-width:2px}._user-avatar-group--size-48_keccc_126 ._user-avatar-group__overflow_keccc_66{font-size:var(--font-size-200)}._user-avatar-group--size-56_keccc_138{padding-right:8px}._user-avatar-group--size-56_keccc_138 ._user-avatar-group__item_keccc_18{width:56px;height:56px;margin-right:-8px;outline-width:2px}._user-avatar-group--size-56_keccc_138 ._user-avatar-group__overflow_keccc_66{font-size:var(--font-size-300)}._user-avatar-group--size-64_keccc_150{padding-right:9px}._user-avatar-group--size-64_keccc_150 ._user-avatar-group__item_keccc_18{width:64px;height:64px;margin-right:-9px;outline-width:2px}._user-avatar-group--size-64_keccc_150 ._user-avatar-group__overflow_keccc_66{font-size:var(--font-size-400)}._user-avatar-group--size-72_keccc_162{padding-right:10px}._user-avatar-group--size-72_keccc_162 ._user-avatar-group__item_keccc_18{width:72px;height:72px;margin-right:-10px;outline-width:2px}._user-avatar-group--size-72_keccc_162 ._user-avatar-group__overflow_keccc_66{font-size:var(--font-size-500)}

package/dist/components/user-avatar-group/UserAvatarGroup.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./UserAvatarGroup.css');const r={"user-avatar-group":"_user-avatar-group_17zfx_2","user-avatar-group__item":"_user-avatar-group__item_17zfx_7","user-avatar-group__tooltip-layer":"_user-avatar-group__tooltip-layer_17zfx_26","user-avatar-group__trigger":"_user-avatar-group__trigger_17zfx_31","user-avatar-group__tooltip":"_user-avatar-group__tooltip_17zfx_26","user-avatar-group__overflow":"_user-avatar-group__overflow_17zfx_55","user-avatar-group--size-24":"_user-avatar-group--size-24_17zfx_67","user-avatar-group--size-28":"_user-avatar-group--size-28_17zfx_79","user-avatar-group--size-32":"_user-avatar-group--size-32_17zfx_91","user-avatar-group--size-40":"_user-avatar-group--size-40_17zfx_103","user-avatar-group--size-48":"_user-avatar-group--size-48_17zfx_115","user-avatar-group--size-56":"_user-avatar-group--size-56_17zfx_127","user-avatar-group--size-64":"_user-avatar-group--size-64_17zfx_139","user-avatar-group--size-72":"_user-avatar-group--size-72_17zfx_151"};exports.default=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./UserAvatarGroup.css');const r={"user-avatar-group":"_user-avatar-group_keccc_13","user-avatar-group__item":"_user-avatar-group__item_keccc_18","user-avatar-group__tooltip-layer":"_user-avatar-group__tooltip-layer_keccc_37","user-avatar-group__trigger":"_user-avatar-group__trigger_keccc_42","user-avatar-group__tooltip":"_user-avatar-group__tooltip_keccc_37","user-avatar-group__overflow":"_user-avatar-group__overflow_keccc_66","user-avatar-group--size-24":"_user-avatar-group--size-24_keccc_78","user-avatar-group--size-28":"_user-avatar-group--size-28_keccc_90","user-avatar-group--size-32":"_user-avatar-group--size-32_keccc_102","user-avatar-group--size-40":"_user-avatar-group--size-40_keccc_114","user-avatar-group--size-48":"_user-avatar-group--size-48_keccc_126","user-avatar-group--size-56":"_user-avatar-group--size-56_keccc_138","user-avatar-group--size-64":"_user-avatar-group--size-64_keccc_150","user-avatar-group--size-72":"_user-avatar-group--size-72_keccc_162"};exports.default=r;
 //# sourceMappingURL=UserAvatarGroup.module.scss.cjs.map

package/dist/components/user-avatar-group/UserAvatarGroup.module.scss.js

@@ -1,18 +1,18 @@
 import './UserAvatarGroup.css';const r = {
-  "user-avatar-group": "_user-avatar-group_17zfx_2",
-  "user-avatar-group__item": "_user-avatar-group__item_17zfx_7",
-  "user-avatar-group__tooltip-layer": "_user-avatar-group__tooltip-layer_17zfx_26",
-  "user-avatar-group__trigger": "_user-avatar-group__trigger_17zfx_31",
-  "user-avatar-group__tooltip": "_user-avatar-group__tooltip_17zfx_26",
-  "user-avatar-group__overflow": "_user-avatar-group__overflow_17zfx_55",
-  "user-avatar-group--size-24": "_user-avatar-group--size-24_17zfx_67",
-  "user-avatar-group--size-28": "_user-avatar-group--size-28_17zfx_79",
-  "user-avatar-group--size-32": "_user-avatar-group--size-32_17zfx_91",
-  "user-avatar-group--size-40": "_user-avatar-group--size-40_17zfx_103",
-  "user-avatar-group--size-48": "_user-avatar-group--size-48_17zfx_115",
-  "user-avatar-group--size-56": "_user-avatar-group--size-56_17zfx_127",
-  "user-avatar-group--size-64": "_user-avatar-group--size-64_17zfx_139",
-  "user-avatar-group--size-72": "_user-avatar-group--size-72_17zfx_151"
+  "user-avatar-group": "_user-avatar-group_keccc_13",
+  "user-avatar-group__item": "_user-avatar-group__item_keccc_18",
+  "user-avatar-group__tooltip-layer": "_user-avatar-group__tooltip-layer_keccc_37",
+  "user-avatar-group__trigger": "_user-avatar-group__trigger_keccc_42",
+  "user-avatar-group__tooltip": "_user-avatar-group__tooltip_keccc_37",
+  "user-avatar-group__overflow": "_user-avatar-group__overflow_keccc_66",
+  "user-avatar-group--size-24": "_user-avatar-group--size-24_keccc_78",
+  "user-avatar-group--size-28": "_user-avatar-group--size-28_keccc_90",
+  "user-avatar-group--size-32": "_user-avatar-group--size-32_keccc_102",
+  "user-avatar-group--size-40": "_user-avatar-group--size-40_keccc_114",
+  "user-avatar-group--size-48": "_user-avatar-group--size-48_keccc_126",
+  "user-avatar-group--size-56": "_user-avatar-group--size-56_keccc_138",
+  "user-avatar-group--size-64": "_user-avatar-group--size-64_keccc_150",
+  "user-avatar-group--size-72": "_user-avatar-group--size-72_keccc_162"
 };
 export {
   r as default

package/dist/hooks/use-anchored-popup-portal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-anchored-popup-portal.cjs","sources":["../../src/hooks/use-anchored-popup-portal.ts"],"sourcesContent":["import {\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type RefObject,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  ANCHORED_POPUP_GAP,\n  ANCHORED_POPUP_Z_INDEX,\n  computeAnchoredPopupFixedStyle,\n  computeAnchoredPopupPlacement,\n  getAnchoredPopupContainerFrame,\n  type PopupPlacement,\n} from '@/utils/anchoredPopupPlacement';\n\nexport interface UseAnchoredPopupPortalOptions {\n  /** Height used for the flip decision when content isn’t measured yet. */\n  preferredHeight: number;\n  /** Cap for scrollable menus (Select/Combobox). Omit for intrinsic panels. */\n  maxHeightCap?: number;\n  /** Ref to the portaled panel for measuring intrinsic height (DateRangePicker). */\n  contentRef?: RefObject<HTMLElement | null>;\n  /**\n   * Portal mount node; defaults to `document.body` with viewport-fixed coords.\n   * Custom containers must establish a positioning context (`position` other\n   * than `static`); coords are converted to that container’s space.\n   */\n  portalContainer?: HTMLElement | null;\n  zIndex?: number;\n  /**\n   * When true (default), fixed width matches the trigger.\n   * DateRangePicker sets false and keeps its CSS width.\n   */\n  matchWidth?: boolean;\n  gap?: number;\n}\n\nexport interface UseAnchoredPopupPortalResult {\n  placement: PopupPlacement;\n  maxHeight: number;\n  style: CSSProperties;\n  /** Ref for the portaled surface — pass to `useOutsideClose` as a second root. */\n  portalRef: RefObject<HTMLDivElement | null>;\n  /** Wraps children in a portal to `portalContainer` or `document.body`. */\n  renderPortal: (children: ReactNode) => ReactNode;\n}\n\nconst DEFAULT_PLACEMENT: PopupPlacement = 'below';\n\nfunction resolvePortalMount(\n  portalContainer: HTMLElement | null | undefined,\n): HTMLElement | null {\n  if (typeof document === 'undefined') return null;\n  return portalContainer ?? document.body;\n}\n\nfunction usesViewportFixedCoords(mount: HTMLElement): boolean {\n  return mount === document.body;\n}\n\n/**\n * Positions a form-widget popup in a portal with viewport-aware above/below flip.\n * Internal to compass-ui form widgets — not a general overlay positioning API.\n */\nexport function useAnchoredPopupPortal(\n  anchorRef: RefObject<HTMLElement | null>,\n  isOpen: boolean,\n  options: UseAnchoredPopupPortalOptions,\n): UseAnchoredPopupPortalResult {\n  const {\n    preferredHeight,\n    maxHeightCap,\n    contentRef,\n    portalContainer = null,\n    zIndex = ANCHORED_POPUP_Z_INDEX,\n    matchWidth = true,\n    gap = ANCHORED_POPUP_GAP,\n  } = options;\n\n  const portalRef = useRef<HTMLDivElement | null>(null);\n  const [placement, setPlacement] = useState<PopupPlacement>(DEFAULT_PLACEMENT);\n  const [maxHeight, setMaxHeight] = useState(maxHeightCap ?? preferredHeight);\n  const [style, setStyle] = useState<CSSProperties>({\n    position: 'fixed',\n    top: 0,\n    left: 0,\n    width: matchWidth ? 0 : undefined,\n    zIndex,\n  });\n\n  const update = useCallback(() => {\n    const anchor = anchorRef.current;\n    if (!anchor) return;\n\n    const mount = resolvePortalMount(portalContainer);\n    if (!mount) return;\n\n    const rect = anchor.getBoundingClientRect();\n    const viewportHeight = window.innerHeight;\n    const viewportFixed = usesViewportFixedCoords(mount);\n    const containerFrame = viewportFixed\n      ? undefined\n      : getAnchoredPopupContainerFrame(mount);\n\n    const measured =\n      contentRef?.current?.offsetHeight ?? portalRef.current?.offsetHeight ?? 0;\n    const heightForFlip = measured > 0 ? measured : preferredHeight;\n\n    const { placement: nextPlacement, maxHeight: nextMaxHeight } =\n      computeAnchoredPopupPlacement(rect, viewportHeight, {\n        gap,\n        preferredHeight: heightForFlip,\n        maxHeightCap,\n        bounds: containerFrame?.bounds,\n      });\n\n    const fixed = computeAnchoredPopupFixedStyle(rect, nextPlacement, {\n      gap,\n      zIndex,\n      width: matchWidth ? rect.width : undefined,\n      viewportHeight,\n      containerFrame,\n    });\n\n    setPlacement(nextPlacement);\n    setMaxHeight(nextMaxHeight);\n    setStyle({\n      position: fixed.position,\n      left: fixed.left,\n      zIndex: fixed.zIndex,\n      ...(matchWidth ? { width: fixed.width } : null),\n      ...(nextPlacement === 'below'\n        ? { top: fixed.top, bottom: 'auto' }\n        : { bottom: fixed.bottom, top: 'auto' }),\n    });\n  }, [\n    anchorRef,\n    contentRef,\n    gap,\n    matchWidth,\n    maxHeightCap,\n    portalContainer,\n    preferredHeight,\n    zIndex,\n  ]);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    update();\n\n    function handle() {\n      update();\n    }\n\n    window.addEventListener('resize', handle);\n    // Capture phase so nested scroll containers (modals, RHS) are covered.\n    document.addEventListener('scroll', handle, true);\n    return () => {\n      window.removeEventListener('resize', handle);\n      document.removeEventListener('scroll', handle, true);\n    };\n  }, [isOpen, update]);\n\n  // Re-measure after content mounts / changes size (calendar, long lists).\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n    const el = contentRef?.current ?? portalRef.current;\n    if (!el || typeof ResizeObserver === 'undefined') return;\n\n    const ro = new ResizeObserver(() => update());\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [isOpen, contentRef, update]);\n\n  const renderPortal = useCallback(\n    (children: ReactNode) => {\n      const mount = resolvePortalMount(portalContainer);\n      if (!mount) return null;\n      return createPortal(children, mount);\n    },\n    [portalContainer],\n  );\n\n  return {\n    placement,\n    maxHeight,\n    style,\n    portalRef,\n    renderPortal,\n  };\n}\n"],"names":["DEFAULT_PLACEMENT","resolvePortalMount","portalContainer","usesViewportFixedCoords","mount","useAnchoredPopupPortal","anchorRef","isOpen","options","preferredHeight","maxHeightCap","contentRef","zIndex","ANCHORED_POPUP_Z_INDEX","matchWidth","gap","ANCHORED_POPUP_GAP","portalRef","useRef","placement","setPlacement","useState","maxHeight","setMaxHeight","style","setStyle","update","useCallback","anchor","rect","viewportHeight","containerFrame","getAnchoredPopupContainerFrame","measured","_a","_b","heightForFlip","nextPlacement","nextMaxHeight","computeAnchoredPopupPlacement","fixed","computeAnchoredPopupFixedStyle","useLayoutEffect","handle","el","ro","renderPortal","children","createPortal"],"mappings":"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"}
+{"version":3,"file":"use-anchored-popup-portal.cjs","sources":["../../src/hooks/use-anchored-popup-portal.ts"],"sourcesContent":["import {\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type RefObject,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  ANCHORED_POPUP_GAP,\n  ANCHORED_POPUP_Z_INDEX,\n  computeAnchoredPopupFixedStyle,\n  computeAnchoredPopupPlacement,\n  getAnchoredPopupContainerFrame,\n  type PopupPlacement,\n} from '@/utils/anchoredPopupPlacement';\n\nexport interface UseAnchoredPopupPortalOptions {\n  /** Height used for the flip decision when content isn’t measured yet. */\n  preferredHeight: number;\n  /** Cap for scrollable menus (Select/Combobox). Omit for intrinsic panels. */\n  maxHeightCap?: number;\n  /** Ref to the portaled panel for measuring intrinsic height (DateRangePicker). */\n  contentRef?: RefObject<HTMLElement | null>;\n  /**\n   * Portal mount node; defaults to `document.body` with viewport-fixed coords.\n   * Custom containers must establish a positioning context (`position` other\n   * than `static`); coords are converted to that container’s space.\n   */\n  portalContainer?: HTMLElement | null;\n  zIndex?: number | string;\n  /**\n   * When true (default), fixed width matches the trigger.\n   * DateRangePicker sets false and keeps its CSS width.\n   */\n  matchWidth?: boolean;\n  gap?: number;\n}\n\nexport interface UseAnchoredPopupPortalResult {\n  placement: PopupPlacement;\n  maxHeight: number;\n  style: CSSProperties;\n  /** Ref for the portaled surface — pass to `useOutsideClose` as a second root. */\n  portalRef: RefObject<HTMLDivElement | null>;\n  /** Wraps children in a portal to `portalContainer` or `document.body`. */\n  renderPortal: (children: ReactNode) => ReactNode;\n}\n\nconst DEFAULT_PLACEMENT: PopupPlacement = 'below';\n\nfunction resolvePortalMount(\n  portalContainer: HTMLElement | null | undefined,\n): HTMLElement | null {\n  if (typeof document === 'undefined') return null;\n  return portalContainer ?? document.body;\n}\n\nfunction usesViewportFixedCoords(mount: HTMLElement): boolean {\n  return mount === document.body;\n}\n\n/**\n * Positions a form-widget popup in a portal with viewport-aware above/below flip.\n * Internal to compass-ui form widgets — not a general overlay positioning API.\n */\nexport function useAnchoredPopupPortal(\n  anchorRef: RefObject<HTMLElement | null>,\n  isOpen: boolean,\n  options: UseAnchoredPopupPortalOptions,\n): UseAnchoredPopupPortalResult {\n  const {\n    preferredHeight,\n    maxHeightCap,\n    contentRef,\n    portalContainer = null,\n    zIndex = ANCHORED_POPUP_Z_INDEX,\n    matchWidth = true,\n    gap = ANCHORED_POPUP_GAP,\n  } = options;\n\n  const portalRef = useRef<HTMLDivElement | null>(null);\n  const [placement, setPlacement] = useState<PopupPlacement>(DEFAULT_PLACEMENT);\n  const [maxHeight, setMaxHeight] = useState(maxHeightCap ?? preferredHeight);\n  const [style, setStyle] = useState<CSSProperties>({\n    position: 'fixed',\n    top: 0,\n    left: 0,\n    width: matchWidth ? 0 : undefined,\n    zIndex,\n  });\n\n  const update = useCallback(() => {\n    const anchor = anchorRef.current;\n    if (!anchor) return;\n\n    const mount = resolvePortalMount(portalContainer);\n    if (!mount) return;\n\n    const rect = anchor.getBoundingClientRect();\n    const viewportHeight = window.innerHeight;\n    const viewportFixed = usesViewportFixedCoords(mount);\n    const containerFrame = viewportFixed\n      ? undefined\n      : getAnchoredPopupContainerFrame(mount);\n\n    const measured =\n      contentRef?.current?.offsetHeight ?? portalRef.current?.offsetHeight ?? 0;\n    const heightForFlip = measured > 0 ? measured : preferredHeight;\n\n    const { placement: nextPlacement, maxHeight: nextMaxHeight } =\n      computeAnchoredPopupPlacement(rect, viewportHeight, {\n        gap,\n        preferredHeight: heightForFlip,\n        maxHeightCap,\n        bounds: containerFrame?.bounds,\n      });\n\n    const fixed = computeAnchoredPopupFixedStyle(rect, nextPlacement, {\n      gap,\n      zIndex,\n      width: matchWidth ? rect.width : undefined,\n      viewportHeight,\n      containerFrame,\n    });\n\n    setPlacement(nextPlacement);\n    setMaxHeight(nextMaxHeight);\n    setStyle({\n      position: fixed.position,\n      left: fixed.left,\n      zIndex: fixed.zIndex,\n      ...(matchWidth ? { width: fixed.width } : null),\n      ...(nextPlacement === 'below'\n        ? { top: fixed.top, bottom: 'auto' }\n        : { bottom: fixed.bottom, top: 'auto' }),\n    });\n  }, [\n    anchorRef,\n    contentRef,\n    gap,\n    matchWidth,\n    maxHeightCap,\n    portalContainer,\n    preferredHeight,\n    zIndex,\n  ]);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    update();\n\n    function handle() {\n      update();\n    }\n\n    window.addEventListener('resize', handle);\n    // Capture phase so nested scroll containers (modals, RHS) are covered.\n    document.addEventListener('scroll', handle, true);\n    return () => {\n      window.removeEventListener('resize', handle);\n      document.removeEventListener('scroll', handle, true);\n    };\n  }, [isOpen, update]);\n\n  // Re-measure after content mounts / changes size (calendar, long lists).\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n    const el = contentRef?.current ?? portalRef.current;\n    if (!el || typeof ResizeObserver === 'undefined') return;\n\n    const ro = new ResizeObserver(() => update());\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [isOpen, contentRef, update]);\n\n  const renderPortal = useCallback(\n    (children: ReactNode) => {\n      const mount = resolvePortalMount(portalContainer);\n      if (!mount) return null;\n      return createPortal(children, mount);\n    },\n    [portalContainer],\n  );\n\n  return {\n    placement,\n    maxHeight,\n    style,\n    portalRef,\n    renderPortal,\n  };\n}\n"],"names":["DEFAULT_PLACEMENT","resolvePortalMount","portalContainer","usesViewportFixedCoords","mount","useAnchoredPopupPortal","anchorRef","isOpen","options","preferredHeight","maxHeightCap","contentRef","zIndex","ANCHORED_POPUP_Z_INDEX","matchWidth","gap","ANCHORED_POPUP_GAP","portalRef","useRef","placement","setPlacement","useState","maxHeight","setMaxHeight","style","setStyle","update","useCallback","anchor","rect","viewportHeight","containerFrame","getAnchoredPopupContainerFrame","measured","_a","_b","heightForFlip","nextPlacement","nextMaxHeight","computeAnchoredPopupPlacement","fixed","computeAnchoredPopupFixedStyle","useLayoutEffect","handle","el","ro","renderPortal","children","createPortal"],"mappings":"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"}

package/dist/hooks/use-anchored-popup-portal.d.ts

@@ -13,7 +13,7 @@ export interface UseAnchoredPopupPortalOptions {
      * than `static`); coords are converted to that container’s space.
      */
     portalContainer?: HTMLElement | null;
-    zIndex?: number;
+    zIndex?: number | string;
     /**
      * When true (default), fixed width matches the trigger.
      * DateRangePicker sets false and keeps its CSS width.

package/dist/hooks/use-anchored-popup-portal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-anchored-popup-portal.d.ts","sourceRoot":"","sources":["../../src/hooks/use-anchored-popup-portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,gCAAgC,CAAC;AAExC,MAAM,WAAW,6BAA6B;IAC5C,yEAAyE;IACzE,eAAe,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kFAAkF;IAClF,UAAU,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC3C;;;;OAIG;IACH,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,4BAA4B;IAC3C,SAAS,EAAE,cAAc,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,aAAa,CAAC;IACrB,iFAAiF;IACjF,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C,0EAA0E;IAC1E,YAAY,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,SAAS,CAAC;CAClD;AAeD;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,6BAA6B,GACrC,4BAA4B,CA2H9B"}
+{"version":3,"file":"use-anchored-popup-portal.d.ts","sourceRoot":"","sources":["../../src/hooks/use-anchored-popup-portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,gCAAgC,CAAC;AAExC,MAAM,WAAW,6BAA6B;IAC5C,yEAAyE;IACzE,eAAe,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kFAAkF;IAClF,UAAU,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC3C;;;;OAIG;IACH,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,4BAA4B;IAC3C,SAAS,EAAE,cAAc,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,aAAa,CAAC;IACrB,iFAAiF;IACjF,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C,0EAA0E;IAC1E,YAAY,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,SAAS,CAAC;CAClD;AAeD;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,6BAA6B,GACrC,4BAA4B,CA2H9B"}

package/dist/hooks/use-anchored-popup-portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-anchored-popup-portal.js","sources":["../../src/hooks/use-anchored-popup-portal.ts"],"sourcesContent":["import {\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type RefObject,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  ANCHORED_POPUP_GAP,\n  ANCHORED_POPUP_Z_INDEX,\n  computeAnchoredPopupFixedStyle,\n  computeAnchoredPopupPlacement,\n  getAnchoredPopupContainerFrame,\n  type PopupPlacement,\n} from '@/utils/anchoredPopupPlacement';\n\nexport interface UseAnchoredPopupPortalOptions {\n  /** Height used for the flip decision when content isn’t measured yet. */\n  preferredHeight: number;\n  /** Cap for scrollable menus (Select/Combobox). Omit for intrinsic panels. */\n  maxHeightCap?: number;\n  /** Ref to the portaled panel for measuring intrinsic height (DateRangePicker). */\n  contentRef?: RefObject<HTMLElement | null>;\n  /**\n   * Portal mount node; defaults to `document.body` with viewport-fixed coords.\n   * Custom containers must establish a positioning context (`position` other\n   * than `static`); coords are converted to that container’s space.\n   */\n  portalContainer?: HTMLElement | null;\n  zIndex?: number;\n  /**\n   * When true (default), fixed width matches the trigger.\n   * DateRangePicker sets false and keeps its CSS width.\n   */\n  matchWidth?: boolean;\n  gap?: number;\n}\n\nexport interface UseAnchoredPopupPortalResult {\n  placement: PopupPlacement;\n  maxHeight: number;\n  style: CSSProperties;\n  /** Ref for the portaled surface — pass to `useOutsideClose` as a second root. */\n  portalRef: RefObject<HTMLDivElement | null>;\n  /** Wraps children in a portal to `portalContainer` or `document.body`. */\n  renderPortal: (children: ReactNode) => ReactNode;\n}\n\nconst DEFAULT_PLACEMENT: PopupPlacement = 'below';\n\nfunction resolvePortalMount(\n  portalContainer: HTMLElement | null | undefined,\n): HTMLElement | null {\n  if (typeof document === 'undefined') return null;\n  return portalContainer ?? document.body;\n}\n\nfunction usesViewportFixedCoords(mount: HTMLElement): boolean {\n  return mount === document.body;\n}\n\n/**\n * Positions a form-widget popup in a portal with viewport-aware above/below flip.\n * Internal to compass-ui form widgets — not a general overlay positioning API.\n */\nexport function useAnchoredPopupPortal(\n  anchorRef: RefObject<HTMLElement | null>,\n  isOpen: boolean,\n  options: UseAnchoredPopupPortalOptions,\n): UseAnchoredPopupPortalResult {\n  const {\n    preferredHeight,\n    maxHeightCap,\n    contentRef,\n    portalContainer = null,\n    zIndex = ANCHORED_POPUP_Z_INDEX,\n    matchWidth = true,\n    gap = ANCHORED_POPUP_GAP,\n  } = options;\n\n  const portalRef = useRef<HTMLDivElement | null>(null);\n  const [placement, setPlacement] = useState<PopupPlacement>(DEFAULT_PLACEMENT);\n  const [maxHeight, setMaxHeight] = useState(maxHeightCap ?? preferredHeight);\n  const [style, setStyle] = useState<CSSProperties>({\n    position: 'fixed',\n    top: 0,\n    left: 0,\n    width: matchWidth ? 0 : undefined,\n    zIndex,\n  });\n\n  const update = useCallback(() => {\n    const anchor = anchorRef.current;\n    if (!anchor) return;\n\n    const mount = resolvePortalMount(portalContainer);\n    if (!mount) return;\n\n    const rect = anchor.getBoundingClientRect();\n    const viewportHeight = window.innerHeight;\n    const viewportFixed = usesViewportFixedCoords(mount);\n    const containerFrame = viewportFixed\n      ? undefined\n      : getAnchoredPopupContainerFrame(mount);\n\n    const measured =\n      contentRef?.current?.offsetHeight ?? portalRef.current?.offsetHeight ?? 0;\n    const heightForFlip = measured > 0 ? measured : preferredHeight;\n\n    const { placement: nextPlacement, maxHeight: nextMaxHeight } =\n      computeAnchoredPopupPlacement(rect, viewportHeight, {\n        gap,\n        preferredHeight: heightForFlip,\n        maxHeightCap,\n        bounds: containerFrame?.bounds,\n      });\n\n    const fixed = computeAnchoredPopupFixedStyle(rect, nextPlacement, {\n      gap,\n      zIndex,\n      width: matchWidth ? rect.width : undefined,\n      viewportHeight,\n      containerFrame,\n    });\n\n    setPlacement(nextPlacement);\n    setMaxHeight(nextMaxHeight);\n    setStyle({\n      position: fixed.position,\n      left: fixed.left,\n      zIndex: fixed.zIndex,\n      ...(matchWidth ? { width: fixed.width } : null),\n      ...(nextPlacement === 'below'\n        ? { top: fixed.top, bottom: 'auto' }\n        : { bottom: fixed.bottom, top: 'auto' }),\n    });\n  }, [\n    anchorRef,\n    contentRef,\n    gap,\n    matchWidth,\n    maxHeightCap,\n    portalContainer,\n    preferredHeight,\n    zIndex,\n  ]);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    update();\n\n    function handle() {\n      update();\n    }\n\n    window.addEventListener('resize', handle);\n    // Capture phase so nested scroll containers (modals, RHS) are covered.\n    document.addEventListener('scroll', handle, true);\n    return () => {\n      window.removeEventListener('resize', handle);\n      document.removeEventListener('scroll', handle, true);\n    };\n  }, [isOpen, update]);\n\n  // Re-measure after content mounts / changes size (calendar, long lists).\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n    const el = contentRef?.current ?? portalRef.current;\n    if (!el || typeof ResizeObserver === 'undefined') return;\n\n    const ro = new ResizeObserver(() => update());\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [isOpen, contentRef, update]);\n\n  const renderPortal = useCallback(\n    (children: ReactNode) => {\n      const mount = resolvePortalMount(portalContainer);\n      if (!mount) return null;\n      return createPortal(children, mount);\n    },\n    [portalContainer],\n  );\n\n  return {\n    placement,\n    maxHeight,\n    style,\n    portalRef,\n    renderPortal,\n  };\n}\n"],"names":["DEFAULT_PLACEMENT","resolvePortalMount","portalContainer","usesViewportFixedCoords","mount","useAnchoredPopupPortal","anchorRef","isOpen","options","preferredHeight","maxHeightCap","contentRef","zIndex","ANCHORED_POPUP_Z_INDEX","matchWidth","gap","ANCHORED_POPUP_GAP","portalRef","useRef","placement","setPlacement","useState","maxHeight","setMaxHeight","style","setStyle","update","useCallback","anchor","rect","viewportHeight","containerFrame","getAnchoredPopupContainerFrame","measured","_a","_b","heightForFlip","nextPlacement","nextMaxHeight","computeAnchoredPopupPlacement","fixed","computeAnchoredPopupFixedStyle","useLayoutEffect","handle","el","ro","renderPortal","children","createPortal"],"mappings":"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"}
+{"version":3,"file":"use-anchored-popup-portal.js","sources":["../../src/hooks/use-anchored-popup-portal.ts"],"sourcesContent":["import {\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type RefObject,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  ANCHORED_POPUP_GAP,\n  ANCHORED_POPUP_Z_INDEX,\n  computeAnchoredPopupFixedStyle,\n  computeAnchoredPopupPlacement,\n  getAnchoredPopupContainerFrame,\n  type PopupPlacement,\n} from '@/utils/anchoredPopupPlacement';\n\nexport interface UseAnchoredPopupPortalOptions {\n  /** Height used for the flip decision when content isn’t measured yet. */\n  preferredHeight: number;\n  /** Cap for scrollable menus (Select/Combobox). Omit for intrinsic panels. */\n  maxHeightCap?: number;\n  /** Ref to the portaled panel for measuring intrinsic height (DateRangePicker). */\n  contentRef?: RefObject<HTMLElement | null>;\n  /**\n   * Portal mount node; defaults to `document.body` with viewport-fixed coords.\n   * Custom containers must establish a positioning context (`position` other\n   * than `static`); coords are converted to that container’s space.\n   */\n  portalContainer?: HTMLElement | null;\n  zIndex?: number | string;\n  /**\n   * When true (default), fixed width matches the trigger.\n   * DateRangePicker sets false and keeps its CSS width.\n   */\n  matchWidth?: boolean;\n  gap?: number;\n}\n\nexport interface UseAnchoredPopupPortalResult {\n  placement: PopupPlacement;\n  maxHeight: number;\n  style: CSSProperties;\n  /** Ref for the portaled surface — pass to `useOutsideClose` as a second root. */\n  portalRef: RefObject<HTMLDivElement | null>;\n  /** Wraps children in a portal to `portalContainer` or `document.body`. */\n  renderPortal: (children: ReactNode) => ReactNode;\n}\n\nconst DEFAULT_PLACEMENT: PopupPlacement = 'below';\n\nfunction resolvePortalMount(\n  portalContainer: HTMLElement | null | undefined,\n): HTMLElement | null {\n  if (typeof document === 'undefined') return null;\n  return portalContainer ?? document.body;\n}\n\nfunction usesViewportFixedCoords(mount: HTMLElement): boolean {\n  return mount === document.body;\n}\n\n/**\n * Positions a form-widget popup in a portal with viewport-aware above/below flip.\n * Internal to compass-ui form widgets — not a general overlay positioning API.\n */\nexport function useAnchoredPopupPortal(\n  anchorRef: RefObject<HTMLElement | null>,\n  isOpen: boolean,\n  options: UseAnchoredPopupPortalOptions,\n): UseAnchoredPopupPortalResult {\n  const {\n    preferredHeight,\n    maxHeightCap,\n    contentRef,\n    portalContainer = null,\n    zIndex = ANCHORED_POPUP_Z_INDEX,\n    matchWidth = true,\n    gap = ANCHORED_POPUP_GAP,\n  } = options;\n\n  const portalRef = useRef<HTMLDivElement | null>(null);\n  const [placement, setPlacement] = useState<PopupPlacement>(DEFAULT_PLACEMENT);\n  const [maxHeight, setMaxHeight] = useState(maxHeightCap ?? preferredHeight);\n  const [style, setStyle] = useState<CSSProperties>({\n    position: 'fixed',\n    top: 0,\n    left: 0,\n    width: matchWidth ? 0 : undefined,\n    zIndex,\n  });\n\n  const update = useCallback(() => {\n    const anchor = anchorRef.current;\n    if (!anchor) return;\n\n    const mount = resolvePortalMount(portalContainer);\n    if (!mount) return;\n\n    const rect = anchor.getBoundingClientRect();\n    const viewportHeight = window.innerHeight;\n    const viewportFixed = usesViewportFixedCoords(mount);\n    const containerFrame = viewportFixed\n      ? undefined\n      : getAnchoredPopupContainerFrame(mount);\n\n    const measured =\n      contentRef?.current?.offsetHeight ?? portalRef.current?.offsetHeight ?? 0;\n    const heightForFlip = measured > 0 ? measured : preferredHeight;\n\n    const { placement: nextPlacement, maxHeight: nextMaxHeight } =\n      computeAnchoredPopupPlacement(rect, viewportHeight, {\n        gap,\n        preferredHeight: heightForFlip,\n        maxHeightCap,\n        bounds: containerFrame?.bounds,\n      });\n\n    const fixed = computeAnchoredPopupFixedStyle(rect, nextPlacement, {\n      gap,\n      zIndex,\n      width: matchWidth ? rect.width : undefined,\n      viewportHeight,\n      containerFrame,\n    });\n\n    setPlacement(nextPlacement);\n    setMaxHeight(nextMaxHeight);\n    setStyle({\n      position: fixed.position,\n      left: fixed.left,\n      zIndex: fixed.zIndex,\n      ...(matchWidth ? { width: fixed.width } : null),\n      ...(nextPlacement === 'below'\n        ? { top: fixed.top, bottom: 'auto' }\n        : { bottom: fixed.bottom, top: 'auto' }),\n    });\n  }, [\n    anchorRef,\n    contentRef,\n    gap,\n    matchWidth,\n    maxHeightCap,\n    portalContainer,\n    preferredHeight,\n    zIndex,\n  ]);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    update();\n\n    function handle() {\n      update();\n    }\n\n    window.addEventListener('resize', handle);\n    // Capture phase so nested scroll containers (modals, RHS) are covered.\n    document.addEventListener('scroll', handle, true);\n    return () => {\n      window.removeEventListener('resize', handle);\n      document.removeEventListener('scroll', handle, true);\n    };\n  }, [isOpen, update]);\n\n  // Re-measure after content mounts / changes size (calendar, long lists).\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n    const el = contentRef?.current ?? portalRef.current;\n    if (!el || typeof ResizeObserver === 'undefined') return;\n\n    const ro = new ResizeObserver(() => update());\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [isOpen, contentRef, update]);\n\n  const renderPortal = useCallback(\n    (children: ReactNode) => {\n      const mount = resolvePortalMount(portalContainer);\n      if (!mount) return null;\n      return createPortal(children, mount);\n    },\n    [portalContainer],\n  );\n\n  return {\n    placement,\n    maxHeight,\n    style,\n    portalRef,\n    renderPortal,\n  };\n}\n"],"names":["DEFAULT_PLACEMENT","resolvePortalMount","portalContainer","usesViewportFixedCoords","mount","useAnchoredPopupPortal","anchorRef","isOpen","options","preferredHeight","maxHeightCap","contentRef","zIndex","ANCHORED_POPUP_Z_INDEX","matchWidth","gap","ANCHORED_POPUP_GAP","portalRef","useRef","placement","setPlacement","useState","maxHeight","setMaxHeight","style","setStyle","update","useCallback","anchor","rect","viewportHeight","containerFrame","getAnchoredPopupContainerFrame","measured","_a","_b","heightForFlip","nextPlacement","nextMaxHeight","computeAnchoredPopupPlacement","fixed","computeAnchoredPopupFixedStyle","useLayoutEffect","handle","el","ro","renderPortal","children","createPortal"],"mappings":"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"}