npm - @mantine/dates - Versions diffs - 9.0.1 → 9.1.0 - Mend

@mantine/dates 9.0.1 → 9.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/cjs/components/TimePicker/use-time-picker.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-time-picker.cjs","names":["getParsedTime","getTimeString","clampTime"],"sources":["../../../src/components/TimePicker/use-time-picker.ts"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { useDidUpdate } from '@mantine/hooks';\nimport type {\n TimePickerAmPmLabels,\n TimePickerFormat,\n TimePickerPasteSplit,\n} from './TimePicker.types';\nimport { clampTime } from './utils/clamp-time/clamp-time';\nimport { getParsedTime } from './utils/get-parsed-time/get-parsed-time';\nimport { getTimeString } from './utils/get-time-string/get-time-string';\n\ninterface UseTimePickerInput {\n value: string \| undefined;\n defaultValue: string \| undefined;\n onChange: ((value: string) => void) \| undefined;\n format: TimePickerFormat;\n amPmLabels: TimePickerAmPmLabels;\n withSeconds: boolean \| undefined;\n min: string \| undefined;\n max: string \| undefined;\n readOnly: boolean \| undefined;\n disabled: boolean \| undefined;\n clearable: boolean \| undefined;\n pasteSplit: TimePickerPasteSplit \| undefined;\n}\n\nexport function useTimePicker({\n value,\n defaultValue,\n onChange,\n format,\n amPmLabels,\n withSeconds = false,\n min,\n max,\n clearable,\n readOnly,\n disabled,\n pasteSplit,\n}: UseTimePickerInput) {\n const parsedTime = getParsedTime({\n time: value \|\| defaultValue \|\| '',\n amPmLabels,\n format,\n });\n\n const initialTimeString = getTimeString({\n hours: parsedTime.hours,\n minutes: parsedTime.minutes,\n seconds: parsedTime.seconds,\n format,\n withSeconds,\n amPm: parsedTime.amPm,\n amPmLabels,\n });\n\n const acceptChange = useRef(true);\n const wasInvalidBefore = useRef(!initialTimeString.valid);\n\n const [hours, setHours] = useState<number \| null>(parsedTime.hours);\n const [minutes, setMinutes] = useState<number \| null>(parsedTime.minutes);\n const [seconds, setSeconds] = useState<number \| null>(parsedTime.seconds);\n const [amPm, setAmPm] = useState<string \| null>(parsedTime.amPm);\n\n const isClearable =\n clearable &&\n !readOnly &&\n !disabled &&\n (hours !== null \|\| minutes !== null \|\| seconds !== null \|\| amPm !== null);\n\n const hoursRef = useRef<HTMLInputElement>(null);\n const minutesRef = useRef<HTMLInputElement>(null);\n const secondsRef = useRef<HTMLInputElement>(null);\n const amPmRef = useRef<HTMLSelectElement>(null);\n\n const focus = (field: 'hours' \| 'minutes' \| 'seconds' \| 'amPm') => {\n if (field === 'hours') {\n hoursRef.current?.focus();\n }\n\n if (field === 'minutes') {\n minutesRef.current?.focus();\n }\n\n if (field === 'seconds') {\n secondsRef.current?.focus();\n }\n\n if (field === 'amPm') {\n amPmRef.current?.focus();\n }\n };\n\n const handleTimeChange = (field: 'hours' \| 'minutes' \| 'seconds' \| 'amPm', val: any) => {\n const computedValue = { hours, minutes, seconds, amPm, [field]: val };\n\n const timeString = getTimeString({ ...computedValue, format, withSeconds, amPmLabels });\n\n if (timeString.valid) {\n acceptChange.current = false;\n wasInvalidBefore.current = false;\n if (field === 'hours') {\n setHours(val);\n }\n if (field === 'minutes') {\n setMinutes(val);\n }\n if (field === 'seconds') {\n setSeconds(val);\n }\n if (field === 'amPm') {\n setAmPm(val);\n }\n\n onChange?.(timeString.value);\n } else {\n acceptChange.current = false;\n if (!wasInvalidBefore.current) {\n onChange?.('');\n wasInvalidBefore.current = true;\n }\n }\n };\n\n const setTimeString = (timeString: string) => {\n acceptChange.current = false;\n\n const parsedTime = getParsedTime({ time: timeString, amPmLabels, format });\n setHours(parsedTime.hours);\n setMinutes(parsedTime.minutes);\n setSeconds(parsedTime.seconds);\n setAmPm(parsedTime.amPm);\n\n const next = getTimeString({ ...parsedTime, format, withSeconds, amPmLabels });\n wasInvalidBefore.current = !next.valid;\n onChange?.(timeString);\n };\n\n const onHoursChange = (value: number \| null) => {\n let adjustedValue = value;\n if (format === '12h' && typeof value === 'number' && value > 12) {\n adjustedValue = ((value - 1) % 12) + 1;\n }\n\n setHours(adjustedValue);\n handleTimeChange('hours', adjustedValue);\n focus('hours');\n };\n\n const onMinutesChange = (value: number \| null) => {\n setMinutes(value);\n handleTimeChange('minutes', value);\n focus('minutes');\n };\n\n const onSecondsChange = (value: number \| null) => {\n setSeconds(value);\n handleTimeChange('seconds', value);\n focus('seconds');\n };\n\n const onAmPmChange = (value: string \| null) => {\n setAmPm(value);\n handleTimeChange('amPm', value);\n focus('amPm');\n };\n\n const clear = () => {\n acceptChange.current = false;\n setHours(null);\n setMinutes(null);\n setSeconds(null);\n setAmPm(null);\n onChange?.('');\n wasInvalidBefore.current = true;\n focus('hours');\n };\n\n const onPaste = (event: React.ClipboardEvent<any>) => {\n event.preventDefault();\n const pastedValue = event.clipboardData.getData('text');\n const parsedTime = (pasteSplit \|\| getParsedTime)({ time: pastedValue, format, amPmLabels });\n const timeString = getTimeString({ ...parsedTime, format, withSeconds, amPmLabels });\n if (timeString.valid) {\n acceptChange.current = false;\n const clamped = clampTime(timeString.value, min \|\| '00:00:00', max \|\| '23:59:59');\n onChange?.(clamped.timeString);\n setHours(parsedTime.hours);\n setMinutes(parsedTime.minutes);\n setSeconds(parsedTime.seconds);\n setAmPm(parsedTime.amPm);\n }\n };\n\n const hiddenInputValue = getTimeString({\n hours,\n minutes,\n seconds,\n format,\n withSeconds,\n amPm,\n amPmLabels: amPmLabels!,\n });\n\n useDidUpdate(() => {\n if (value === '') {\n acceptChange.current = false;\n setHours(null);\n setMinutes(null);\n setSeconds(null);\n setAmPm(null);\n acceptChange.current = true;\n return;\n }\n\n if (acceptChange.current && typeof value === 'string') {\n const parsedTime = getParsedTime({ time: value \|\| '', amPmLabels, format });\n setHours(parsedTime.hours);\n setMinutes(parsedTime.minutes);\n setSeconds(parsedTime.seconds);\n setAmPm(parsedTime.amPm);\n }\n acceptChange.current = true;\n }, [value]);\n\n return {\n refs: { hours: hoursRef, minutes: minutesRef, seconds: secondsRef, amPm: amPmRef },\n values: { hours, minutes, seconds, amPm },\n setHours: onHoursChange,\n setMinutes: onMinutesChange,\n setSeconds: onSecondsChange,\n setAmPm: onAmPmChange,\n focus,\n clear,\n onPaste,\n setTimeString,\n isClearable,\n hiddenInputValue: hiddenInputValue.value,\n };\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-time-picker.cjs","names":["getParsedTime","getTimeString","clampTime"],"sources":["../../../src/components/TimePicker/use-time-picker.ts"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { useDidUpdate } from '@mantine/hooks';\nimport type {\n TimePickerAmPmLabels,\n TimePickerFormat,\n TimePickerPasteSplit,\n TimePickerType,\n} from './TimePicker.types';\nimport { clampTime } from './utils/clamp-time/clamp-time';\nimport { getParsedTime } from './utils/get-parsed-time/get-parsed-time';\nimport { getTimeString } from './utils/get-time-string/get-time-string';\n\ninterface UseTimePickerInput {\n value: string \| undefined;\n defaultValue: string \| undefined;\n onChange: ((value: string) => void) \| undefined;\n format: TimePickerFormat;\n amPmLabels: TimePickerAmPmLabels;\n withSeconds: boolean \| undefined;\n min: string \| undefined;\n max: string \| undefined;\n readOnly: boolean \| undefined;\n disabled: boolean \| undefined;\n clearable: boolean \| undefined;\n pasteSplit: TimePickerPasteSplit \| undefined;\n type: TimePickerType;\n}\n\nexport function useTimePicker({\n value,\n defaultValue,\n onChange,\n format,\n amPmLabels,\n withSeconds = false,\n min,\n max,\n clearable,\n readOnly,\n disabled,\n pasteSplit,\n type,\n}: UseTimePickerInput) {\n const parsedTime = getParsedTime({\n time: value \|\| defaultValue \|\| '',\n amPmLabels,\n format,\n });\n\n const initialTimeString = getTimeString({\n hours: parsedTime.hours,\n minutes: parsedTime.minutes,\n seconds: parsedTime.seconds,\n format,\n withSeconds,\n amPm: parsedTime.amPm,\n amPmLabels,\n });\n\n const acceptChange = useRef(true);\n const wasInvalidBefore = useRef(!initialTimeString.valid);\n\n const [hours, setHours] = useState<number \| null>(parsedTime.hours);\n const [minutes, setMinutes] = useState<number \| null>(parsedTime.minutes);\n const [seconds, setSeconds] = useState<number \| null>(parsedTime.seconds);\n const [amPm, setAmPm] = useState<string \| null>(parsedTime.amPm);\n\n const isClearable =\n clearable &&\n !readOnly &&\n !disabled &&\n (hours !== null \|\| minutes !== null \|\| seconds !== null \|\| amPm !== null);\n\n const hoursRef = useRef<HTMLInputElement>(null);\n const minutesRef = useRef<HTMLInputElement>(null);\n const secondsRef = useRef<HTMLInputElement>(null);\n const amPmRef = useRef<HTMLSelectElement>(null);\n\n const focus = (field: 'hours' \| 'minutes' \| 'seconds' \| 'amPm') => {\n if (field === 'hours') {\n hoursRef.current?.focus();\n }\n\n if (field === 'minutes') {\n minutesRef.current?.focus();\n }\n\n if (field === 'seconds') {\n secondsRef.current?.focus();\n }\n\n if (field === 'amPm') {\n amPmRef.current?.focus();\n }\n };\n\n const handleTimeChange = (field: 'hours' \| 'minutes' \| 'seconds' \| 'amPm', val: any) => {\n const computedValue = { hours, minutes, seconds, amPm, [field]: val };\n\n const timeString = getTimeString({ ...computedValue, format, withSeconds, amPmLabels });\n\n if (timeString.valid) {\n acceptChange.current = false;\n wasInvalidBefore.current = false;\n if (field === 'hours') {\n setHours(val);\n }\n if (field === 'minutes') {\n setMinutes(val);\n }\n if (field === 'seconds') {\n setSeconds(val);\n }\n if (field === 'amPm') {\n setAmPm(val);\n }\n\n onChange?.(timeString.value);\n } else {\n acceptChange.current = false;\n if (!wasInvalidBefore.current) {\n onChange?.('');\n wasInvalidBefore.current = true;\n }\n }\n };\n\n const setTimeString = (timeString: string) => {\n acceptChange.current = false;\n\n const parsedTime = getParsedTime({ time: timeString, amPmLabels, format });\n setHours(parsedTime.hours);\n setMinutes(parsedTime.minutes);\n setSeconds(parsedTime.seconds);\n setAmPm(parsedTime.amPm);\n\n const next = getTimeString({ ...parsedTime, format, withSeconds, amPmLabels });\n wasInvalidBefore.current = !next.valid;\n onChange?.(timeString);\n };\n\n const onHoursChange = (value: number \| null) => {\n let adjustedValue = value;\n if (format === '12h' && typeof value === 'number' && value > 12) {\n adjustedValue = ((value - 1) % 12) + 1;\n }\n\n setHours(adjustedValue);\n handleTimeChange('hours', adjustedValue);\n focus('hours');\n };\n\n const onMinutesChange = (value: number \| null) => {\n setMinutes(value);\n handleTimeChange('minutes', value);\n focus('minutes');\n };\n\n const onSecondsChange = (value: number \| null) => {\n setSeconds(value);\n handleTimeChange('seconds', value);\n focus('seconds');\n };\n\n const onAmPmChange = (value: string \| null) => {\n setAmPm(value);\n handleTimeChange('amPm', value);\n focus('amPm');\n };\n\n const clear = () => {\n acceptChange.current = false;\n setHours(null);\n setMinutes(null);\n setSeconds(null);\n setAmPm(null);\n onChange?.('');\n wasInvalidBefore.current = true;\n focus('hours');\n };\n\n const onPaste = (event: React.ClipboardEvent<any>) => {\n event.preventDefault();\n const pastedValue = event.clipboardData.getData('text');\n const parsedTime = (pasteSplit \|\| getParsedTime)({ time: pastedValue, format, amPmLabels });\n const timeString = getTimeString({ ...parsedTime, format, withSeconds, amPmLabels });\n if (timeString.valid) {\n acceptChange.current = false;\n const defaultMax = type === 'duration' ? '9999:59:59' : '23:59:59';\n const clamped = clampTime(timeString.value, min \|\| '00:00:00', max \|\| defaultMax);\n onChange?.(clamped.timeString);\n setHours(parsedTime.hours);\n setMinutes(parsedTime.minutes);\n setSeconds(parsedTime.seconds);\n setAmPm(parsedTime.amPm);\n }\n };\n\n const hiddenInputValue = getTimeString({\n hours,\n minutes,\n seconds,\n format,\n withSeconds,\n amPm,\n amPmLabels: amPmLabels!,\n });\n\n useDidUpdate(() => {\n if (value === '') {\n acceptChange.current = false;\n setHours(null);\n setMinutes(null);\n setSeconds(null);\n setAmPm(null);\n acceptChange.current = true;\n return;\n }\n\n if (acceptChange.current && typeof value === 'string') {\n const parsedTime = getParsedTime({ time: value \|\| '', amPmLabels, format });\n setHours(parsedTime.hours);\n setMinutes(parsedTime.minutes);\n setSeconds(parsedTime.seconds);\n setAmPm(parsedTime.amPm);\n }\n acceptChange.current = true;\n }, [value]);\n\n return {\n refs: { hours: hoursRef, minutes: minutesRef, seconds: secondsRef, amPm: amPmRef },\n values: { hours, minutes, seconds, amPm },\n setHours: onHoursChange,\n setMinutes: onMinutesChange,\n setSeconds: onSecondsChange,\n setAmPm: onAmPmChange,\n focus,\n clear,\n onPaste,\n setTimeString,\n isClearable,\n hiddenInputValue: hiddenInputValue.value,\n };\n}\n"],"mappings":"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"}

package/cjs/components/YearPicker/YearPicker.cjs CHANGED Viewed

@@ -2,14 +2,35 @@
 require("../../_virtual/_rolldown/runtime.cjs");
 const require_use_dates_state = require("../../hooks/use-dates-state/use-dates-state.cjs");
 const require_Calendar = require("../Calendar/Calendar.cjs");
+const require_pick_calendar_levels_props = require("../Calendar/pick-calendar-levels-props/pick-calendar-levels-props.cjs");
+const require_YearPicker_module = require("./YearPicker.module.cjs");
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _mantine_core = require("@mantine/core");
 //#region packages/@mantine/dates/src/components/YearPicker/YearPicker.tsx
+const varsResolver = (0, _mantine_core.createVarsResolver)((_, { size }) => ({ yearPickerRoot: { "--preset-font-size": (0, _mantine_core.getFontSize)(size) } }));
 const defaultProps = { type: "default" };
 const YearPicker = (0, _mantine_core.factory)((_props) => {
 	const props = (0, _mantine_core.useProps)("YearPicker", defaultProps, _props);
-	const { classNames, styles, vars, type, defaultValue, value, onChange, __staticSelector, getYearControlProps, allowSingleDateInRange, allowDeselect, onMouseLeave, onYearSelect, __updateDateOnYearSelect, ...others } = props;
-	const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps } = require_use_dates_state.useDatesState({
+	const { classNames, styles, vars, type, defaultValue, value, onChange, __staticSelector, getYearControlProps, allowSingleDateInRange, allowDeselect, onMouseLeave, onYearSelect, __updateDateOnYearSelect, __onPresetSelect, __stopPropagation, presets, className, style, unstyled, size, attributes, ...rest } = props;
+	const { calendarProps, others } = require_pick_calendar_levels_props.pickCalendarProps(rest);
+	const setDateRef = (0, react.useRef)(null);
+	const setLevelRef = (0, react.useRef)(null);
+	const getStyles = (0, _mantine_core.useStyles)({
+		name: __staticSelector || "YearPicker",
+		classes: require_YearPicker_module.default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		rootSelector: presets ? "yearPickerRoot" : void 0,
+		varsResolver,
+		vars
+	});
+	const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps, setValue } = require_use_dates_state.useDatesState({
 		type,
 		level: "year",
 		allowDeselect,
@@ -24,7 +45,12 @@ const YearPicker = (0, _mantine_core.factory)((_props) => {
 		styles,
 		props
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Calendar.Calendar, {
+	const calendar = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Calendar.Calendar, {
+		classNames: resolvedClassNames,
+		styles: resolvedStyles,
+		size,
+		...calendarProps,
+		...!presets ? others : {},
 		minLevel: "decade",
 		__updateDateOnYearSelect: __updateDateOnYearSelect ?? false,
 		__staticSelector: __staticSelector || "YearPicker",
@@ -38,12 +64,46 @@ const YearPicker = (0, _mantine_core.factory)((_props) => {
 			...getControlProps(date),
 			...getYearControlProps?.(date)
 		}),
-		classNames: resolvedClassNames,
-		styles: resolvedStyles,
-		...others
+		__setDateRef: setDateRef,
+		__setLevelRef: setLevelRef,
+		__stopPropagation,
+		attributes,
+		...!presets ? {
+			className,
+			style
+		} : {}
+	});
+	if (!presets) return calendar;
+	const handlePresetSelect = (val) => {
+		const _val = Array.isArray(val) ? val[0] : val;
+		if (_val !== void 0) {
+			setDateRef.current?.(_val);
+			setLevelRef.current?.("decade");
+			__onPresetSelect ? __onPresetSelect(_val) : setValue(val);
+		}
+	};
+	const presetButtons = presets.map((preset, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
+		...getStyles("presetButton"),
+		onClick: () => handlePresetSelect(preset.value),
+		onMouseDown: (event) => event.preventDefault(),
+		"data-mantine-stop-propagation": __stopPropagation || void 0,
+		children: preset.label
+	}, index));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+		...getStyles("yearPickerRoot"),
+		size,
+		...others,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...getStyles("presetsList"),
+			children: presetButtons
+		}), calendar]
 	});
 });
-YearPicker.classes = require_Calendar.Calendar.classes;
+YearPicker.classes = {
+	...require_Calendar.Calendar.classes,
+	...require_YearPicker_module.default
+};
+YearPicker.varsResolver = varsResolver;
 YearPicker.displayName = "@mantine/dates/YearPicker";
 //#endregion
 exports.YearPicker = YearPicker;

package/cjs/components/YearPicker/YearPicker.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"YearPicker.cjs","names":["useDatesState","Calendar"],"sources":["../../../src/components/YearPicker/YearPicker.tsx"],"sourcesContent":["import {\n BoxProps,\n ElementProps,\n factory,\n Factory,\n MantineComponentStaticProperties,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '@mantine/core';\nimport { useDatesState } from '../../hooks';\nimport { DatePickerType, DateStringValue, PickerBaseProps } from '../../types';\nimport { Calendar, CalendarBaseProps } from '../Calendar';\nimport { DecadeLevelBaseSettings } from '../DecadeLevel';\nimport { DecadeLevelGroupStylesNames } from '../DecadeLevelGroup';\n\nexport type ~~YearPickerStylesNames~~ = DecadeLevelGroupStylesNames;\n\nexport interface YearPickerBaseProps<Type extends DatePickerType = 'default'>\n extends\n PickerBaseProps<Type>,\n DecadeLevelBaseSettings,\n Omit<\n CalendarBaseProps,\n 'onNextYear' \| 'onPreviousYear' \| 'onNextMonth' \| 'onPreviousMonth' \| 'hasNextLevel'\n > {}\n\nexport interface YearPickerProps<Type extends DatePickerType = 'default'>\n extends\n BoxProps,\n YearPickerBaseProps<Type>,\n StylesApiProps<YearPickerFactory>,\n ElementProps<'div', 'onChange' \| 'value' \| 'defaultValue'> {\n /** Called when year is selected */\n onYearSelect?: (date: DateStringValue) => void;\n}\n\nexport type YearPickerFactory = Factory<{\n props: YearPickerProps;\n ref: HTMLDivElement;\n stylesNames: YearPickerStylesNames;\n}>;\n\nconst defaultProps = {\n type: 'default',\n} satisfies Partial<YearPickerProps>;\n\ntype YearPickerComponent = (<Type extends DatePickerType = 'default'>(\n props: YearPickerProps<Type> & { ref?: React.Ref<HTMLDivElement> }\n) => React.JSX.Element) & {\n displayName?: string;\n} & MantineComponentStaticProperties<YearPickerFactory>;\n\nexport const YearPicker: YearPickerComponent = factory<YearPickerFactory>((_props) => {\n const props = useProps('YearPicker', defaultProps, _props);\n const {\n classNames,\n styles,\n vars,\n type,\n defaultValue,\n value,\n onChange,\n __staticSelector,\n getYearControlProps,\n allowSingleDateInRange,\n allowDeselect,\n onMouseLeave,\n onYearSelect,\n __updateDateOnYearSelect,\n ...~~others~~\n } = props;\n\n const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps } = useDatesState({\n type: type as any,\n level: 'year',\n allowDeselect,\n allowSingleDateInRange,\n value,\n defaultValue,\n onChange: onChange as any,\n onMouseLeave,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<YearPickerFactory>({\n classNames,\n styles,\n props,\n });\n\n ~~return~~ (\n <Calendar\n minLevel=\"decade\"\n __updateDateOnYearSelect={__updateDateOnYearSelect ?? false}\n __staticSelector={__staticSelector \|\| 'YearPicker'}\n onMouseLeave={onRootMouseLeave}\n onYearMouseEnter={(_event, date) => onHoveredDateChange(date)}\n onYearSelect={(date) => {\n onDateChange(date);\n onYearSelect?.(date);\n }}\n getYearControlProps={(date) => ({\n ...getControlProps(date),\n ...getYearControlProps?.(date),\n })}\n ~~classNames~~={~~resolvedClassNames~~}\n ~~styles~~={~~resolvedStyles~~}\n {...~~others~~}\n />\n );\n}) as any;\n\nYearPicker.classes = Calendar.classes;\nYearPicker.displayName = '@mantine/dates/YearPicker';\n\nexport namespace YearPicker {\n export type Props<Type extends DatePickerType = 'default'> = YearPickerProps<Type>;\n export type BaseProps = YearPickerBaseProps;\n export type StylesNames = YearPickerStylesNames;\n export type Factory = YearPickerFactory;\n}\n"],"mappings":"~~;;;;;;;AA2CA~~,MAAM,eAAe,EACnB,MAAM,WACP;AAQD,MAAa,cAAA,GAAA,cAAA,UAA8D,WAAW;CACpF,MAAM,SAAA,GAAA,cAAA,UAAiB,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,QACA,MACA,MACA,cACA,OACA,UACA,kBACA,qBACA,wBACA,eACA,cACA,cACA,0BACA,GAAG,~~WACD~~;CAEJ,MAAM,EAAE,cAAc,kBAAkB,qBAAqB,~~oBAAoBA~~,wBAAAA,cAAc;~~EACvF~~;EACN,OAAO;EACP;EACA;EACA;EACA;EACU;EACV;EACD,CAAC;~~CAEF~~,MAAM,EAAE,oBAAoB,oBAAA,GAAA,cAAA,sBAA2D;EACrF;EACA;EACA;EACD,CAAC;~~AAEF~~,~~QACE~~,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD;EACE,UAAS;EACT,0BAA0B,4BAA4B;EACtD,kBAAkB,oBAAoB;EACtC,cAAc;EACd,mBAAmB,QAAQ,SAAS,oBAAoB,KAAK;EAC7D,eAAe,SAAS;AACtB,gBAAa,KAAK;AAClB,kBAAe,KAAK;;EAEtB,sBAAsB,UAAU;GAC9B,GAAG,gBAAgB,KAAK;GACxB,GAAG,sBAAsB,KAAK;GAC/B;EACD,~~YAAY~~;EACZ,QAAQ;~~EACR~~,GAAI;~~EACJ~~,~~CAAA~~;~~EAEJ~~;AAEF,WAAW,~~UAAUA~~,iBAAAA,SAAS;~~AAC9B~~,WAAW,cAAc"}
1	+ {"version":3,"file":"YearPicker.cjs","names":["pickCalendarProps","useDatesState","Calendar","UnstyledButton","Box","classes"],"sources":["../../../src/components/YearPicker/YearPicker.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getFontSize,\n MantineComponentStaticProperties,\n StylesApiProps,\n UnstyledButton,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { useDatesState } from '../../hooks';\nimport {\n CalendarLevel,\n DatePickerType,\n DateStringValue,\n DateValue,\n PickerBaseProps,\n} from '../../types';\nimport { Calendar, CalendarBaseProps, pickCalendarProps } from '../Calendar';\nimport { DecadeLevelBaseSettings } from '../DecadeLevel';\nimport { DecadeLevelGroupStylesNames } from '../DecadeLevelGroup';\nimport classes from './YearPicker.module.css';\n\nexport interface YearPickerPreset<Type extends DatePickerType> {\n value: Type extends 'range'\n ? [DateStringValue \| null, DateStringValue \| null]\n : Type extends 'multiple'\n ? DateStringValue[]\n : DateStringValue \| null;\n label: React.ReactNode;\n}\n\nexport type YearPickerCssVariables = {\n yearPickerRoot: '--preset-font-size';\n};\n\nexport type YearPickerStylesNames =\n \| DecadeLevelGroupStylesNames\n \| 'presetsList'\n \| 'presetButton'\n \| 'yearPickerRoot';\n\nexport interface YearPickerBaseProps<Type extends DatePickerType = 'default'>\n extends\n PickerBaseProps<Type>,\n DecadeLevelBaseSettings,\n Omit<\n CalendarBaseProps,\n 'onNextYear' \| 'onPreviousYear' \| 'onNextMonth' \| 'onPreviousMonth' \| 'hasNextLevel'\n > {\n /** Predefined values to pick from /\n presets?: YearPickerPreset<Type>[];\n\n /* If defined, called with preset value, suppresses `onChange` call /\n __onPresetSelect?: (\n preset: Type extends 'range'\n ? [DateStringValue \| null, DateStringValue \| null]\n : DateStringValue \| null\n ) => void;\n}\n\nexport interface YearPickerProps<Type extends DatePickerType = 'default'>\n extends\n BoxProps,\n YearPickerBaseProps<Type>,\n StylesApiProps<YearPickerFactory>,\n ElementProps<'div', 'onChange' \| 'value' \| 'defaultValue'> {\n /* Called when year is selected */\n onYearSelect?: (date: DateStringValue) => void;\n}\n\nexport type YearPickerFactory = Factory<{\n props: YearPickerProps;\n ref: HTMLDivElement;\n stylesNames: YearPickerStylesNames;\n vars: YearPickerCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<YearPickerFactory>((_, { size }) => ({\n yearPickerRoot: {\n '--preset-font-size': getFontSize(size),\n },\n}));\n\nconst defaultProps = {\n type: 'default',\n} satisfies Partial<YearPickerProps>;\n\ntype YearPickerComponent = (<Type extends DatePickerType = 'default'>(\n props: YearPickerProps<Type> & { ref?: React.Ref<HTMLDivElement> }\n) => React.JSX.Element) & {\n displayName?: string;\n} & MantineComponentStaticProperties<YearPickerFactory>;\n\nexport const YearPicker: YearPickerComponent = factory<YearPickerFactory>((_props) => {\n const props = useProps('YearPicker', defaultProps, _props);\n const {\n classNames,\n styles,\n vars,\n type,\n defaultValue,\n value,\n onChange,\n __staticSelector,\n getYearControlProps,\n allowSingleDateInRange,\n allowDeselect,\n onMouseLeave,\n onYearSelect,\n __updateDateOnYearSelect,\n __onPresetSelect,\n __stopPropagation,\n presets,\n className,\n style,\n unstyled,\n size,\n attributes,\n ...rest\n } = props;\n\n const { calendarProps, others } = pickCalendarProps(rest);\n const setDateRef = useRef<((date: DateValue) => void) \| null>(null);\n const setLevelRef = useRef<((level: CalendarLevel) => void) \| null>(null);\n\n const getStyles = useStyles<YearPickerFactory>({\n name: __staticSelector \|\| 'YearPicker',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: presets ? 'yearPickerRoot' : undefined,\n varsResolver,\n vars,\n });\n\n const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps, setValue } =\n useDatesState({\n type: type as any,\n level: 'year',\n allowDeselect,\n allowSingleDateInRange,\n value,\n defaultValue,\n onChange: onChange as any,\n onMouseLeave,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<YearPickerFactory>({\n classNames,\n styles,\n props,\n });\n\n const calendar = (\n <Calendar\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n size={size}\n {...calendarProps}\n {...(!presets ? others : {})}\n minLevel=\"decade\"\n __updateDateOnYearSelect={__updateDateOnYearSelect ?? false}\n __staticSelector={__staticSelector \|\| 'YearPicker'}\n onMouseLeave={onRootMouseLeave}\n onYearMouseEnter={(_event, date) => onHoveredDateChange(date)}\n onYearSelect={(date) => {\n onDateChange(date);\n onYearSelect?.(date);\n }}\n getYearControlProps={(date) => ({\n ...getControlProps(date),\n ...getYearControlProps?.(date),\n })}\n __setDateRef={setDateRef}\n __setLevelRef={setLevelRef}\n __stopPropagation={__stopPropagation}\n attributes={attributes}\n {...(!presets ? { className, style } : {})}\n />\n );\n\n if (!presets) {\n return calendar;\n }\n\n const handlePresetSelect = (\n val: DateStringValue \| null \| [DateStringValue \| null, DateStringValue \| null]\n ) => {\n const _val = Array.isArray(val) ? val[0] : val;\n if (_val !== undefined) {\n setDateRef.current?.(_val);\n setLevelRef.current?.('decade');\n __onPresetSelect ? __onPresetSelect(_val) : setValue(val);\n }\n };\n\n const presetButtons = presets.map((preset, index) => (\n <UnstyledButton\n key={index}\n {...getStyles('presetButton')}\n onClick={() => handlePresetSelect(preset.value)}\n onMouseDown={(event) => event.preventDefault()}\n data-mantine-stop-propagation={__stopPropagation \|\| undefined}\n >\n {preset.label}\n </UnstyledButton>\n ));\n\n return (\n <Box {...getStyles('yearPickerRoot')} size={size} {...others}>\n <div {...getStyles('presetsList')}>{presetButtons}</div>\n {calendar}\n </Box>\n );\n}) as any;\n\nYearPicker.classes = { ...Calendar.classes, ...classes };\nYearPicker.varsResolver = varsResolver;\nYearPicker.displayName = '@mantine/dates/YearPicker';\n\nexport namespace YearPicker {\n export type Props<Type extends DatePickerType = 'default'> = YearPickerProps<Type>;\n export type BaseProps = YearPickerBaseProps;\n export type StylesNames = YearPickerStylesNames;\n export type Factory = YearPickerFactory;\n}\n"],"mappings":";;;;;;;;;;AAoFA,MAAM,gBAAA,GAAA,cAAA,qBAAsD,GAAG,EAAE,YAAY,EAC3E,gBAAgB,EACd,uBAAA,GAAA,cAAA,aAAkC,KAAK,EACxC,EACF,EAAE;AAEH,MAAM,eAAe,EACnB,MAAM,WACP;AAQD,MAAa,cAAA,GAAA,cAAA,UAA8D,WAAW;CACpF,MAAM,SAAA,GAAA,cAAA,UAAiB,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,QACA,MACA,MACA,cACA,OACA,UACA,kBACA,qBACA,wBACA,eACA,cACA,cACA,0BACA,kBACA,mBACA,SACA,WACA,OACA,UACA,MACA,YACA,GAAG,SACD;CAEJ,MAAM,EAAE,eAAe,WAAWA,mCAAAA,kBAAkB,KAAK;CACzD,MAAM,cAAA,GAAA,MAAA,QAAwD,KAAK;CACnE,MAAM,eAAA,GAAA,MAAA,QAA8D,KAAK;CAEzE,MAAM,aAAA,GAAA,cAAA,WAAyC;EAC7C,MAAM,oBAAoB;EAC1B,SAAA,0BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc,UAAU,mBAAmB,KAAA;EAC3C;EACA;EACD,CAAC;CAEF,MAAM,EAAE,cAAc,kBAAkB,qBAAqB,iBAAiB,aAC5EC,wBAAAA,cAAc;EACN;EACN,OAAO;EACP;EACA;EACA;EACA;EACU;EACV;EACD,CAAC;CAEJ,MAAM,EAAE,oBAAoB,oBAAA,GAAA,cAAA,sBAA2D;EACrF;EACA;EACA;EACD,CAAC;CAEF,MAAM,WACJ,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD;EACE,YAAY;EACZ,QAAQ;EACF;EACN,GAAI;EACJ,GAAK,CAAC,UAAU,SAAS,EAAE;EAC3B,UAAS;EACT,0BAA0B,4BAA4B;EACtD,kBAAkB,oBAAoB;EACtC,cAAc;EACd,mBAAmB,QAAQ,SAAS,oBAAoB,KAAK;EAC7D,eAAe,SAAS;AACtB,gBAAa,KAAK;AAClB,kBAAe,KAAK;;EAEtB,sBAAsB,UAAU;GAC9B,GAAG,gBAAgB,KAAK;GACxB,GAAG,sBAAsB,KAAK;GAC/B;EACD,cAAc;EACd,eAAe;EACI;EACP;EACZ,GAAK,CAAC,UAAU;GAAE;GAAW;GAAO,GAAG,EAAE;EACzC,CAAA;AAGJ,KAAI,CAAC,QACH,QAAO;CAGT,MAAM,sBACJ,QACG;EACH,MAAM,OAAO,MAAM,QAAQ,IAAI,GAAG,IAAI,KAAK;AAC3C,MAAI,SAAS,KAAA,GAAW;AACtB,cAAW,UAAU,KAAK;AAC1B,eAAY,UAAU,SAAS;AAC/B,sBAAmB,iBAAiB,KAAK,GAAG,SAAS,IAAI;;;CAI7D,MAAM,gBAAgB,QAAQ,KAAK,QAAQ,UACzC,iBAAA,GAAA,kBAAA,KAACC,cAAAA,gBAAD;EAEE,GAAI,UAAU,eAAe;EAC7B,eAAe,mBAAmB,OAAO,MAAM;EAC/C,cAAc,UAAU,MAAM,gBAAgB;EAC9C,iCAA+B,qBAAqB,KAAA;YAEnD,OAAO;EACO,EAPV,MAOU,CACjB;AAEF,QACE,iBAAA,GAAA,kBAAA,MAACC,cAAAA,KAAD;EAAK,GAAI,UAAU,iBAAiB;EAAQ;EAAM,GAAI;YAAtD,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,GAAI,UAAU,cAAc;aAAG;GAAoB,CAAA,EACvD,SACG;;EAER;AAEF,WAAW,UAAU;CAAE,GAAGF,iBAAAA,SAAS;CAAS,GAAGG,0BAAAA;CAAS;AACxD,WAAW,eAAe;AAC1B,WAAW,cAAc"}

package/cjs/components/YearPicker/YearPicker.module.cjs ADDED Viewed

@@ -0,0 +1,11 @@
+"use client";
+//#region packages/@mantine/dates/src/components/YearPicker/YearPicker.module.css
+var YearPicker_module_default = {
+	"yearPickerRoot": "m_d01e596f",
+	"presetsList": "m_52a6b4b0",
+	"presetButton": "m_b0d93233"
+};
+//#endregion
+exports.default = YearPicker_module_default;
+//# sourceMappingURL=YearPicker.module.cjs.map

package/cjs/components/YearPicker/YearPicker.module.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"YearPicker.module.cjs","names":[],"sources":["../../../src/components/YearPicker/YearPicker.module.css"],"sourcesContent":[".yearPickerRoot {\n display: flex;\n font-size: var(--preset-font-size);\n}\n\n.presetsList {\n display: flex;\n flex-direction: column;\n border-inline-end: 1px solid;\n padding-inline-end: 0.5em;\n margin-inline-end: 0.5em;\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-5);\n }\n}\n\n.presetButton {\n padding: 0.52em 0.8em;\n border-radius: var(--mantine-radius-default);\n font-size: var(--preset-font-size);\n white-space: nowrap;\n\n @mixin hover {\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-5);\n }\n }\n}\n"],"mappings":""}

package/cjs/components/YearPickerInput/YearPickerInput.cjs CHANGED Viewed

@@ -18,7 +18,7 @@ const defaultProps = {
 };
 const YearPickerInput = (0, _mantine_core.factory)((_props) => {
 	const props = (0, _mantine_core.useProps)("YearPickerInput", defaultProps, _props);
-	const { type, value, defaultValue, onChange, valueFormat, labelSeparator, locale, classNames, styles, unstyled, closeOnChange, size, variant, dropdownType, sortDates, minDate, maxDate, vars, valueFormatter, attributes, ...rest } = props;
+	const { type, value, defaultValue, onChange, valueFormat, labelSeparator, locale, classNames, styles, unstyled, closeOnChange, size, variant, dropdownType, sortDates, minDate, maxDate, vars, valueFormatter, presets, attributes, ...rest } = props;
 	const { resolvedClassNames, resolvedStyles } = (0, _mantine_core.useResolvedStylesApi)({
 		classNames,
 		styles,
@@ -76,6 +76,7 @@ const YearPickerInput = (0, _mantine_core.factory)((_props) => {
 			__stopPropagation: dropdownType === "popover",
 			minDate,
 			maxDate,
+			presets,
 			attributes
 		})
 	});

package/cjs/components/YearPickerInput/YearPickerInput.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"YearPickerInput.cjs","names":["pickCalendarProps","useDatesInput","PickerInputBase","YearPicker","getDefaultClampedDate"],"sources":["../../../src/components/YearPickerInput/YearPickerInput.tsx"],"sourcesContent":["import {\n __InputStylesNames,\n BoxProps,\n factory,\n Factory,\n InputVariant,\n MantineComponentStaticProperties,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '@mantine/core';\nimport { useDatesInput } from '../../hooks';\nimport { DatePickerType } from '../../types';\nimport { getDefaultClampedDate } from '../../utils';\nimport { pickCalendarProps } from '../Calendar';\nimport { DateInputSharedProps, PickerInputBase } from '../PickerInputBase';\nimport { YearPicker, YearPickerBaseProps, YearPickerStylesNames } from '../YearPicker';\n\nexport type YearPickerInputStylesNames = __InputStylesNames \| 'placeholder' \| YearPickerStylesNames;\n\nexport interface YearPickerInputProps<Type extends DatePickerType = 'default'>\n extends\n BoxProps,\n DateInputSharedProps,\n YearPickerBaseProps<Type>,\n StylesApiProps<YearPickerInputFactory> {\n /** `dayjs` format to display input value @default \"YYYY\" */\n valueFormat?: string;\n}\n\nexport type YearPickerInputFactory = Factory<{\n props: YearPickerInputProps;\n ref: HTMLButtonElement;\n stylesNames: YearPickerInputStylesNames;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n type: 'default',\n size: 'sm',\n valueFormat: 'YYYY',\n closeOnChange: true,\n sortDates: true,\n dropdownType: 'popover',\n} satisfies Partial<YearPickerInputProps>;\n\ntype YearPickerInputComponent = (<Type extends DatePickerType = 'default'>(\n props: YearPickerInputProps<Type> & { ref?: React.Ref<HTMLButtonElement> }\n) => React.JSX.Element) & {\n displayName?: string;\n} & MantineComponentStaticProperties<YearPickerInputFactory>;\n\nexport const YearPickerInput: YearPickerInputComponent = factory<YearPickerInputFactory>(\n (_props) => {\n const props = useProps('YearPickerInput', defaultProps, _props);\n const {\n type,\n value,\n defaultValue,\n onChange,\n valueFormat,\n labelSeparator,\n locale,\n classNames,\n styles,\n unstyled,\n closeOnChange,\n size,\n variant,\n dropdownType,\n sortDates,\n minDate,\n maxDate,\n vars,\n valueFormatter,\n attributes,\n ...rest\n } = props;\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<YearPickerInputFactory>({\n classNames,\n styles,\n props,\n });\n\n const { calendarProps, others } = pickCalendarProps(rest);\n\n const {\n _value,\n setValue,\n formattedValue,\n dropdownHandlers,\n dropdownOpened,\n onClear,\n shouldClear,\n } = useDatesInput({\n type: type as any,\n value,\n defaultValue,\n onChange: onChange as any,\n locale,\n format: valueFormat,\n labelSeparator,\n closeOnChange,\n sortDates,\n valueFormatter,\n });\n\n return (\n <PickerInputBase\n formattedValue={formattedValue}\n dropdownOpened={dropdownOpened}\n dropdownHandlers={dropdownHandlers}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n onClear={onClear}\n shouldClear={shouldClear}\n value={_value}\n size={size}\n variant={variant}\n dropdownType={dropdownType}\n {...others}\n type={type as any}\n __staticSelector=\"YearPickerInput\"\n attributes={attributes}\n >\n <YearPicker\n {...calendarProps}\n size={size}\n variant={variant}\n type={type}\n value={_value}\n defaultDate={\n calendarProps.defaultDate \|\|\n (Array.isArray(_value)\n ? _value[0] \|\| getDefaultClampedDate({ maxDate, minDate })\n : _value \|\| getDefaultClampedDate({ maxDate, minDate }))\n }\n onChange={setValue}\n locale={locale}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n __staticSelector=\"YearPickerInput\"\n __stopPropagation={dropdownType === 'popover'}\n minDate={minDate}\n maxDate={maxDate}\n attributes={attributes}\n />\n </PickerInputBase>\n );\n }\n) as any;\n\nYearPickerInput.classes = { ...PickerInputBase.classes, ...YearPicker.classes };\nYearPickerInput.displayName = '@mantine/dates/YearPickerInput';\n\nexport namespace YearPickerInput {\n export type Props<Type extends DatePickerType = 'default'> = YearPickerInputProps<Type>;\n export type StylesNames = YearPickerInputStylesNames;\n export type Factory = YearPickerInputFactory;\n}\n"],"mappings":";;;;;;;;;;AAqCA,MAAM,eAAe;CACnB,MAAM;CACN,MAAM;CACN,aAAa;CACb,eAAe;CACf,WAAW;CACX,cAAc;CACf;AAQD,MAAa,mBAAA,GAAA,cAAA,UACV,WAAW;CACV,MAAM,SAAA,GAAA,cAAA,UAAiB,mBAAmB,cAAc,OAAO;CAC/D,MAAM,EACJ,MACA,OACA,cACA,UACA,aACA,gBACA,QACA,YACA,QACA,UACA,eACA,MACA,SACA,cACA,WACA,SACA,SACA,MACA,gBACA,YACA,GAAG,SACD;CAEJ,MAAM,EAAE,oBAAoB,oBAAA,GAAA,cAAA,sBAAgE;EAC1F;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,eAAe,WAAWA,mCAAAA,kBAAkB,KAAK;CAEzD,MAAM,EACJ,QACA,UACA,gBACA,kBACA,gBACA,SACA,gBACEC,wBAAAA,cAAc;EACV;EACN;EACA;EACU;EACV;EACA,QAAQ;EACR;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,iBAAD;EACkB;EACA;EACE;EAClB,YAAY;EACZ,QAAQ;EACE;EACD;EACI;EACb,OAAO;EACD;EACG;EACK;EACd,GAAI;EACE;EACN,kBAAiB;EACL;YAEZ,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;GACE,GAAI;GACE;GACG;GACH;GACN,OAAO;GACP,aACE,cAAc,gBACb,MAAM,QAAQ,OAAO,GAClB,OAAO,MAAMC,iCAAAA,sBAAsB;IAAE;IAAS;IAAS,CAAC,GACxD,UAAUA,iCAAAA,sBAAsB;IAAE;IAAS;IAAS,CAAC;GAE3D,UAAU;GACF;GACR,YAAY;GACZ,QAAQ;GACE;GACV,kBAAiB;GACjB,mBAAmB,iBAAiB;GAC3B;GACA;GACG;GACZ,CAAA;EACc,CAAA;EAGvB;AAED,gBAAgB,UAAU;CAAE,GAAGF,wBAAAA,gBAAgB;CAAS,GAAGC,mBAAAA,WAAW;CAAS;AAC/E,gBAAgB,cAAc"}
1	+ {"version":3,"file":"YearPickerInput.cjs","names":["pickCalendarProps","useDatesInput","PickerInputBase","YearPicker","getDefaultClampedDate"],"sources":["../../../src/components/YearPickerInput/YearPickerInput.tsx"],"sourcesContent":["import {\n __InputStylesNames,\n BoxProps,\n factory,\n Factory,\n InputVariant,\n MantineComponentStaticProperties,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '@mantine/core';\nimport { useDatesInput } from '../../hooks';\nimport { DatePickerType } from '../../types';\nimport { getDefaultClampedDate } from '../../utils';\nimport { pickCalendarProps } from '../Calendar';\nimport { DateInputSharedProps, PickerInputBase } from '../PickerInputBase';\nimport { YearPicker, YearPickerBaseProps, YearPickerStylesNames } from '../YearPicker';\n\nexport type YearPickerInputStylesNames = __InputStylesNames \| 'placeholder' \| YearPickerStylesNames;\n\nexport interface YearPickerInputProps<Type extends DatePickerType = 'default'>\n extends\n BoxProps,\n DateInputSharedProps,\n YearPickerBaseProps<Type>,\n StylesApiProps<YearPickerInputFactory> {\n /** `dayjs` format to display input value @default \"YYYY\" */\n valueFormat?: string;\n}\n\nexport type YearPickerInputFactory = Factory<{\n props: YearPickerInputProps;\n ref: HTMLButtonElement;\n stylesNames: YearPickerInputStylesNames;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n type: 'default',\n size: 'sm',\n valueFormat: 'YYYY',\n closeOnChange: true,\n sortDates: true,\n dropdownType: 'popover',\n} satisfies Partial<YearPickerInputProps>;\n\ntype YearPickerInputComponent = (<Type extends DatePickerType = 'default'>(\n props: YearPickerInputProps<Type> & { ref?: React.Ref<HTMLButtonElement> }\n) => React.JSX.Element) & {\n displayName?: string;\n} & MantineComponentStaticProperties<YearPickerInputFactory>;\n\nexport const YearPickerInput: YearPickerInputComponent = factory<YearPickerInputFactory>(\n (_props) => {\n const props = useProps('YearPickerInput', defaultProps, _props);\n const {\n type,\n value,\n defaultValue,\n onChange,\n valueFormat,\n labelSeparator,\n locale,\n classNames,\n styles,\n unstyled,\n closeOnChange,\n size,\n variant,\n dropdownType,\n sortDates,\n minDate,\n maxDate,\n vars,\n valueFormatter,\n presets,\n attributes,\n ...rest\n } = props;\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<YearPickerInputFactory>({\n classNames,\n styles,\n props,\n });\n\n const { calendarProps, others } = pickCalendarProps(rest);\n\n const {\n _value,\n setValue,\n formattedValue,\n dropdownHandlers,\n dropdownOpened,\n onClear,\n shouldClear,\n } = useDatesInput({\n type: type as any,\n value,\n defaultValue,\n onChange: onChange as any,\n locale,\n format: valueFormat,\n labelSeparator,\n closeOnChange,\n sortDates,\n valueFormatter,\n });\n\n return (\n <PickerInputBase\n formattedValue={formattedValue}\n dropdownOpened={dropdownOpened}\n dropdownHandlers={dropdownHandlers}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n onClear={onClear}\n shouldClear={shouldClear}\n value={_value}\n size={size}\n variant={variant}\n dropdownType={dropdownType}\n {...others}\n type={type as any}\n __staticSelector=\"YearPickerInput\"\n attributes={attributes}\n >\n <YearPicker\n {...calendarProps}\n size={size}\n variant={variant}\n type={type}\n value={_value}\n defaultDate={\n calendarProps.defaultDate \|\|\n (Array.isArray(_value)\n ? _value[0] \|\| getDefaultClampedDate({ maxDate, minDate })\n : _value \|\| getDefaultClampedDate({ maxDate, minDate }))\n }\n onChange={setValue}\n locale={locale}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n __staticSelector=\"YearPickerInput\"\n __stopPropagation={dropdownType === 'popover'}\n minDate={minDate}\n maxDate={maxDate}\n presets={presets}\n attributes={attributes}\n />\n </PickerInputBase>\n );\n }\n) as any;\n\nYearPickerInput.classes = { ...PickerInputBase.classes, ...YearPicker.classes };\nYearPickerInput.displayName = '@mantine/dates/YearPickerInput';\n\nexport namespace YearPickerInput {\n export type Props<Type extends DatePickerType = 'default'> = YearPickerInputProps<Type>;\n export type StylesNames = YearPickerInputStylesNames;\n export type Factory = YearPickerInputFactory;\n}\n"],"mappings":";;;;;;;;;;AAqCA,MAAM,eAAe;CACnB,MAAM;CACN,MAAM;CACN,aAAa;CACb,eAAe;CACf,WAAW;CACX,cAAc;CACf;AAQD,MAAa,mBAAA,GAAA,cAAA,UACV,WAAW;CACV,MAAM,SAAA,GAAA,cAAA,UAAiB,mBAAmB,cAAc,OAAO;CAC/D,MAAM,EACJ,MACA,OACA,cACA,UACA,aACA,gBACA,QACA,YACA,QACA,UACA,eACA,MACA,SACA,cACA,WACA,SACA,SACA,MACA,gBACA,SACA,YACA,GAAG,SACD;CAEJ,MAAM,EAAE,oBAAoB,oBAAA,GAAA,cAAA,sBAAgE;EAC1F;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,eAAe,WAAWA,mCAAAA,kBAAkB,KAAK;CAEzD,MAAM,EACJ,QACA,UACA,gBACA,kBACA,gBACA,SACA,gBACEC,wBAAAA,cAAc;EACV;EACN;EACA;EACU;EACV;EACA,QAAQ;EACR;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,iBAAD;EACkB;EACA;EACE;EAClB,YAAY;EACZ,QAAQ;EACE;EACD;EACI;EACb,OAAO;EACD;EACG;EACK;EACd,GAAI;EACE;EACN,kBAAiB;EACL;YAEZ,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;GACE,GAAI;GACE;GACG;GACH;GACN,OAAO;GACP,aACE,cAAc,gBACb,MAAM,QAAQ,OAAO,GAClB,OAAO,MAAMC,iCAAAA,sBAAsB;IAAE;IAAS;IAAS,CAAC,GACxD,UAAUA,iCAAAA,sBAAsB;IAAE;IAAS;IAAS,CAAC;GAE3D,UAAU;GACF;GACR,YAAY;GACZ,QAAQ;GACE;GACV,kBAAiB;GACjB,mBAAmB,iBAAiB;GAC3B;GACA;GACA;GACG;GACZ,CAAA;EACc,CAAA;EAGvB;AAED,gBAAgB,UAAU;CAAE,GAAGF,wBAAAA,gBAAgB;CAAS,GAAGC,mBAAAA,WAAW;CAAS;AAC/E,gBAAgB,cAAc"}

package/esm/components/DateTimePicker/DateTimePicker.mjs CHANGED Viewed

@@ -38,7 +38,8 @@ const DateTimePicker = factory((_props) => {
 		styles,
 		props
 	});
-	const _valueFormat = valueFormat || (withSeconds ? "DD/MM/YYYY HH:mm:ss" : "DD/MM/YYYY HH:mm");
+	const _withSeconds = withSeconds || timePickerProps?.withSeconds;
+	const _valueFormat = valueFormat || (_withSeconds ? "DD/MM/YYYY HH:mm:ss" : "DD/MM/YYYY HH:mm");
 	const timePickerRef = useRef(null);
 	const timePickerRefMerged = useMergedRef(timePickerRef, timePickerProps?.hoursRef);
 	const { calendarProps: { allowSingleDateInRange, ...calendarProps }, others } = pickCalendarProps(rest);
@@ -51,7 +52,7 @@ const DateTimePicker = factory((_props) => {
 		withTime: true
 	});
 	const _defaultDate = defaultDate || _value;
-	const formatTime = (dateValue) => dateValue ? dayjs(dateValue).format(withSeconds ? "HH:mm:ss" : "HH:mm") : "";
+	const formatTime = (dateValue) => dateValue ? dayjs(dateValue).format(_withSeconds ? "HH:mm:ss" : "HH:mm") : "";
 	const [timeValue, setTimeValue] = useState(defaultTimeValue || formatTime(_value));
 	const [currentLevel, setCurrentLevel] = useState(level || defaultLevel || "month");
 	const [dropdownOpened, dropdownHandlers] = useDisclosure(false);

package/esm/components/DateTimePicker/DateTimePicker.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateTimePicker.mjs","names":["classes"],"sources":["../../../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useRef, useState } from 'react';\nimport {\n ActionIcon,\n ActionIconProps,\n BoxProps,\n CheckIcon,\n factory,\n Factory,\n InputVariant,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { useDidUpdate, useDisclosure, useMergedRef } from '@mantine/hooks';\nimport { useUncontrolledDates } from '../../hooks';\nimport { CalendarLevel, DateStringValue, DateValue } from '../../types';\nimport { assignTime, clampDate, getDefaultClampedDate } from '../../utils';\nimport {\n CalendarBaseProps,\n CalendarSettings,\n CalendarStylesNames,\n pickCalendarProps,\n} from '../Calendar';\nimport { DatePicker, DatePickerPreset } from '../DatePicker';\nimport { useDatesContext } from '../DatesProvider';\nimport {\n DateInputSharedProps,\n PickerInputBase,\n PickerInputBaseStylesNames,\n} from '../PickerInputBase';\nimport { TimePicker, TimePickerProps } from '../TimePicker/TimePicker';\nimport { getMaxTime, getMinTime } from './get-min-max-time/get-min-max-time';\nimport classes from './DateTimePicker.module.css';\n\nexport type DateTimePickerStylesNames =\n \| 'timeWrapper'\n \| 'timeInput'\n \| 'submitButton'\n \| 'placeholder'\n \| PickerInputBaseStylesNames\n \| CalendarStylesNames;\n\nexport interface DateTimePickerProps\n extends\n BoxProps,\n Omit<\n DateInputSharedProps,\n 'classNames' \| 'styles' \| 'closeOnChange' \| 'size' \| 'valueFormatter'\n >,\n CalendarBaseProps,\n Omit<CalendarSettings, 'onYearMouseEnter' \| 'onMonthMouseEnter' \| 'hasNextLevel'>,\n StylesApiProps<DateTimePickerFactory> {\n /** `dayjs` format for input value @default \"DD/MM/YYYY HH:mm\" /\n valueFormat?: string;\n\n /* Controlled component value /\n value?: DateValue;\n\n /* Uncontrolled component default value /\n defaultValue?: DateValue;\n\n /* Called when value changes /\n onChange?: (value: DateStringValue \| null) => void;\n\n /* Default time value in HH:mm` or `HH:mm:ss` format. Assigned to time when date is selected. /\n defaultTimeValue?: string;\n\n /* Props passed down to `TimePicker` component /\n timePickerProps?: Omit<TimePickerProps, 'defaultValue' \| 'value'>;\n\n /* Props passed down to the submit button /\n submitButtonProps?: ActionIconProps & React.ComponentProps<'button'>;\n\n /* Determines whether the seconds input should be displayed @default false /\n withSeconds?: boolean;\n\n /* Max level that user can go up to @default 'decade' /\n maxLevel?: CalendarLevel;\n\n /* Presets values */\n presets?: DatePickerPreset<'default'>[];\n}\n\nexport type DateTimePickerFactory = Factory<{\n props: DateTimePickerProps;\n ref: HTMLButtonElement;\n stylesNames: DateTimePickerStylesNames;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n dropdownType: 'popover',\n size: 'sm',\n} satisfies Partial<DateTimePickerProps>;\n\nexport const DateTimePicker = factory<DateTimePickerFactory>((_props) => {\n const props = useProps('DateTimePicker', defaultProps, _props);\n const {\n value,\n defaultValue,\n onChange,\n valueFormat,\n locale,\n classNames,\n styles,\n unstyled,\n timePickerProps,\n submitButtonProps,\n withSeconds,\n level,\n defaultLevel,\n size,\n variant,\n dropdownType,\n vars,\n minDate,\n maxDate,\n defaultDate,\n defaultTimeValue,\n presets,\n attributes,\n onDropdownClose,\n ...rest\n } = props;\n\n const getStyles = useStyles<DateTimePickerFactory>({\n name: 'DateTimePicker',\n classes,\n props,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<DateTimePickerFactory>({\n classNames,\n styles,\n props,\n });\n\n const _valueFormat = valueFormat \|\| (withSeconds ? 'DD/MM/YYYY HH:mm:ss' : 'DD/MM/YYYY HH:mm');\n\n const timePickerRef = useRef<HTMLInputElement>(null);\n const timePickerRefMerged = useMergedRef(timePickerRef, timePickerProps?.hoursRef);\n\n const {\n calendarProps: { allowSingleDateInRange, ...calendarProps },\n others,\n } = pickCalendarProps(rest);\n\n const ctx = useDatesContext();\n const [_value, setValue] = useUncontrolledDates({\n type: 'default',\n value,\n defaultValue,\n onChange,\n withTime: true,\n });\n\n const _defaultDate = defaultDate \|\| _value;\n\n const formatTime = (dateValue: DateStringValue) =>\n dateValue ? dayjs(dateValue).format(withSeconds ? 'HH:mm:ss' : 'HH:mm') : '';\n\n const [timeValue, setTimeValue] = useState(defaultTimeValue \|\| formatTime(_value));\n const [currentLevel, setCurrentLevel] = useState(level \|\| defaultLevel \|\| 'month');\n\n const [dropdownOpened, dropdownHandlers] = useDisclosure(false);\n const formattedValue = _value\n ? dayjs(_value).locale(ctx.getLocale(locale)).format(_valueFormat)\n : '';\n\n const handleTimeChange = (timeString: string) => {\n timePickerProps?.onChange?.(timeString);\n setTimeValue(timeString);\n\n if (timeString) {\n setValue(assignTime(_value, timeString));\n }\n };\n\n const handleDateChange = (date: DateValue) => {\n if (date) {\n setValue(assignTime(clampDate(minDate, maxDate, date), timeValue \|\| defaultTimeValue \|\| ''));\n }\n timePickerRef.current?.focus();\n };\n\n const handleTimeInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n dropdownHandlers.close();\n }\n };\n\n useDidUpdate(() => {\n if (!dropdownOpened) {\n setTimeValue(formatTime(_value));\n }\n }, [_value, dropdownOpened]);\n\n useDidUpdate(() => {\n if (dropdownOpened) {\n setCurrentLevel('month');\n }\n }, [dropdownOpened]);\n\n const __stopPropagation = dropdownType === 'popover';\n\n const handleDropdownClose = () => {\n const clamped = clampDate(minDate, maxDate, _value);\n if (_value && _value !== clamped) {\n setValue(clampDate(minDate, maxDate, _value));\n }\n onDropdownClose?.();\n };\n\n return (\n <PickerInputBase\n formattedValue={formattedValue}\n dropdownOpened={!rest.disabled ? dropdownOpened : false}\n dropdownHandlers={dropdownHandlers}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n onClear={() => setValue(null)}\n shouldClear={!!_value}\n value={_value}\n size={size}\n variant={variant}\n dropdownType={dropdownType}\n {...others}\n type=\"default\"\n __staticSelector=\"DateTimePicker\"\n onDropdownClose={handleDropdownClose}\n withTime\n attributes={attributes}\n >\n <DatePicker\n {...calendarProps}\n maxDate={maxDate}\n minDate={minDate}\n size={size}\n variant={variant}\n type=\"default\"\n value={_value}\n defaultDate={_defaultDate \|\| getDefaultClampedDate({ maxDate, minDate })}\n onChange={handleDateChange}\n locale={locale}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n __staticSelector=\"DateTimePicker\"\n __stopPropagation={__stopPropagation}\n level={level}\n defaultLevel={defaultLevel}\n onLevelChange={(_level) => {\n setCurrentLevel(_level);\n calendarProps.onLevelChange?.(_level);\n }}\n presets={presets}\n __onPresetSelect={(val) => {\n setValue(val);\n val && setTimeValue(formatTime(val));\n }}\n attributes={attributes}\n />\n\n {currentLevel === 'month' && (\n <div {...getStyles('timeWrapper')}>\n <TimePicker\n value={timeValue}\n withSeconds={withSeconds}\n unstyled={unstyled}\n min={getMinTime({ minDate, value: _value })}\n max={getMaxTime({ maxDate, value: _value })}\n {...timePickerProps}\n {...getStyles('timeInput', {\n className: timePickerProps?.className,\n style: timePickerProps?.style,\n })}\n onChange={handleTimeChange}\n onKeyDown={handleTimeInputKeyDown}\n size={size}\n data-mantine-stop-propagation={__stopPropagation \|\| undefined}\n hoursRef={timePickerRefMerged}\n attributes={attributes}\n />\n\n <ActionIcon\n variant=\"default\"\n size={`input-${size \|\| 'sm'}`}\n {...getStyles('submitButton', {\n className: submitButtonProps?.className,\n style: submitButtonProps?.style,\n })}\n unstyled={unstyled}\n data-mantine-stop-propagation={__stopPropagation \|\| undefined}\n // oxlint-disable-next-line react/no-children-prop\n children={<CheckIcon size=\"30%\" />}\n {...submitButtonProps}\n onClick={(event) => {\n submitButtonProps?.onClick?.(event);\n dropdownHandlers.close();\n handleDropdownClose();\n }}\n />\n </div>\n )}\n </PickerInputBase>\n );\n});\n\nDateTimePicker.classes = { ...classes, ...PickerInputBase.classes, ...DatePicker.classes };\nDateTimePicker.displayName = '@mantine/dates/DateTimePicker';\n\nexport namespace DateTimePicker {\n export type Props = DateTimePickerProps;\n export type StylesNames = DateTimePickerStylesNames;\n export type Factory = DateTimePickerFactory;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"DateTimePicker.mjs","names":["classes"],"sources":["../../../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useRef, useState } from 'react';\nimport {\n ActionIcon,\n ActionIconProps,\n BoxProps,\n CheckIcon,\n factory,\n Factory,\n InputVariant,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { useDidUpdate, useDisclosure, useMergedRef } from '@mantine/hooks';\nimport { useUncontrolledDates } from '../../hooks';\nimport { CalendarLevel, DateStringValue, DateValue } from '../../types';\nimport { assignTime, clampDate, getDefaultClampedDate } from '../../utils';\nimport {\n CalendarBaseProps,\n CalendarSettings,\n CalendarStylesNames,\n pickCalendarProps,\n} from '../Calendar';\nimport { DatePicker, DatePickerPreset } from '../DatePicker';\nimport { useDatesContext } from '../DatesProvider';\nimport {\n DateInputSharedProps,\n PickerInputBase,\n PickerInputBaseStylesNames,\n} from '../PickerInputBase';\nimport { TimePicker, TimePickerProps } from '../TimePicker/TimePicker';\nimport { getMaxTime, getMinTime } from './get-min-max-time/get-min-max-time';\nimport classes from './DateTimePicker.module.css';\n\nexport type DateTimePickerStylesNames =\n \| 'timeWrapper'\n \| 'timeInput'\n \| 'submitButton'\n \| 'placeholder'\n \| PickerInputBaseStylesNames\n \| CalendarStylesNames;\n\nexport interface DateTimePickerProps\n extends\n BoxProps,\n Omit<\n DateInputSharedProps,\n 'classNames' \| 'styles' \| 'closeOnChange' \| 'size' \| 'valueFormatter'\n >,\n CalendarBaseProps,\n Omit<CalendarSettings, 'onYearMouseEnter' \| 'onMonthMouseEnter' \| 'hasNextLevel'>,\n StylesApiProps<DateTimePickerFactory> {\n /** `dayjs` format for input value @default \"DD/MM/YYYY HH:mm\" /\n valueFormat?: string;\n\n /* Controlled component value /\n value?: DateValue;\n\n /* Uncontrolled component default value /\n defaultValue?: DateValue;\n\n /* Called when value changes /\n onChange?: (value: DateStringValue \| null) => void;\n\n /* Default time value in HH:mm` or `HH:mm:ss` format. Assigned to time when date is selected. /\n defaultTimeValue?: string;\n\n /* Props passed down to `TimePicker` component /\n timePickerProps?: Omit<TimePickerProps, 'defaultValue' \| 'value'>;\n\n /* Props passed down to the submit button /\n submitButtonProps?: ActionIconProps & React.ComponentProps<'button'>;\n\n /* Determines whether the seconds input should be displayed @default false /\n withSeconds?: boolean;\n\n /* Max level that user can go up to @default 'decade' /\n maxLevel?: CalendarLevel;\n\n /* Presets values */\n presets?: DatePickerPreset<'default'>[];\n}\n\nexport type DateTimePickerFactory = Factory<{\n props: DateTimePickerProps;\n ref: HTMLButtonElement;\n stylesNames: DateTimePickerStylesNames;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n dropdownType: 'popover',\n size: 'sm',\n} satisfies Partial<DateTimePickerProps>;\n\nexport const DateTimePicker = factory<DateTimePickerFactory>((_props) => {\n const props = useProps('DateTimePicker', defaultProps, _props);\n const {\n value,\n defaultValue,\n onChange,\n valueFormat,\n locale,\n classNames,\n styles,\n unstyled,\n timePickerProps,\n submitButtonProps,\n withSeconds,\n level,\n defaultLevel,\n size,\n variant,\n dropdownType,\n vars,\n minDate,\n maxDate,\n defaultDate,\n defaultTimeValue,\n presets,\n attributes,\n onDropdownClose,\n ...rest\n } = props;\n\n const getStyles = useStyles<DateTimePickerFactory>({\n name: 'DateTimePicker',\n classes,\n props,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<DateTimePickerFactory>({\n classNames,\n styles,\n props,\n });\n\n const _withSeconds = withSeconds \|\| timePickerProps?.withSeconds;\n const _valueFormat = valueFormat \|\| (_withSeconds ? 'DD/MM/YYYY HH:mm:ss' : 'DD/MM/YYYY HH:mm');\n\n const timePickerRef = useRef<HTMLInputElement>(null);\n const timePickerRefMerged = useMergedRef(timePickerRef, timePickerProps?.hoursRef);\n\n const {\n calendarProps: { allowSingleDateInRange, ...calendarProps },\n others,\n } = pickCalendarProps(rest);\n\n const ctx = useDatesContext();\n const [_value, setValue] = useUncontrolledDates({\n type: 'default',\n value,\n defaultValue,\n onChange,\n withTime: true,\n });\n\n const _defaultDate = defaultDate \|\| _value;\n\n const formatTime = (dateValue: DateStringValue) =>\n dateValue ? dayjs(dateValue).format(_withSeconds ? 'HH:mm:ss' : 'HH:mm') : '';\n\n const [timeValue, setTimeValue] = useState(defaultTimeValue \|\| formatTime(_value));\n const [currentLevel, setCurrentLevel] = useState(level \|\| defaultLevel \|\| 'month');\n\n const [dropdownOpened, dropdownHandlers] = useDisclosure(false);\n const formattedValue = _value\n ? dayjs(_value).locale(ctx.getLocale(locale)).format(_valueFormat)\n : '';\n\n const handleTimeChange = (timeString: string) => {\n timePickerProps?.onChange?.(timeString);\n setTimeValue(timeString);\n\n if (timeString) {\n setValue(assignTime(_value, timeString));\n }\n };\n\n const handleDateChange = (date: DateValue) => {\n if (date) {\n setValue(assignTime(clampDate(minDate, maxDate, date), timeValue \|\| defaultTimeValue \|\| ''));\n }\n timePickerRef.current?.focus();\n };\n\n const handleTimeInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n dropdownHandlers.close();\n }\n };\n\n useDidUpdate(() => {\n if (!dropdownOpened) {\n setTimeValue(formatTime(_value));\n }\n }, [_value, dropdownOpened]);\n\n useDidUpdate(() => {\n if (dropdownOpened) {\n setCurrentLevel('month');\n }\n }, [dropdownOpened]);\n\n const __stopPropagation = dropdownType === 'popover';\n\n const handleDropdownClose = () => {\n const clamped = clampDate(minDate, maxDate, _value);\n if (_value && _value !== clamped) {\n setValue(clampDate(minDate, maxDate, _value));\n }\n onDropdownClose?.();\n };\n\n return (\n <PickerInputBase\n formattedValue={formattedValue}\n dropdownOpened={!rest.disabled ? dropdownOpened : false}\n dropdownHandlers={dropdownHandlers}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n onClear={() => setValue(null)}\n shouldClear={!!_value}\n value={_value}\n size={size}\n variant={variant}\n dropdownType={dropdownType}\n {...others}\n type=\"default\"\n __staticSelector=\"DateTimePicker\"\n onDropdownClose={handleDropdownClose}\n withTime\n attributes={attributes}\n >\n <DatePicker\n {...calendarProps}\n maxDate={maxDate}\n minDate={minDate}\n size={size}\n variant={variant}\n type=\"default\"\n value={_value}\n defaultDate={_defaultDate \|\| getDefaultClampedDate({ maxDate, minDate })}\n onChange={handleDateChange}\n locale={locale}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n __staticSelector=\"DateTimePicker\"\n __stopPropagation={__stopPropagation}\n level={level}\n defaultLevel={defaultLevel}\n onLevelChange={(_level) => {\n setCurrentLevel(_level);\n calendarProps.onLevelChange?.(_level);\n }}\n presets={presets}\n __onPresetSelect={(val) => {\n setValue(val);\n val && setTimeValue(formatTime(val));\n }}\n attributes={attributes}\n />\n\n {currentLevel === 'month' && (\n <div {...getStyles('timeWrapper')}>\n <TimePicker\n value={timeValue}\n withSeconds={withSeconds}\n unstyled={unstyled}\n min={getMinTime({ minDate, value: _value })}\n max={getMaxTime({ maxDate, value: _value })}\n {...timePickerProps}\n {...getStyles('timeInput', {\n className: timePickerProps?.className,\n style: timePickerProps?.style,\n })}\n onChange={handleTimeChange}\n onKeyDown={handleTimeInputKeyDown}\n size={size}\n data-mantine-stop-propagation={__stopPropagation \|\| undefined}\n hoursRef={timePickerRefMerged}\n attributes={attributes}\n />\n\n <ActionIcon\n variant=\"default\"\n size={`input-${size \|\| 'sm'}`}\n {...getStyles('submitButton', {\n className: submitButtonProps?.className,\n style: submitButtonProps?.style,\n })}\n unstyled={unstyled}\n data-mantine-stop-propagation={__stopPropagation \|\| undefined}\n // oxlint-disable-next-line react/no-children-prop\n children={<CheckIcon size=\"30%\" />}\n {...submitButtonProps}\n onClick={(event) => {\n submitButtonProps?.onClick?.(event);\n dropdownHandlers.close();\n handleDropdownClose();\n }}\n />\n </div>\n )}\n </PickerInputBase>\n );\n});\n\nDateTimePicker.classes = { ...classes, ...PickerInputBase.classes, ...DatePicker.classes };\nDateTimePicker.displayName = '@mantine/dates/DateTimePicker';\n\nexport namespace DateTimePicker {\n export type Props = DateTimePickerProps;\n export type StylesNames = DateTimePickerStylesNames;\n export type Factory = DateTimePickerFactory;\n}\n"],"mappings":"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"}

package/esm/components/MonthPicker/MonthPicker.mjs CHANGED Viewed

@@ -1,14 +1,35 @@
 "use client";
 import { useDatesState } from "../../hooks/use-dates-state/use-dates-state.mjs";
 import { Calendar } from "../Calendar/Calendar.mjs";
-import { jsx } from "react/jsx-runtime";
-import { factory, useProps, useResolvedStylesApi } from "@mantine/core";
+import { pickCalendarProps } from "../Calendar/pick-calendar-levels-props/pick-calendar-levels-props.mjs";
+import MonthPicker_module_default from "./MonthPicker.module.mjs";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, UnstyledButton, createVarsResolver, factory, getFontSize, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
 //#region packages/@mantine/dates/src/components/MonthPicker/MonthPicker.tsx
+const varsResolver = createVarsResolver((_, { size }) => ({ monthPickerRoot: { "--preset-font-size": getFontSize(size) } }));
 const defaultProps = { type: "default" };
 const MonthPicker = factory((_props) => {
 	const props = useProps("MonthPicker", defaultProps, _props);
-	const { classNames, styles, vars, type, defaultValue, value, onChange, __staticSelector, getMonthControlProps, allowSingleDateInRange, allowDeselect, onMouseLeave, onMonthSelect, __updateDateOnMonthSelect, onLevelChange, ...others } = props;
-	const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps } = useDatesState({
+	const { classNames, styles, vars, type, defaultValue, value, onChange, __staticSelector, getMonthControlProps, allowSingleDateInRange, allowDeselect, onMouseLeave, onMonthSelect, __updateDateOnMonthSelect, __onPresetSelect, __stopPropagation, presets, className, style, unstyled, size, attributes, onLevelChange, ...rest } = props;
+	const { calendarProps, others } = pickCalendarProps(rest);
+	const setDateRef = useRef(null);
+	const setLevelRef = useRef(null);
+	const getStyles = useStyles({
+		name: __staticSelector || "MonthPicker",
+		classes: MonthPicker_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		rootSelector: presets ? "monthPickerRoot" : void 0,
+		varsResolver,
+		vars
+	});
+	const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps, setValue } = useDatesState({
 		type,
 		level: "month",
 		allowDeselect,
@@ -23,7 +44,12 @@ const MonthPicker = factory((_props) => {
 		styles,
 		props
 	});
-	return /* @__PURE__ */ jsx(Calendar, {
+	const calendar = /* @__PURE__ */ jsx(Calendar, {
+		classNames: resolvedClassNames,
+		styles: resolvedStyles,
+		size,
+		...calendarProps,
+		...!presets ? others : {},
 		minLevel: "year",
 		__updateDateOnMonthSelect: __updateDateOnMonthSelect ?? false,
 		__staticSelector: __staticSelector || "MonthPicker",
@@ -37,13 +63,47 @@ const MonthPicker = factory((_props) => {
 			...getControlProps(date),
 			...getMonthControlProps?.(date)
 		}),
-		classNames: resolvedClassNames,
-		styles: resolvedStyles,
 		onLevelChange,
-		...others
+		__setDateRef: setDateRef,
+		__setLevelRef: setLevelRef,
+		__stopPropagation,
+		attributes,
+		...!presets ? {
+			className,
+			style
+		} : {}
+	});
+	if (!presets) return calendar;
+	const handlePresetSelect = (val) => {
+		const _val = Array.isArray(val) ? val[0] : val;
+		if (_val !== void 0) {
+			setDateRef.current?.(_val);
+			setLevelRef.current?.("year");
+			__onPresetSelect ? __onPresetSelect(_val) : setValue(val);
+		}
+	};
+	const presetButtons = presets.map((preset, index) => /* @__PURE__ */ jsx(UnstyledButton, {
+		...getStyles("presetButton"),
+		onClick: () => handlePresetSelect(preset.value),
+		onMouseDown: (event) => event.preventDefault(),
+		"data-mantine-stop-propagation": __stopPropagation || void 0,
+		children: preset.label
+	}, index));
+	return /* @__PURE__ */ jsxs(Box, {
+		...getStyles("monthPickerRoot"),
+		size,
+		...others,
+		children: [/* @__PURE__ */ jsx("div", {
+			...getStyles("presetsList"),
+			children: presetButtons
+		}), calendar]
 	});
 });
-MonthPicker.classes = Calendar.classes;
+MonthPicker.classes = {
+	...Calendar.classes,
+	...MonthPicker_module_default
+};
+MonthPicker.varsResolver = varsResolver;
 MonthPicker.displayName = "@mantine/dates/MonthPicker";
 //#endregion
 export { MonthPicker };

package/esm/components/MonthPicker/MonthPicker.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MonthPicker.mjs","names":[],"sources":["../../../src/components/MonthPicker/MonthPicker.tsx"],"sourcesContent":["import {\n BoxProps,\n ElementProps,\n factory,\n Factory,\n MantineComponentStaticProperties,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '@mantine/core';\nimport { useDatesState } from '../../hooks';\nimport { CalendarLevel, DatePickerType, DateStringValue, PickerBaseProps } from '../../types';\nimport { Calendar, CalendarBaseProps } from '../Calendar';\nimport { DecadeLevelBaseSettings } from '../DecadeLevel';\nimport { DecadeLevelGroupStylesNames } from '../DecadeLevelGroup';\nimport { YearLevelBaseSettings } from '../YearLevel';\nimport { YearLevelGroupStylesNames } from '../YearLevelGroup';\n\nexport type ~~MonthPickerStylesNames~~ = DecadeLevelGroupStylesNames \| ~~YearLevelGroupStylesNames~~;\n\ntype MonthPickerLevel = Exclude<CalendarLevel, 'month'>;\n\nexport interface MonthPickerBaseProps<Type extends DatePickerType = 'default'>\n extends\n PickerBaseProps<Type>,\n DecadeLevelBaseSettings,\n YearLevelBaseSettings,\n Omit<CalendarBaseProps, 'onNextMonth' \| 'onPreviousMonth' \| 'hasNextLevel'> {\n /** Max level that user can go up to @default 'decade' /\n maxLevel?: CalendarLevel;\n\n /* Initial displayed level (uncontrolled) /\n defaultLevel?: CalendarLevel;\n\n /* Current displayed level (controlled) /\n level?: CalendarLevel;\n\n /* Called when level changes /\n onLevelChange?: (level: MonthPickerLevel) => void;\n}\n\nexport interface MonthPickerProps<Type extends DatePickerType = 'default'>\n extends\n BoxProps,\n MonthPickerBaseProps<Type>,\n StylesApiProps<MonthPickerFactory>,\n ElementProps<'div', 'onChange' \| 'value' \| 'defaultValue'> {\n /* Called when month is selected */\n onMonthSelect?: (date: DateStringValue) => void;\n}\n\nexport type MonthPickerFactory = Factory<{\n props: MonthPickerProps;\n ref: HTMLDivElement;\n stylesNames: MonthPickerStylesNames;\n}>;\n\nconst defaultProps = {\n type: 'default',\n} satisfies Partial<MonthPickerProps>;\n\ntype MonthPickerComponent = (<Type extends DatePickerType = 'default'>(\n props: MonthPickerProps<Type> & { ref?: React.Ref<HTMLDivElement> }\n) => React.JSX.Element) & {\n displayName?: string;\n} & MantineComponentStaticProperties<MonthPickerFactory>;\n\nexport const MonthPicker: MonthPickerComponent = factory<MonthPickerFactory>((_props) => {\n const props = useProps('MonthPicker', defaultProps, _props);\n const {\n classNames,\n styles,\n vars,\n type,\n defaultValue,\n value,\n onChange,\n __staticSelector,\n getMonthControlProps,\n allowSingleDateInRange,\n allowDeselect,\n onMouseLeave,\n onMonthSelect,\n __updateDateOnMonthSelect,\n onLevelChange,\n ...~~others~~\n } = props;\n\n const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps } = useDatesState({\n type: type as any,\n level: 'month',\n allowDeselect,\n allowSingleDateInRange,\n value,\n defaultValue,\n onChange: onChange as any,\n onMouseLeave,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MonthPickerFactory>({\n classNames,\n styles,\n props,\n });\n\n ~~return~~ (\n <Calendar\n minLevel=\"year\"\n __updateDateOnMonthSelect={__updateDateOnMonthSelect ?? false}\n __staticSelector={__staticSelector \|\| 'MonthPicker'}\n onMouseLeave={onRootMouseLeave}\n onMonthMouseEnter={(_event, date) => onHoveredDateChange(date)}\n onMonthSelect={(date) => {\n onDateChange(date);\n onMonthSelect?.(date);\n }}\n getMonthControlProps={(date) => ({\n ...getControlProps(date),\n ...getMonthControlProps?.(date),\n })}\n ~~classNames~~={~~resolvedClassNames~~}\n ~~styles~~={~~resolvedStyles~~}\n ~~onLevelChange~~={~~onLevelChange~~ as ~~any~~}\n {...others}\n ~~/>\~~n );\n}) as any;\n\nMonthPicker.classes = Calendar.classes;\nMonthPicker.displayName = '@mantine/dates/MonthPicker';\n\nexport namespace MonthPicker {\n export type Props<Type extends DatePickerType = 'default'> = MonthPickerProps<Type>;\n export type StylesNames = MonthPickerStylesNames;\n export type Factory = MonthPickerFactory;\n}\n"],"mappings":"~~;;;;;;AAyDA~~,MAAM,eAAe,EACnB,MAAM,WACP;AAQD,MAAa,cAAoC,SAA6B,WAAW;CACvF,MAAM,QAAQ,SAAS,eAAe,cAAc,OAAO;CAC3D,MAAM,EACJ,YACA,QACA,MACA,MACA,cACA,OACA,UACA,kBACA,sBACA,wBACA,eACA,cACA,eACA,2BACA,eACA,GAAG,~~WACD~~;CAEJ,MAAM,EAAE,cAAc,kBAAkB,qBAAqB,~~oBAAoB~~,cAAc;~~EACvF~~;EACN,OAAO;EACP;EACA;EACA;EACA;EACU;EACV;EACD,CAAC;~~CAEF~~,MAAM,EAAE,oBAAoB,mBAAmB,qBAAyC;EACtF;EACA;EACA;EACD,CAAC;~~AAEF~~,~~QACE~~,oBAAC,UAAD;EACE,UAAS;EACT,2BAA2B,6BAA6B;EACxD,kBAAkB,oBAAoB;EACtC,cAAc;EACd,oBAAoB,QAAQ,SAAS,oBAAoB,KAAK;EAC9D,gBAAgB,SAAS;AACvB,gBAAa,KAAK;AAClB,mBAAgB,KAAK;;EAEvB,uBAAuB,UAAU;GAC/B,GAAG,gBAAgB,KAAK;GACxB,GAAG,uBAAuB,KAAK;GAChC;~~EACD~~,~~YAAY~~;EACZ,QAAQ;EACO;~~EACf~~,GAAI;~~EACJ~~,CAAA;~~EAEJ;~~AAEF,YAAY,UAAU,SAAS;~~AAC/B~~,YAAY,cAAc"}
1	+ {"version":3,"file":"MonthPicker.mjs","names":["classes"],"sources":["../../../src/components/MonthPicker/MonthPicker.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getFontSize,\n MantineComponentStaticProperties,\n StylesApiProps,\n UnstyledButton,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { useDatesState } from '../../hooks';\nimport {\n CalendarLevel,\n DatePickerType,\n DateStringValue,\n DateValue,\n PickerBaseProps,\n} from '../../types';\nimport { Calendar, CalendarBaseProps, pickCalendarProps } from '../Calendar';\nimport { DecadeLevelBaseSettings } from '../DecadeLevel';\nimport { DecadeLevelGroupStylesNames } from '../DecadeLevelGroup';\nimport { YearLevelBaseSettings } from '../YearLevel';\nimport { YearLevelGroupStylesNames } from '../YearLevelGroup';\nimport classes from './MonthPicker.module.css';\n\nexport interface MonthPickerPreset<Type extends DatePickerType> {\n value: Type extends 'range'\n ? [DateStringValue \| null, DateStringValue \| null]\n : Type extends 'multiple'\n ? DateStringValue[]\n : DateStringValue \| null;\n label: React.ReactNode;\n}\n\nexport type MonthPickerCssVariables = {\n monthPickerRoot: '--preset-font-size';\n};\n\nexport type MonthPickerStylesNames =\n \| DecadeLevelGroupStylesNames\n \| YearLevelGroupStylesNames\n \| 'presetsList'\n \| 'presetButton'\n \| 'monthPickerRoot';\n\ntype MonthPickerLevel = Exclude<CalendarLevel, 'month'>;\n\nexport interface MonthPickerBaseProps<Type extends DatePickerType = 'default'>\n extends\n PickerBaseProps<Type>,\n DecadeLevelBaseSettings,\n YearLevelBaseSettings,\n Omit<CalendarBaseProps, 'onNextMonth' \| 'onPreviousMonth' \| 'hasNextLevel'> {\n /** Max level that user can go up to @default 'decade' /\n maxLevel?: CalendarLevel;\n\n /* Initial displayed level (uncontrolled) /\n defaultLevel?: CalendarLevel;\n\n /* Current displayed level (controlled) /\n level?: CalendarLevel;\n\n /* Called when level changes /\n onLevelChange?: (level: MonthPickerLevel) => void;\n\n /* Predefined values to pick from /\n presets?: MonthPickerPreset<Type>[];\n\n /* If defined, called with preset value, suppresses `onChange` call /\n __onPresetSelect?: (\n preset: Type extends 'range'\n ? [DateStringValue \| null, DateStringValue \| null]\n : DateStringValue \| null\n ) => void;\n}\n\nexport interface MonthPickerProps<Type extends DatePickerType = 'default'>\n extends\n BoxProps,\n MonthPickerBaseProps<Type>,\n StylesApiProps<MonthPickerFactory>,\n ElementProps<'div', 'onChange' \| 'value' \| 'defaultValue'> {\n /* Called when month is selected */\n onMonthSelect?: (date: DateStringValue) => void;\n}\n\nexport type MonthPickerFactory = Factory<{\n props: MonthPickerProps;\n ref: HTMLDivElement;\n stylesNames: MonthPickerStylesNames;\n vars: MonthPickerCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<MonthPickerFactory>((_, { size }) => ({\n monthPickerRoot: {\n '--preset-font-size': getFontSize(size),\n },\n}));\n\nconst defaultProps = {\n type: 'default',\n} satisfies Partial<MonthPickerProps>;\n\ntype MonthPickerComponent = (<Type extends DatePickerType = 'default'>(\n props: MonthPickerProps<Type> & { ref?: React.Ref<HTMLDivElement> }\n) => React.JSX.Element) & {\n displayName?: string;\n} & MantineComponentStaticProperties<MonthPickerFactory>;\n\nexport const MonthPicker: MonthPickerComponent = factory<MonthPickerFactory>((_props) => {\n const props = useProps('MonthPicker', defaultProps, _props);\n const {\n classNames,\n styles,\n vars,\n type,\n defaultValue,\n value,\n onChange,\n __staticSelector,\n getMonthControlProps,\n allowSingleDateInRange,\n allowDeselect,\n onMouseLeave,\n onMonthSelect,\n __updateDateOnMonthSelect,\n __onPresetSelect,\n __stopPropagation,\n presets,\n className,\n style,\n unstyled,\n size,\n attributes,\n onLevelChange,\n ...rest\n } = props;\n\n const { calendarProps, others } = pickCalendarProps(rest);\n const setDateRef = useRef<((date: DateValue) => void) \| null>(null);\n const setLevelRef = useRef<((level: CalendarLevel) => void) \| null>(null);\n\n const getStyles = useStyles<MonthPickerFactory>({\n name: __staticSelector \|\| 'MonthPicker',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: presets ? 'monthPickerRoot' : undefined,\n varsResolver,\n vars,\n });\n\n const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps, setValue } =\n useDatesState({\n type: type as any,\n level: 'month',\n allowDeselect,\n allowSingleDateInRange,\n value,\n defaultValue,\n onChange: onChange as any,\n onMouseLeave,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MonthPickerFactory>({\n classNames,\n styles,\n props,\n });\n\n const calendar = (\n <Calendar\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n size={size}\n {...calendarProps}\n {...(!presets ? others : {})}\n minLevel=\"year\"\n __updateDateOnMonthSelect={__updateDateOnMonthSelect ?? false}\n __staticSelector={__staticSelector \|\| 'MonthPicker'}\n onMouseLeave={onRootMouseLeave}\n onMonthMouseEnter={(_event, date) => onHoveredDateChange(date)}\n onMonthSelect={(date) => {\n onDateChange(date);\n onMonthSelect?.(date);\n }}\n getMonthControlProps={(date) => ({\n ...getControlProps(date),\n ...getMonthControlProps?.(date),\n })}\n onLevelChange={onLevelChange as any}\n __setDateRef={setDateRef}\n __setLevelRef={setLevelRef}\n __stopPropagation={__stopPropagation}\n attributes={attributes}\n {...(!presets ? { className, style } : {})}\n />\n );\n\n if (!presets) {\n return calendar;\n }\n\n const handlePresetSelect = (\n val: DateStringValue \| null \| [DateStringValue \| null, DateStringValue \| null]\n ) => {\n const _val = Array.isArray(val) ? val[0] : val;\n if (_val !== undefined) {\n setDateRef.current?.(_val);\n setLevelRef.current?.('year');\n __onPresetSelect ? __onPresetSelect(_val) : setValue(val);\n }\n };\n\n const presetButtons = presets.map((preset, index) => (\n <UnstyledButton\n key={index}\n {...getStyles('presetButton')}\n onClick={() => handlePresetSelect(preset.value)}\n onMouseDown={(event) => event.preventDefault()}\n data-mantine-stop-propagation={__stopPropagation \|\| undefined}\n >\n {preset.label}\n </UnstyledButton>\n ));\n\n return (\n <Box {...getStyles('monthPickerRoot')} size={size} {...others}>\n <div {...getStyles('presetsList')}>{presetButtons}</div>\n {calendar}\n </Box>\n );\n}) as any;\n\nMonthPicker.classes = { ...Calendar.classes, ...classes };\nMonthPicker.varsResolver = varsResolver;\nMonthPicker.displayName = '@mantine/dates/MonthPicker';\n\nexport namespace MonthPicker {\n export type Props<Type extends DatePickerType = 'default'> = MonthPickerProps<Type>;\n export type StylesNames = MonthPickerStylesNames;\n export type Factory = MonthPickerFactory;\n}\n"],"mappings":";;;;;;;;;AAmGA,MAAM,eAAe,oBAAwC,GAAG,EAAE,YAAY,EAC5E,iBAAiB,EACf,sBAAsB,YAAY,KAAK,EACxC,EACF,EAAE;AAEH,MAAM,eAAe,EACnB,MAAM,WACP;AAQD,MAAa,cAAoC,SAA6B,WAAW;CACvF,MAAM,QAAQ,SAAS,eAAe,cAAc,OAAO;CAC3D,MAAM,EACJ,YACA,QACA,MACA,MACA,cACA,OACA,UACA,kBACA,sBACA,wBACA,eACA,cACA,eACA,2BACA,kBACA,mBACA,SACA,WACA,OACA,UACA,MACA,YACA,eACA,GAAG,SACD;CAEJ,MAAM,EAAE,eAAe,WAAW,kBAAkB,KAAK;CACzD,MAAM,aAAa,OAA2C,KAAK;CACnE,MAAM,cAAc,OAAgD,KAAK;CAEzE,MAAM,YAAY,UAA8B;EAC9C,MAAM,oBAAoB;EAC1B,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc,UAAU,oBAAoB,KAAA;EAC5C;EACA;EACD,CAAC;CAEF,MAAM,EAAE,cAAc,kBAAkB,qBAAqB,iBAAiB,aAC5E,cAAc;EACN;EACN,OAAO;EACP;EACA;EACA;EACA;EACU;EACV;EACD,CAAC;CAEJ,MAAM,EAAE,oBAAoB,mBAAmB,qBAAyC;EACtF;EACA;EACA;EACD,CAAC;CAEF,MAAM,WACJ,oBAAC,UAAD;EACE,YAAY;EACZ,QAAQ;EACF;EACN,GAAI;EACJ,GAAK,CAAC,UAAU,SAAS,EAAE;EAC3B,UAAS;EACT,2BAA2B,6BAA6B;EACxD,kBAAkB,oBAAoB;EACtC,cAAc;EACd,oBAAoB,QAAQ,SAAS,oBAAoB,KAAK;EAC9D,gBAAgB,SAAS;AACvB,gBAAa,KAAK;AAClB,mBAAgB,KAAK;;EAEvB,uBAAuB,UAAU;GAC/B,GAAG,gBAAgB,KAAK;GACxB,GAAG,uBAAuB,KAAK;GAChC;EACc;EACf,cAAc;EACd,eAAe;EACI;EACP;EACZ,GAAK,CAAC,UAAU;GAAE;GAAW;GAAO,GAAG,EAAE;EACzC,CAAA;AAGJ,KAAI,CAAC,QACH,QAAO;CAGT,MAAM,sBACJ,QACG;EACH,MAAM,OAAO,MAAM,QAAQ,IAAI,GAAG,IAAI,KAAK;AAC3C,MAAI,SAAS,KAAA,GAAW;AACtB,cAAW,UAAU,KAAK;AAC1B,eAAY,UAAU,OAAO;AAC7B,sBAAmB,iBAAiB,KAAK,GAAG,SAAS,IAAI;;;CAI7D,MAAM,gBAAgB,QAAQ,KAAK,QAAQ,UACzC,oBAAC,gBAAD;EAEE,GAAI,UAAU,eAAe;EAC7B,eAAe,mBAAmB,OAAO,MAAM;EAC/C,cAAc,UAAU,MAAM,gBAAgB;EAC9C,iCAA+B,qBAAqB,KAAA;YAEnD,OAAO;EACO,EAPV,MAOU,CACjB;AAEF,QACE,qBAAC,KAAD;EAAK,GAAI,UAAU,kBAAkB;EAAQ;EAAM,GAAI;YAAvD,CACE,oBAAC,OAAD;GAAK,GAAI,UAAU,cAAc;aAAG;GAAoB,CAAA,EACvD,SACG;;EAER;AAEF,YAAY,UAAU;CAAE,GAAG,SAAS;CAAS,GAAGA;CAAS;AACzD,YAAY,eAAe;AAC3B,YAAY,cAAc"}

package/esm/components/MonthPicker/MonthPicker.module.mjs ADDED Viewed

@@ -0,0 +1,11 @@
+"use client";
+//#region packages/@mantine/dates/src/components/MonthPicker/MonthPicker.module.css
+var MonthPicker_module_default = {
+	"monthPickerRoot": "m_53c9e871",
+	"presetsList": "m_cccb8ff3",
+	"presetButton": "m_7b4fbf50"
+};
+//#endregion
+export { MonthPicker_module_default as default };
+//# sourceMappingURL=MonthPicker.module.mjs.map

package/esm/components/MonthPicker/MonthPicker.module.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MonthPicker.module.mjs","names":[],"sources":["../../../src/components/MonthPicker/MonthPicker.module.css"],"sourcesContent":[".monthPickerRoot {\n display: flex;\n font-size: var(--preset-font-size);\n}\n\n.presetsList {\n display: flex;\n flex-direction: column;\n border-inline-end: 1px solid;\n padding-inline-end: 0.5em;\n margin-inline-end: 0.5em;\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-5);\n }\n}\n\n.presetButton {\n padding: 0.52em 0.8em;\n border-radius: var(--mantine-radius-default);\n font-size: var(--preset-font-size);\n white-space: nowrap;\n\n @mixin hover {\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-5);\n }\n }\n}\n"],"mappings":""}

package/esm/components/MonthPickerInput/MonthPickerInput.mjs CHANGED Viewed

@@ -17,7 +17,7 @@ const defaultProps = {
 };
 const MonthPickerInput = factory((_props) => {
 	const props = useProps("MonthPickerInput", defaultProps, _props);
-	const { type, value, defaultValue, onChange, valueFormat, labelSeparator, locale, classNames, styles, unstyled, closeOnChange, size, variant, dropdownType, sortDates, minDate, maxDate, vars, valueFormatter, attributes, ...rest } = props;
+	const { type, value, defaultValue, onChange, valueFormat, labelSeparator, locale, classNames, styles, unstyled, closeOnChange, size, variant, dropdownType, sortDates, minDate, maxDate, vars, valueFormatter, presets, attributes, ...rest } = props;
 	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
 		classNames,
 		styles,
@@ -75,6 +75,7 @@ const MonthPickerInput = factory((_props) => {
 			__stopPropagation: dropdownType === "popover",
 			minDate,
 			maxDate,
+			presets,
 			attributes
 		})
 	});

package/esm/components/MonthPickerInput/MonthPickerInput.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MonthPickerInput.mjs","names":[],"sources":["../../../src/components/MonthPickerInput/MonthPickerInput.tsx"],"sourcesContent":["import {\n __InputStylesNames,\n BoxProps,\n factory,\n Factory,\n InputVariant,\n MantineComponentStaticProperties,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '@mantine/core';\nimport { useDatesInput } from '../../hooks';\nimport { DatePickerType } from '../../types';\nimport { getDefaultClampedDate } from '../../utils';\nimport { pickCalendarProps } from '../Calendar';\nimport { MonthPicker, MonthPickerBaseProps, MonthPickerStylesNames } from '../MonthPicker';\nimport { DateInputSharedProps, PickerInputBase } from '../PickerInputBase';\n\nexport type MonthPickerInputStylesNames =\n \| __InputStylesNames\n \| 'placeholder'\n \| MonthPickerStylesNames;\n\nexport interface MonthPickerInputProps<Type extends DatePickerType = 'default'>\n extends\n BoxProps,\n DateInputSharedProps,\n MonthPickerBaseProps<Type>,\n StylesApiProps<MonthPickerInputFactory> {\n /** `dayjs` format for input value @default \"MMMM YYYY\" */\n valueFormat?: string;\n}\n\nexport type MonthPickerInputFactory = Factory<{\n props: MonthPickerInputProps;\n ref: HTMLButtonElement;\n stylesNames: MonthPickerInputStylesNames;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n type: 'default',\n size: 'sm',\n valueFormat: 'MMMM YYYY',\n closeOnChange: true,\n sortDates: true,\n dropdownType: 'popover',\n} satisfies Partial<MonthPickerInputProps>;\n\ntype MonthPickerInputComponent = (<Type extends DatePickerType = 'default'>(\n props: MonthPickerInputProps<Type> & { ref?: React.Ref<HTMLButtonElement> }\n) => React.JSX.Element) & {\n displayName?: string;\n} & MantineComponentStaticProperties<MonthPickerInputFactory>;\n\nexport const MonthPickerInput: MonthPickerInputComponent = factory<MonthPickerInputFactory>(\n (_props) => {\n const props = useProps('MonthPickerInput', defaultProps, _props);\n const {\n type,\n value,\n defaultValue,\n onChange,\n valueFormat,\n labelSeparator,\n locale,\n classNames,\n styles,\n unstyled,\n closeOnChange,\n size,\n variant,\n dropdownType,\n sortDates,\n minDate,\n maxDate,\n vars,\n valueFormatter,\n attributes,\n ...rest\n } = props;\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MonthPickerInputFactory>({\n classNames,\n styles,\n props,\n });\n\n const { calendarProps, others } = pickCalendarProps(rest);\n\n const {\n _value,\n setValue,\n formattedValue,\n dropdownHandlers,\n dropdownOpened,\n onClear,\n shouldClear,\n } = useDatesInput({\n type: type as any,\n value,\n defaultValue,\n onChange: onChange as any,\n locale,\n format: valueFormat,\n labelSeparator,\n closeOnChange,\n sortDates,\n valueFormatter,\n });\n\n return (\n <PickerInputBase\n formattedValue={formattedValue}\n dropdownOpened={dropdownOpened}\n dropdownHandlers={dropdownHandlers}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n onClear={onClear}\n shouldClear={shouldClear}\n value={_value}\n size={size}\n variant={variant}\n dropdownType={dropdownType}\n {...others}\n attributes={attributes}\n type={type as any}\n __staticSelector=\"MonthPickerInput\"\n >\n <MonthPicker\n {...calendarProps}\n size={size}\n variant={variant}\n type={type}\n value={_value}\n defaultDate={\n calendarProps.defaultDate \|\|\n (Array.isArray(_value)\n ? _value[0] \|\| getDefaultClampedDate({ maxDate, minDate })\n : _value \|\| getDefaultClampedDate({ maxDate, minDate }))\n }\n onChange={setValue}\n locale={locale}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n __staticSelector=\"MonthPickerInput\"\n __stopPropagation={dropdownType === 'popover'}\n minDate={minDate}\n maxDate={maxDate}\n attributes={attributes}\n />\n </PickerInputBase>\n );\n }\n) as any;\n\nMonthPickerInput.classes = { ...PickerInputBase.classes, ...MonthPicker.classes };\nMonthPickerInput.displayName = '@mantine/dates/MonthPickerInput';\n\nexport namespace MonthPickerInput {\n export type Props<Type extends DatePickerType = 'default'> = MonthPickerInputProps<Type>;\n export type StylesNames = MonthPickerInputStylesNames;\n export type Factory = MonthPickerInputFactory;\n}\n"],"mappings":";;;;;;;;;AAwCA,MAAM,eAAe;CACnB,MAAM;CACN,MAAM;CACN,aAAa;CACb,eAAe;CACf,WAAW;CACX,cAAc;CACf;AAQD,MAAa,mBAA8C,SACxD,WAAW;CACV,MAAM,QAAQ,SAAS,oBAAoB,cAAc,OAAO;CAChE,MAAM,EACJ,MACA,OACA,cACA,UACA,aACA,gBACA,QACA,YACA,QACA,UACA,eACA,MACA,SACA,cACA,WACA,SACA,SACA,MACA,gBACA,YACA,GAAG,SACD;CAEJ,MAAM,EAAE,oBAAoB,mBAAmB,qBAA8C;EAC3F;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,eAAe,WAAW,kBAAkB,KAAK;CAEzD,MAAM,EACJ,QACA,UACA,gBACA,kBACA,gBACA,SACA,gBACE,cAAc;EACV;EACN;EACA;EACU;EACV;EACA,QAAQ;EACR;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,iBAAD;EACkB;EACA;EACE;EAClB,YAAY;EACZ,QAAQ;EACE;EACD;EACI;EACb,OAAO;EACD;EACG;EACK;EACd,GAAI;EACQ;EACN;EACN,kBAAiB;YAEjB,oBAAC,aAAD;GACE,GAAI;GACE;GACG;GACH;GACN,OAAO;GACP,aACE,cAAc,gBACb,MAAM,QAAQ,OAAO,GAClB,OAAO,MAAM,sBAAsB;IAAE;IAAS;IAAS,CAAC,GACxD,UAAU,sBAAsB;IAAE;IAAS;IAAS,CAAC;GAE3D,UAAU;GACF;GACR,YAAY;GACZ,QAAQ;GACE;GACV,kBAAiB;GACjB,mBAAmB,iBAAiB;GAC3B;GACA;GACG;GACZ,CAAA;EACc,CAAA;EAGvB;AAED,iBAAiB,UAAU;CAAE,GAAG,gBAAgB;CAAS,GAAG,YAAY;CAAS;AACjF,iBAAiB,cAAc"}
1	+ {"version":3,"file":"MonthPickerInput.mjs","names":[],"sources":["../../../src/components/MonthPickerInput/MonthPickerInput.tsx"],"sourcesContent":["import {\n __InputStylesNames,\n BoxProps,\n factory,\n Factory,\n InputVariant,\n MantineComponentStaticProperties,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '@mantine/core';\nimport { useDatesInput } from '../../hooks';\nimport { DatePickerType } from '../../types';\nimport { getDefaultClampedDate } from '../../utils';\nimport { pickCalendarProps } from '../Calendar';\nimport { MonthPicker, MonthPickerBaseProps, MonthPickerStylesNames } from '../MonthPicker';\nimport { DateInputSharedProps, PickerInputBase } from '../PickerInputBase';\n\nexport type MonthPickerInputStylesNames =\n \| __InputStylesNames\n \| 'placeholder'\n \| MonthPickerStylesNames;\n\nexport interface MonthPickerInputProps<Type extends DatePickerType = 'default'>\n extends\n BoxProps,\n DateInputSharedProps,\n MonthPickerBaseProps<Type>,\n StylesApiProps<MonthPickerInputFactory> {\n /** `dayjs` format for input value @default \"MMMM YYYY\" */\n valueFormat?: string;\n}\n\nexport type MonthPickerInputFactory = Factory<{\n props: MonthPickerInputProps;\n ref: HTMLButtonElement;\n stylesNames: MonthPickerInputStylesNames;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n type: 'default',\n size: 'sm',\n valueFormat: 'MMMM YYYY',\n closeOnChange: true,\n sortDates: true,\n dropdownType: 'popover',\n} satisfies Partial<MonthPickerInputProps>;\n\ntype MonthPickerInputComponent = (<Type extends DatePickerType = 'default'>(\n props: MonthPickerInputProps<Type> & { ref?: React.Ref<HTMLButtonElement> }\n) => React.JSX.Element) & {\n displayName?: string;\n} & MantineComponentStaticProperties<MonthPickerInputFactory>;\n\nexport const MonthPickerInput: MonthPickerInputComponent = factory<MonthPickerInputFactory>(\n (_props) => {\n const props = useProps('MonthPickerInput', defaultProps, _props);\n const {\n type,\n value,\n defaultValue,\n onChange,\n valueFormat,\n labelSeparator,\n locale,\n classNames,\n styles,\n unstyled,\n closeOnChange,\n size,\n variant,\n dropdownType,\n sortDates,\n minDate,\n maxDate,\n vars,\n valueFormatter,\n presets,\n attributes,\n ...rest\n } = props;\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MonthPickerInputFactory>({\n classNames,\n styles,\n props,\n });\n\n const { calendarProps, others } = pickCalendarProps(rest);\n\n const {\n _value,\n setValue,\n formattedValue,\n dropdownHandlers,\n dropdownOpened,\n onClear,\n shouldClear,\n } = useDatesInput({\n type: type as any,\n value,\n defaultValue,\n onChange: onChange as any,\n locale,\n format: valueFormat,\n labelSeparator,\n closeOnChange,\n sortDates,\n valueFormatter,\n });\n\n return (\n <PickerInputBase\n formattedValue={formattedValue}\n dropdownOpened={dropdownOpened}\n dropdownHandlers={dropdownHandlers}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n onClear={onClear}\n shouldClear={shouldClear}\n value={_value}\n size={size}\n variant={variant}\n dropdownType={dropdownType}\n {...others}\n attributes={attributes}\n type={type as any}\n __staticSelector=\"MonthPickerInput\"\n >\n <MonthPicker\n {...calendarProps}\n size={size}\n variant={variant}\n type={type}\n value={_value}\n defaultDate={\n calendarProps.defaultDate \|\|\n (Array.isArray(_value)\n ? _value[0] \|\| getDefaultClampedDate({ maxDate, minDate })\n : _value \|\| getDefaultClampedDate({ maxDate, minDate }))\n }\n onChange={setValue}\n locale={locale}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n __staticSelector=\"MonthPickerInput\"\n __stopPropagation={dropdownType === 'popover'}\n minDate={minDate}\n maxDate={maxDate}\n presets={presets}\n attributes={attributes}\n />\n </PickerInputBase>\n );\n }\n) as any;\n\nMonthPickerInput.classes = { ...PickerInputBase.classes, ...MonthPicker.classes };\nMonthPickerInput.displayName = '@mantine/dates/MonthPickerInput';\n\nexport namespace MonthPickerInput {\n export type Props<Type extends DatePickerType = 'default'> = MonthPickerInputProps<Type>;\n export type StylesNames = MonthPickerInputStylesNames;\n export type Factory = MonthPickerInputFactory;\n}\n"],"mappings":";;;;;;;;;AAwCA,MAAM,eAAe;CACnB,MAAM;CACN,MAAM;CACN,aAAa;CACb,eAAe;CACf,WAAW;CACX,cAAc;CACf;AAQD,MAAa,mBAA8C,SACxD,WAAW;CACV,MAAM,QAAQ,SAAS,oBAAoB,cAAc,OAAO;CAChE,MAAM,EACJ,MACA,OACA,cACA,UACA,aACA,gBACA,QACA,YACA,QACA,UACA,eACA,MACA,SACA,cACA,WACA,SACA,SACA,MACA,gBACA,SACA,YACA,GAAG,SACD;CAEJ,MAAM,EAAE,oBAAoB,mBAAmB,qBAA8C;EAC3F;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,eAAe,WAAW,kBAAkB,KAAK;CAEzD,MAAM,EACJ,QACA,UACA,gBACA,kBACA,gBACA,SACA,gBACE,cAAc;EACV;EACN;EACA;EACU;EACV;EACA,QAAQ;EACR;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,iBAAD;EACkB;EACA;EACE;EAClB,YAAY;EACZ,QAAQ;EACE;EACD;EACI;EACb,OAAO;EACD;EACG;EACK;EACd,GAAI;EACQ;EACN;EACN,kBAAiB;YAEjB,oBAAC,aAAD;GACE,GAAI;GACE;GACG;GACH;GACN,OAAO;GACP,aACE,cAAc,gBACb,MAAM,QAAQ,OAAO,GAClB,OAAO,MAAM,sBAAsB;IAAE;IAAS;IAAS,CAAC,GACxD,UAAU,sBAAsB;IAAE;IAAS;IAAS,CAAC;GAE3D,UAAU;GACF;GACR,YAAY;GACZ,QAAQ;GACE;GACV,kBAAiB;GACjB,mBAAmB,iBAAiB;GAC3B;GACA;GACA;GACG;GACZ,CAAA;EACc,CAAA;EAGvB;AAED,iBAAiB,UAAU;CAAE,GAAG,gBAAgB;CAAS,GAAG,YAAY;CAAS;AACjF,iBAAiB,cAAc"}

package/esm/components/SpinInput/SpinInput.mjs CHANGED Viewed

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 import { clamp } from "@mantine/hooks";
 //#region packages/@mantine/dates/src/components/SpinInput/SpinInput.tsx
 const getMaxDigit = (max) => Number(max.toFixed(0)[0]);
-function SpinInput({ value, min, max, onChange, focusable, step, onNextInput, onPreviousInput, onFocus, readOnly, allowTemporaryZero = false, placeholder = "--", ...others }) {
+function SpinInput({ value, min, max, onChange, focusable, step, onNextInput, onPreviousInput, onFocus, readOnly, allowTemporaryZero = false, placeholder = "--", disableAutoAdvance = false, ...others }) {
 	const maxDigit = getMaxDigit(max);
 	const arrowsMax = max + 1 - step;
 	const handleChange = (value) => {
@@ -14,7 +14,7 @@ function SpinInput({ value, min, max, onChange, focusable, step, onNextInput, on
 			const parsedValue = parseInt(clearValue, 10);
 			const clampedValue = allowTemporaryZero && parsedValue === 0 && min > 0 ? 0 : clamp(parsedValue, min, max);
 			onChange(clampedValue);
-			if (clampedValue > maxDigit || value.startsWith("00")) onNextInput?.();
+			if (!disableAutoAdvance && (clampedValue > maxDigit || value.startsWith("00"))) onNextInput?.();
 		}
 	};
 	const handleKeyDown = (event) => {

package/esm/components/SpinInput/SpinInput.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SpinInput.mjs","names":[],"sources":["../../../src/components/SpinInput/SpinInput.tsx"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport { padTime } from '../TimePicker/utils/pad-time/pad-time';\n\ninterface SpinInputProps extends Omit<React.ComponentProps<'input'>, 'onChange' \| 'value'> {\n value: number \| null;\n min: number;\n max: number;\n onChange: (value: number \| null) => void;\n focusable: boolean;\n step: number;\n onNextInput?: () => void;\n onPreviousInput?: () => void;\n allowTemporaryZero?: boolean;\n placeholder?: string;\n}\n\nconst getMaxDigit = (max: number) => Number(max.toFixed(0)[0]);\n\nexport function SpinInput({\n value,\n min,\n max,\n onChange,\n focusable,\n step,\n onNextInput,\n onPreviousInput,\n onFocus,\n readOnly,\n allowTemporaryZero = false,\n placeholder = '--',\n ...others\n}: SpinInputProps) {\n const maxDigit = getMaxDigit(max);\n const arrowsMax = max + 1 - step;\n\n const handleChange = (value: string) => {\n if (readOnly) {\n return;\n }\n\n const clearValue = value.replace(/\\D/g, '');\n if (clearValue !== '') {\n const parsedValue = parseInt(clearValue, 10);\n const clampedValue =\n allowTemporaryZero && parsedValue === 0 && min > 0 ? 0 : clamp(parsedValue, min, max);\n\n onChange(clampedValue);\n\n if (clampedValue > maxDigit \|\| value.startsWith('00')) {\n onNextInput?.();\n }\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (readOnly) {\n return;\n }\n\n if (event.key === '0' \|\| event.key === 'Num0') {\n if (value === 0) {\n event.preventDefault();\n onNextInput?.();\n }\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n onChange(min);\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n onChange(max);\n }\n\n if (event.key === 'Backspace' \|\| event.key === 'Delete') {\n event.preventDefault();\n\n if (value !== null) {\n onChange(null);\n } else {\n onPreviousInput?.();\n }\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n onNextInput?.();\n }\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n onPreviousInput?.();\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n const newValue = value === null ? min : clamp(value + step, min, arrowsMax);\n onChange(newValue);\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n const newValue = value === null ? arrowsMax : clamp(value - step, min, arrowsMax);\n onChange(newValue);\n }\n };\n\n return (\n <input\n type=\"text\"\n role=\"spinbutton\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value === null ? 0 : value}\n data-empty={value === null \|\| undefined}\n inputMode=\"numeric\"\n placeholder={placeholder}\n value={value === null ? '' : padTime(value)}\n onChange={(event) => handleChange(event.currentTarget.value)}\n onKeyDown={handleKeyDown}\n onFocus={(event) => {\n event.currentTarget.select();\n onFocus?.(event);\n }}\n onClick={(event) => {\n event.stopPropagation();\n event.currentTarget.select();\n }}\n onMouseDown={(event) => event.stopPropagation()}\n {...others}\n />\n );\n}\n\nSpinInput.displayName = '@mantine/dates/SpinInput';\n"],"mappings":";;;;;~~AAgBA~~,MAAM,eAAe,QAAgB,OAAO,IAAI,QAAQ,EAAE,CAAC,GAAG;AAE9D,SAAgB,UAAU,EACxB,OACA,KACA,KACA,UACA,WACA,MACA,aACA,iBACA,SACA,UACA,qBAAqB,OACrB,cAAc,MACd,GAAG,UACc;CACjB,MAAM,WAAW,YAAY,IAAI;CACjC,MAAM,YAAY,MAAM,IAAI;CAE5B,MAAM,gBAAgB,UAAkB;AACtC,MAAI,SACF;EAGF,MAAM,aAAa,MAAM,QAAQ,OAAO,GAAG;AAC3C,MAAI,eAAe,IAAI;GACrB,MAAM,cAAc,SAAS,YAAY,GAAG;GAC5C,MAAM,eACJ,sBAAsB,gBAAgB,KAAK,MAAM,IAAI,IAAI,MAAM,aAAa,KAAK,IAAI;AAEvF,YAAS,aAAa;AAEtB,OAAI,eAAe,YAAY,MAAM,WAAW,KAAK,~~CACnD~~,gBAAe;;;CAKrB,MAAM,iBAAiB,UAAiD;AACtE,MAAI,SACF;AAGF,MAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ;OACjC,UAAU,GAAG;AACf,UAAM,gBAAgB;AACtB,mBAAe;;;AAInB,MAAI,MAAM,QAAQ,QAAQ;AACxB,SAAM,gBAAgB;AACtB,YAAS,IAAI;;AAGf,MAAI,MAAM,QAAQ,OAAO;AACvB,SAAM,gBAAgB;AACtB,YAAS,IAAI;;AAGf,MAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,UAAU;AACvD,SAAM,gBAAgB;AAEtB,OAAI,UAAU,KACZ,UAAS,KAAK;OAEd,oBAAmB;;AAIvB,MAAI,MAAM,QAAQ,cAAc;AAC9B,SAAM,gBAAgB;AACtB,kBAAe;;AAGjB,MAAI,MAAM,QAAQ,aAAa;AAC7B,SAAM,gBAAgB;AACtB,sBAAmB;;AAGrB,MAAI,MAAM,QAAQ,WAAW;AAC3B,SAAM,gBAAgB;AAEtB,YADiB,UAAU,OAAO,MAAM,MAAM,QAAQ,MAAM,KAAK,UAAU,CACzD;;AAGpB,MAAI,MAAM,QAAQ,aAAa;AAC7B,SAAM,gBAAgB;AAEtB,YADiB,UAAU,OAAO,YAAY,MAAM,QAAQ,MAAM,KAAK,UAAU,CAC/D;;;AAItB,QACE,oBAAC,SAAD;EACE,MAAK;EACL,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe,UAAU,OAAO,IAAI;EACpC,cAAY,UAAU,QAAQ,KAAA;EAC9B,WAAU;EACG;EACb,OAAO,UAAU,OAAO,KAAK,QAAQ,MAAM;EAC3C,WAAW,UAAU,aAAa,MAAM,cAAc,MAAM;EAC5D,WAAW;EACX,UAAU,UAAU;AAClB,SAAM,cAAc,QAAQ;AAC5B,aAAU,MAAM;;EAElB,UAAU,UAAU;AAClB,SAAM,iBAAiB;AACvB,SAAM,cAAc,QAAQ;;EAE9B,cAAc,UAAU,MAAM,iBAAiB;EAC/C,GAAI;EACJ,CAAA;;AAIN,UAAU,cAAc"}
1	+ {"version":3,"file":"SpinInput.mjs","names":[],"sources":["../../../src/components/SpinInput/SpinInput.tsx"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport { padTime } from '../TimePicker/utils/pad-time/pad-time';\n\ninterface SpinInputProps extends Omit<React.ComponentProps<'input'>, 'onChange' \| 'value'> {\n value: number \| null;\n min: number;\n max: number;\n onChange: (value: number \| null) => void;\n focusable: boolean;\n step: number;\n onNextInput?: () => void;\n onPreviousInput?: () => void;\n allowTemporaryZero?: boolean;\n placeholder?: string;\n disableAutoAdvance?: boolean;\n}\n\nconst getMaxDigit = (max: number) => Number(max.toFixed(0)[0]);\n\nexport function SpinInput({\n value,\n min,\n max,\n onChange,\n focusable,\n step,\n onNextInput,\n onPreviousInput,\n onFocus,\n readOnly,\n allowTemporaryZero = false,\n placeholder = '--',\n disableAutoAdvance = false,\n ...others\n}: SpinInputProps) {\n const maxDigit = getMaxDigit(max);\n const arrowsMax = max + 1 - step;\n\n const handleChange = (value: string) => {\n if (readOnly) {\n return;\n }\n\n const clearValue = value.replace(/\\D/g, '');\n if (clearValue !== '') {\n const parsedValue = parseInt(clearValue, 10);\n const clampedValue =\n allowTemporaryZero && parsedValue === 0 && min > 0 ? 0 : clamp(parsedValue, min, max);\n\n onChange(clampedValue);\n\n if (!disableAutoAdvance && (clampedValue > maxDigit \|\| value.startsWith('00'))) {\n onNextInput?.();\n }\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (readOnly) {\n return;\n }\n\n if (event.key === '0' \|\| event.key === 'Num0') {\n if (value === 0) {\n event.preventDefault();\n onNextInput?.();\n }\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n onChange(min);\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n onChange(max);\n }\n\n if (event.key === 'Backspace' \|\| event.key === 'Delete') {\n event.preventDefault();\n\n if (value !== null) {\n onChange(null);\n } else {\n onPreviousInput?.();\n }\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n onNextInput?.();\n }\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n onPreviousInput?.();\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n const newValue = value === null ? min : clamp(value + step, min, arrowsMax);\n onChange(newValue);\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n const newValue = value === null ? arrowsMax : clamp(value - step, min, arrowsMax);\n onChange(newValue);\n }\n };\n\n return (\n <input\n type=\"text\"\n role=\"spinbutton\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value === null ? 0 : value}\n data-empty={value === null \|\| undefined}\n inputMode=\"numeric\"\n placeholder={placeholder}\n value={value === null ? '' : padTime(value)}\n onChange={(event) => handleChange(event.currentTarget.value)}\n onKeyDown={handleKeyDown}\n onFocus={(event) => {\n event.currentTarget.select();\n onFocus?.(event);\n }}\n onClick={(event) => {\n event.stopPropagation();\n event.currentTarget.select();\n }}\n onMouseDown={(event) => event.stopPropagation()}\n {...others}\n />\n );\n}\n\nSpinInput.displayName = '@mantine/dates/SpinInput';\n"],"mappings":";;;;;AAiBA,MAAM,eAAe,QAAgB,OAAO,IAAI,QAAQ,EAAE,CAAC,GAAG;AAE9D,SAAgB,UAAU,EACxB,OACA,KACA,KACA,UACA,WACA,MACA,aACA,iBACA,SACA,UACA,qBAAqB,OACrB,cAAc,MACd,qBAAqB,OACrB,GAAG,UACc;CACjB,MAAM,WAAW,YAAY,IAAI;CACjC,MAAM,YAAY,MAAM,IAAI;CAE5B,MAAM,gBAAgB,UAAkB;AACtC,MAAI,SACF;EAGF,MAAM,aAAa,MAAM,QAAQ,OAAO,GAAG;AAC3C,MAAI,eAAe,IAAI;GACrB,MAAM,cAAc,SAAS,YAAY,GAAG;GAC5C,MAAM,eACJ,sBAAsB,gBAAgB,KAAK,MAAM,IAAI,IAAI,MAAM,aAAa,KAAK,IAAI;AAEvF,YAAS,aAAa;AAEtB,OAAI,CAAC,uBAAuB,eAAe,YAAY,MAAM,WAAW,KAAK,EAC3E,gBAAe;;;CAKrB,MAAM,iBAAiB,UAAiD;AACtE,MAAI,SACF;AAGF,MAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ;OACjC,UAAU,GAAG;AACf,UAAM,gBAAgB;AACtB,mBAAe;;;AAInB,MAAI,MAAM,QAAQ,QAAQ;AACxB,SAAM,gBAAgB;AACtB,YAAS,IAAI;;AAGf,MAAI,MAAM,QAAQ,OAAO;AACvB,SAAM,gBAAgB;AACtB,YAAS,IAAI;;AAGf,MAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,UAAU;AACvD,SAAM,gBAAgB;AAEtB,OAAI,UAAU,KACZ,UAAS,KAAK;OAEd,oBAAmB;;AAIvB,MAAI,MAAM,QAAQ,cAAc;AAC9B,SAAM,gBAAgB;AACtB,kBAAe;;AAGjB,MAAI,MAAM,QAAQ,aAAa;AAC7B,SAAM,gBAAgB;AACtB,sBAAmB;;AAGrB,MAAI,MAAM,QAAQ,WAAW;AAC3B,SAAM,gBAAgB;AAEtB,YADiB,UAAU,OAAO,MAAM,MAAM,QAAQ,MAAM,KAAK,UAAU,CACzD;;AAGpB,MAAI,MAAM,QAAQ,aAAa;AAC7B,SAAM,gBAAgB;AAEtB,YADiB,UAAU,OAAO,YAAY,MAAM,QAAQ,MAAM,KAAK,UAAU,CAC/D;;;AAItB,QACE,oBAAC,SAAD;EACE,MAAK;EACL,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe,UAAU,OAAO,IAAI;EACpC,cAAY,UAAU,QAAQ,KAAA;EAC9B,WAAU;EACG;EACb,OAAO,UAAU,OAAO,KAAK,QAAQ,MAAM;EAC3C,WAAW,UAAU,aAAa,MAAM,cAAc,MAAM;EAC5D,WAAW;EACX,UAAU,UAAU;AAClB,SAAM,cAAc,QAAQ;AAC5B,aAAU,MAAM;;EAElB,UAAU,UAAU;AAClB,SAAM,iBAAiB;AACvB,SAAM,cAAc,QAAQ;;EAE9B,cAAc,UAAU,MAAM,iBAAiB;EAC/C,GAAI;EACJ,CAAA;;AAIN,UAAU,cAAc"}