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

package/dist/index.js

@@ -16553,6 +16553,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.
  *
@@ -16576,7 +16580,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 = React.useRef(identity);
     React.useEffect(() => {
         if (previousIdentity.current !== identity) {
@@ -16592,9 +16609,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 (jsxRuntime.jsxs("div", { className: classes(sx(stackStyle$3), fullWidth && sx(flushStyle), className), role: "region", "aria-label": "Page notices", children: [visibleSystem.map((banner) => (jsxRuntime.jsxs("div", { className: classes(sx(bannerStyle$1), sx(systemStyle)), role: "status", children: [jsxRuntime.jsx(InfoIcon$1, { className: sx(systemIconStyle), size: 20, "aria-hidden": "true" }), jsxRuntime.jsxs("div", { className: sx(contentStyle$5), children: [jsxRuntime.jsx("p", { className: sx(titleStyle$p), children: decodeEntities(banner.html) }), banner.detailHtml && jsxRuntime.jsx("p", { className: sx(detailStyle), children: decodeEntities(banner.detailHtml) })] }), jsxRuntime.jsx("button", { type: "button", className: sx(dismissStyle), "aria-label": "Dismiss notice", onClick: () => dismiss(banner.id), children: jsxRuntime.jsx(CloseIcon, { size: 16 }) })] }, banner.id))), visibleAlerts.map((banner) => {
-                const content = (jsxRuntime.jsxs("div", { className: sx(contentStyle$5), children: [jsxRuntime.jsx("p", { className: classes(sx(titleStyle$p), sx(alertTitleStyle)), children: decodeEntities(banner.title) }), banner.body && jsxRuntime.jsx("p", { className: classes(sx(detailStyle), sx(clampStyle)), children: decodeEntities(banner.body) })] }));
-                return (jsxRuntime.jsxs("div", { className: classes(sx(bannerStyle$1), sx(alertStyle$1)), role: "alert", children: [jsxRuntime.jsx(WarningIcon$1, { className: sx(alertIconStyle), size: 20, "aria-hidden": "true" }), banner.href ? (jsxRuntime.jsx("a", { href: banner.href, className: sx(alertLinkStyle), children: content })) : (content), jsxRuntime.jsx("button", { type: "button", className: classes(sx(dismissStyle), sx(alertDismissStyle)), "aria-label": "Dismiss alert", onClick: () => dismiss(banner.id), children: jsxRuntime.jsx(CloseIcon, { size: 16 }) })] }, banner.id));
+    return (jsxRuntime.jsxs("div", { className: classes(sx(stackStyle$3), fullWidth && sx(flushStyle), className), role: "region", "aria-label": "Page notices", children: [visibleSystem.map((banner) => (jsxRuntime.jsxs("div", { className: classes(sx(bannerStyle$1), sx(systemStyle)), role: "status", children: [jsxRuntime.jsx(InfoIcon$1, { className: sx(systemIconStyle), size: 20, "aria-hidden": "true" }), jsxRuntime.jsxs("div", { className: sx(contentStyle$5), children: [jsxRuntime.jsx("p", { className: sx(titleStyle$p), children: content(banner.html) }), banner.detailHtml && jsxRuntime.jsx("p", { className: sx(detailStyle), children: content(banner.detailHtml) })] }), jsxRuntime.jsx("button", { type: "button", className: sx(dismissStyle), "aria-label": "Dismiss notice", onClick: () => dismiss(banner.id), children: jsxRuntime.jsx(CloseIcon, { size: 16 }) })] }, banner.id))), visibleAlerts.map((banner) => {
+                const text = (jsxRuntime.jsxs("div", { className: sx(contentStyle$5), children: [jsxRuntime.jsx("p", { className: classes(sx(titleStyle$p), sx(alertTitleStyle)), children: content(banner.title) }), banner.body && jsxRuntime.jsx("p", { className: classes(sx(detailStyle), sx(clampStyle)), children: content(banner.body) })] }));
+                return (jsxRuntime.jsxs("div", { className: classes(sx(bannerStyle$1), sx(alertStyle$1)), role: "alert", children: [jsxRuntime.jsx(WarningIcon$1, { className: sx(alertIconStyle), size: 20, "aria-hidden": "true" }), banner.href ? (jsxRuntime.jsx("a", { href: banner.href, className: sx(alertLinkStyle), children: text })) : (text), jsxRuntime.jsx("button", { type: "button", className: classes(sx(dismissStyle), sx(alertDismissStyle)), "aria-label": "Dismiss alert", onClick: () => dismiss(banner.id), children: jsxRuntime.jsx(CloseIcon, { size: 16 }) })] }, banner.id));
             })] }));
 };
 
@@ -32076,20 +32093,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)',
     },
 };