uhc-portal-components-react 0.2.30 → 0.2.31

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.2.31 - 2026-10-23
+
+- Add one concise, accessible `Sections` index for Personal portals so card,
+  health, appointments and tasks, emergencies, communications, permissions and
+  optional profile destinations do not need a duplicated top navigation row.
+- Keep the active destination marked across human and animal profiles while
+  leaving authorization and enabled-section decisions with the trusted host.
+
 ## 0.2.30 - 2026-10-22
 
 - Restore the stable `activate-member-profile` action marker on the shared

package/dist/SubjectSectionIndex.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+export type SubjectSectionIndexItem = Readonly<{
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+}>;
+export type SubjectSectionIndexProps = Readonly<{
+    ariaLabel: string;
+    title: string;
+    sections: readonly SubjectSectionIndexItem[];
+    activeSection: string;
+    onSectionChange: (section: string) => void;
+    className?: string;
+}>;
+/**
+ * One concise, brand-neutral navigation index for a selected Personal subject.
+ * The host supplies only server-authorized destinations; selecting one changes
+ * presentation and never grants access to the underlying data.
+ */
+export declare function SubjectSectionIndex({ ariaLabel, title, sections, activeSection, onSectionChange, className, }: SubjectSectionIndexProps): import("react").JSX.Element;
+//# sourceMappingURL=SubjectSectionIndex.d.ts.map

package/dist/SubjectSectionIndex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubjectSectionIndex.d.ts","sourceRoot":"","sources":["../src/SubjectSectionIndex.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjE,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC7C,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,MAAM,wBAAwB,GAAG,QAAQ,CAAC;IAC9C,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,SAAS,uBAAuB,EAAE,CAAA;IAC5C,aAAa,EAAE,MAAM,CAAA;IACrB,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,KAAK,EACL,QAAQ,EACR,aAAa,EACb,eAAe,EACf,SAAS,GACV,EAAE,wBAAwB,+BAmC1B"}

package/dist/SubjectSectionIndex.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+/**
+ * One concise, brand-neutral navigation index for a selected Personal subject.
+ * The host supplies only server-authorized destinations; selecting one changes
+ * presentation and never grants access to the underlying data.
+ */
+export function SubjectSectionIndex({ ariaLabel, title, sections, activeSection, onSectionChange, className, }) {
+    const visibleSections = sections.filter(({ disabled }) => !disabled);
+    const instanceId = useId().replaceAll(':', '');
+    function moveWithKeyboard(event, sectionId) {
+        const currentIndex = visibleSections.findIndex(({ id }) => id === sectionId);
+        let nextIndex;
+        if (event.key === 'ArrowRight' || event.key === 'ArrowDown')
+            nextIndex = (currentIndex + 1) % visibleSections.length;
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowUp')
+            nextIndex = (currentIndex - 1 + visibleSections.length) % visibleSections.length;
+        if (event.key === 'Home')
+            nextIndex = 0;
+        if (event.key === 'End')
+            nextIndex = visibleSections.length - 1;
+        if (nextIndex === undefined || !visibleSections[nextIndex])
+            return;
+        event.preventDefault();
+        const nextSection = visibleSections[nextIndex];
+        onSectionChange(nextSection.id);
+        document.getElementById(`${instanceId}-section-${nextSection.id}`)?.focus();
+    }
+    return _jsxs("nav", { className: className ?? 'uhcp-subject-section-index', "aria-label": ariaLabel, children: [_jsx("h2", { children: title }), _jsx("div", { role: "tablist", "aria-label": ariaLabel, children: visibleSections.map((section) => _jsxs("button", { id: `${instanceId}-section-${section.id}`, type: "button", role: "tab", "aria-selected": section.id === activeSection, onClick: () => onSectionChange(section.id), onKeyDown: (event) => moveWithKeyboard(event, section.id), children: [section.icon, _jsx("span", { children: section.label })] }, section.id)) })] });
+}

package/dist/index.d.ts

@@ -50,6 +50,7 @@ export * from './notification-bff-client.js';
 export * from './CommunicationsWorkspace.js';
 export * from './SelectedSubjectWorkspace.js';
 export * from './SubjectWorkspace.js';
+export * from './SubjectSectionIndex.js';
 export * from './SubjectDemographicsFields.js';
 export * from './CardPreview.js';
 export * from './CollapsiblePortalSection.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AACzC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wCAAwC,CAAA;AACtD,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,mCAAmC,CAAA;AACjD,cAAc,+BAA+B,CAAA;AAC7C,cAAc,qCAAqC,CAAA;AACnD,cAAc,mCAAmC,CAAA;AACjD,cAAc,gCAAgC,CAAA;AAC9C,cAAc,0BAA0B,CAAA;AACxC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,0CAA0C,CAAA;AACxD,cAAc,kCAAkC,CAAA;AAChD,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oCAAoC,CAAA;AAClD,cAAc,sCAAsC,CAAA;AACpD,cAAc,+BAA+B,CAAA;AAC7C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uCAAuC,CAAA;AACrD,cAAc,uBAAuB,CAAA;AACrC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,kBAAkB,CAAA;AAChC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,yCAAyC,CAAA;AACvD,cAAc,uCAAuC,CAAA;AACrD,cAAc,gCAAgC,CAAA;AAC9C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AACzC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wCAAwC,CAAA;AACtD,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,mCAAmC,CAAA;AACjD,cAAc,+BAA+B,CAAA;AAC7C,cAAc,qCAAqC,CAAA;AACnD,cAAc,mCAAmC,CAAA;AACjD,cAAc,gCAAgC,CAAA;AAC9C,cAAc,0BAA0B,CAAA;AACxC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,0CAA0C,CAAA;AACxD,cAAc,kCAAkC,CAAA;AAChD,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oCAAoC,CAAA;AAClD,cAAc,sCAAsC,CAAA;AACpD,cAAc,+BAA+B,CAAA;AAC7C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uCAAuC,CAAA;AACrD,cAAc,uBAAuB,CAAA;AACrC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,kBAAkB,CAAA;AAChC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,yCAAyC,CAAA;AACvD,cAAc,uCAAuC,CAAA;AACrD,cAAc,gCAAgC,CAAA;AAC9C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,qBAAqB,CAAA"}

package/dist/index.js

@@ -50,6 +50,7 @@ export * from './notification-bff-client.js';
 export * from './CommunicationsWorkspace.js';
 export * from './SelectedSubjectWorkspace.js';
 export * from './SubjectWorkspace.js';
+export * from './SubjectSectionIndex.js';
 export * from './SubjectDemographicsFields.js';
 export * from './CardPreview.js';
 export * from './CollapsiblePortalSection.js';

package/dist/styles.css

@@ -1016,3 +1016,42 @@ html[data-theme='dark'] .uhcp-brand-artwork-dark { display: block !important; }
 .uhcp-subject-demographics-fields dd {
   margin: 0;
 }
+.uhcp-subject-section-index {
+  border: 1px solid var(--uhcp-border, currentColor);
+  border-radius: 1.5rem;
+  padding: 1rem;
+}
+
+.uhcp-subject-section-index > h2 {
+  margin: 0 0 0.75rem;
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.uhcp-subject-section-index [role='tablist'] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+  gap: 0.5rem;
+}
+
+.uhcp-subject-section-index [role='tab'] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2.75rem;
+  padding: 0.65rem 0.9rem;
+  border: 1px solid var(--uhcp-border, currentColor);
+  border-radius: 0.9rem;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-weight: 650;
+  text-align: left;
+  cursor: pointer;
+}
+
+.uhcp-subject-section-index [role='tab'][aria-selected='true'] {
+  border-color: var(--uhcp-accent, currentColor);
+  color: var(--uhcp-accent, inherit);
+  box-shadow: inset 0 0 0 1px var(--uhcp-accent, currentColor);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uhc-portal-components-react",
-  "version": "0.2.30",
+  "version": "0.2.31",
   "description": "Brand-neutral React portal screens, account preferences and protected-profile UI.",
   "license": "Apache-2.0",
   "type": "module",