@mantine/dates 9.0.0-alpha.5 → 9.0.0-alpha.6

package/esm/components/InlineDateTimePicker/InlineDateTimePicker.mjs

@@ -1,339 +1,284 @@
-'use client';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import dayjs from 'dayjs';
-import { useRef, useState } from 'react';
-import { genericFactory, useProps, useStyles, useResolvedStylesApi, Box, ActionIcon, CheckIcon, Text } from '@mantine/core';
-import { useMergedRef, useDidUpdate } from '@mantine/hooks';
-import { useUncontrolledDates } from '../../hooks/use-uncontrolled-dates/use-uncontrolled-dates.mjs';
-import '../DatesProvider/DatesProvider.mjs';
-import { useDatesContext } from '../DatesProvider/use-dates-context.mjs';
-import { assignTime } from '../../utils/assign-time/assign-time.mjs';
-import { getDefaultClampedDate } from '../../utils/get-default-clamped-date/get-default-clamped-date.mjs';
-import { clampDate } from '../../utils/clamp-date/clamp-date.mjs';
-import '../Calendar/Calendar.mjs';
-import { pickCalendarProps } from '../Calendar/pick-calendar-levels-props/pick-calendar-levels-props.mjs';
-import { DatePicker } from '../DatePicker/DatePicker.mjs';
-import { getMinTime, getMaxTime } from '../DateTimePicker/get-min-max-time/get-min-max-time.mjs';
-import { TimePicker } from '../TimePicker/TimePicker.mjs';
-import classes from './InlineDateTimePicker.module.css.mjs';
-
+"use client";
+import { assignTime } from "../../utils/assign-time/assign-time.mjs";
+import { getDefaultClampedDate } from "../../utils/get-default-clamped-date/get-default-clamped-date.mjs";
+import { clampDate } from "../../utils/clamp-date/clamp-date.mjs";
+import { useDatesContext } from "../DatesProvider/use-dates-context.mjs";
+import { TimePicker } from "../TimePicker/TimePicker.mjs";
+import { useUncontrolledDates } from "../../hooks/use-uncontrolled-dates/use-uncontrolled-dates.mjs";
+import { pickCalendarProps } from "../Calendar/pick-calendar-levels-props/pick-calendar-levels-props.mjs";
+import { DatePicker } from "../DatePicker/DatePicker.mjs";
+import { getMaxTime, getMinTime } from "../DateTimePicker/get-min-max-time/get-min-max-time.mjs";
+import InlineDateTimePicker_module_default from "./InlineDateTimePicker.module.mjs";
+import dayjs from "dayjs";
+import { useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ActionIcon, Box, CheckIcon, Text, genericFactory, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
+import { useDidUpdate, useMergedRef } from "@mantine/hooks";
+//#region packages/@mantine/dates/src/components/InlineDateTimePicker/InlineDateTimePicker.tsx
 const defaultProps = {
-  type: "default",
-  size: "sm"
+	type: "default",
+	size: "sm"
 };
 const InlineDateTimePicker = genericFactory((_props) => {
-  const props = useProps("InlineDateTimePicker", defaultProps, _props);
-  const {
-    value,
-    defaultValue,
-    onChange,
-    valueFormat,
-    locale,
-    classNames,
-    styles,
-    unstyled,
-    timePickerProps,
-    endTimePickerProps,
-    submitButtonProps,
-    withSeconds,
-    level,
-    defaultLevel,
-    size,
-    variant,
-    vars,
-    minDate,
-    maxDate,
-    defaultDate,
-    defaultTimeValue,
-    presets,
-    attributes,
-    onSubmit,
-    labelSeparator,
-    type,
-    className,
-    style,
-    __stopPropagation,
-    __staticSelector,
-    __onEnter,
-    __onPresetSelect,
-    fullWidth,
-    ...rest
-  } = props;
-  const _staticSelector = __staticSelector || "InlineDateTimePicker";
-  const getStyles = useStyles({
-    name: _staticSelector,
-    classes,
-    props,
-    classNames,
-    styles,
-    unstyled,
-    attributes,
-    vars
-  });
-  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
-    classNames,
-    styles,
-    props
-  });
-  const ctx = useDatesContext();
-  const _valueFormat = valueFormat || (withSeconds ? "DD/MM/YYYY HH:mm:ss" : "DD/MM/YYYY HH:mm");
-  const _labelSeparator = ctx.getLabelSeparator(labelSeparator);
-  const isRange = type === "range";
-  const startTimePickerRef = useRef(null);
-  const startTimePickerRefMerged = useMergedRef(startTimePickerRef, timePickerProps?.hoursRef);
-  const endTimePickerRef = useRef(null);
-  const endTimePickerRefMerged = useMergedRef(endTimePickerRef, endTimePickerProps?.hoursRef);
-  const {
-    calendarProps: { allowSingleDateInRange, ...calendarProps },
-    others
-  } = pickCalendarProps(rest);
-  const [_value, setValue] = useUncontrolledDates({
-    type,
-    value,
-    defaultValue,
-    onChange,
-    withTime: true
-  });
-  const formatTime = (dateValue) => dateValue ? dayjs(dateValue).format(withSeconds ? "HH:mm:ss" : "HH:mm") : "";
-  const getInitialStartTime = () => {
-    if (defaultTimeValue) {
-      return defaultTimeValue;
-    }
-    if (isRange) {
-      return Array.isArray(_value) ? formatTime(_value[0]) : "";
-    }
-    return formatTime(_value);
-  };
-  const getInitialEndTime = () => {
-    if (defaultTimeValue) {
-      return defaultTimeValue;
-    }
-    return isRange && Array.isArray(_value) ? formatTime(_value[1]) : "";
-  };
-  const [startTimeValue, setStartTimeValue] = useState(getInitialStartTime);
-  const [endTimeValue, setEndTimeValue] = useState(getInitialEndTime);
-  const [currentLevel, setCurrentLevel] = useState(level || defaultLevel || "month");
-  const _defaultDate = isRange ? (Array.isArray(_value) ? _value[0] : null) || defaultDate : _value || defaultDate;
-  const handleDefaultDateChange = (date) => {
-    if (date) {
-      setValue(
-        assignTime(clampDate(minDate, maxDate, date), startTimeValue || defaultTimeValue || "")
-      );
-    }
-    startTimePickerRef.current?.focus();
-  };
-  const handleRangeDateChange = (dates) => {
-    const [start, end] = dates;
-    const newStart = start ? assignTime(clampDate(minDate, maxDate, start), startTimeValue || defaultTimeValue || "") : null;
-    const newEnd = end ? assignTime(clampDate(minDate, maxDate, end), endTimeValue || defaultTimeValue || "") : null;
-    setValue([newStart, newEnd]);
-    if (start && end) {
-      startTimePickerRef.current?.focus();
-    }
-  };
-  const handleDateChange = (date) => {
-    if (isRange) {
-      handleRangeDateChange(date);
-    } else {
-      handleDefaultDateChange(date);
-    }
-  };
-  const handleStartTimeChange = (timeString) => {
-    timePickerProps?.onChange?.(timeString);
-    setStartTimeValue(timeString);
-    if (timeString) {
-      if (isRange && Array.isArray(_value)) {
-        if (_value[0]) {
-          const newStart = assignTime(_value[0], timeString);
-          setValue([newStart, _value[1]]);
-        }
-      } else {
-        setValue(assignTime(_value, timeString));
-      }
-    }
-  };
-  const handleEndTimeChange = (timeString) => {
-    endTimePickerProps?.onChange?.(timeString);
-    setEndTimeValue(timeString);
-    if (timeString && isRange && Array.isArray(_value) && _value[1]) {
-      const newEnd = assignTime(_value[1], timeString);
-      setValue([_value[0], newEnd]);
-    }
-  };
-  const handleTimeInputKeyDown = (event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      __onEnter?.();
-    }
-  };
-  const getFormattedRange = () => {
-    if (!isRange || !Array.isArray(_value)) {
-      return "";
-    }
-    const formatDate = (v) => v ? dayjs(v).locale(ctx.getLocale(locale)).format(_valueFormat) : "";
-    const start = formatDate(_value[0]);
-    const end = formatDate(_value[1]);
-    if (start && end) {
-      return `${start} ${_labelSeparator} ${end}`;
-    }
-    if (start) {
-      return `${start} ${_labelSeparator} ...`;
-    }
-    return "";
-  };
-  useDidUpdate(() => {
-    if (isRange && Array.isArray(_value)) {
-      setStartTimeValue(formatTime(_value[0]));
-      setEndTimeValue(formatTime(_value[1]));
-    } else {
-      setStartTimeValue(formatTime(_value));
-    }
-  }, [_value]);
-  const startMinTime = isRange ? getMinTime({ minDate, value: Array.isArray(_value) ? _value[0] : null }) : getMinTime({ minDate, value: _value });
-  const startMaxTime = isRange ? getMaxTime({ maxDate, value: Array.isArray(_value) ? _value[0] : null }) : getMaxTime({ maxDate, value: _value });
-  const endMinTime = isRange ? getMinTime({ minDate, value: Array.isArray(_value) ? _value[1] : null }) : void 0;
-  const endMaxTime = isRange ? getMaxTime({ maxDate, value: Array.isArray(_value) ? _value[1] : null }) : void 0;
-  return /* @__PURE__ */ jsxs(Box, { ...getStyles("root", { className, style }), ...others, ref: props.ref, children: [
-    /* @__PURE__ */ jsx(
-      DatePicker,
-      {
-        fullWidth: fullWidth ?? true,
-        ...calendarProps,
-        maxDate,
-        minDate,
-        size,
-        variant,
-        type,
-        value: _value,
-        defaultDate: _defaultDate || getDefaultClampedDate({ maxDate, minDate }),
-        onChange: handleDateChange,
-        locale,
-        classNames: resolvedClassNames,
-        styles: resolvedStyles,
-        unstyled,
-        __staticSelector: _staticSelector,
-        __stopPropagation,
-        level,
-        defaultLevel,
-        onLevelChange: (_level) => {
-          setCurrentLevel(_level);
-          calendarProps.onLevelChange?.(_level);
-        },
-        presets,
-        allowSingleDateInRange,
-        __onPresetSelect,
-        attributes
-      }
-    ),
-    currentLevel === "month" && !isRange && /* @__PURE__ */ jsxs("div", { ...getStyles("timeWrapper"), children: [
-      /* @__PURE__ */ jsx(
-        TimePicker,
-        {
-          value: startTimeValue,
-          withSeconds,
-          unstyled,
-          min: startMinTime,
-          max: startMaxTime,
-          ...timePickerProps,
-          ...getStyles("timeInput", {
-            className: timePickerProps?.className,
-            style: timePickerProps?.style
-          }),
-          onChange: handleStartTimeChange,
-          onKeyDown: handleTimeInputKeyDown,
-          size,
-          "data-mantine-stop-propagation": __stopPropagation || void 0,
-          hoursRef: startTimePickerRefMerged
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        ActionIcon,
-        {
-          variant: "default",
-          size: `input-${size || "sm"}`,
-          ...getStyles("submitButton", {
-            className: submitButtonProps?.className,
-            style: submitButtonProps?.style
-          }),
-          unstyled,
-          "data-mantine-stop-propagation": __stopPropagation || void 0,
-          children: /* @__PURE__ */ jsx(CheckIcon, { size: "30%" }),
-          ...submitButtonProps,
-          onClick: (event) => {
-            submitButtonProps?.onClick?.(event);
-            onSubmit?.();
-          }
-        }
-      )
-    ] }),
-    currentLevel === "month" && isRange && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Text, { ...getStyles("rangeInfo"), children: getFormattedRange() }),
-      /* @__PURE__ */ jsxs("div", { ...getStyles("rangeTimeWrapper"), children: [
-        /* @__PURE__ */ jsx(
-          TimePicker,
-          {
-            value: startTimeValue,
-            withSeconds,
-            unstyled,
-            min: startMinTime,
-            max: startMaxTime,
-            ...timePickerProps,
-            ...getStyles("rangeTimeInput", {
-              className: timePickerProps?.className,
-              style: timePickerProps?.style
-            }),
-            onChange: handleStartTimeChange,
-            onKeyDown: handleTimeInputKeyDown,
-            size,
-            "data-mantine-stop-propagation": __stopPropagation || void 0,
-            hoursRef: startTimePickerRefMerged
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TimePicker,
-          {
-            value: endTimeValue,
-            withSeconds,
-            unstyled,
-            min: endMinTime,
-            max: endMaxTime,
-            ...endTimePickerProps,
-            ...getStyles("rangeTimeInput", {
-              className: endTimePickerProps?.className,
-              style: endTimePickerProps?.style
-            }),
-            onChange: handleEndTimeChange,
-            onKeyDown: handleTimeInputKeyDown,
-            size,
-            "data-mantine-stop-propagation": __stopPropagation || void 0,
-            hoursRef: endTimePickerRefMerged
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            variant: "default",
-            size: `input-${size || "sm"}`,
-            ...getStyles("submitButton", {
-              className: submitButtonProps?.className,
-              style: submitButtonProps?.style
-            }),
-            unstyled,
-            "data-mantine-stop-propagation": __stopPropagation || void 0,
-            children: /* @__PURE__ */ jsx(CheckIcon, { size: "30%" }),
-            ...submitButtonProps,
-            onClick: (event) => {
-              submitButtonProps?.onClick?.(event);
-              onSubmit?.();
-            }
-          }
-        )
-      ] })
-    ] })
-  ] });
+	const props = useProps("InlineDateTimePicker", defaultProps, _props);
+	const { value, defaultValue, onChange, valueFormat, locale, classNames, styles, unstyled, timePickerProps, endTimePickerProps, submitButtonProps, withSeconds, level, defaultLevel, size, variant, vars, minDate, maxDate, defaultDate, defaultTimeValue, presets, attributes, onSubmit, labelSeparator, type, className, style, __stopPropagation, __staticSelector, __onEnter, __onPresetSelect, fullWidth, ...rest } = props;
+	const _staticSelector = __staticSelector || "InlineDateTimePicker";
+	const getStyles = useStyles({
+		name: _staticSelector,
+		classes: InlineDateTimePicker_module_default,
+		props,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars
+	});
+	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
+		classNames,
+		styles,
+		props
+	});
+	const ctx = useDatesContext();
+	const _valueFormat = valueFormat || (withSeconds ? "DD/MM/YYYY HH:mm:ss" : "DD/MM/YYYY HH:mm");
+	const _labelSeparator = ctx.getLabelSeparator(labelSeparator);
+	const isRange = type === "range";
+	const startTimePickerRef = useRef(null);
+	const startTimePickerRefMerged = useMergedRef(startTimePickerRef, timePickerProps?.hoursRef);
+	const endTimePickerRefMerged = useMergedRef(useRef(null), endTimePickerProps?.hoursRef);
+	const { calendarProps: { allowSingleDateInRange, ...calendarProps }, others } = pickCalendarProps(rest);
+	const [_value, setValue] = useUncontrolledDates({
+		type,
+		value,
+		defaultValue,
+		onChange,
+		withTime: true
+	});
+	const formatTime = (dateValue) => dateValue ? dayjs(dateValue).format(withSeconds ? "HH:mm:ss" : "HH:mm") : "";
+	const getInitialStartTime = () => {
+		if (defaultTimeValue) return defaultTimeValue;
+		if (isRange) return Array.isArray(_value) ? formatTime(_value[0]) : "";
+		return formatTime(_value);
+	};
+	const getInitialEndTime = () => {
+		if (defaultTimeValue) return defaultTimeValue;
+		return isRange && Array.isArray(_value) ? formatTime(_value[1]) : "";
+	};
+	const [startTimeValue, setStartTimeValue] = useState(getInitialStartTime);
+	const [endTimeValue, setEndTimeValue] = useState(getInitialEndTime);
+	const [currentLevel, setCurrentLevel] = useState(level || defaultLevel || "month");
+	const _defaultDate = isRange ? (Array.isArray(_value) ? _value[0] : null) || defaultDate : _value || defaultDate;
+	const handleDefaultDateChange = (date) => {
+		if (date) setValue(assignTime(clampDate(minDate, maxDate, date), startTimeValue || defaultTimeValue || ""));
+		startTimePickerRef.current?.focus();
+	};
+	const handleRangeDateChange = (dates) => {
+		const [start, end] = dates;
+		setValue([start ? assignTime(clampDate(minDate, maxDate, start), startTimeValue || defaultTimeValue || "") : null, end ? assignTime(clampDate(minDate, maxDate, end), endTimeValue || defaultTimeValue || "") : null]);
+		if (start && end) startTimePickerRef.current?.focus();
+	};
+	const handleDateChange = (date) => {
+		if (isRange) handleRangeDateChange(date);
+		else handleDefaultDateChange(date);
+	};
+	const handleStartTimeChange = (timeString) => {
+		timePickerProps?.onChange?.(timeString);
+		setStartTimeValue(timeString);
+		if (timeString) if (isRange && Array.isArray(_value)) {
+			if (_value[0]) setValue([assignTime(_value[0], timeString), _value[1]]);
+		} else setValue(assignTime(_value, timeString));
+	};
+	const handleEndTimeChange = (timeString) => {
+		endTimePickerProps?.onChange?.(timeString);
+		setEndTimeValue(timeString);
+		if (timeString && isRange && Array.isArray(_value) && _value[1]) {
+			const newEnd = assignTime(_value[1], timeString);
+			setValue([_value[0], newEnd]);
+		}
+	};
+	const handleTimeInputKeyDown = (event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			__onEnter?.();
+		}
+	};
+	const getFormattedRange = () => {
+		if (!isRange || !Array.isArray(_value)) return "";
+		const formatDate = (v) => v ? dayjs(v).locale(ctx.getLocale(locale)).format(_valueFormat) : "";
+		const start = formatDate(_value[0]);
+		const end = formatDate(_value[1]);
+		if (start && end) return `${start} ${_labelSeparator} ${end}`;
+		if (start) return `${start} ${_labelSeparator} ...`;
+		return "";
+	};
+	useDidUpdate(() => {
+		if (isRange && Array.isArray(_value)) {
+			setStartTimeValue(formatTime(_value[0]));
+			setEndTimeValue(formatTime(_value[1]));
+		} else setStartTimeValue(formatTime(_value));
+	}, [_value]);
+	const startMinTime = isRange ? getMinTime({
+		minDate,
+		value: Array.isArray(_value) ? _value[0] : null
+	}) : getMinTime({
+		minDate,
+		value: _value
+	});
+	const startMaxTime = isRange ? getMaxTime({
+		maxDate,
+		value: Array.isArray(_value) ? _value[0] : null
+	}) : getMaxTime({
+		maxDate,
+		value: _value
+	});
+	const endMinTime = isRange ? getMinTime({
+		minDate,
+		value: Array.isArray(_value) ? _value[1] : null
+	}) : void 0;
+	const endMaxTime = isRange ? getMaxTime({
+		maxDate,
+		value: Array.isArray(_value) ? _value[1] : null
+	}) : void 0;
+	return /* @__PURE__ */ jsxs(Box, {
+		...getStyles("root", {
+			className,
+			style
+		}),
+		...others,
+		ref: props.ref,
+		children: [
+			/* @__PURE__ */ jsx(DatePicker, {
+				fullWidth: fullWidth ?? true,
+				...calendarProps,
+				maxDate,
+				minDate,
+				size,
+				variant,
+				type,
+				value: _value,
+				defaultDate: _defaultDate || getDefaultClampedDate({
+					maxDate,
+					minDate
+				}),
+				onChange: handleDateChange,
+				locale,
+				classNames: resolvedClassNames,
+				styles: resolvedStyles,
+				unstyled,
+				__staticSelector: _staticSelector,
+				__stopPropagation,
+				level,
+				defaultLevel,
+				onLevelChange: (_level) => {
+					setCurrentLevel(_level);
+					calendarProps.onLevelChange?.(_level);
+				},
+				presets,
+				allowSingleDateInRange,
+				__onPresetSelect,
+				attributes
+			}),
+			currentLevel === "month" && !isRange && /* @__PURE__ */ jsxs("div", {
+				...getStyles("timeWrapper"),
+				children: [/* @__PURE__ */ jsx(TimePicker, {
+					value: startTimeValue,
+					withSeconds,
+					unstyled,
+					min: startMinTime,
+					max: startMaxTime,
+					...timePickerProps,
+					...getStyles("timeInput", {
+						className: timePickerProps?.className,
+						style: timePickerProps?.style
+					}),
+					onChange: handleStartTimeChange,
+					onKeyDown: handleTimeInputKeyDown,
+					size,
+					"data-mantine-stop-propagation": __stopPropagation || void 0,
+					hoursRef: startTimePickerRefMerged
+				}), /* @__PURE__ */ jsx(ActionIcon, {
+					variant: "default",
+					size: `input-${size || "sm"}`,
+					...getStyles("submitButton", {
+						className: submitButtonProps?.className,
+						style: submitButtonProps?.style
+					}),
+					unstyled,
+					"data-mantine-stop-propagation": __stopPropagation || void 0,
+					children: /* @__PURE__ */ jsx(CheckIcon, { size: "30%" }),
+					...submitButtonProps,
+					onClick: (event) => {
+						submitButtonProps?.onClick?.(event);
+						onSubmit?.();
+					}
+				})]
+			}),
+			currentLevel === "month" && isRange && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, {
+				...getStyles("rangeInfo"),
+				children: getFormattedRange()
+			}), /* @__PURE__ */ jsxs("div", {
+				...getStyles("rangeTimeWrapper"),
+				children: [
+					/* @__PURE__ */ jsx(TimePicker, {
+						value: startTimeValue,
+						withSeconds,
+						unstyled,
+						min: startMinTime,
+						max: startMaxTime,
+						...timePickerProps,
+						...getStyles("rangeTimeInput", {
+							className: timePickerProps?.className,
+							style: timePickerProps?.style
+						}),
+						onChange: handleStartTimeChange,
+						onKeyDown: handleTimeInputKeyDown,
+						size,
+						"data-mantine-stop-propagation": __stopPropagation || void 0,
+						hoursRef: startTimePickerRefMerged
+					}),
+					/* @__PURE__ */ jsx(TimePicker, {
+						value: endTimeValue,
+						withSeconds,
+						unstyled,
+						min: endMinTime,
+						max: endMaxTime,
+						...endTimePickerProps,
+						...getStyles("rangeTimeInput", {
+							className: endTimePickerProps?.className,
+							style: endTimePickerProps?.style
+						}),
+						onChange: handleEndTimeChange,
+						onKeyDown: handleTimeInputKeyDown,
+						size,
+						"data-mantine-stop-propagation": __stopPropagation || void 0,
+						hoursRef: endTimePickerRefMerged
+					}),
+					/* @__PURE__ */ jsx(ActionIcon, {
+						variant: "default",
+						size: `input-${size || "sm"}`,
+						...getStyles("submitButton", {
+							className: submitButtonProps?.className,
+							style: submitButtonProps?.style
+						}),
+						unstyled,
+						"data-mantine-stop-propagation": __stopPropagation || void 0,
+						children: /* @__PURE__ */ jsx(CheckIcon, { size: "30%" }),
+						...submitButtonProps,
+						onClick: (event) => {
+							submitButtonProps?.onClick?.(event);
+							onSubmit?.();
+						}
+					})
+				]
+			})] })
+		]
+	});
 });
-InlineDateTimePicker.classes = { ...classes, ...DatePicker.classes };
+InlineDateTimePicker.classes = {
+	...InlineDateTimePicker_module_default,
+	...DatePicker.classes
+};
 InlineDateTimePicker.displayName = "@mantine/dates/InlineDateTimePicker";
-
+//#endregion
 export { InlineDateTimePicker };
-//# sourceMappingURL=InlineDateTimePicker.mjs.map
+
+//# sourceMappingURL=InlineDateTimePicker.mjs.map