@mantine/dates 7.17.6 → 7.17.8

package/lib/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,98 @@
+import { __BaseInputProps, __InputStylesNames, BoxProps, CloseButtonProps, DataAttributes, ElementProps, Factory, InputVariant, PopoverProps, ScrollAreaProps, StylesApiProps } from '@mantine/core';
+import { TimePickerAmPmLabels, TimePickerFormat, TimePickerPasteSplit, TimePickerPresets } from './TimePicker.types';
+export type TimePickerStylesNames = 'fieldsRoot' | 'fieldsGroup' | 'field' | 'controlsList' | 'controlsListGroup' | 'control' | 'dropdown' | 'presetsRoot' | 'presetsGroup' | 'presetsGroupLabel' | 'presetControl' | 'scrollarea' | __InputStylesNames;
+export type TimePickerCssVariables = {
+    dropdown: '--control-font-size';
+};
+export interface TimePickerProps extends BoxProps, __BaseInputProps, StylesApiProps<TimePickerFactory>, ElementProps<'div', 'onChange' | 'defaultValue'> {
+    /** Controlled component value */
+    value?: string;
+    /** Uncontrolled component default value */
+    defaultValue?: string;
+    /** Called when the value changes */
+    onChange?: (value: string) => void;
+    /** Determines whether the clear button should be displayed, `false` by default */
+    clearable?: boolean;
+    /** `name` prop passed down to the hidden input */
+    name?: string;
+    /** `form` prop passed down to the hidden input */
+    form?: string;
+    /** Min possible time value in `hh:mm:ss` format */
+    min?: string;
+    /** Max possible time value in `hh:mm:ss` format */
+    max?: string;
+    /** Time format, `'24h'` by default */
+    format?: TimePickerFormat;
+    /** Number by which hours are incremented/decremented, `1` by default */
+    hoursStep?: number;
+    /** Number by which minutes are incremented/decremented, `1` by default */
+    minutesStep?: number;
+    /** Number by which seconds are incremented/decremented, `1` by default */
+    secondsStep?: number;
+    /** Determines whether the seconds input should be displayed, `false` by default */
+    withSeconds?: boolean;
+    /** `aria-label` of hours input */
+    hoursInputLabel?: string;
+    /** `aria-label` of minutes input */
+    minutesInputLabel?: string;
+    /** `aria-label` of seconds input */
+    secondsInputLabel?: string;
+    /** `aria-label` of am/pm input */
+    amPmInputLabel?: string;
+    /** Labels used for am/pm values, `{ am: 'AM', pm: 'PM' }` by default */
+    amPmLabels?: TimePickerAmPmLabels;
+    /** Determines whether the dropdown with time controls list should be visible when the input has focus, `false` by default */
+    withDropdown?: boolean;
+    /** Props passed down to `Popover` component */
+    popoverProps?: PopoverProps;
+    /** Called once when one of the inputs is focused, not called when focused is shifted between hours, minutes, seconds and am/pm inputs */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Called once when the focus is no longer on any of the inputs */
+    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    /** Props passed down to clear button */
+    clearButtonProps?: CloseButtonProps & ElementProps<'button'> & DataAttributes;
+    /** Props passed down to hours input */
+    hoursInputProps?: React.ComponentPropsWithoutRef<'input'> & DataAttributes;
+    /** Props passed down to minutes input */
+    minutesInputProps?: React.ComponentPropsWithoutRef<'input'> & DataAttributes;
+    /** Props passed down to seconds input */
+    secondsInputProps?: React.ComponentPropsWithoutRef<'input'> & DataAttributes;
+    /** Props passed down to am/pm select */
+    amPmSelectProps?: React.ComponentPropsWithoutRef<'select'> & DataAttributes;
+    /** If set, the value cannot be updated */
+    readOnly?: boolean;
+    /** If set, the component becomes disabled */
+    disabled?: boolean;
+    /** Props passed down to the hidden input */
+    hiddenInputProps?: React.ComponentPropsWithoutRef<'input'> & DataAttributes;
+    /** A function to transform paste values, by default time in 24h format can be parsed on paste for example `23:34:22` */
+    pasteSplit?: TimePickerPasteSplit;
+    /** A ref object to get node reference of the hours input */
+    hoursRef?: React.Ref<HTMLInputElement>;
+    /** A ref object to get node reference of the minutes input */
+    minutesRef?: React.Ref<HTMLInputElement>;
+    /** A ref object to get node reference of the seconds input */
+    secondsRef?: React.Ref<HTMLInputElement>;
+    /** A ref object to get node reference of the am/pm select */
+    amPmRef?: React.Ref<HTMLSelectElement>;
+    /** Time presets to display in the dropdown */
+    presets?: TimePickerPresets;
+    /** Maximum height of the content displayed in the dropdown in px, `200` by default */
+    maxDropdownContentHeight?: number;
+    /** Props passed down to all underlying `ScrollArea` components */
+    scrollAreaProps?: ScrollAreaProps;
+}
+export type TimePickerFactory = Factory<{
+    props: TimePickerProps;
+    ref: HTMLDivElement;
+    stylesNames: TimePickerStylesNames;
+    vars: TimePickerCssVariables;
+    variant: InputVariant;
+}>;
+export declare const TimePicker: import("@mantine/core").MantineComponent<{
+    props: TimePickerProps;
+    ref: HTMLDivElement;
+    stylesNames: TimePickerStylesNames;
+    vars: TimePickerCssVariables;
+    variant: InputVariant;
+}>;

package/lib/components/TimePicker/TimePicker.types.d.ts

@@ -0,0 +1,22 @@
+export type TimePickerFormat = '12h' | '24h';
+export interface TimePickerAmPmLabels {
+    am: string;
+    pm: string;
+}
+export interface TimePickerPasteSplitInput {
+    time: string;
+    format: TimePickerFormat;
+    amPmLabels: TimePickerAmPmLabels;
+}
+export interface TimePickerPasteSplitReturnType {
+    hours: number | null;
+    minutes: number | null;
+    seconds: number | null;
+    amPm: string | null;
+}
+export type TimePickerPasteSplit = (input: TimePickerPasteSplitInput) => TimePickerPasteSplitReturnType;
+export interface TimePickerPresetGroup {
+    label: React.ReactNode;
+    values: string[];
+}
+export type TimePickerPresets = string[] | TimePickerPresetGroup[];

package/lib/components/TimePicker/TimePresets/TimePresetControl.d.ts

@@ -0,0 +1,14 @@
+import { TimePickerAmPmLabels, TimePickerFormat } from '../TimePicker.types';
+interface TimePresetControlProps {
+    value: string;
+    active: boolean;
+    onChange: (value: string) => void;
+    format: TimePickerFormat;
+    amPmLabels: TimePickerAmPmLabels;
+    withSeconds: boolean;
+}
+export declare function TimePresetControl({ value, active, onChange, format, amPmLabels, withSeconds, }: TimePresetControlProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TimePresetControl {
+    var displayName: string;
+}
+export {};

package/lib/components/TimePicker/TimePresets/TimePresetGroup.d.ts

@@ -0,0 +1,14 @@
+import { TimePickerAmPmLabels, TimePickerFormat, TimePickerPresetGroup } from '../TimePicker.types';
+interface TimePresetGroupProps {
+    value: string;
+    data: TimePickerPresetGroup;
+    onChange: (value: string) => void;
+    format: TimePickerFormat;
+    amPmLabels: TimePickerAmPmLabels;
+    withSeconds: boolean;
+}
+export declare function TimePresetGroup({ value, data, onChange, format, amPmLabels, withSeconds, }: TimePresetGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TimePresetGroup {
+    var displayName: string;
+}
+export {};

package/lib/components/TimePicker/TimePresets/TimePresets.d.ts

@@ -0,0 +1,14 @@
+import { TimePickerAmPmLabels, TimePickerFormat, TimePickerPresets } from '../TimePicker.types';
+interface TimePresetsProps {
+    presets: TimePickerPresets;
+    format: TimePickerFormat;
+    amPmLabels: TimePickerAmPmLabels;
+    value: string;
+    withSeconds: boolean;
+    onChange: (value: string) => void;
+}
+export declare function TimePresets({ presets, format, amPmLabels, withSeconds, value, onChange, }: TimePresetsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace TimePresets {
+    var displayName: string;
+}
+export {};

package/lib/components/TimePicker/index.d.ts

@@ -0,0 +1,4 @@
+export { TimePicker } from './TimePicker';
+export { getTimeRange } from './utils/get-time-range/get-time-range';
+export type { TimePickerCssVariables, TimePickerFactory, TimePickerProps, TimePickerStylesNames, } from './TimePicker';
+export type { TimePickerAmPmLabels, TimePickerFormat, TimePickerPasteSplit, TimePickerPresets, } from './TimePicker.types';

package/lib/components/TimePicker/use-time-picker.d.ts

@@ -0,0 +1,40 @@
+import type { TimePickerAmPmLabels, TimePickerFormat, TimePickerPasteSplit } from './TimePicker.types';
+interface UseTimePickerInput {
+    value: string | undefined;
+    defaultValue: string | undefined;
+    onChange: ((value: string) => void) | undefined;
+    format: TimePickerFormat;
+    amPmLabels: TimePickerAmPmLabels;
+    withSeconds: boolean | undefined;
+    min: string | undefined;
+    max: string | undefined;
+    readOnly: boolean | undefined;
+    disabled: boolean | undefined;
+    clearable: boolean | undefined;
+    pasteSplit: TimePickerPasteSplit | undefined;
+}
+export declare function useTimePicker({ value, defaultValue, onChange, format, amPmLabels, withSeconds, min, max, clearable, readOnly, disabled, pasteSplit, }: UseTimePickerInput): {
+    refs: {
+        hours: import("react").RefObject<HTMLInputElement | null>;
+        minutes: import("react").RefObject<HTMLInputElement | null>;
+        seconds: import("react").RefObject<HTMLInputElement | null>;
+        amPm: import("react").RefObject<HTMLSelectElement | null>;
+    };
+    values: {
+        hours: number | null;
+        minutes: number | null;
+        seconds: number | null;
+        amPm: string | null;
+    };
+    setHours: (value: number | null) => void;
+    setMinutes: (value: number | null) => void;
+    setSeconds: (value: number | null) => void;
+    setAmPm: (value: string | null) => void;
+    focus: (field: "hours" | "minutes" | "seconds" | "amPm") => void;
+    clear: () => void;
+    onPaste: (event: React.ClipboardEvent<any>) => void;
+    setTimeString: (timeString: string) => void;
+    isClearable: boolean | undefined;
+    hiddenInputValue: string;
+};
+export {};

package/lib/components/TimePicker/utils/clamp-time/clamp-time.d.ts

@@ -0,0 +1,6 @@
+export declare function clampTime(time: string, min: string, max: string): {
+    timeString: string;
+    hours: number;
+    minutes: number;
+    seconds: number;
+};

package/lib/components/TimePicker/utils/get-parsed-time/get-parsed-time.d.ts

@@ -0,0 +1,35 @@
+import { TimePickerAmPmLabels, TimePickerFormat } from '../../TimePicker.types';
+interface GetParsedTimeInput {
+    time: string;
+    format: TimePickerFormat;
+    amPmLabels: TimePickerAmPmLabels;
+}
+interface ConvertTimeTo12HourFormatInput {
+    hours: number | null;
+    minutes: number | null;
+    seconds: number | null;
+    amPmLabels: TimePickerAmPmLabels;
+}
+export declare function convertTimeTo12HourFormat({ hours, minutes, seconds, amPmLabels, }: ConvertTimeTo12HourFormatInput): {
+    hours: null;
+    minutes: null;
+    seconds: null;
+    amPm: null;
+} | {
+    hours: number;
+    minutes: number | null;
+    seconds: number | null;
+    amPm: string;
+};
+export declare function getParsedTime({ time, format, amPmLabels }: GetParsedTimeInput): {
+    hours: number;
+    minutes: number | null;
+    seconds: number | null;
+    amPm: string;
+} | {
+    amPm: null;
+    hours: number | null;
+    minutes: number | null;
+    seconds: number | null;
+};
+export {};

package/lib/components/TimePicker/utils/get-time-range/get-time-range.d.ts

@@ -0,0 +1,7 @@
+interface GetTimeRangeInput {
+    startTime: string;
+    endTime: string;
+    interval: string;
+}
+export declare function getTimeRange({ startTime, endTime, interval }: GetTimeRangeInput): string[];
+export {};

package/lib/components/TimePicker/utils/get-time-string/get-time-string.d.ts

@@ -0,0 +1,15 @@
+import { TimePickerAmPmLabels, TimePickerFormat } from '../../TimePicker.types';
+interface GetTimeStringInput {
+    hours: number | null;
+    minutes: number | null;
+    seconds: number | null;
+    format: TimePickerFormat;
+    withSeconds: boolean;
+    amPm: string | null;
+    amPmLabels: TimePickerAmPmLabels;
+}
+export declare function getTimeString({ hours, minutes, seconds, format, withSeconds, amPm, amPmLabels, }: GetTimeStringInput): {
+    valid: boolean;
+    value: string;
+};
+export {};

package/lib/components/TimePicker/utils/is-same-time/is-same-time.d.ts

@@ -0,0 +1,7 @@
+interface IsSameTimeInput {
+    time: string;
+    compare: string;
+    withSeconds: boolean;
+}
+export declare function isSameTime({ time, compare, withSeconds }: IsSameTimeInput): boolean;
+export {};

package/lib/components/TimePicker/utils/pad-time/pad-time.d.ts

@@ -0,0 +1 @@
+export declare function padTime(value: number): string;

package/lib/components/TimePicker/utils/split-time-string/split-time-string.d.ts

@@ -0,0 +1,5 @@
+export declare function splitTimeString(timeString: string): {
+    hours: number | null;
+    minutes: number | null;
+    seconds: number | null;
+};

package/lib/components/TimePicker/utils/time-to-seconds/time-to-seconds.d.ts

@@ -0,0 +1,7 @@
+export declare function timeToSeconds(timeStr: string): number;
+export declare function secondsToTime(seconds: number): {
+    timeString: string;
+    hours: number;
+    minutes: number;
+    seconds: number;
+};

package/lib/components/TimeValue/TimeValue.d.ts

@@ -0,0 +1,15 @@
+import type { TimePickerAmPmLabels, TimePickerFormat } from '../TimePicker';
+export interface TimeValueProps {
+    /** Time to format */
+    value: string | Date;
+    /** Time format, `'24h'` by default */
+    format?: TimePickerFormat;
+    /** AM/PM labels, `{ am: 'AM', pm: 'PM' }` by default */
+    amPmLabels?: TimePickerAmPmLabels;
+    /** Determines whether seconds should be displayed, `false` by default */
+    withSeconds?: boolean;
+}
+export declare function TimeValue({ value, format, amPmLabels, withSeconds, }: TimeValueProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TimeValue {
+    var displayName: string;
+}

package/lib/components/TimeValue/get-formatted-time/get-formatted-time.d.ts

@@ -0,0 +1,8 @@
+import type { TimePickerAmPmLabels, TimePickerFormat } from '../../TimePicker';
+export interface GetFormattedTimeInput {
+    value: string | Date;
+    format: TimePickerFormat;
+    amPmLabels: TimePickerAmPmLabels;
+    withSeconds: boolean;
+}
+export declare function getFormattedTime({ value, format, amPmLabels, withSeconds, }: GetFormattedTimeInput): string | null;

package/lib/components/TimeValue/index.d.ts

@@ -0,0 +1,2 @@
+export { TimeValue } from './TimeValue';
+export type { TimeValueProps } from './TimeValue';

package/lib/utils/clamp-date/clamp-date.d.ts

@@ -0,0 +1,2 @@
+import { DateStringValue } from '../../types';
+export declare function clampDate(minDate: DateStringValue | Date | undefined, maxDate: DateStringValue | Date | undefined, date: DateStringValue | Date): DateStringValue;

package/lib/utils/get-default-clamped-date/get-default-clamped-date.d.ts

@@ -0,0 +1,7 @@
+import { DateStringValue } from '../../types';
+interface GetDefaultClampedDate {
+    minDate: DateStringValue | Date | undefined;
+    maxDate: DateStringValue | Date | undefined;
+}
+export declare function getDefaultClampedDate({ minDate, maxDate, }: GetDefaultClampedDate): DateStringValue;
+export {};

package/lib/utils/get-formatted-date/get-formatted-date.d.ts

@@ -0,0 +1,15 @@
+import { DatePickerType, DatePickerValue } from '../../types';
+interface DateFormatterInput {
+    type: DatePickerType;
+    date: DatePickerValue<DatePickerType>;
+    locale: string;
+    format: string;
+    labelSeparator: string;
+}
+export type DateFormatter = (input: DateFormatterInput) => string;
+export declare function defaultDateFormatter({ type, date, locale, format, labelSeparator, }: DateFormatterInput): string;
+interface GetFormattedDateInput extends DateFormatterInput {
+    formatter?: DateFormatter;
+}
+export declare function getFormattedDate({ formatter, ...others }: GetFormattedDateInput): string;
+export {};

package/lib/utils/handle-control-key-down/handle-control-key-down.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+type ControlsRef = RefObject<HTMLButtonElement[][][]>;
+interface HandleControlKeyDownInput {
+    controlsRef: ControlsRef;
+    levelIndex: number;
+    rowIndex: number;
+    cellIndex: number;
+    event: React.KeyboardEvent<HTMLButtonElement>;
+}
+export declare function handleControlKeyDown({ controlsRef, levelIndex, rowIndex, cellIndex, event, }: HandleControlKeyDownInput): void;
+export {};

package/lib/utils/to-date-string/to-date-string.d.ts

@@ -0,0 +1,4 @@
+import { Dayjs } from 'dayjs';
+import { DateStringValue } from '../../types';
+export declare function toDateString(value: string | number | Date | Dayjs | undefined | null): DateStringValue | undefined | null;
+export declare function toDateTimeString(value: string | number | Date | Dayjs | undefined | null): DateStringValue | undefined | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/dates",
-  "version": "7.17.6",
+  "version": "7.17.8",
   "description": "Calendars, date and time pickers based on Mantine components",
   "homepage": "https://mantine.dev/dates/getting-started/",
   "license": "MIT",
@@ -45,8 +45,8 @@
     "directory": "packages/@mantine/dates"
   },
   "peerDependencies": {
-    "@mantine/core": "7.17.6",
-    "@mantine/hooks": "7.17.6",
+    "@mantine/core": "7.17.8",
+    "@mantine/hooks": "7.17.8",
     "dayjs": ">=1.0.0",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x"