@shortstravelmgmt/component-lib 0.3.0 → 0.3.1-canary.75.g5bfd320

package/dist/index.d.ts

@@ -5441,22 +5441,43 @@ interface SystemBanner {
     /** Identifier for the banner, used to key and dismiss it. */
     id: string;
     /**
-     * Banner body. Rendered as TEXT, not markup — this is announcement copy
-     * straight from the authoring form, so an author could otherwise store an
-     * `onerror` that ran for every recipient. The field keeps its `html` name
-     * because callers already send it under that key.
+     * Banner body. A string renders as TEXT, never as markup — this is
+     * announcement copy straight from the authoring form, so an author could
+     * otherwise store an `onerror` that ran for every recipient; its entities
+     * (`&`, ` `) are decoded. Formatting is the caller's to render: pass
+     * an element (e.g. the host's own sanitized rich-text renderer) and it is
+     * placed as given. The field keeps its `html` name because callers already
+     * send it under that key. Non-interactive inline formatting only (no links
+     * or buttons): it sits in a `<p>`.
      */
-    html: string;
-    /** Expanded detail revealed when the reader opens the banner. Also text. */
-    detailHtml?: string;
+    html: ReactNode;
+    /** Expanded detail revealed when the reader opens the banner. Same rules. */
+    detailHtml?: ReactNode;
+    /**
+     * The source text an element field was rendered from. An element can't be
+     * compared, so pass this with formatted copy: the banners reset (a dismissed
+     * one reappears) when it changes, as they do when a string field changes.
+     */
+    revision?: string;
 }
 interface TravelAlertBanner {
     /** Identifier for the alert. */
     id: string;
-    /** Headline summarizing the disruption. */
-    title: string;
-    /** Supporting detail. */
-    body?: string;
+    /**
+     * Headline summarizing the disruption. A string renders as text; an
+     * element as given — non-interactive inline formatting only (no links or
+     * buttons): it sits in a `<p>`, inside the alert's own link when it has an
+     * `href`.
+     */
+    title: ReactNode;
+    /**
+     * Supporting detail: a string renders as text; an element (formatted copy)
+     * as given. Non-interactive inline formatting only (no links or buttons):
+     * it sits in a `<p>`, inside the alert's own link when it has an `href`.
+     */
+    body?: ReactNode;
+    /** The source text of element fields, for the reset identity — see SystemBanner.revision. */
+    revision?: string;
     /** Link to the full advisory. */
     href?: string;
 }
@@ -7697,7 +7718,13 @@ interface DashboardUnusedTicketRecord {
 interface DashboardInfoCenterItem {
     id: string;
     title: string;
-    body?: string;
+    /**
+     * One-line preview under the title. A string renders as text; pass an
+     * element (the host's own sanitized rich-text renderer) to keep the
+     * article's formatting. Non-interactive inline formatting only (no links or
+     * buttons): it sits in a `<small>` inside the row's own link or button.
+     */
+    body?: ReactNode;
     href?: string;
 }
 interface DashboardWidget {

package/dist/index.esm.js

@@ -16551,6 +16551,10 @@ const decodeEntities = (value) => {
     element.innerHTML = value;
     return element.value;
 };
+/** A string as decoded text; an element (the caller's formatted copy) as given. */
+const content = (value) => (typeof value === 'string' ? decodeEntities(value) : value);
+/** The text a value contributes to the banners' identity: elements by position only. */
+const textOf = (value) => (typeof value === 'string' ? value : '');
 /**
  * Class names side by side, NOT merged.
  *
@@ -16574,7 +16578,20 @@ const PageBanners = ({ systemBanners, alertBanners, fullWidth = false, className
     // every parent render, and `onDismiss` invites a caller to set state from its
     // handler. Comparing references let that re-render clear `dismissed` and put
     // the banner the reader just closed straight back on screen.
-    const identity = JSON.stringify([systemBanners, alertBanners]);
+    //
+    // Built from ids, string fields and `revision`: a formatted value is a
+    // React element, which can't be serialized (its owner fields are circular),
+    // so the caller's `revision` stands in for its content.
+    const identity = JSON.stringify([
+        systemBanners.map((banner) => [banner.id, textOf(banner.html), textOf(banner.detailHtml), banner.revision ?? '']),
+        alertBanners.map((banner) => [
+            banner.id,
+            textOf(banner.title),
+            textOf(banner.body),
+            banner.href ?? '',
+            banner.revision ?? '',
+        ]),
+    ]);
     const previousIdentity = useRef(identity);
     useEffect(() => {
         if (previousIdentity.current !== identity) {
@@ -16590,9 +16607,9 @@ const PageBanners = ({ systemBanners, alertBanners, fullWidth = false, className
     const visibleAlerts = alertBanners.filter((banner) => !dismissed.has(banner.id));
     if (!visibleSystem.length && !visibleAlerts.length)
         return null;
-    return (jsxs("div", { className: classes(sx(stackStyle$3), fullWidth && sx(flushStyle), className), role: "region", "aria-label": "Page notices", children: [visibleSystem.map((banner) => (jsxs("div", { className: classes(sx(bannerStyle$1), sx(systemStyle)), role: "status", children: [jsx(InfoIcon$1, { className: sx(systemIconStyle), size: 20, "aria-hidden": "true" }), jsxs("div", { className: sx(contentStyle$5), children: [jsx("p", { className: sx(titleStyle$p), children: decodeEntities(banner.html) }), banner.detailHtml && jsx("p", { className: sx(detailStyle), children: decodeEntities(banner.detailHtml) })] }), jsx("button", { type: "button", className: sx(dismissStyle), "aria-label": "Dismiss notice", onClick: () => dismiss(banner.id), children: jsx(CloseIcon, { size: 16 }) })] }, banner.id))), visibleAlerts.map((banner) => {
-                const content = (jsxs("div", { className: sx(contentStyle$5), children: [jsx("p", { className: classes(sx(titleStyle$p), sx(alertTitleStyle)), children: decodeEntities(banner.title) }), banner.body && jsx("p", { className: classes(sx(detailStyle), sx(clampStyle)), children: decodeEntities(banner.body) })] }));
-                return (jsxs("div", { className: classes(sx(bannerStyle$1), sx(alertStyle$1)), role: "alert", children: [jsx(WarningIcon$1, { className: sx(alertIconStyle), size: 20, "aria-hidden": "true" }), banner.href ? (jsx("a", { href: banner.href, className: sx(alertLinkStyle), children: content })) : (content), jsx("button", { type: "button", className: classes(sx(dismissStyle), sx(alertDismissStyle)), "aria-label": "Dismiss alert", onClick: () => dismiss(banner.id), children: jsx(CloseIcon, { size: 16 }) })] }, banner.id));
+    return (jsxs("div", { className: classes(sx(stackStyle$3), fullWidth && sx(flushStyle), className), role: "region", "aria-label": "Page notices", children: [visibleSystem.map((banner) => (jsxs("div", { className: classes(sx(bannerStyle$1), sx(systemStyle)), role: "status", children: [jsx(InfoIcon$1, { className: sx(systemIconStyle), size: 20, "aria-hidden": "true" }), jsxs("div", { className: sx(contentStyle$5), children: [jsx("p", { className: sx(titleStyle$p), children: content(banner.html) }), banner.detailHtml && jsx("p", { className: sx(detailStyle), children: content(banner.detailHtml) })] }), jsx("button", { type: "button", className: sx(dismissStyle), "aria-label": "Dismiss notice", onClick: () => dismiss(banner.id), children: jsx(CloseIcon, { size: 16 }) })] }, banner.id))), visibleAlerts.map((banner) => {
+                const text = (jsxs("div", { className: sx(contentStyle$5), children: [jsx("p", { className: classes(sx(titleStyle$p), sx(alertTitleStyle)), children: content(banner.title) }), banner.body && jsx("p", { className: classes(sx(detailStyle), sx(clampStyle)), children: content(banner.body) })] }));
+                return (jsxs("div", { className: classes(sx(bannerStyle$1), sx(alertStyle$1)), role: "alert", children: [jsx(WarningIcon$1, { className: sx(alertIconStyle), size: 20, "aria-hidden": "true" }), banner.href ? (jsx("a", { href: banner.href, className: sx(alertLinkStyle), children: text })) : (text), jsx("button", { type: "button", className: classes(sx(dismissStyle), sx(alertDismissStyle)), "aria-label": "Dismiss alert", onClick: () => dismiss(banner.id), children: jsx(CloseIcon, { size: 16 }) })] }, banner.id));
             })] }));
 };
 
@@ -32074,20 +32091,23 @@ const infoListStyle = {
         flex: 1,
         flexDirection: 'column',
     },
-    '& strong, & small': {
+    // Scoped to each row's own title (strong), preview (small) and chevron (b):
+    // a preview can carry the host's formatting (SAF-386), and a bare `& strong`
+    // gave its bold words the title's size and weight.
+    '& > * > span > strong, & > * > span > small': {
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
     },
-    '& strong': {
+    '& > * > span > strong': {
         fontSize: 13,
         fontWeight: 500,
     },
-    '& small': {
+    '& > * > span > small': {
         color: 'var(--color-slate, #5c5c5c)',
         fontSize: 11.5,
     },
-    '& b': {
+    '& > * > b': {
         color: 'var(--color-slate, #5c5c5c)',
     },
 };