--- id: CMP-CRM-ENT-006 title: Phone List Editor product_area: crm module: entities revision: 1 status: draft design_intent: proposed implementation_evidence: observed source_sha: react-console: baf6dae382d6f41dce976c7f848667ccc37e076f purpose: Lets staff maintain typed phone numbers, choose a preferred number and inspect organization-supplied values in a contact draft. reuse: Used by the Phone Numbers form adapter in Create Contact and Edit Contact. Its source controls apply to contact rows; organization number editing uses a separate implementation. supports: - CAP-CRM-ENT-005 - CAP-CRM-ENT-006 realises: - CON-CRM-ENT-001 - CON-CRM-ENT-034 props: - name: value type: phone entries required: true default: none meaning: Supplies row keys, standard or alternate type, custom type identifier, number text and preferred flag. provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - name: onChange type: handler receiving replacement collection required: true default: none meaning: Receives committed edits and row changes. provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - name: getError type: message lookup by field identifier required: true default: none meaning: Supplies validation text keyed to the phone-type field. provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - name: types type: configured phone types required: false default: shipped types without custom choices meaning: Restricts offered choices and preserves held inactive types; until loaded, shipped choices remain. provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - name: links type: row source controls required: false default: none meaning: Supplies source state, change-source, independent-copy, optional keep-own and start-link actions, and optional type labels. provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - name: linkedWork type: older work mirror information required: false default: none meaning: Supplies mirror state, organization name and unlink action; this path differs from row source controls. provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx events: - name: change when: Number text or type changes, preference toggles, Add or Remove occurs. payload: The replacement phone collection. provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - name: source actions when: The caller-supplied row source action is activated. payload: The selected entry, through its bound source callback. provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - name: unlink work when: Unlink is activated on the older work mirror. payload: No payload. provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx states: - state: empty experience: A provisional typed input appears without Add or Remove and with a disabled preference star. provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - state: owned experience: Number and type are editable, with unused types available for additions. provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - state: linked experience: Value is read-only and type is disabled; current source controls leave Remove available. provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - state: unresolved experience: Ended or missing source states show No value; a disconnected row shows its retained number. provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - state: older work mirror experience: Remove is disabled until the mirror is unlinked. provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - state: no free type experience: Add Phone is disabled because no unused offered type remains. provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx validation: - BR-CAP-CRM-ENT-005-03 - BR-CAP-CRM-ENT-005-04 - BR-CAP-CRM-ENT-005-07 - BR-CAP-CRM-ENT-006-04 accessibility: Number inputs use telephone mode and type-specific accessible names. Link and Remove identify the row type; decorative icons are hidden and errors are alerts. Added rows request focus. The type-select and source-marker primitives supply their interaction semantics; complete keyboard and screen-reader verification is absent. design_system: - button - telephone input - select - badge - preferred star - linked-source marker depends_on: [] implementation: CMI-CRM-ENT-006 acceptance: - id: AC-CMP-CRM-ENT-006-01 proved_by: [] statement: An empty collection shows a provisional input and no Add Phone or Remove action. level: unit provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - id: AC-CMP-CRM-ENT-006-02 proved_by: [] statement: Choosing a preferred row clears the preferred flag on all other rows. level: unit provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - id: AC-CMP-CRM-ENT-006-03 proved_by: [] statement: A held inactive custom type remains available on its own row without being offered as a fresh choice. level: unit provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - id: AC-CMP-CRM-ENT-006-04 proved_by: [] statement: A source-controlled row has a read-only number and disabled type; the older work mirror disables Remove. level: unit provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx controls: [] evidence: - react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx narrative_sources: - section: What It Is For provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - section: Where It Is Used provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - section: How It Behaves provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - section: Its Contract provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - section: States provenance: observed source: react-console:components/contact-editor/collections/phone-list-editor.tsx; react-console:components/contact-editor/collections/blank-row.ts; react-console:components/contact-editor/collections/contact-point-choices.ts; react-console:components/contact-editor/fields/preferred-star.tsx; react-console:components/contact-editor/fields/select-field.tsx; react-console:components/contact-editor/format.ts; react-console:components/contact-editor/logic.ts; react-console:components/contact-editor/constants.ts; react-console:components/contact-editor/types.ts; react-console:components/forms/contacts/collection-components.tsx - section: Accessibility provenance: unknown source: FND-CRM-ENT-161 - section: Open Design Questions provenance: unknown source: FND-CRM-ENT-161; FND-CRM-ENT-162; FND-CRM-ENT-163 used_by: [] --- # Phone List Editor ## What It Is For Lets staff maintain typed phone numbers, choose a preferred number and inspect organization-supplied values in a contact draft. The typed phone list and form adapter combine source markers with owned-number editing. The blank-row and contact-point-choice helpers are shared with Address Editor; this manifest identifies dependencies rather than claiming exclusive ownership of shared support files. ## Where It Is Used Used by the Phone Numbers form adapter in Create Contact and Edit Contact. Its source controls apply to contact rows; organization number editing uses a separate implementation. Create Contact and Edit Contact use the Phone Numbers adapter. Address Editor shares the RowLinkControls interface declared with the phone list, while both collections use common blank-row, type-choice and preferred-star support. ## How It Behaves The component proposes unused types in its fixed order. Standard and configured custom choices are filtered through the contact-point choice helpers, with held inactive custom types retained on their own row and types used elsewhere disabled. Choosing a preferred row clears the other flags; choosing it again clears the explicit preference, leaving the automatic preference summary. Number blur applies the shared national-format formatter. Linked values cannot be edited directly. A disconnected source retains visible last-known text, whereas an ended or missing source displays No value. ## Its Contract The form owns the collection, configuration and source decisions. Local state only holds the focus request and the empty provisional row. Source callbacks manage linking or copying outside the list editor. Current row source controls permit removal, but the older work mirror disables removal until unlinking. The preferred star remains available on source-controlled committed rows because preference belongs to the contact’s row. The editor displays supplied validation and does not itself commit a server mutation. ## States Empty: A provisional typed input appears without Add or Remove and with a disabled preference star. Owned: Number and type are editable, with unused types available for additions. Linked: Value is read-only and type is disabled; current source controls leave Remove available. Unresolved: Ended or missing source states show No value; a disconnected row shows its retained number. Older work mirror: Remove is disabled until the mirror is unlinked. No free type: Add Phone is disabled because no unused offered type remains. ## Accessibility Number inputs use telephone mode and type-specific accessible names. Link and Remove identify the row type; decorative icons are hidden and errors are alerts. Added rows request focus. The type-select and source-marker primitives supply their interaction semantics; complete keyboard and screen-reader verification is absent. Accessibility verification is an open obligation recorded in the component accessibility finding. ## Open Design Questions The recorded interaction is observed implementation, with proposed design intent. Component criteria need complete executable bindings and browser accessibility review. Screen owners must wire the registered components into their designs; this slice records usage without changing those screen contracts.