@colixsystems/widget-sdk 0.258.0 → 0.259.0

package/README.md

@@ -85,7 +85,11 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.258.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+`v0.259.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+
+### What's new in 0.259.0 (contract 1.210.0)
+
+**`<Avatar url>` falls back to the initials** when its picture fails to load, instead of showing a broken image (as `<Avatar fileId>` already did). The built-in form fields for users, groups and related records now use `<PeoplePicker>`, and the User widget's photo uses `<Avatar>`.
 
 ### What's new in 0.258.0 (contract 1.209.0)
 

package/dist/contract.cjs

@@ -6377,7 +6377,9 @@ const CONTRACT = deepFreeze({
   // 1.209.0: additive (sc-12242) — `<PeoplePicker>` takes `activeOnly`
   //    (users), a function `loadErrorText(error)`, and gives each option a
   //    `<testID>-option-<id>`.
-  version: "1.209.0",
+  // 1.210.0: behaviour (sc-12245) — `<Avatar url>` falls back to the
+  //    initials when its picture fails to load. No API change.
+  version: "1.210.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/contract.js

@@ -6373,7 +6373,9 @@ const CONTRACT = deepFreeze({
   // 1.209.0: additive (sc-12242) — `<PeoplePicker>` takes `activeOnly`
   //    (users), a function `loadErrorText(error)`, and gives each option a
   //    `<testID>-option-<id>`.
-  version: "1.209.0",
+  // 1.210.0: behaviour (sc-12245) — `<Avatar url>` falls back to the
+  //    initials when its picture fails to load. No API change.
+  version: "1.210.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/detail-parts-view.js

@@ -111,6 +111,13 @@ export function makeDetailParts(rn) {
     );
   }
 
+  // A photo that cannot load gives way to the initials.
+  function UrlAvatar({ photo, monogram }) {
+    const [failed, setFailed] = React.useState(false);
+    if (failed) return monogram;
+    return h(Image, { ...photo, onError: () => setFailed(true) });
+  }
+
   function Avatar({ name, url, fileId, seed, size = "md", shape = "circle", accessibilityLabel, style, testID }) {
     const { colors, radii, typography } = useDetailTheme();
     const px = avatarPixelSize(size);
@@ -127,15 +134,6 @@ export function makeDetailParts(rn) {
     const stored = typeof fileId === "string" && fileId !== "";
     const source = typeof url === "string" ? url.trim() : "";
     const label = accessibilityLabel || captionText(name) || "Avatar";
-    if (source && !stored) {
-      return h(Image, {
-        source: { uri: source },
-        accessibilityLabel: label,
-        resizeMode: "cover",
-        style: [box, style],
-        testID,
-      });
-    }
     const initials = initialsFor(name);
     const fallback = { alignItems: "center", justifyContent: "center" };
     const content = initials
@@ -152,11 +150,16 @@ export function makeDetailParts(rn) {
           initials,
         )
       : h(Icon, { name: "user", size: Math.round(px * 0.55), color: ink });
+    const monogram = h(View, { style: [box, fallback, style], accessibilityLabel: label, testID }, content);
+    if (source && !stored) {
+      const photo = { source: { uri: source }, accessibilityLabel: label, resizeMode: "cover", style: [box, style], testID };
+      return h(UrlAvatar, { key: source, photo, monogram });
+    }
     if (stored) {
       const frame = { style: [box, fallback, { overflow: "hidden" }, style], accessibilityLabel: label, testID };
       return h(FileAvatar, { key: fileId, fileId, px, frame, monogram: content });
     }
-    return h(View, { style: [box, fallback, style], accessibilityLabel: label, testID }, content);
+    return monogram;
   }
   Avatar.displayName = "Avatar";
 

package/dist/index.d.ts

@@ -4151,7 +4151,7 @@ export const Avatar: (props: {
   name?: string;
   /** A stable id (a user id): tints the monogram with that person's colour. */
   seed?: string;
-  /** An absolute image URL. */
+  /** An absolute image URL; the initials show if it cannot load. */
   url?: string;
   /**
    * A filestore file id (a FILE column's value). Takes precedence over `url`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.258.0",
+  "version": "0.259.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "homepage": "https://github.com/Colix-AB/AppStudio",
   "type": "module",

package/src/contract.js

@@ -6373,7 +6373,9 @@ const CONTRACT = deepFreeze({
   // 1.209.0: additive (sc-12242) — `<PeoplePicker>` takes `activeOnly`
   //    (users), a function `loadErrorText(error)`, and gives each option a
   //    `<testID>-option-<id>`.
-  version: "1.209.0",
+  // 1.210.0: behaviour (sc-12245) — `<Avatar url>` falls back to the
+  //    initials when its picture fails to load. No API change.
+  version: "1.210.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,