import type { Morfo } from '../types'; import { v } from '../types'; /** * DateRangePicker — composite popover containing a DateRangeField (segmented * inputs) + RangeCalendar. The morfo declares the picker's own surface * (trigger + calendar shell + dismissal events); cell-level events and * range tracking are owned by the `range-calendar` morfo. */ export const dateRangePickerMorfo = { name: 'DateRangePicker', kebab: 'date-range-picker', scope: ['soma', 'sema'], apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/', texts: { label: '#?components.date-range-picker.label|Date range picker', trigger: '#?components.date-range-picker.trigger|Open range calendar', calendar: '#?components.date-range-picker.calendar|Date range calendar' }, events: [ { name: 'open', semantic: { family: 'emerge', verb: 'open', target: v.partRef('calendar'), sequence: 'pre', intent: { fromProp: 'intent', default: 'neutral', supported: ['neutral', 'affirm', 'risk'] } }, commits: { part: v.partRef('calendar'), attr: 'data-state', value: 'open' } }, { // The user committed a complete range and the popover closed. // `fulfill` because the picker's job — pick a complete range — is done. name: 'close-range-commit', semantic: { family: 'commit', verb: 'save', target: v.partRef('calendar'), sequence: 'post', intent: 'fulfill' }, regime: 'lock', prewrite: [ { part: v.partRef('calendar'), attr: 'data-last-action', value: 'range-committed' } ], commits: { part: v.partRef('calendar'), attr: 'data-state', value: 'closed' } }, { // Explicit cancel from a Save/Cancel button (modal mode). name: 'close-cancel', semantic: { family: 'emerge', verb: 'close', target: v.partRef('calendar'), sequence: 'pre' }, regime: 'lock', prewrite: [ { part: v.partRef('calendar'), attr: 'data-last-action', value: 'cancelled' } ], commits: { part: v.partRef('calendar'), attr: 'data-state', value: 'closed' } }, { // Escape key. name: 'close-dismiss', semantic: { family: 'emerge', verb: 'dismiss', target: v.partRef('calendar'), sequence: 'pre' }, regime: 'lock', prewrite: [ { part: v.partRef('calendar'), attr: 'data-last-action', value: 'dismissed' } ], commits: { part: v.partRef('calendar'), attr: 'data-state', value: 'closed' } }, { // Click outside the popover. name: 'close-dismiss-outside', semantic: { family: 'emerge', verb: 'dismiss', target: v.partRef('calendar'), sequence: 'pre' }, regime: 'lock', prewrite: [ { part: v.partRef('calendar'), attr: 'data-last-action', value: 'dismissed-outside' } ], commits: { part: v.partRef('calendar'), attr: 'data-state', value: 'closed' } }, { // User cleared the range (explicit clear button or backspace). name: 'commit-clear', semantic: { family: 'commit', verb: 'reset', target: v.partRef('calendar'), sequence: 'post', intent: 'neutral' } } ], focus: { initial: 'first-focusable', trap: true, return: 'trigger', restore: true }, parts: [ { name: 'Provider', kebab: 'provider', archetype: 'provider', kind: 'public', defaultElement: 'div', optional: false, states: ['open', 'closed'], data: [ { attr: 'data-state', values: ['open', 'closed'], value: v.stateRef('open') }, { attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' }, { attr: 'data-readonly', value: v.propRef('readonly'), severity: 'optional' }, { attr: 'data-required', value: v.propRef('required'), severity: 'optional' }, { attr: 'data-invalid', value: v.propRef('invalid'), severity: 'optional' } ], aria: [ { attr: 'aria-disabled', value: v.propRef('disabled'), severity: 'optional' }, { attr: 'aria-readonly', value: v.propRef('readonly'), severity: 'optional' }, { attr: 'aria-required', value: v.propRef('required'), severity: 'optional' } ] }, { name: 'Trigger', kebab: 'trigger', archetype: 'trigger', kind: 'public', defaultElement: 'button', role: 'button', optional: false, states: ['open', 'closed'], data: [{ attr: 'data-state', values: ['open', 'closed'], value: v.stateRef('open') }], aria: [ { attr: 'type', value: v.literal('button') }, { attr: 'aria-haspopup', value: v.literal('dialog') }, { attr: 'aria-expanded', value: v.stateRef('open') }, { attr: 'aria-controls', value: v.partRef('calendar'), condition: { when: 'part-present', part: 'calendar' }, severity: 'recommended' }, { attr: 'aria-label', value: v.translationRef('#?components.date-range-picker.trigger|Open range calendar'), severity: 'recommended' } ], keyboard: [ { key: 'Enter', action: 'open' }, { key: ' ', action: 'open' } ] }, { name: 'Calendar', kebab: 'calendar', archetype: 'content', kind: 'public', defaultElement: 'div', role: 'dialog', optional: false, states: ['open', 'closed'], data: [ { attr: 'data-state', values: ['open', 'closed'], value: v.stateRef('open') }, { /** * Causal exit reason — mirror of dialog's `data-last-action`. * Updated by `prewrite` BEFORE `data-state` flips to `closed`, * so Sema can tint the exit animation per-action. */ attr: 'data-last-action', values: ['range-committed', 'cancelled', 'dismissed', 'dismissed-outside'], severity: 'optional' }, { attr: 'data-starting-style', severity: 'optional', condition: { when: 'state-equals', state: 'open', value: 'starting' } }, { attr: 'data-ending-style', severity: 'optional', condition: { when: 'state-equals', state: 'closed', value: 'ending' } } ], aria: [ { attr: 'aria-label', value: v.translationRef('#?components.date-range-picker.calendar|Date range calendar'), severity: 'recommended' } ], keyboard: [ { key: 'Escape', action: 'close' }, { key: 'Tab', action: 'focus-next' }, { key: 'Shift+Tab', action: 'focus-prev' } ] } // Footer / Clear / Cancel / Close — chrome shared via picker-shell; // not declared here. Eidos `` re-exports the `` parts. ] } as const satisfies Morfo;