DocsAPI referenceUI machinesdate-picker

date-picker machine

The public state machine contract for @grassroot/ui-machines/date-picker. The machine owns behaviour; the matching headless layer owns composition.

@grassroot/ui-machines/date-picker

Package

11 exports
View source packages/ui-machines/src/date-picker/index.ts

Service example

date-picker.tsts
import { createService } from "@grassroot/statechart";
import { datePickerMachine } from "@grassroot/ui-machines/date-picker";
const service = createService(datePickerMachine, { input: {} });
service.start();
service.send({ type: "…" });
service.stop();

Exports

DeclarationView source
DatePickerCommandts
type DatePickerCommand = CommandObject & ({
readonly type: "VALUE_CHANGE_REQUEST";
readonly value: string;
readonly reason: DatePickerReason;
} | {
readonly type: "OPEN_CHANGE_REQUEST";
readonly open: boolean;
readonly reason: DatePickerReason;
});
DeclarationView source
DatePickerContextts
type DatePickerContext = {
readonly value: string | null;
readonly open: boolean;
readonly year: number;
readonly month: number;
readonly mode: BindingMode;
readonly openMode: BindingMode;
};
Name
Kind
Type
Requirement
mode
property
BindingMode
required
month
property
number
required
open
property
boolean
required
openMode
property
BindingMode
required
value
property
string | null
required
year
property
number
required
Name
mode
Kind
property
Type
BindingMode
Requirement
required
Name
month
Kind
property
Type
number
Requirement
required
Name
open
Kind
property
Type
boolean
Requirement
required
Name
openMode
Kind
property
Type
BindingMode
Requirement
required
Name
value
Kind
property
Type
string | null
Requirement
required
Name
year
Kind
property
Type
number
Requirement
required
DeclarationView source
DatePickerDiagnosticCodests
export declare const DatePickerDiagnosticCodes: readonly DiagnosticCatalogueEntry[];
DeclarationView source
DatePickerEventts
type DatePickerEvent = {
readonly type: "SELECT";
readonly value: string;
readonly reason: DatePickerReason;
} | {
readonly type: "OPEN";
readonly reason: DatePickerReason;
} | {
readonly type: "CLOSE";
readonly reason: DatePickerReason;
} | {
readonly type: "TOGGLE";
readonly reason: DatePickerReason;
} | {
readonly type: "SHIFT";
readonly delta: number;
} | {
readonly type: "RESET";
};
DeclarationView source
DatePickerInputts
type DatePickerInput = {
readonly value?: string | null;
readonly defaultValue?: string | null;
readonly open?: boolean;
readonly defaultOpen?: boolean;
readonly today?: string;
readonly locale?: string;
readonly dir?: "ltr" | "rtl";
readonly weekStartsOn?: number;
readonly min?: string;
readonly max?: string;
readonly disabledDates?: readonly string[];
readonly disabled?: boolean;
readonly readOnly?: boolean;
readonly required?: boolean;
readonly invalid?: boolean;
readonly name?: string;
};
Name
Kind
Type
Requirement
defaultOpen
property
boolean
optional
defaultValue
property
string | null
optional
dir
property
"ltr" | "rtl"
optional
disabled
property
boolean
optional
disabledDates
property
readonly string[]
optional
invalid
property
boolean
optional
locale
property
string
optional
max
property
string
optional
min
property
string
optional
name
property
string
optional
open
property
boolean
optional
readOnly
property
boolean
optional
required
property
boolean
optional
today
property
string
optional
Name
defaultOpen
Kind
property
Type
boolean
Requirement
optional
Name
defaultValue
Kind
property
Type
string | null
Requirement
optional
Name
dir
Kind
property
Type
"ltr" | "rtl"
Requirement
optional
Name
disabled
Kind
property
Type
boolean
Requirement
optional
Name
disabledDates
Kind
property
Type
readonly string[]
Requirement
optional
Name
invalid
Kind
property
Type
boolean
Requirement
optional
Name
locale
Kind
property
Type
string
Requirement
optional
Name
max
Kind
property
Type
string
Requirement
optional
Name
min
Kind
property
Type
string
Requirement
optional
Name
name
Kind
property
Type
string
Requirement
optional
Name
open
Kind
property
Type
boolean
Requirement
optional
Name
readOnly
Kind
property
Type
boolean
Requirement
optional
Name
required
Kind
property
Type
boolean
Requirement
optional
Name
today
Kind
property
Type
string
Requirement
optional
Name
value
Kind
property
Type
string | null
Requirement
optional
Name
weekStartsOn
Kind
property
Type
number
Requirement
optional
DeclarationView source
datePickerMachinets
export declare const datePickerMachine: Machine<DatePickerInput, "ready", DatePickerContext, DatePickerEvent, DatePickerCommand>;
DeclarationView source
DatePickerReasonts
type DatePickerReason = "pointer" | "keyboard" | "programmatic";
DeclarationView source
datePickerReplaySequencets
export declare const datePickerReplaySequence: readonly DatePickerEvent[];
DeclarationView source
datePickerSelectorsts
export declare const datePickerSelectors: {
value: (snapshot: DatePickerSnapshot) => string | null;
open: (snapshot: DatePickerSnapshot) => boolean;
};
Name
Kind
Type
Requirement
open
property
(snapshot: DatePickerSnapshot) => boolean
required
value
property
(snapshot: DatePickerSnapshot) => string | null
required
Name
open
Kind
property
Type
(snapshot: DatePickerSnapshot) => boolean
Requirement
required
Name
value
Kind
property
Type
(snapshot: DatePickerSnapshot) => string | null
Requirement
required
DeclarationView source
DatePickerSnapshotts
type DatePickerSnapshot = Snapshot<"ready", DatePickerContext>;

ISO calendar-date validation shared by every DatePicker boundary.

DeclarationView source
isDatePickerDateSelectablets
declare function isDatePickerDateSelectable(input: DatePickerInput, value: string): boolean;
Name
Kind
Type
Requirement
input
parameter
DatePickerInput
required
value
parameter
string
required
return
return value
boolean
n/a
Name
input
Kind
parameter
Type
DatePickerInput
Requirement
required
Name
value
Kind
parameter
Type
string
Requirement
required
Name
return
Kind
return value
Type
boolean
Requirement
n/a