grassroot
Install

DocsAPI referenceUI machinesdate-range-picker

date-range-picker machine

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

@grassroot/ui-machines/date-range-picker

Package

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

Service example

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

Exports

DATE_RANGE_PRESETS

value
DeclarationView source
DATE_RANGE_PRESETSts
export declare const DATE_RANGE_PRESETS: readonly ["Today", "Last 7 days", "Last 30 days", "This month"];

DateRange

type
DeclarationView source
DateRangets
type DateRange = {
  readonly start: string | null;
  readonly end: string | null;
};
Name
Kind
Type
Requirement
end
property
string | null
required
start
property
string | null
required
Name
end
Kind
property
Type
string | null
Requirement
required
Name
start
Kind
property
Type
string | null
Requirement
required

dateRangeCellState

function
DeclarationView source
dateRangeCellStatets
declare function dateRangeCellState(range: DateRange, hover: string | null, date: string): DateRangeCellState;
Name
Kind
Type
Requirement
range
parameter
DateRange
required
hover
parameter
string | null
required
date
parameter
string
required
return
return value
DateRangeCellState
n/a
Name
range
Kind
parameter
Type
DateRange
Requirement
required
Name
hover
Kind
parameter
Type
string | null
Requirement
required
Name
date
Kind
parameter
Type
string
Requirement
required
Name
return
Kind
return value
Type
DateRangeCellState
Requirement
n/a

DateRangeCellState

interface
DeclarationView source
DateRangeCellStatets
interface DateRangeCellState {
  readonly isStart: boolean;
  readonly isEnd: boolean;
  readonly inBand: boolean;
  readonly isEdge: boolean;
}
Name
Kind
Type
Requirement
inBand
property
boolean
required
isEdge
property
boolean
required
isEnd
property
boolean
required
isStart
property
boolean
required
Name
inBand
Kind
property
Type
boolean
Requirement
required
Name
isEdge
Kind
property
Type
boolean
Requirement
required
Name
isEnd
Kind
property
Type
boolean
Requirement
required
Name
isStart
Kind
property
Type
boolean
Requirement
required

DateRangeDay

type
DeclarationView source
DateRangeDayts
type DateRangeDay = CalendarDay;

dateRangeGrid

function
DeclarationView source
dateRangeGridts
declare function dateRangeGrid(year: number, month: number): DateRangeDay[];
Name
Kind
Type
Requirement
year
parameter
number
required
month
parameter
number
required
return
return value
DateRangeDay[]
n/a
Name
year
Kind
parameter
Type
number
Requirement
required
Name
month
Kind
parameter
Type
number
Requirement
required
Name
return
Kind
return value
Type
DateRangeDay[]
Requirement
n/a

DateRangePickerCommand

type
DeclarationView source
DateRangePickerCommandts
type DateRangePickerCommand = CommandObject & ({
  readonly type: "VALUE_CHANGE_REQUEST";
  readonly value: DateRange;
  readonly reason: DateRangePickerReason;
} | {
  readonly type: "OPEN_CHANGE_REQUEST";
  readonly open: boolean;
  readonly reason: DateRangePickerReason;
});

DateRangePickerContext

type
DeclarationView source
DateRangePickerContextts
type DateRangePickerContext = {
  readonly range: DateRange;
  readonly open: boolean;
  readonly hover: string | null;
  readonly year: number;
  readonly month: number;
  readonly mode: BindingMode;
  readonly openMode: BindingMode;
};
Name
Kind
Type
Requirement
hover
property
string | null
required
mode
property
BindingMode
required
month
property
number
required
open
property
boolean
required
openMode
property
BindingMode
required
range
property
DateRange
required
year
property
number
required
Name
hover
Kind
property
Type
string | null
Requirement
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
range
Kind
property
Type
DateRange
Requirement
required
Name
year
Kind
property
Type
number
Requirement
required

DateRangePickerDiagnosticCodes

value
DeclarationView source
DateRangePickerDiagnosticCodests
export declare const DateRangePickerDiagnosticCodes: readonly DiagnosticCatalogueEntry[];

DateRangePickerEvent

type
DeclarationView source
DateRangePickerEventts
type DateRangePickerEvent = {
  readonly type: "SELECT";
  readonly value: string;
  readonly reason?: DateRangePickerReason;
} | {
  readonly type: "HOVER";
  readonly value: string | null;
} | {
  readonly type: "PRESET";
  readonly range: DateRange;
} | {
  readonly type: "OPEN";
  readonly reason: DateRangePickerReason;
} | {
  readonly type: "CLOSE";
  readonly reason: DateRangePickerReason;
} | {
  readonly type: "TOGGLE";
  readonly reason: DateRangePickerReason;
} | {
  readonly type: "SHIFT";
  readonly delta: number;
} | {
  readonly type: "RESET";
};

DateRangePickerInput

type
DeclarationView source
DateRangePickerInputts
type DateRangePickerInput = {
  readonly value?: DateRange;
  readonly defaultValue?: DateRange;
  readonly open?: boolean;
  readonly defaultOpen?: boolean;
  readonly today?: string;
};
Name
Kind
Type
Requirement
defaultOpen
property
boolean
optional
defaultValue
property
DateRange
optional
open
property
boolean
optional
today
property
string
optional
value
property
DateRange
optional
Name
defaultOpen
Kind
property
Type
boolean
Requirement
optional
Name
defaultValue
Kind
property
Type
DateRange
Requirement
optional
Name
open
Kind
property
Type
boolean
Requirement
optional
Name
today
Kind
property
Type
string
Requirement
optional
Name
value
Kind
property
Type
DateRange
Requirement
optional

dateRangePickerMachine

value
DeclarationView source
dateRangePickerMachinets
export declare const dateRangePickerMachine: Machine<DateRangePickerInput, "ready", DateRangePickerContext, DateRangePickerEvent, DateRangePickerCommand>;

DateRangePickerReason

type
DeclarationView source
DateRangePickerReasonts
type DateRangePickerReason = "pointer" | "keyboard" | "programmatic" | "preset";

dateRangePickerReplaySequence

value
DeclarationView source
dateRangePickerReplaySequencets
export declare const dateRangePickerReplaySequence: readonly DateRangePickerEvent[];

dateRangePickerSelectors

value
DeclarationView source
dateRangePickerSelectorsts
export declare const dateRangePickerSelectors: {
  range: (snapshot: DateRangePickerSnapshot) => DateRange;
  open: (snapshot: DateRangePickerSnapshot) => boolean;
};
Name
Kind
Type
Requirement
open
property
(snapshot: DateRangePickerSnapshot) => boolean
required
range
property
(snapshot: DateRangePickerSnapshot) => DateRange
required
Name
open
Kind
property
Type
(snapshot: DateRangePickerSnapshot) => boolean
Requirement
required
Name
range
Kind
property
Type
(snapshot: DateRangePickerSnapshot) => DateRange
Requirement
required

DateRangePickerSnapshot

type
DeclarationView source
DateRangePickerSnapshotts
type DateRangePickerSnapshot = Snapshot<"ready", DateRangePickerContext>;

dateRangePreset

function
DeclarationView source
dateRangePresetts
declare function dateRangePreset(index: number, today?: string): DateRange;
Name
Kind
Type
Requirement
index
parameter
number
required
today
parameter
string
optional
return
return value
DateRange
n/a
Name
index
Kind
parameter
Type
number
Requirement
required
Name
today
Kind
parameter
Type
string
Requirement
optional
Name
return
Kind
return value
Type
DateRange
Requirement
n/a