@servicetitan/anvil2 1.44.2 → 1.45.1

package/dist/components/DateFieldRange/internal/useDateFieldRangeState.d.ts

@@ -0,0 +1,70 @@
+import { DateTime } from 'luxon';
+import { RefObject } from 'react';
+import { MaskedDateRangeInputChange, MaskedDateRangeInputRef } from './MaskedDateRangeInput';
+export type DateFieldRangeStateChange = {
+    startDate: DateTime | null;
+    endDate: DateTime | null;
+    isInputValid: boolean;
+    isInputEmpty: boolean;
+};
+export type DateFieldRangeStateChangeHandler = (change: DateFieldRangeStateChange) => void;
+export type DateFieldRangeStateParam = {
+    /**
+     * The controlled value of the start date.
+     */
+    valueProp?: {
+        startDate: DateTime | null;
+        endDate: DateTime | null;
+    } | null;
+    /**
+     * The default value of the start date.
+     */
+    defaultValueProp?: {
+        startDate: DateTime | null;
+        endDate: DateTime | null;
+    } | null;
+    /**
+     * The ref to the input component.
+     */
+    inputRef: RefObject<MaskedDateRangeInputRef>;
+    /**
+     * The function to call when the state changes.
+     */
+    onChange: DateFieldRangeStateChangeHandler;
+};
+/**
+ * This hook is used to keep the state of a DateFieldRange component in sync with the input and calendar.
+ */
+export type DateFieldRangeState = {
+    /**
+     * The start date.
+     */
+    startDate: DateTime | null;
+    /**
+     * The end date.
+     */
+    endDate: DateTime | null;
+    /**
+     * The function to set the start date.
+     */
+    setStartDate: (date: DateTime | null) => void;
+    /**
+     * The function to set the end date.
+     */
+    setEndDate: (date: DateTime | null) => void;
+    /**
+     * The function to handle the input change.
+     */
+    handleInputChange: (change: MaskedDateRangeInputChange) => void;
+    /**
+     * The function to handle the calendar selection.
+     */
+    handleCalendarSelection: ({ startDate, endDate, }: {
+        startDate: DateTime | null;
+        endDate: DateTime | null;
+    }) => void;
+};
+/**
+ * This is a hook for keeping state in sync between a date input and calendar.
+ */
+export declare function useDateFieldRangeState({ valueProp, defaultValueProp, inputRef, onChange, }: DateFieldRangeStateParam): DateFieldRangeState;

package/dist/components/DateFieldRange/internal/utils.d.ts

@@ -0,0 +1,17 @@
+import { DateTime } from 'luxon';
+type DateConstraints = {
+    unavailable?: {
+        dates?: DateTime[];
+        daysOfWeek?: number[];
+    };
+    minDate?: DateTime;
+    maxDate?: DateTime;
+};
+export declare function validateDateRange({ required, startDate, endDate, startDateConstraints, endDateConstraints, }: {
+    required?: boolean;
+    startDate: DateTime | null;
+    endDate: DateTime | null;
+    startDateConstraints: DateConstraints;
+    endDateConstraints: DateConstraints;
+}): boolean;
+export {};

package/dist/components/DateFieldSingle/DateFieldSingle.d.ts

@@ -1,8 +1,58 @@
-import { DateFieldSingleProps as CoreDateFieldSingleProps, DateFieldSingleChange as CoreDateFieldSingleChange, DateFieldSingleChangeHandler as CoreDateFieldSingleChangeHandler } from '@servicetitan/hammer-react';
-import { DataTrackingId } from '../../types/DataTrackingId';
-export type DateFieldSingleProps = CoreDateFieldSingleProps & DataTrackingId;
-export type DateFieldSingleChange = CoreDateFieldSingleChange;
-export type DateFieldSingleChangeHandler = CoreDateFieldSingleChangeHandler;
+import { DataTrackingId } from '../../types';
+import { MaskedDateInputProps } from './internal/MaskedDateInput';
+import { DateMode } from './types';
+export type DateFieldSingleProps = Omit<MaskedDateInputProps, "onChange" | "value" | "autoComplete" | "onClick" | "onKeyDown" | "ref" | "lastValidDate" | "setLastValidDate" | "required" | "onFocus" | "onBlur"> & {
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: DateFieldSingleChangeHandler;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    mode?: Extract<DateMode, "mm/dd/yyyy" | "dd/mm/yyyy">;
+    disableHint?: boolean;
+    disableCalendar?: boolean;
+    unavailable?: {
+        /**
+         * The specific dates that are unavailable. ISO 8601 format.
+         * @example ["2025-07-02"]
+         */
+        dates?: string[];
+        /**
+         * The days of the week that are unavailable.
+         * (1-7, where 1 is Monday and 7 is Sunday)
+         */
+        daysOfWeek?: (1 | 2 | 3 | 4 | 5 | 6 | 7)[];
+    };
+    minDate?: string;
+    maxDate?: string;
+    required?: boolean;
+} & DataTrackingId;
+export type DateFieldSingleChange = {
+    /**
+     * The date in ISO 8601 format.
+     * @example "2025-07-02"
+     */
+    date: string | null;
+    /**
+     * Whether the input is valid. That is, it matches the format and is not empty.
+     * This does not mean that the date is valid according to the constraints.
+     */
+    isInputValid: boolean;
+    /**
+     * Whether the input is empty.
+     */
+    isInputEmpty: boolean;
+    /**
+     * Whether the date is valid according to the constraints.
+     * Constraints include:
+     * - Required
+     * - Unavailable dates
+     * - Unavailable days of the week
+     * - Min date
+     * - Max date
+     */
+    isDateValid: boolean;
+};
+export type DateFieldSingleChangeHandler = (change: DateFieldSingleChange) => void;
 export declare const DateFieldSingle: {
     (props: DateFieldSingleProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/components/DateFieldSingle/index.d.ts

@@ -1 +1,2 @@
 export * from './DateFieldSingle';
+export { type DateMode } from './types';

package/dist/components/DateFieldSingle/internal/DateFieldSingleCalendar.d.ts

@@ -0,0 +1,15 @@
+import { DateTime, WeekdayNumbers } from 'luxon';
+import { CalendarProps } from '../../Calendar';
+type DateFieldSingleCalendarProps = Omit<CalendarProps, "onSelection" | "value" | "onKeyDown" | "defaultFocusedDate" | "range" | "defaultTimeZone" | "unavailable" | "minDate" | "maxDate" | "defaultValue" | "_disableAutofocus"> & {
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    value: DateTime | null;
+    onSelection: (date: DateTime) => void;
+    minDate?: DateTime | null;
+    maxDate?: DateTime | null;
+    unavailable?: {
+        dates?: DateTime[];
+        daysOfWeek?: WeekdayNumbers[];
+    };
+};
+export declare function DateFieldSingleCalendar({ onKeyDown, value, onSelection, minDate, maxDate, unavailable, ...rest }: DateFieldSingleCalendarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateFieldSingle/internal/MaskedDateInput.d.ts

@@ -0,0 +1,35 @@
+import { TextFieldProps } from '../../TextField/internal/TextField';
+import { DateTime } from 'luxon';
+import { DateMode } from '../types';
+export type MaskedDateInputChange = {
+    date: DateTime | null;
+    isInputValid: boolean;
+    isInputEmpty: boolean;
+};
+export type MaskedDateInputChangeHandler = (change: MaskedDateInputChange) => void;
+export type MaskedDateInputProps = Omit<TextFieldProps, "onChange" | "value" | "ref" | "showCounter" | "hint" | "prefix"> & {
+    onChange: MaskedDateInputChangeHandler;
+    mode?: DateMode;
+    lastValidDate: DateTime | null;
+    disableHint?: boolean;
+};
+export type MaskedDateInputRef = HTMLInputElement & {
+    setDate: (date: DateTime | null) => void;
+};
+/**
+ * A masked date input component that allows for the input of a date in a specific format.
+ *
+ * Provides a `setDate` method that can be used to set the date from outside the component (e.g from a calendar).
+ *
+ * @internal This component is not intended to be used directly in consumer code.
+ *
+ * @param props - The props for the MaskedDateInput component.
+ * @param props.onChange - The function to call when the date changes.
+ * @param props.mode - The mode of the date input.
+ */
+export declare const MaskedDateInput: import('react').ForwardRefExoticComponent<Omit<TextFieldProps, "ref" | "value" | "onChange" | "prefix" | "hint" | "showCounter"> & {
+    onChange: MaskedDateInputChangeHandler;
+    mode?: DateMode;
+    lastValidDate: DateTime | null;
+    disableHint?: boolean;
+} & import('react').RefAttributes<MaskedDateInputRef>>;

package/dist/components/DateFieldSingle/internal/constants.d.ts

@@ -0,0 +1,3 @@
+import { DateMode } from '../types';
+export declare const DateModeToFormatMap: Record<DateMode, string>;
+export declare const DateModeToPlaceholderMap: Record<DateMode, string>;

package/dist/components/DateFieldSingle/internal/maskito/datePlaceholderMask.d.ts

@@ -0,0 +1,16 @@
+import { DateMode } from '../../types';
+declare const datePlaceholderMask: ({ mode, separator, placeholder, }: {
+    mode: DateMode;
+    separator?: string;
+    placeholder: string;
+}) => {
+    options: {
+        plugins: import('@maskito/core').MaskitoPlugin[];
+        preprocessors: import('@maskito/core').MaskitoPreprocessor[];
+        postprocessors: import('@maskito/core').MaskitoPostprocessor[];
+        mask: import('@maskito/core').MaskitoMask;
+        overwriteMode: "replace" | "shift" | ((elementState: import('@maskito/core/src/lib/types').ElementState) => "replace" | "shift");
+    };
+    removePlaceholder: (value: string) => string;
+};
+export default datePlaceholderMask;

package/dist/components/DateFieldSingle/internal/maskito/makeZeroShortcutPreprocessor.d.ts

@@ -0,0 +1,10 @@
+import { MaskitoPreprocessor } from '@maskito/core';
+/**
+ * This is a custom-written preprocessor to handle the zero shortcut on slash.
+ * e.g: 1/ -> 01/ and 01/1/ -> 01/01/
+ *
+ * @param templateString - A string representing the mask. e.g. "dd/mm/yyyy" or "__/__/____"
+ * @param separator - The separator to use for segments of the date. Must match the separator in the template string.
+ * @returns A MaskitoPreprocessor function.
+ */
+export declare const makeZeroShortcutPreprocessor: (templateString: string, separator: string) => MaskitoPreprocessor;

package/dist/components/DateFieldSingle/internal/useDateFieldOrchestration.d.ts

@@ -0,0 +1,17 @@
+import { KeyboardEventHandler, RefObject } from 'react';
+/**
+ * Responsible for orchestrating the input and calendar popover states
+ * @param inputRef - The ref to the input element
+ * @returns calendarOpen, setCalendarOpen, handleCalendarKeyDown, handleInputKeyDown
+ */
+export declare const useDateFieldOrchestration: ({ inputRef, calendarDefaultOpen, popoverContentRef, disableCalendar, }: {
+    inputRef: RefObject<HTMLInputElement>;
+    calendarDefaultOpen: boolean;
+    popoverContentRef: RefObject<HTMLDivElement>;
+    disableCalendar?: boolean;
+}) => {
+    calendarOpen: boolean;
+    setCalendarOpen: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    handleCalendarKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    handleInputKeyDown: KeyboardEventHandler<HTMLInputElement>;
+};

package/dist/components/DateFieldSingle/internal/useDateFieldSingleConversion.d.ts

@@ -0,0 +1,45 @@
+import { DateFieldSingleChange, DateFieldSingleProps } from '../DateFieldSingle';
+import { DateTime, WeekdayNumbers } from 'luxon';
+export type DateFieldSingleConversion = {
+    /**
+     * The current value of the date field.
+     */
+    value?: DateTime | null;
+    /**
+     * The default (uncontrolled) value of the date field.
+     */
+    defaultValue?: DateTime | null;
+    /**
+     * The minimum date of the date field.
+     */
+    minDate?: DateTime | null;
+    /**
+     * The maximum date of the date field.
+     */
+    maxDate?: DateTime | null;
+    /**
+     * The unavailable dates of the date field.
+     */
+    unavailable: {
+        /**
+         * The unavailable dates of the date field.
+         */
+        dates?: DateTime[];
+        /**
+         * The unavailable days of the week of the date field.
+         */
+        daysOfWeek?: WeekdayNumbers[];
+    };
+    /**
+     * The callback for when the date changes.
+     */
+    onChange: (change: Omit<DateFieldSingleChange, "date"> & {
+        date: DateTime | null;
+    }) => void;
+};
+/**
+ * Converts the props of the DateFieldSingle component to Luxon DateTime objects for easier internal use.
+ * @param props - The props of the DateFieldSingle component using ISO 8601 strings.
+ * @returns The converted props using Luxon DateTime objects.
+ */
+export declare function useDateFieldSingleConversion({ value, defaultValue, minDate, maxDate, unavailable, onChange, }: DateFieldSingleProps): DateFieldSingleConversion;

package/dist/components/DateFieldSingle/internal/useDateFieldSingleState.d.ts

@@ -0,0 +1,49 @@
+import { DateTime } from 'luxon';
+import { MaskedDateInputChange, MaskedDateInputRef } from './MaskedDateInput';
+import { RefObject } from 'react';
+export type DateFieldSingleStateChange = {
+    date: DateTime | null;
+    isInputValid: boolean;
+    isInputEmpty: boolean;
+};
+export type DateFieldSingleStateChangeHandler = (change: DateFieldSingleStateChange) => void;
+export type DateFieldSingleStateParam = {
+    /**
+     * The controlled value of the date field.
+     */
+    valueProp?: DateTime | null;
+    /**
+     * The default (uncontrolled) value of the date field.
+     */
+    defaultValueProp?: DateTime | null;
+    /**
+     * The ref to the input field.
+     */
+    inputRef: RefObject<MaskedDateInputRef>;
+    /**
+     * Callback for when the date changes.
+     */
+    onChange: DateFieldSingleStateChangeHandler;
+};
+export type DateFieldSingleState = {
+    /**
+     * The current value (DateTime) of the date field.
+     */
+    value: DateTime | null;
+    /**
+     * Sets the value of the date field.
+     */
+    setValue: (value: DateTime | null) => void;
+    /**
+     * Handles the change of the input field.
+     */
+    handleInputChange: (change: MaskedDateInputChange) => void;
+    /**
+     * Handles the selection of a date in the calendar.
+     */
+    handleCalendarSelection: (date: DateTime) => void;
+};
+/**
+ * This is a hook for keeping state in sync between a date input and calendar.
+ */
+export declare function useDateFieldSingleState({ valueProp, defaultValueProp, inputRef, onChange, }: DateFieldSingleStateParam): DateFieldSingleState;

package/dist/components/DateFieldSingle/internal/utils.d.ts

@@ -0,0 +1,14 @@
+import { DateTime } from 'luxon';
+export declare function convertStringToDate(v: string | null | undefined): DateTime | null | undefined;
+export declare function validateDate({ date, constraints, }: {
+    date: DateTime | null;
+    constraints: {
+        required?: boolean;
+        unavailable?: {
+            dates?: DateTime[];
+            daysOfWeek?: number[];
+        };
+        minDate?: DateTime;
+        maxDate?: DateTime;
+    };
+}): boolean;

package/dist/components/DateFieldSingle/types.d.ts

@@ -0,0 +1,2 @@
+import { MaskitoDateMode } from '@maskito/kit';
+export type DateMode = Extract<MaskitoDateMode, "dd/mm/yyyy" | "mm/dd/yyyy" | "yyyy/mm/dd">;

package/dist/components/DateFieldYearless/DateFieldYearless.d.ts

@@ -1,45 +1,70 @@
-import { DateFieldYearlessProps as CoreDateFieldYearlessProps, DateFieldYearlessChange as CoreDateFieldYearlessChange, DateFieldYearlessChangeHandler as CoreDateFieldYearlessChangeHandler, YearlessDate as CoreYearlessDate, YearlessDateMode as CoreYearlessDateMode } from '@servicetitan/hammer-react';
-import { DataTrackingId } from '../../types/DataTrackingId';
-/**
- * Props for the DateFieldYearless component
- * @property {YearlessDate | null} [value] - The controlled value of the date field
- * @property {YearlessDate | null} [defaultValue] - The default value for uncontrolled usage
- * @property {DateFieldYearlessChangeHandler} [onChange] - Callback function when the date value changes
- * @property {YearlessDateMode} [mode] - The date format mode (mm/dd or dd/mm)
- * @property {boolean} [disableHint] - Whether to disable the hint text
- * @property {boolean} [required] - Whether the field is required
- * @property {YearlessDate | null} [minDate] - The minimum allowed date
- * @property {YearlessDate | null} [maxDate] - The maximum allowed date
- * @property {Object} [unavailable] - Configuration for unavailable dates
- * @property {YearlessDate[]} [unavailable.dates] - Array of dates that are not selectable
- * @extends CoreDateFieldYearlessProps
- * @extends DataTrackingId
- */
-export type DateFieldYearlessProps = CoreDateFieldYearlessProps & DataTrackingId;
+import { DataTrackingId } from '../../types';
+import { YearlessDate, YearlessDateMode } from './types';
+import { MaskedYearlessDateInputProps } from './internal/MaskedYearlessDateInput';
+export type DateFieldYearlessProps = Omit<MaskedYearlessDateInputProps, "onChange" | "value" | "defaultValue" | "ref" | "required" | "autoComplete"> & {
+    /**
+     * The controlled value of the date field
+     */
+    value?: YearlessDate | null;
+    /**
+     * The default value for uncontrolled usage
+     */
+    defaultValue?: YearlessDate | null;
+    /**
+     * The function to call when the date value changes
+     */
+    onChange?: DateFieldYearlessChangeHandler;
+    /**
+     * The date format mode (mm/dd or dd/mm)
+     */
+    mode?: YearlessDateMode;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * The minimum allowed date
+     */
+    minDate?: YearlessDate | null;
+    /**
+     * The maximum allowed date
+     */
+    maxDate?: YearlessDate | null;
+    /**
+     * Configuration for unavailable dates
+     */
+    unavailable?: {
+        /**
+         * Array of dates that are not selectable
+         */
+        dates?: YearlessDate[];
+    };
+} & DataTrackingId;
 /**
  * Represents a change event for the DateFieldYearless component
- * @property {YearlessDate | null} value - The current date value
- * @property {boolean} isInputValid - Whether the input is valid
- * @property {boolean} isInputEmpty - Whether the input is empty
- * @property {boolean} isValid - Whether the overall value is valid
  */
-export type DateFieldYearlessChange = CoreDateFieldYearlessChange;
+export type DateFieldYearlessChange = {
+    /**
+     * The current date value
+     */
+    value: YearlessDate | null;
+    /**
+     * Whether the input is valid
+     */
+    isInputValid: boolean;
+    /**
+     * Whether the input is empty
+     */
+    isInputEmpty: boolean;
+    /**
+     * Whether the overall value is valid
+     */
+    isValid: boolean;
+};
 /**
  * Handler function for DateFieldYearless change events
- * @param change - The change event object
- */
-export type DateFieldYearlessChangeHandler = CoreDateFieldYearlessChangeHandler;
-/**
- * Represents a date without a year component
- * @property {number | null} day - The day of the month (1-31)
- * @property {number | null} month - The month of the year (1-12)
- */
-export type YearlessDate = CoreYearlessDate;
-/**
- * The format mode for yearless date input
- * @typedef {"mm/dd" | "dd/mm"} YearlessDateMode
  */
-export type YearlessDateMode = CoreYearlessDateMode;
+export type DateFieldYearlessChangeHandler = (change: DateFieldYearlessChange) => void;
 /**
  * DateFieldYearless component for inputting dates without year information.
  *

package/dist/components/DateFieldYearless/index.d.ts

@@ -1 +1,2 @@
 export * from './DateFieldYearless';
+export { type YearlessDate, type YearlessDateMode } from './types';

package/dist/components/DateFieldYearless/internal/MaskedYearlessDateInput.d.ts

@@ -0,0 +1,35 @@
+import { TextFieldProps } from '../../TextField';
+import { YearlessDateMode, YearlessDate } from '../types';
+export type MaskedYearlessDateInputChange = {
+    event: React.ChangeEvent<HTMLInputElement>;
+    value: YearlessDate | null;
+    isInputValid: boolean;
+    isInputEmpty: boolean;
+};
+export type MaskedYearlessDateInputChangeHandler = (change: MaskedYearlessDateInputChange) => void;
+export type MaskedYearlessDateInputProps = Omit<TextFieldProps, "onChange" | "value" | "ref" | "showCounter" | "hint"> & {
+    onChange: MaskedYearlessDateInputChangeHandler;
+    mode?: YearlessDateMode;
+    value?: YearlessDate | null;
+    disableHint?: boolean;
+};
+export type MaskedYearlessDateInput = HTMLInputElement & {
+    setValue: (value: YearlessDate | null) => void;
+};
+/**
+ * A masked date input component that allows for the input of a date in a specific format.
+ *
+ * Provides a `setDate` method that can be used to set the date from outside the component (e.g from a calendar).
+ *
+ * @internal This component is not intended to be used directly in consumer code.
+ *
+ * @param props - The props for the MaskedDateInput component.
+ * @param props.onChange - The function to call when the date changes.
+ * @param props.mode - The mode of the date input.
+ */
+export declare const MaskedYearlessDateInput: import('react').ForwardRefExoticComponent<Omit<TextFieldProps, "ref" | "value" | "onChange" | "hint" | "showCounter"> & {
+    onChange: MaskedYearlessDateInputChangeHandler;
+    mode?: YearlessDateMode;
+    value?: YearlessDate | null;
+    disableHint?: boolean;
+} & import('react').RefAttributes<MaskedYearlessDateInput>>;

package/dist/components/DateFieldYearless/internal/maskito/yearlessDatePlaceholderMask.d.ts

@@ -0,0 +1,16 @@
+import { YearlessDateMode } from '../../types';
+declare const yearlessDatePlaceholderMask: ({ mode, separator, placeholder, }: {
+    mode: YearlessDateMode;
+    separator?: string;
+    placeholder: string;
+}) => {
+    options: {
+        plugins: import('@maskito/core').MaskitoPlugin[];
+        preprocessors: import('@maskito/core').MaskitoPreprocessor[];
+        postprocessors: import('@maskito/core').MaskitoPostprocessor[];
+        mask: import('@maskito/core').MaskitoMask;
+        overwriteMode: "replace" | "shift" | ((elementState: import('@maskito/core/src/lib/types').ElementState) => "replace" | "shift");
+    };
+    removePlaceholder: (value: string) => string;
+};
+export default yearlessDatePlaceholderMask;

package/dist/components/DateFieldYearless/internal/utils.d.ts

@@ -0,0 +1,12 @@
+import { YearlessDate } from '../types';
+export declare function validateYearlessDate({ value, constraints, }: {
+    value: YearlessDate | null;
+    constraints: {
+        required?: boolean;
+        unavailable?: {
+            dates?: YearlessDate[];
+        };
+        minDate?: YearlessDate | null;
+        maxDate?: YearlessDate | null;
+    };
+}): boolean;

package/dist/components/DateFieldYearless/types.d.ts

@@ -0,0 +1,7 @@
+import { MaskitoDateMode } from '@maskito/kit';
+export type DateMode = Extract<MaskitoDateMode, "dd/mm/yyyy" | "mm/dd/yyyy" | "yyyy/mm/dd">;
+export type YearlessDateMode = Extract<MaskitoDateMode, "mm/dd" | "dd/mm">;
+export type YearlessDate = {
+    day: number | null;
+    month: number | null;
+};