Mixins / foldkit-mixins-ui

DatePickerView

namespace · packages/mixins-ui/src/datePickerView.ts:17

export * as DatePickerView from './datePickerView.js'

A DatePicker view with the consumer toView seam @foldkit/ui/datePicker does not expose. State, Messages, update, Commands, and helpers stay upstream; only markup assembly is transcribed, from @foldkit/ui@0.165.0 (packages/ui/src/datePicker/index.ts, MIT (c) 2025 Devin Jameson) at tag @foldkit/ui@0.165.0, with the popover-level bundles named (DatePickerRenderInfo) and handed to toView.

The fork keeps upstream's composition: the calendar grid still renders through the consumer's toCalendarView, and the trigger face through triggerContent. Only the popover assembly (trigger button, backdrop, panel around the calendar) gains the seam. The default toView reproduces upstream's markup; the parity battery draws both views over the same models, so drift fails loudly. If upstream gains a seam, delete this module; on a bump, re-transcribe and re-run the battery.

In the guides

Members

DatePickerView.DatePickerRenderInfo

type · packages/mixins-ui/src/datePickerView.ts:35

type DatePickerRenderInfo = Readonly<{
  trigger: SlotAttributes<Message>
  triggerContent: Html
  panel: SlotAttributes<Message> | undefined
  backdrop: SlotAttributes<Message> | undefined
  calendar: Html
  isVisible: boolean
}>

The date picker's popover-level bundles. panel and backdrop are present only while the popover shows them; calendar is the embedded calendar submodel's content and triggerContent the trigger face, both drawn by their consumer callbacks, passed through for the draw to place.

DatePickerView.DatePickerViewInputs

type · packages/mixins-ui/src/datePickerView.ts:49

type DatePickerViewInputs = UpstreamViewInputs &
  Readonly<{
    toView?: (render: DatePickerRenderInfo, h: HtmlBuilder<Message>) => Html
  }>

Upstream view inputs plus the seam. Omit toView for upstream markup. It is handed the date picker's own builder, since its bundles speak the date picker's Message.

DatePickerView.defaultToView

function · packages/mixins-ui/src/datePickerView.ts:204

function defaultToView(
  render: DatePickerRenderInfo,
  h: HtmlBuilder<Message>,
): Html

Upstream's popover assembly from the computed bundles: the default toView.

DatePickerView.view

const · packages/mixins-ui/src/datePickerView.ts:54

const view: SubmodelView<{ readonly id: string; readonly calendar: { readonly id: string; readonly today: { readonly year: number; readonly month: number; readonly day: number; }; readonly viewYear: number; readonly viewMonth: number; readonly viewMode: "Days" | "Months" | "Years"; readonly maybeFocusedDate: Option.Option<{ readonly year: number; readonly month: number; readonly day: number; }>; readonly isGridFocused: boolean; readonly locale: { readonly firstDayOfWeek: "Sunday" | "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday"; readonly monthNames: readonly [string, string, string, string, string, string, string, string, string, string, string, string]; readonly shortMonthNames: readonly [string, string, string, string, string, string, string, string, string, string, string, string]; readonly dayNames: readonly [string, string, string, string, string, string, string]; readonly shortDayNames: readonly [string, string, string, string, string, string, string]; readonly longFormat: readonly [{ readonly _tag: "MonthName"; } | { readonly _tag: "ShortMonthName"; } | { readonly _tag: "MonthNumber"; } | { readonly _tag: "PaddedMonthNumber"; } | { readonly _tag: "DayNumber"; } | { readonly _tag: "PaddedDayNumber"; } | { readonly _tag: "DayName"; } | { readonly _tag: "ShortDayName"; } | { readonly _tag: "YearNumber"; } | { readonly _tag: "LiteralText"; readonly text: string; }, ...({ readonly _tag: "MonthName"; } | { readonly _tag: "ShortMonthName"; } | { readonly _tag: "M …;