uhc-portal-components-react 0.2.24 → 0.2.26

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 ## Unreleased
 
+## 0.2.26 - 2026-10-22
+
+- Keep race and ethnicity outside the universal human profile: trusted
+  jurisdictional profiles may enable either, both or neither.
+- Present enabled human demographic concepts as optional additions and omit
+  empty optional concepts from read-only views.
+
+## 0.2.25 - 2026-10-22
+
+- Add one shared read/edit demographics slot whose trusted profile renders
+  human race and ethnicity or animal species and breed while preserving
+  distinct field names, terminology options and persistence adapters.
+
 ## 0.2.24 - 2026-10-22
 
 - Let each deployment omit brand artwork when no official mark is configured;

package/dist/SubjectDemographicsFields.d.ts

@@ -0,0 +1,42 @@
+export type SubjectDemographicsOption = Readonly<{
+    value: string;
+    label: string;
+}>;
+export type SubjectDemographicsProfile = Readonly<{
+    subjectKind: 'human';
+    raceOptions?: readonly SubjectDemographicsOption[];
+    ethnicityOptions?: readonly SubjectDemographicsOption[];
+}> | Readonly<{
+    subjectKind: 'animal';
+    speciesOptions: readonly SubjectDemographicsOption[];
+    breedOptions: readonly SubjectDemographicsOption[];
+}>;
+export type SubjectDemographicsCopy = Readonly<{
+    race?: string;
+    ethnicity?: string;
+    addRace?: string;
+    addEthnicity?: string;
+    species?: string;
+    breed?: string;
+}>;
+/**
+ * Shared presentation slot for human or animal demographics.
+ *
+ * Profiles preserve different field names and option catalogues so visual
+ * reuse can never turn race into species or ethnicity into breed. Hosts map
+ * the submitted fields to their own canonical persistence adapters.
+ */
+export declare function SubjectDemographicsFields({ mode, profile, copy, values, onValuesChange, }: Readonly<{
+    mode: 'edit' | 'read';
+    profile: SubjectDemographicsProfile;
+    copy: SubjectDemographicsCopy;
+    values?: Readonly<{
+        primary?: string;
+        secondary?: string;
+    }>;
+    onValuesChange?: (values: Readonly<{
+        primary?: string;
+        secondary?: string;
+    }>) => void;
+}>): import("react").JSX.Element;
+//# sourceMappingURL=SubjectDemographicsFields.d.ts.map

package/dist/SubjectDemographicsFields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubjectDemographicsFields.d.ts","sourceRoot":"","sources":["../src/SubjectDemographicsFields.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,yBAAyB,GAAG,QAAQ,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAC,CAAA;AAEF,MAAM,MAAM,0BAA0B,GAClC,QAAQ,CAAC;IACP,WAAW,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,SAAS,yBAAyB,EAAE,CAAA;IAClD,gBAAgB,CAAC,EAAE,SAAS,yBAAyB,EAAE,CAAA;CACxD,CAAC,GACF,QAAQ,CAAC;IACP,WAAW,EAAE,QAAQ,CAAA;IACrB,cAAc,EAAE,SAAS,yBAAyB,EAAE,CAAA;IACpD,YAAY,EAAE,SAAS,yBAAyB,EAAE,CAAA;CACnD,CAAC,CAAA;AAEN,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC,CAAA;AAEF;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,MAAM,EACN,cAAc,GACf,EAAE,QAAQ,CAAC;IACV,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,OAAO,EAAE,0BAA0B,CAAA;IACnC,IAAI,EAAE,uBAAuB,CAAA;IAC7B,MAAM,CAAC,EAAE,QAAQ,CAAC;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAC3D,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAA;CACtF,CAAC,+BAgFD"}

package/dist/SubjectDemographicsFields.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+/**
+ * Shared presentation slot for human or animal demographics.
+ *
+ * Profiles preserve different field names and option catalogues so visual
+ * reuse can never turn race into species or ethnicity into breed. Hosts map
+ * the submitted fields to their own canonical persistence adapters.
+ */
+export function SubjectDemographicsFields({ mode, profile, copy, values, onValuesChange, }) {
+    const [visibleHumanFields, setVisibleHumanFields] = useState(() => new Set([
+        ...(values?.primary ? ['race'] : []),
+        ...(values?.secondary ? ['ethnicity'] : []),
+    ]));
+    const fields = profile.subjectKind === 'human'
+        ? [
+            ...(profile.raceOptions === undefined ? [] : [{
+                    concept: 'race',
+                    valueKey: 'primary',
+                    name: 'human.race',
+                    label: requiredCopy(copy.race, 'race'),
+                    addLabel: mode === 'edit' ? requiredCopy(copy.addRace, 'add_race') : '',
+                    options: profile.raceOptions,
+                    value: values?.primary,
+                    required: false,
+                }]),
+            ...(profile.ethnicityOptions === undefined ? [] : [{
+                    concept: 'ethnicity',
+                    valueKey: 'secondary',
+                    name: 'human.ethnicity',
+                    label: requiredCopy(copy.ethnicity, 'ethnicity'),
+                    addLabel: mode === 'edit' ? requiredCopy(copy.addEthnicity, 'add_ethnicity') : '',
+                    options: profile.ethnicityOptions,
+                    value: values?.secondary,
+                    required: false,
+                }]),
+        ]
+        : [
+            { concept: 'species', valueKey: 'primary', name: 'animal.species', label: requiredCopy(copy.species, 'species'), addLabel: '', options: profile.speciesOptions, value: values?.primary, required: true },
+            { concept: 'breed', valueKey: 'secondary', name: 'animal.breed', label: requiredCopy(copy.breed, 'breed'), addLabel: '', options: profile.breedOptions, value: values?.secondary, required: true },
+        ];
+    return _jsx("div", { className: "uhcp-subject-demographics-fields", "data-subject-kind": profile.subjectKind, children: mode === 'edit' && profile.subjectKind === 'human'
+            ? fields.map((field) => visibleHumanFields.has(field.concept)
+                ? _jsxs("label", { children: [_jsx("span", { children: field.label }), _jsxs("select", { name: field.name, "aria-label": field.label, ...(onValuesChange
+                                ? {
+                                    value: field.value ?? '',
+                                    onChange: (event) => onValuesChange({
+                                        primary: field.valueKey === 'primary' ? event.currentTarget.value : values?.primary,
+                                        secondary: field.valueKey === 'secondary' ? event.currentTarget.value : values?.secondary,
+                                    }),
+                                }
+                                : { defaultValue: field.value ?? '' }), children: [_jsx("option", { value: "", disabled: true, children: field.label }), field.options.map((option) => _jsx("option", { value: option.value, children: option.label }, option.value))] })] }, field.name)
+                : _jsx("button", { className: "uhcp-subject-demographics-add", type: "button", onClick: () => setVisibleHumanFields((current) => new Set([...current, field.concept])), children: field.addLabel }, field.name))
+            : mode === 'edit'
+                ? fields.map((field) => _jsxs("label", { children: [_jsx("span", { children: field.label }), _jsxs("select", { name: field.name, "aria-label": field.label, required: field.required, ...(onValuesChange
+                                ? {
+                                    value: field.value ?? '',
+                                    onChange: (event) => onValuesChange({
+                                        primary: field.valueKey === 'primary' ? event.currentTarget.value : values?.primary,
+                                        secondary: field.valueKey === 'secondary' ? event.currentTarget.value : values?.secondary,
+                                    }),
+                                }
+                                : { defaultValue: field.value ?? '' }), children: [_jsx("option", { value: "", disabled: true, children: field.label }), field.options.map((option) => _jsx("option", { value: option.value, children: option.label }, option.value))] })] }, field.name))
+                : _jsx("dl", { children: fields.filter((field) => profile.subjectKind === 'animal' || field.value).map((field) => _jsxs("div", { children: [_jsx("dt", { children: field.label }), _jsx("dd", { children: field.value || '—' })] }, field.name)) }) });
+}
+function requiredCopy(value, field) {
+    const normalized = String(value || '').trim();
+    if (!normalized)
+        throw new Error(`subject_demographics_${field}_copy_required`);
+    return normalized;
+}

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 './SubjectDemographicsFields.js';
 export * from './CardPreview.js';
 export * from './CollapsiblePortalSection.js';
 export * from './ElapsedOperationStatus.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,kBAAkB,CAAA;AAChC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,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,gCAAgC,CAAA;AAC9C,cAAc,kBAAkB,CAAA;AAChC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,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 './SubjectDemographicsFields.js';
 export * from './CardPreview.js';
 export * from './CollapsiblePortalSection.js';
 export * from './ElapsedOperationStatus.js';

package/dist/styles.css

@@ -974,3 +974,37 @@ html[data-theme='dark'] .uhcp-brand-artwork-dark { display: block !important; }
 .uhcp-selected-subject-tabs { display: flex; flex-wrap: wrap; gap: 0.75rem; }
 .uhcp-selected-subject-tabs button { min-height: 2.75rem; border: 1px solid var(--uhcp-border, #cbd5e1); border-radius: 999px; padding: 0.625rem 1rem; background: var(--uhcp-surface, #fff); color: inherit; font: inherit; font-weight: 700; }
 .uhcp-selected-subject-tabs button[aria-selected='true'] { border-color: var(--uhcp-accent, #0f766e); background: color-mix(in srgb, var(--uhcp-accent, #0f766e) 12%, transparent); }
+
+.uhcp-subject-demographics-fields,
+.uhcp-subject-demographics-fields dl {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  gap: 1rem;
+}
+
+.uhcp-subject-demographics-fields label,
+.uhcp-subject-demographics-fields dl > div {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.uhcp-subject-demographics-fields label > span,
+.uhcp-subject-demographics-fields dt {
+  font-weight: 700;
+}
+
+.uhcp-subject-demographics-fields select {
+  min-height: 2.75rem;
+  width: 100%;
+  border: 1px solid var(--uhcp-border, #cbd5e1);
+  border-radius: 0.75rem;
+  padding: 0.625rem 0.75rem;
+  background: var(--uhcp-surface, #fff);
+  color: inherit;
+  font: inherit;
+}
+
+.uhcp-subject-demographics-fields dl,
+.uhcp-subject-demographics-fields dd {
+  margin: 0;
+}

package/package.json

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