uhc-portal-components-react 0.1.38 → 0.1.40

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 0.1.40
+
+- Present subject Communications as an accessible bidirectional channel with
+  incoming/outgoing bubbles, sender avatars and an optional text/Bundle
+  composer, while preserving the existing message, call and emergency filters.
+
+## 0.1.39
+
+- Keep clinical field labels unique to their inputs when speech controls are
+  rendered. Microphone buttons now expose only their action as the accessible
+  name while retaining the target field in the hover title.
+
 ## 0.1.38
 
 - Add a brand-neutral subject communication center that merges messages,

package/dist/ClinicalSpeechInput.js

@@ -79,5 +79,5 @@ export function ClinicalSpeechInputButton({ resourceType, claim, locale, fieldLa
             setBusy(false);
         }
     };
-    return _jsxs("span", { className: "uhcp-clinical-speech-control", children: [_jsx("button", { type: "button", className: "uhcp-clinical-speech-button", "aria-label": `${actionLabel}: ${fieldLabel}`, title: actionLabel, disabled: !ready || busy, "aria-pressed": busy, onClick: () => { void transcribe(); }, children: _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", focusable: "false", children: _jsx("path", { d: "M12 14a3 3 0 0 0 3-3V5a3 3 0 1 0-6 0v6a3 3 0 0 0 3 3Zm-5-3a1 1 0 1 0-2 0 7 7 0 0 0 6 6.92V21H8a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-3v-3.08A7 7 0 0 0 19 11a1 1 0 1 0-2 0 5 5 0 0 1-10 0Z" }) }) }), failed ? _jsx("small", { role: "alert", children: capability.labels.failed ?? capability.labels.unavailable }) : null] });
+    return _jsxs("span", { className: "uhcp-clinical-speech-control", children: [_jsx("button", { type: "button", className: "uhcp-clinical-speech-button", "aria-label": actionLabel, title: `${actionLabel}: ${fieldLabel}`, disabled: !ready || busy, "aria-pressed": busy, onClick: () => { void transcribe(); }, children: _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", focusable: "false", children: _jsx("path", { d: "M12 14a3 3 0 0 0 3-3V5a3 3 0 1 0-6 0v6a3 3 0 0 0 3 3Zm-5-3a1 1 0 1 0-2 0 7 7 0 0 0 6 6.92V21H8a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-3v-3.08A7 7 0 0 0 19 11a1 1 0 1 0-2 0 5 5 0 0 1-10 0Z" }) }) }), failed ? _jsx("small", { role: "alert", children: capability.labels.failed ?? capability.labels.unavailable }) : null] });
 }

package/dist/SubjectCommunicationCenter.d.ts

@@ -11,6 +11,17 @@ export type SubjectCommunicationItem = Readonly<{
     timestamp?: string;
     status?: string;
     action?: ReactNode;
+    direction?: 'incoming' | 'outgoing' | 'system';
+    senderLabel?: string;
+    avatarUrl?: string;
+}>;
+export type SubjectCommunicationComposer = Readonly<{
+    placeholder: string;
+    sendLabel: string;
+    attachLabel?: string;
+    disabled?: boolean;
+    onSend(text: string): void | Promise<void>;
+    onAttach?(): void | Promise<void>;
 }>;
 export type SubjectCommunicationCenterCopy = Readonly<{
     heading(subjectLabel: string): string;
@@ -18,9 +29,10 @@ export type SubjectCommunicationCenterCopy = Readonly<{
     empty: string;
 }>;
 /** Brand-neutral, subject-scoped message and internet-call timeline for personal portals. */
-export declare function SubjectCommunicationCenter({ subjectLabel, items, copy }: Readonly<{
+export declare function SubjectCommunicationCenter({ subjectLabel, items, copy, composer }: Readonly<{
     subjectLabel: string;
     items: readonly SubjectCommunicationItem[];
     copy?: SubjectCommunicationCenterCopy;
+    composer?: SubjectCommunicationComposer;
 }>): import("react").JSX.Element;
 //# sourceMappingURL=SubjectCommunicationCenter.d.ts.map

package/dist/SubjectCommunicationCenter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubjectCommunicationCenter.d.ts","sourceRoot":"","sources":["../src/SubjectCommunicationCenter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAA;AAEzD,MAAM,MAAM,wBAAwB,GAAG,SAAS,GAAG,OAAO,GAAG,YAAY,GAAG,YAAY,GAAG,aAAa,CAAA;AACxG,MAAM,MAAM,4BAA4B,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CAAA;AACzE,MAAM,MAAM,0BAA0B,GAAG,KAAK,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAAA;AAEnF,MAAM,MAAM,wBAAwB,GAAG,QAAQ,CAAC;IAC9C,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,wBAAwB,CAAA;IAC9B,QAAQ,EAAE,4BAA4B,CAAA;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,8BAA8B,GAAG,QAAQ,CAAC;IACpD,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAA;IACrC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAC,CAAA;IAC7D,KAAK,EAAE,MAAM,CAAA;CACd,CAAC,CAAA;AAUF,6FAA6F;AAC7F,wBAAgB,0BAA0B,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,IAAmB,EAAE,EAAE,QAAQ,CAAC;IAChG,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,SAAS,wBAAwB,EAAE,CAAA;IAC1C,IAAI,CAAC,EAAE,8BAA8B,CAAA;CACtC,CAAC,+BAsBD"}
+{"version":3,"file":"SubjectCommunicationCenter.d.ts","sourceRoot":"","sources":["../src/SubjectCommunicationCenter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAA;AAEzD,MAAM,MAAM,wBAAwB,GAAG,SAAS,GAAG,OAAO,GAAG,YAAY,GAAG,YAAY,GAAG,aAAa,CAAA;AACxG,MAAM,MAAM,4BAA4B,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CAAA;AACzE,MAAM,MAAM,0BAA0B,GAAG,KAAK,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAAA;AAEnF,MAAM,MAAM,wBAAwB,GAAG,QAAQ,CAAC;IAC9C,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,wBAAwB,CAAA;IAC9B,QAAQ,EAAE,4BAA4B,CAAA;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,SAAS,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAA;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,4BAA4B,GAAG,QAAQ,CAAC;IAClD,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC1C,QAAQ,CAAC,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CAClC,CAAC,CAAA;AAEF,MAAM,MAAM,8BAA8B,GAAG,QAAQ,CAAC;IACpD,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAA;IACrC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAC,CAAA;IAC7D,KAAK,EAAE,MAAM,CAAA;CACd,CAAC,CAAA;AAUF,6FAA6F;AAC7F,wBAAgB,0BAA0B,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,IAAmB,EAAE,QAAQ,EAAE,EAAE,QAAQ,CAAC;IAC1G,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,SAAS,wBAAwB,EAAE,CAAA;IAC1C,IAAI,CAAC,EAAE,8BAA8B,CAAA;IACrC,QAAQ,CAAC,EAAE,4BAA4B,CAAA;CACxC,CAAC,+BAgDD"}

package/dist/SubjectCommunicationCenter.js

@@ -7,10 +7,18 @@ const DEFAULT_COPY = {
 };
 const FILTERS = ['all', 'messages', 'calls', 'emergency'];
 /** Brand-neutral, subject-scoped message and internet-call timeline for personal portals. */
-export function SubjectCommunicationCenter({ subjectLabel, items, copy = DEFAULT_COPY }) {
+export function SubjectCommunicationCenter({ subjectLabel, items, copy = DEFAULT_COPY, composer }) {
     const [filter, setFilter] = useState('all');
+    const [draft, setDraft] = useState('');
     const visibleItems = useMemo(() => items.filter(item => matchesFilter(item, filter)), [filter, items]);
-    return _jsxs("section", { className: "subject-communication-center", "aria-labelledby": "subject-communication-center-title", children: [_jsx("h2", { id: "subject-communication-center-title", children: copy.heading(subjectLabel) }), _jsx("div", { className: "subject-communication-filters", "aria-label": copy.heading(subjectLabel), children: FILTERS.map(value => _jsx("button", { type: "button", "aria-pressed": filter === value, onClick: () => setFilter(value), children: copy.filters[value] }, value)) }), visibleItems.length === 0 ? _jsx("p", { className: "subject-communication-empty", children: copy.empty }) : _jsx("ol", { className: "subject-communication-list", children: visibleItems.map(item => _jsxs("li", { "data-kind": item.kind, "data-category": item.category, children: [_jsxs("div", { children: [_jsx("strong", { children: item.title }), item.summary ? _jsx("p", { children: item.summary }) : null] }), _jsxs("div", { className: "subject-communication-meta", children: [item.timestamp ? _jsx("time", { dateTime: item.timestamp, children: item.timestamp }) : null, item.status ? _jsx("span", { children: item.status }) : null, item.action] })] }, item.id)) })] });
+    return _jsxs("section", { className: "subject-communication-center", "aria-labelledby": "subject-communication-center-title", children: [_jsx("h2", { id: "subject-communication-center-title", children: copy.heading(subjectLabel) }), _jsx("div", { className: "subject-communication-filters", "aria-label": copy.heading(subjectLabel), children: FILTERS.map(value => _jsx("button", { type: "button", "aria-pressed": filter === value, onClick: () => setFilter(value), children: copy.filters[value] }, value)) }), visibleItems.length === 0 ? _jsx("p", { className: "subject-communication-empty", children: copy.empty }) : _jsx("ol", { className: "subject-communication-list", role: "log", children: visibleItems.map(item => _jsxs("li", { "data-kind": item.kind, "data-category": item.category, "data-direction": item.direction || 'system', children: [item.avatarUrl ? _jsx("img", { className: "subject-communication-avatar", src: item.avatarUrl, alt: item.senderLabel || item.title }) : null, _jsxs("div", { className: "subject-communication-bubble", children: [item.senderLabel ? _jsx("span", { className: "subject-communication-sender", children: item.senderLabel }) : null, _jsx("strong", { children: item.title }), item.summary ? _jsx("p", { children: item.summary }) : null] }), _jsxs("div", { className: "subject-communication-meta", children: [item.timestamp ? _jsx("time", { dateTime: item.timestamp, children: item.timestamp }) : null, item.status ? _jsx("span", { children: item.status }) : null, item.action] })] }, item.id)) }), composer ? _jsxs("form", { className: "subject-communication-composer", onSubmit: event => {
+                    event.preventDefault();
+                    const text = draft.trim();
+                    if (!text || composer.disabled)
+                        return;
+                    void composer.onSend(text);
+                    setDraft('');
+                }, children: [_jsx("label", { className: "subject-communication-composer-label", htmlFor: "subject-communication-composer-input", children: composer.placeholder }), _jsx("textarea", { id: "subject-communication-composer-input", "aria-label": composer.placeholder, placeholder: composer.placeholder, value: draft, disabled: composer.disabled, onChange: event => setDraft(event.target.value) }), _jsxs("div", { className: "subject-communication-composer-actions", children: [composer.onAttach && composer.attachLabel ? _jsx("button", { type: "button", disabled: composer.disabled, onClick: () => void composer.onAttach?.(), children: composer.attachLabel }) : null, _jsx("button", { type: "submit", disabled: composer.disabled || !draft.trim(), children: composer.sendLabel })] })] }) : null] });
 }
 function matchesFilter(item, filter) {
     if (filter === 'all')

package/dist/styles.css

@@ -685,7 +685,19 @@ html[data-theme='dark'] .uhcp-brand-artwork-dark { display: block !important; }
 .subject-communication-filters button { border: 1px solid currentColor; border-radius: 999px; padding: .55rem .9rem; background: transparent; font: inherit; cursor: pointer; }
 .subject-communication-filters button[aria-pressed="true"] { background: currentColor; color: Canvas; }
 .subject-communication-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
-.subject-communication-list > li { display: flex; justify-content: space-between; gap: 1rem; align-items: start; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 1rem; padding: 1rem; }
+.subject-communication-list > li { display: flex; justify-content: flex-start; gap: .75rem; align-items: end; }
+.subject-communication-list > li[data-direction="outgoing"] { flex-direction: row-reverse; }
+.subject-communication-list > li[data-direction="system"] { justify-content: center; }
+.subject-communication-avatar { width: 2.5rem; height: 2.5rem; border-radius: 999px; object-fit: cover; flex: 0 0 auto; }
+.subject-communication-bubble { max-width: min(78%, 42rem); border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 1rem 1rem 1rem .25rem; padding: .8rem 1rem; background: color-mix(in srgb, Canvas 94%, currentColor 6%); }
+.subject-communication-list > li[data-direction="outgoing"] .subject-communication-bubble { border-radius: 1rem 1rem .25rem 1rem; background: color-mix(in srgb, #66c8d1 18%, Canvas); }
+.subject-communication-sender { display: block; margin-bottom: .2rem; font-size: .8em; font-weight: 700; opacity: .72; }
 .subject-communication-list p { margin: .35rem 0 0; }
 .subject-communication-meta { display: grid; justify-items: end; gap: .35rem; font-size: .875em; }
 .subject-communication-empty { margin: 0; opacity: .72; }
+.subject-communication-composer { display: grid; gap: .65rem; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); padding-top: 1rem; }
+.subject-communication-composer-label { font-weight: 700; }
+.subject-communication-composer textarea { min-height: 5rem; resize: vertical; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 1rem; padding: .8rem 1rem; font: inherit; color: inherit; background: Canvas; }
+.subject-communication-composer-actions { display: flex; justify-content: flex-end; gap: .65rem; }
+.subject-communication-composer-actions button { border: 1px solid currentColor; border-radius: 999px; padding: .55rem .9rem; background: transparent; color: inherit; font: inherit; cursor: pointer; }
+.subject-communication-composer-actions button[type="submit"] { background: currentColor; color: Canvas; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uhc-portal-components-react",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "description": "Brand-neutral React portal shell, account preferences and protected-profile UI for UHC and VetChain portals.",
   "license": "Apache-2.0",
   "type": "module",