@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
74 lines (73 loc) • 3.88 kB
TypeScript
/**
* Shared datepicker utility functions used by both Elements and React packages.
* Only framework-agnostic functions belong here.
*/
/**
* Determines the appropriate input type based on device.
* Returns 'text' on iOS to avoid native date picker conflicts.
*/
export declare const getDatepickerInputType: () => string;
/**
* Validates that a range has valid order (start <= end).
* Returns true if range is valid or incomplete.
*/
export declare const validateRangeOrder: (values: string[]) => boolean;
/**
* Sorts date strings chronologically.
*/
export declare const sortDates: (dates: string[]) => string[];
/**
* Filters dates to only include selectable ones based on constraints.
*/
export declare const filterDates: (dates: string[], min?: string | null, max?: string | null, excludedDates?: string[], excludedWeekdays?: string[]) => string[];
/**
* Generates input CSS classes for datepicker.
*/
export declare const getDatepickerInputClasses: (fullwidth: boolean, showRangeLabels: boolean, multiple: boolean, range: boolean, readonly?: boolean, inputType?: string) => Record<string, boolean>;
/**
* Generates button CSS classes for calendar toggle button.
*/
export declare const getDatepickerButtonClasses: () => Record<string, boolean>;
/**
* Generates range label CSS classes.
*/
export declare const getRangeLabelClasses: (showRangeLabels: boolean) => Record<string, boolean>;
/**
* Processes date selection from calendar events.
* Converts the calendar's date selection into the appropriate string format.
*/
export declare const processDateSelection: (detail: string | string[], multiple: boolean, range: boolean) => string;
/**
* Handles calendar positioning based on viewport and input position.
* Positions calendar below input by default, flips above if overflowing.
*
* Accepts plain DOM elements (not framework-specific refs).
*/
export declare const handleCalendarPosition: (popup: HTMLElement | null, input: HTMLElement | null, hasCounter?: boolean) => void;
/**
* Handles common keyboard interactions for datepicker inputs.
*
* - Space: Opens calendar
* - Enter: Submits form, focuses next input, or blurs
* - Comma: Adds date to selection (multiple) or blurs input
*/
export declare const handleDatepickerKeydown: (event: KeyboardEvent, toggleCalendar: (e: Event) => void, submitForm?: () => void, focusNextInput?: () => void, blurInput?: () => void, commaHandler?: (e: KeyboardEvent) => void) => void;
/**
* Handles keyboard interactions for calendar button.
* Responds to Enter and Space keys.
*/
export declare const handleDatepickerButtonKeydown: (event: KeyboardEvent, toggleCalendar: (e: Event) => void) => void;
declare const _default: {
getDatepickerInputType: () => string;
validateRangeOrder: (values: string[]) => boolean;
sortDates: (dates: string[]) => string[];
filterDates: (dates: string[], min?: string | null, max?: string | null, excludedDates?: string[], excludedWeekdays?: string[]) => string[];
getDatepickerInputClasses: (fullwidth: boolean, showRangeLabels: boolean, multiple: boolean, range: boolean, readonly?: boolean, inputType?: string) => Record<string, boolean>;
getDatepickerButtonClasses: () => Record<string, boolean>;
getRangeLabelClasses: (showRangeLabels: boolean) => Record<string, boolean>;
processDateSelection: (detail: string | string[], multiple: boolean, range: boolean) => string;
handleCalendarPosition: (popup: HTMLElement | null, input: HTMLElement | null, hasCounter?: boolean) => void;
handleDatepickerKeydown: (event: KeyboardEvent, toggleCalendar: (e: Event) => void, submitForm?: () => void, focusNextInput?: () => void, blurInput?: () => void, commaHandler?: (e: KeyboardEvent) => void) => void;
handleDatepickerButtonKeydown: (event: KeyboardEvent, toggleCalendar: (e: Event) => void) => void;
};
export default _default;