@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.0

package/date/types.d.ts

@@ -0,0 +1,136 @@
+import { CalendarDate } from './CalendarDate.js';
+/** An interface that is compatible with any object with date fields. */
+export interface AnyCalendarDate {
+    readonly calendar: Calendar;
+    readonly era: string;
+    readonly year: number;
+    readonly month: number;
+    readonly day: number;
+    copy(): this;
+}
+/** An interface that is compatible with any object with time fields. */
+export interface AnyTime {
+    readonly hour: number;
+    readonly minute: number;
+    readonly second: number;
+    readonly millisecond: number;
+    copy(): this;
+}
+/** An interface that is compatible with any object with both date and time fields. */
+export interface AnyDateTime extends AnyCalendarDate, AnyTime {
+}
+export type CalendarIdentifier = 'gregory' | 'buddhist' | 'chinese' | 'coptic' | 'dangi' | 'ethioaa' | 'ethiopic' | 'hebrew' | 'indian' | 'islamic' | 'islamic-umalqura' | 'islamic-tbla' | 'islamic-civil' | 'islamic-rgsa' | 'iso8601' | 'japanese' | 'persian' | 'roc';
+/**
+ * The Calendar interface represents a calendar system, including information
+ * about how days, months, years, and eras are organized, and methods to perform
+ * arithmetic on dates.
+ */
+export interface Calendar {
+    /**
+     * A string identifier for the calendar, as defined by Unicode CLDR. See
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/supportedValuesOf#supported_calendar_types).
+     */
+    identifier: CalendarIdentifier;
+    /** Creates a CalendarDate in this calendar from the given Julian day number. */
+    fromJulianDay(jd: number): CalendarDate;
+    /** Converts a date in this calendar to a Julian day number. */
+    toJulianDay(date: AnyCalendarDate): number;
+    /** Returns the number of days in the month of the given date. */
+    getDaysInMonth(date: AnyCalendarDate): number;
+    /** Returns the number of months in the year of the given date. */
+    getMonthsInYear(date: AnyCalendarDate): number;
+    /** Returns the number of years in the era of the given date. */
+    getYearsInEra(date: AnyCalendarDate): number;
+    /** Returns a list of era identifiers for the calendar. */
+    getEras(): string[];
+    /**
+     * Returns the minimum month number of the given date's year.
+     * Normally, this is 1, but in some calendars such as the Japanese,
+     * eras may begin in the middle of a year.
+     */
+    getMinimumMonthInYear?(date: AnyCalendarDate): number;
+    /**
+     * Returns the minimum day number of the given date's month.
+     * Normally, this is 1, but in some calendars such as the Japanese,
+     * eras may begin in the middle of a month.
+     */
+    getMinimumDayInMonth?(date: AnyCalendarDate): number;
+    /** Returns the maximum months across all years. */
+    getMaximumMonthsInYear(): number;
+    /** Returns the maximum days across all months. */
+    getMaximumDaysInMonth(): number;
+    /**
+     * Returns a date that is the first day of the month for the given date.
+     * This is used to determine the month that the given date falls in, if
+     * the calendar has months that do not align with the standard calendar months
+     * (e.g. fiscal calendars).
+     */
+    getFormattableMonth?(date: AnyCalendarDate): CalendarDate;
+    /** Returns whether the given calendar is the same as this calendar. */
+    isEqual?(calendar: Calendar): boolean;
+    /** @private */
+    balanceDate?(date: AnyCalendarDate): void;
+    /** @private */
+    balanceYearMonth?(date: AnyCalendarDate, previousDate: AnyCalendarDate): void;
+    /** @private */
+    constrainDate?(date: AnyCalendarDate): void;
+    /** @private */
+    isInverseEra?(date: AnyCalendarDate): boolean;
+}
+/** Represents an amount of time in calendar-specific units, for use when performing arithmetic. */
+export interface DateDuration {
+    /** The number of years to add or subtract. */
+    years?: number;
+    /** The number of months to add or subtract. */
+    months?: number;
+    /** The number of weeks to add or subtract. */
+    weeks?: number;
+    /** The number of days to add or subtract. */
+    days?: number;
+}
+/** Represents an amount of time, for use whe performing arithmetic. */
+export interface TimeDuration {
+    /** The number of hours to add or subtract. */
+    hours?: number;
+    /** The number of minutes to add or subtract. */
+    minutes?: number;
+    /** The number of seconds to add or subtract. */
+    seconds?: number;
+    /** The number of milliseconds to add or subtract. */
+    milliseconds?: number;
+}
+/**
+ * Represents an amount of time with both date and time components, for use when performing
+ * arithmetic.
+ */
+export interface DateTimeDuration extends DateDuration, TimeDuration {
+}
+export interface DateFields {
+    era?: string;
+    year?: number;
+    month?: number;
+    day?: number;
+}
+export interface TimeFields {
+    hour?: number;
+    minute?: number;
+    second?: number;
+    millisecond?: number;
+}
+export type DateField = keyof DateFields;
+export type TimeField = keyof TimeFields;
+export type Disambiguation = 'compatible' | 'earlier' | 'later' | 'reject';
+export interface CycleOptions {
+    /** Whether to round the field value to the nearest interval of the amount. */
+    round?: boolean;
+}
+export interface CycleTimeOptions extends CycleOptions {
+    /**
+     * Whether to use 12 or 24 hour time. If 12 hour time is chosen, the resulting value
+     * will remain in the same day period as the original value (e.g. if the value is AM,
+     * the resulting value also be AM).
+     *
+     * @default 24
+     */
+    hourCycle?: 12 | 24;
+}

package/date/types.js

@@ -0,0 +1,14 @@
+// Ported from @internationalized/date src/types.ts (react-spectrum), Apache-2.0, © Adobe.
+// Changes: .ts import specifiers, type-only imports, override modifiers, strict-mode index types.
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { CalendarDate } from "./CalendarDate.js";

package/date/utils.d.ts

@@ -0,0 +1,4 @@
+export type Mutable<T> = {
+    -readonly [P in keyof T]: T[P];
+};
+export declare function mod(amount: number, numerator: number): number;

package/date/utils.js

@@ -0,0 +1,16 @@
+// Ported from @internationalized/date src/utils.ts (react-spectrum), Apache-2.0, © Adobe.
+// Changes: .ts import specifiers, type-only imports, override modifiers, strict-mode index types.
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+export function mod(amount, numerator) {
+    return amount - numerator * Math.floor(amount / numerator);
+}

package/date/weekStartData.d.ts

@@ -0,0 +1 @@
+export declare const weekStartData: Record<string, number>;

package/date/weekStartData.js

@@ -0,0 +1,112 @@
+// Ported from @internationalized/date src/weekStartData.ts (react-spectrum), Apache-2.0, © Adobe.
+// Changes: .ts import specifiers, type-only imports, override modifiers, strict-mode index types.
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+// Data from https://github.com/unicode-cldr/cldr-core/blob/master/supplemental/weekData.json
+// Locales starting on Sunday have been removed for compression.
+export const weekStartData = {
+    '001': 1,
+    AD: 1,
+    AE: 6,
+    AF: 6,
+    AI: 1,
+    AL: 1,
+    AM: 1,
+    AN: 1,
+    AR: 1,
+    AT: 1,
+    AU: 1,
+    AX: 1,
+    AZ: 1,
+    BA: 1,
+    BE: 1,
+    BG: 1,
+    BH: 6,
+    BM: 1,
+    BN: 1,
+    BY: 1,
+    CH: 1,
+    CL: 1,
+    CM: 1,
+    CN: 1,
+    CR: 1,
+    CY: 1,
+    CZ: 1,
+    DE: 1,
+    DJ: 6,
+    DK: 1,
+    DZ: 6,
+    EC: 1,
+    EE: 1,
+    EG: 6,
+    ES: 1,
+    FI: 1,
+    FJ: 1,
+    FO: 1,
+    FR: 1,
+    GB: 1,
+    GE: 1,
+    GF: 1,
+    GP: 1,
+    GR: 1,
+    HR: 1,
+    HU: 1,
+    IE: 1,
+    IQ: 6,
+    IR: 6,
+    IS: 1,
+    IT: 1,
+    JO: 6,
+    KG: 1,
+    KW: 6,
+    KZ: 1,
+    LB: 1,
+    LI: 1,
+    LK: 1,
+    LT: 1,
+    LU: 1,
+    LV: 1,
+    LY: 6,
+    MC: 1,
+    MD: 1,
+    ME: 1,
+    MK: 1,
+    MN: 1,
+    MQ: 1,
+    MV: 5,
+    MY: 1,
+    NL: 1,
+    NO: 1,
+    NZ: 1,
+    OM: 6,
+    PL: 1,
+    QA: 6,
+    RE: 1,
+    RO: 1,
+    RS: 1,
+    RU: 1,
+    SD: 6,
+    SE: 1,
+    SI: 1,
+    SK: 1,
+    SM: 1,
+    SY: 6,
+    TJ: 1,
+    TM: 1,
+    TR: 1,
+    UA: 1,
+    UY: 1,
+    UZ: 1,
+    VA: 1,
+    VN: 1,
+    XK: 1
+};

package/date-field/behaviour.d.ts

@@ -0,0 +1,188 @@
+import { type ValidationResult } from "../state/form-validation.js";
+import { validityError } from "../form/behaviour.js";
+import { createSlotId } from "../slots/index.jsx";
+import { type DateFieldState, type DateOwnerBase, type DateSegment } from "../state/date-field.js";
+import { type DatePickerMessageKey } from "./intl.js";
+export { validityError };
+export declare const SEGMENT_ATTR = "data-rv-segment";
+export declare const SEGMENT: string;
+/** Id of the hidden form input of a field (RAC `<Input>` of DateInput). */
+export declare const inputId: (state: DateFieldState) => string;
+/** Id of the selected-value description (React Aria `useDescription`). */
+export declare const valueDescriptionId: (state: {
+    id: string;
+}) => string;
+export declare const message: (locale: string, key: DatePickerMessageKey, variables?: Record<string, string>) => string;
+interface DisplayNames {
+    of(field: string): string | undefined;
+}
+/** @private Field names (`Intl.DisplayNames` dateTimeField, else the bundled strings). */
+export declare function displayNames(locale: string): DisplayNames;
+/** Keys of the field's segments (`month`, `literal`, `literal-1` …). Reads. */
+export declare function segmentKeys(state: DateFieldState): string[];
+/** The segment of `key`. Reads. */
+export declare function segmentOf(state: DateFieldState, key: string): DateSegment | undefined;
+export declare const segmentId: (state: DateFieldState, key: string) => string;
+/** The selected-value description of a standalone field (`Selected Date: …`). Reads. */
+export declare function fieldValueDescription(state: DateFieldState): string;
+/** Segment style (caret hidden; RTL: numeric segments embedded left-to-right). Reads. */
+export declare function segmentStyle(state: DateFieldState, key: string): Record<string, string>;
+/** Segment text. Reads. */
+export declare const segmentText: (state: DateFieldState, key: string) => string;
+/** Keys held while a cold field's chunk loads (`data-rk`): spin / navigation keys, digits, day period letters. */
+export declare function fieldKeys(state: DateFieldState): string;
+/** NumberParser `isValidPartialNumber` ({maximumFractionDigits: 0}). */
+export declare const isValidPartialNumber: (locale: string, text: string) => boolean;
+/** NumberParser `parse` (NaN when empty / not a number). */
+export declare const parseNumber: (locale: string, text: string) => number;
+export declare const wasHandled: (event: Event) => boolean;
+type FieldEvent<E extends Event> = E & {
+    currentTarget: HTMLElement;
+};
+/**
+ * keydown on the field: the segment's spin button keys (useSpinButton), Backspace / Delete, typed
+ * characters; a standalone field also moves between segments with ArrowLeft / ArrowRight
+ * (useDatePickerGroup; in a picker the group does).
+ */
+export declare function dateFieldKeyDown(event: FieldEvent<KeyboardEvent>, state: DateFieldState): void;
+/** useDatePickerGroup ArrowLeft / ArrowRight within `scope` (RTL: by position). */
+export declare function arrowNavigation(locale: string, scope: Element, from: HTMLElement, event: KeyboardEvent): boolean;
+/** beforeinput on the field: the DOM never changes; text from IME / virtual keyboards is typed into the segment. */
+export declare function dateFieldBeforeInput(event: FieldEvent<InputEvent>, state: DateFieldState): void;
+/** input on the field: restore the DOM after composition text (it cannot be canceled). */
+export declare function dateFieldInput(event: FieldEvent<InputEvent>, state: DateFieldState): void;
+/** focusin on the field: focus within starts (value on focus), the segment's selection collapses. */
+export declare function dateFieldFocusIn(event: FieldEvent<FocusEvent>, state: DateFieldState): void;
+/** focusout of the field: confirm the placeholder (constrain / emit) and commit the validation when the value changed. */
+export declare function dateFieldFocusOut(event: FieldEvent<FocusEvent>, state: DateFieldState): void;
+/** useDatePickerGroup press: focus the first placeholder segment from the end (mouse: press start; touch / pen: press up). */
+export declare function dateGroupPointerDown(event: FieldEvent<PointerEvent>): void;
+export declare function dateGroupPointerUp(event: FieldEvent<PointerEvent>): void;
+/** Label click: focus the first segment of `scopeId`'s element. */
+export declare function focusFirstSegment(doc: Document, scopeId: string): void;
+/** The value of the field's hidden form input. Reads. */
+export declare const fieldInputValue: (state: DateFieldState) => string;
+/**
+ * Sync the hidden input of `state` (value now, ahead of the async binding; native custom validity
+ * from the owner's realtime validation; a range picker merges the native validity of both ends).
+ */
+export declare function syncFieldInput(state: DateFieldState, doc: Document): void;
+/** `invalid` on the hidden input (submit / checkValidity): commit, focus the first segment, no browser bubble. */
+export declare function dateFieldInvalid(event: Event, state: DateFieldState): void;
+/** input on the autofill input: the browser filled it; set the field (each segment first for a standalone field). */
+export declare function hiddenDateInputChange(event: Event, state: DateFieldState, picker: boolean): void;
+/** React Aria `FocusableProps` focus events of a field / picker group (useFocusWithin: focus entering / leaving the group). */
+export interface FocusWithinHandlers {
+    onFocus?: ((event: FocusEvent) => void) | undefined;
+    onBlur?: ((event: FocusEvent) => void) | undefined;
+    onFocusChange?: ((isFocused: boolean) => void) | undefined;
+}
+/**
+ * Call the user's handler of `event` once per container: a picker forwards the field's events and
+ * (client-created) they also bubble to the group / root.
+ */
+export declare function onceFor(container: Element, event: Event): boolean;
+/**
+ * useFocusWithin of `container` from a focusin / focusout inside it: `onFocus` + `onFocusChange(true)`
+ * when focus enters, `onBlur` + `onFocusChange(false)` when it leaves. `isDisabled` (an open picker):
+ * nothing is reported and the focused-within state is kept.
+ */
+export declare function focusWithinEvent(container: Element | null, event: FocusEvent, handlers: FocusWithinHandlers, isDisabled?: boolean): void;
+type Accessor<T> = () => T;
+/** Which owner flag (0 `isDisabled`, 1 `isReadOnly`, 2 `isRequired`). */
+export type OwnerFlag = 0 | 1 | 2;
+/** The owner flag now (live accessor, else the creation value). Reads. */
+export declare const ownerFlagNow: (owner: DateOwnerBase, which: OwnerFlag) => boolean;
+/** An owner flag as a part prop (Group / Button / Calendar `isDisabled`, …): the creation value, or an accessor while live. */
+export declare function ownerFlag(owner: DateOwnerBase, which: OwnerFlag): Accessor<boolean> | boolean;
+/** An owner flag as a `"true"` / absent attribute (`aria-*`, `data-*`): the creation value, or an accessor while live. */
+export declare function ownerFlagAttr(owner: DateOwnerBase, which: OwnerFlag): Accessor<"true" | undefined> | "true" | undefined;
+/** An owner flag as a boolean DOM attribute (`disabled`, `required`): `true` / absent, or an accessor while live. */
+export declare function ownerFlagTrue(owner: DateOwnerBase, which: OwnerFlag): Accessor<true | undefined> | true | undefined;
+/** useDateField props (AriaDateFieldOptions minus the state's). */
+export interface AriaDateFieldOptions {
+    "aria-label"?: string | undefined;
+    /** A picker passes its own labelled-by (an accessor: its Label slot settles after mount). */
+    "aria-labelledby"?: string | (() => string | undefined) | undefined;
+    /** A picker passes its own described-by (an accessor) to its presentation fields. */
+    "aria-describedby"?: string | (() => string | undefined) | undefined;
+    "aria-details"?: string | undefined;
+    /** Whether a visible label renders (RAC `useSlot`): an accessor, or a boolean. */
+    label?: boolean | Accessor<boolean> | undefined;
+    name?: string | undefined;
+    form?: string | undefined;
+    /** @default "native" */
+    validationBehavior?: "native" | "aria" | undefined;
+    /** Rivet: a picker's field is `role="presentation"` inside the picker's group (useDatePicker fieldProps). */
+    isPresentation?: boolean | undefined;
+    /** Rivet: a range picker's group id: ArrowLeft / ArrowRight move across both fields (useDatePickerGroup). */
+    focusScope?: string | undefined;
+    /**
+     * Rivet: the picker's group handler of the field's keydown / focusin / focusout (a resumed page runs only the
+     * nearest element's handler of an event, so the field forwards to its picker).
+     */
+    forward?: ((event: Event) => void) | undefined;
+    onFocus?: ((event: FocusEvent) => void) | undefined;
+    onBlur?: ((event: FocusEvent) => void) | undefined;
+    onFocusChange?: ((isFocused: boolean) => void) | undefined;
+    onKeyDown?: ((event: KeyboardEvent) => void) | undefined;
+    onKeyUp?: ((event: KeyboardEvent) => void) | undefined;
+}
+export interface DateFieldAria {
+    /** The label (`<Label elementType="span">`): clicking it focuses the first segment. */
+    labelProps: Record<string, unknown>;
+    /** The field group (`<Group>` of DateInput): role, labelling, delegated handlers, `data-rk`. */
+    fieldProps: Record<string, unknown>;
+    /** The hidden form input (`<Input>` of DateInput). */
+    inputProps: Record<string, unknown>;
+    /** The description (`<Text slot="description">`), a slot id: dropped from `aria-describedby` while not rendered. */
+    descriptionProps: {
+        id: ReturnType<typeof createSlotId>;
+    };
+    /** The error message (`<Text slot="errorMessage">` / FieldError). */
+    errorMessageProps: {
+        id: ReturnType<typeof createSlotId>;
+    };
+    isInvalid: Accessor<boolean>;
+    validationErrors: Accessor<string[]>;
+    validationDetails: Accessor<ValidationResult["validationDetails"]>;
+}
+/**
+ * useDateField: the attribute bags of a date field. Also records the labelling the segments read
+ * (React Aria `hookData`) on the state.
+ */
+/** useLabel: the visible label labels the field; aria-label + aria-labelledby → the field labels itself too. Reads. */
+export declare function fieldLabelledBy(state: DateFieldState): string | undefined;
+/**
+ * useDescription (the selected value) + useField's description / error message + the user's. Reads.
+ * Rivet: the FieldError only renders while invalid (RAC), so its id is skipped while valid; the description id only when
+ * its part renders (server: the field's slot probe, `probeSlots`, marks it first): the server markup matches the client.
+ */
+export declare function fieldDescribedBy(state: DateFieldState): string | undefined;
+export declare function dateFieldProps(props: AriaDateFieldOptions, state: DateFieldState): DateFieldAria;
+/** useTimeField: useDateField over a time field state (`createTimeFieldState`). */
+export declare const timeFieldProps: typeof dateFieldProps;
+export interface DateSegmentAria {
+    /** The segment element's attributes (accessor values; `style` included). */
+    segmentProps: Record<string, unknown>;
+}
+/**
+ * useDateSegment (+ useSpinButton): the attributes of the segment `key` (`segmentKeys`). Values are
+ * accessors; the field's labelling comes from `dateFieldProps` (hookData on the state).
+ */
+export declare function dateSegmentProps(props: {
+    key: string;
+}, state: DateFieldState): DateSegmentAria;
+export interface HiddenDateInputOptions {
+    autoComplete?: string | undefined;
+    name?: string | undefined;
+    /** Whether the field is disabled (an accessor stays live). */
+    isDisabled?: boolean | Accessor<boolean | undefined> | undefined;
+    /** Rivet: a DatePicker sets the value directly (a DateField sets each segment first). */
+    isPicker?: boolean | undefined;
+}
+/** useHiddenDateInput: the container + native date input browser autofill fills. */
+export declare function hiddenDateInputProps(props: HiddenDateInputOptions, state: DateFieldState): {
+    containerProps: Record<string, unknown>;
+    inputProps: Record<string, unknown>;
+};