@mantine/dates 8.3.15 → 9.0.0-alpha.1

package/esm/components/MaskedDateInput/MaskedDateInput.mjs

@@ -0,0 +1,626 @@
+'use client';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import dayjs from 'dayjs';
+import { useRef, useState } from 'react';
+import { factory, useProps, useResolvedStylesApi, useStyles, Popover, InputBase, CloseButton } from '@mantine/core';
+import { useMergedRef, useId } from '@mantine/hooks';
+import { Calendar } from '../Calendar/Calendar.mjs';
+import { pickCalendarProps } from '../Calendar/pick-calendar-levels-props/pick-calendar-levels-props.mjs';
+import '../DatesProvider/DatesProvider.mjs';
+import { useDatesContext } from '../DatesProvider/use-dates-context.mjs';
+import { isSameMonth } from '../Month/is-same-month/is-same-month.mjs';
+import '../Month/Month.mjs';
+import { SpinInput } from '../SpinInput/SpinInput.mjs';
+import { MaskedDateInputProvider } from './MaskedDateInput.context.mjs';
+import classes from './MaskedDateInput.module.css.mjs';
+import { useMaskedDateInput } from './use-masked-date-input.mjs';
+
+function SimpleAmPmSelect({
+  labels,
+  value,
+  onChange,
+  className,
+  style,
+  onPreviousInput,
+  readOnly,
+  onMouseDown,
+  disabled,
+  ...others
+}) {
+  const handleKeyDown = (event) => {
+    if (readOnly) {
+      return;
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      onChange(labels.am);
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      onChange(labels.pm);
+    }
+    if (event.key === "Backspace" || event.key === "Delete") {
+      event.preventDefault();
+      if (value === null) {
+        onPreviousInput?.();
+      } else {
+        onChange(null);
+      }
+    }
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      onPreviousInput?.();
+    }
+    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+      event.preventDefault();
+      onChange(value === labels.am ? labels.pm : labels.am);
+    }
+    if (event.code === "KeyA") {
+      event.preventDefault();
+      onChange(labels.am);
+    }
+    if (event.code === "KeyP") {
+      event.preventDefault();
+      onChange(labels.pm);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "select",
+    {
+      className,
+      style,
+      value: value || "",
+      onChange: (event) => !readOnly && onChange(event.target.value || null),
+      onClick: (event) => event.stopPropagation(),
+      onKeyDown: handleKeyDown,
+      onMouseDown: (event) => {
+        event.stopPropagation();
+        onMouseDown?.(event);
+      },
+      disabled,
+      "data-am-pm": true,
+      "data-mantine-stop-propagation": true,
+      ...others,
+      children: [
+        /* @__PURE__ */ jsx("option", { value: "", children: "--" }),
+        /* @__PURE__ */ jsx("option", { value: labels.am, children: labels.am }),
+        /* @__PURE__ */ jsx("option", { value: labels.pm, children: labels.pm })
+      ]
+    }
+  );
+}
+const defaultProps = {
+  dateFieldsOrder: ["day", "month", "year"],
+  dateSeparator: "/",
+  timeSeparator: ":",
+  dateTimeSeparator: " ",
+  timeFormat: "24h",
+  amPmLabels: { am: "AM", pm: "PM" },
+  dayPlaceholder: "DD",
+  monthPlaceholder: "MM",
+  yearPlaceholder: "YYYY",
+  hoursPlaceholder: "--",
+  minutesPlaceholder: "--",
+  secondsPlaceholder: "--"
+};
+const MaskedDateInput = factory((_props) => {
+  const props = useProps("MaskedDateInput", defaultProps, _props);
+  const {
+    classNames,
+    className,
+    style,
+    styles,
+    unstyled,
+    vars,
+    dateFieldsOrder,
+    dateSeparator,
+    timeSeparator,
+    dateTimeSeparator,
+    withTime,
+    withSeconds,
+    timeFormat,
+    amPmLabels,
+    value,
+    defaultValue,
+    onChange,
+    clearable,
+    clearButtonProps,
+    popoverProps,
+    name,
+    form,
+    onFocus,
+    onBlur,
+    readOnly,
+    disabled,
+    size,
+    dayInputProps,
+    monthInputProps,
+    yearInputProps,
+    hoursInputProps,
+    minutesInputProps,
+    secondsInputProps,
+    amPmSelectProps,
+    hiddenInputProps,
+    pasteSplit,
+    dayRef,
+    monthRef,
+    yearRef,
+    hoursRef,
+    minutesRef,
+    secondsRef,
+    amPmRef,
+    dayPlaceholder,
+    monthPlaceholder,
+    yearPlaceholder,
+    hoursPlaceholder,
+    minutesPlaceholder,
+    secondsPlaceholder,
+    dayInputLabel,
+    monthInputLabel,
+    yearInputLabel,
+    hoursInputLabel,
+    minutesInputLabel,
+    secondsInputLabel,
+    amPmInputLabel,
+    rightSection,
+    labelProps,
+    attributes,
+    onClick,
+    onMouseDown,
+    onFocusCapture,
+    onBlurCapture,
+    getDayProps,
+    getMonthControlProps,
+    getYearControlProps,
+    locale,
+    minDate,
+    maxDate,
+    ...others
+  } = props;
+  const { calendarProps, others: rest } = pickCalendarProps(others);
+  useDatesContext();
+  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
+    classNames,
+    styles,
+    props
+  });
+  const getStyles = useStyles({
+    name: "MaskedDateInput",
+    classes,
+    props,
+    className,
+    style,
+    classNames,
+    styles,
+    unstyled,
+    attributes,
+    vars
+  });
+  const controller = useMaskedDateInput({
+    value: value || void 0,
+    defaultValue: defaultValue || void 0,
+    onChange,
+    withTime,
+    withSeconds,
+    format: timeFormat,
+    amPmLabels,
+    min: void 0,
+    max: void 0,
+    minDate,
+    maxDate,
+    clearable,
+    readOnly,
+    disabled,
+    pasteSplit
+  });
+  const _dayRef = useMergedRef(controller.refs.day, dayRef);
+  const _monthRef = useMergedRef(controller.refs.month, monthRef);
+  const _yearRef = useMergedRef(controller.refs.year, yearRef);
+  const _hoursRef = useMergedRef(controller.refs.hours, hoursRef);
+  const _minutesRef = useMergedRef(controller.refs.minutes, minutesRef);
+  const _secondsRef = useMergedRef(controller.refs.seconds, secondsRef);
+  const _amPmRef = useMergedRef(controller.refs.amPm, amPmRef);
+  const dayInputId = useId();
+  const hasFocusRef = useRef(false);
+  const [dropdownOpened, setDropdownOpened] = useState(false);
+  const handleFocus = (event) => {
+    if (!hasFocusRef.current) {
+      hasFocusRef.current = true;
+      onFocus?.(event);
+    }
+  };
+  const handleBlur = (event) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      hasFocusRef.current = false;
+      onBlur?.(event);
+    }
+  };
+  const getNextField = (currentField, order) => {
+    const currentIndex = order.indexOf(currentField);
+    if (currentIndex < order.length - 1) {
+      return order[currentIndex + 1];
+    }
+    return withTime ? "hours" : null;
+  };
+  const getPreviousField = (currentField, order) => {
+    const currentIndex = order.indexOf(currentField);
+    if (currentIndex > 0) {
+      return order[currentIndex - 1];
+    }
+    return null;
+  };
+  const handleDateSelect = (selectedDate) => {
+    dayjs(selectedDate);
+    controller.setDateValue(selectedDate);
+    setDropdownOpened(false);
+  };
+  const _getDayProps = (day) => ({
+    ...getDayProps?.(day),
+    selected: controller.calendarValue ? dayjs(controller.calendarValue).isSame(day, "day") : false,
+    onClick: (event) => {
+      getDayProps?.(day)?.onClick?.(event);
+      handleDateSelect(day);
+    }
+  });
+  const renderDateField = (field, isFirst, isLast) => {
+    const fieldOrder = dateFieldsOrder;
+    const getOnPreviousInput = () => {
+      const previousField = getPreviousField(field, fieldOrder);
+      return previousField ? () => controller.focus(previousField) : void 0;
+    };
+    const getOnNextInput = () => {
+      const nextField = getNextField(field, fieldOrder);
+      return nextField ? () => controller.focus(nextField) : void 0;
+    };
+    switch (field) {
+      case "day":
+        return /* @__PURE__ */ jsx(
+          SpinInput,
+          {
+            id: isFirst ? dayInputId : void 0,
+            ...dayInputProps,
+            ...getStyles("field", {
+              className: dayInputProps?.className,
+              style: dayInputProps?.style
+            }),
+            value: controller.values.day,
+            onChange: controller.setDay,
+            onNextInput: getOnNextInput(),
+            onPreviousInput: getOnPreviousInput(),
+            min: 1,
+            max: controller.getDaysInMonth(),
+            focusable: true,
+            step: 1,
+            ref: _dayRef,
+            "aria-label": dayInputLabel,
+            readOnly,
+            disabled,
+            onPaste: controller.onPaste,
+            onFocus: (event) => {
+              handleFocus(event);
+              dayInputProps?.onFocus?.(event);
+            },
+            placeholder: dayPlaceholder,
+            tabIndex: isFirst ? 0 : -1
+          },
+          "day"
+        );
+      case "month":
+        return /* @__PURE__ */ jsx(
+          SpinInput,
+          {
+            id: isFirst ? dayInputId : void 0,
+            ...monthInputProps,
+            ...getStyles("field", {
+              className: monthInputProps?.className,
+              style: monthInputProps?.style
+            }),
+            value: controller.values.month,
+            onChange: controller.setMonth,
+            onNextInput: getOnNextInput(),
+            onPreviousInput: getOnPreviousInput(),
+            min: 1,
+            max: 12,
+            focusable: true,
+            step: 1,
+            ref: _monthRef,
+            "aria-label": monthInputLabel,
+            readOnly,
+            disabled,
+            onPaste: controller.onPaste,
+            onFocus: (event) => {
+              handleFocus(event);
+              monthInputProps?.onFocus?.(event);
+            },
+            placeholder: monthPlaceholder,
+            tabIndex: isFirst ? 0 : -1
+          },
+          "month"
+        );
+      case "year":
+        return /* @__PURE__ */ jsx(
+          SpinInput,
+          {
+            id: isFirst ? dayInputId : void 0,
+            ...yearInputProps,
+            ...getStyles("yearField", {
+              className: yearInputProps?.className,
+              style: yearInputProps?.style
+            }),
+            value: controller.values.year,
+            onChange: controller.setYear,
+            onNextInput: getOnNextInput(),
+            onPreviousInput: getOnPreviousInput(),
+            min: 1,
+            max: 9999,
+            focusable: true,
+            step: 1,
+            ref: _yearRef,
+            "aria-label": yearInputLabel,
+            readOnly,
+            disabled,
+            onPaste: controller.onPaste,
+            onFocus: (event) => {
+              handleFocus(event);
+              yearInputProps?.onFocus?.(event);
+            },
+            placeholder: yearPlaceholder,
+            tabIndex: isFirst ? 0 : -1
+          },
+          "year"
+        );
+      default:
+        return null;
+    }
+  };
+  const dateFields = dateFieldsOrder.map((field, index) => {
+    const isFirst = index === 0;
+    const isLast = index === dateFieldsOrder.length - 1;
+    const fieldElement = renderDateField(field, isFirst);
+    if (isLast) {
+      return fieldElement;
+    }
+    return /* @__PURE__ */ jsxs("span", { children: [
+      fieldElement,
+      /* @__PURE__ */ jsx("span", { ...getStyles("separator"), children: dateSeparator })
+    ] }, `${field}-group`);
+  });
+  const calendarDate = controller.calendarValue ? dayjs(controller.calendarValue).toDate() : void 0;
+  return /* @__PURE__ */ jsx(MaskedDateInputProvider, { value: { getStyles }, children: /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      opened: dropdownOpened,
+      transitionProps: { duration: 0 },
+      position: "bottom-start",
+      withRoles: false,
+      disabled: disabled || readOnly,
+      ...popoverProps,
+      children: [
+        /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsxs(
+          InputBase,
+          {
+            component: "div",
+            size,
+            disabled,
+            onClick: (event) => {
+              onClick?.(event);
+              controller.focus(dateFieldsOrder[0]);
+            },
+            onMouseDown: (event) => {
+              event.preventDefault();
+              onMouseDown?.(event);
+            },
+            onFocusCapture: (event) => {
+              setDropdownOpened(true);
+              onFocusCapture?.(event);
+            },
+            onBlurCapture: (event) => {
+              setDropdownOpened(false);
+              onBlurCapture?.(event);
+            },
+            rightSection: rightSection || controller.isClearable && /* @__PURE__ */ jsx(
+              CloseButton,
+              {
+                ...clearButtonProps,
+                size,
+                onClick: (event) => {
+                  controller.clear();
+                  clearButtonProps?.onClick?.(event);
+                },
+                onMouseDown: (event) => {
+                  event.preventDefault();
+                  clearButtonProps?.onMouseDown?.(event);
+                }
+              }
+            ),
+            labelProps: { htmlFor: dayInputId, ...labelProps },
+            style,
+            className,
+            classNames: resolvedClassNames,
+            styles: resolvedStyles,
+            attributes,
+            __staticSelector: "MaskedDateInput",
+            ...rest,
+            children: [
+              /* @__PURE__ */ jsx("div", { ...getStyles("fieldsRoot"), dir: "ltr", children: /* @__PURE__ */ jsxs("div", { ...getStyles("fieldsGroup"), onBlur: handleBlur, children: [
+                dateFields,
+                withTime && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { ...getStyles("separator"), children: dateTimeSeparator }),
+                  /* @__PURE__ */ jsx(
+                    SpinInput,
+                    {
+                      ...hoursInputProps,
+                      ...getStyles("field", {
+                        className: hoursInputProps?.className,
+                        style: hoursInputProps?.style
+                      }),
+                      value: controller.values.hours,
+                      onChange: controller.setHours,
+                      onPreviousInput: () => controller.focus(dateFieldsOrder[dateFieldsOrder.length - 1]),
+                      onNextInput: () => controller.focus("minutes"),
+                      min: timeFormat === "12h" ? 1 : 0,
+                      max: timeFormat === "12h" ? 12 : 23,
+                      allowTemporaryZero: timeFormat === "12h",
+                      focusable: true,
+                      step: 1,
+                      ref: _hoursRef,
+                      "aria-label": hoursInputLabel,
+                      tabIndex: -1,
+                      readOnly,
+                      disabled,
+                      onPaste: controller.onPaste,
+                      onFocus: (event) => {
+                        handleFocus(event);
+                        hoursInputProps?.onFocus?.(event);
+                      },
+                      onBlur: (event) => {
+                        const actualInputValue = event.currentTarget.value;
+                        const numericValue = actualInputValue ? parseInt(actualInputValue, 10) : null;
+                        if (timeFormat === "12h" && numericValue === 0) {
+                          controller.setHours(12);
+                        }
+                        hoursInputProps?.onBlur?.(event);
+                      },
+                      placeholder: hoursPlaceholder
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { ...getStyles("separator"), children: timeSeparator }),
+                  /* @__PURE__ */ jsx(
+                    SpinInput,
+                    {
+                      ...minutesInputProps,
+                      ...getStyles("field", {
+                        className: minutesInputProps?.className,
+                        style: minutesInputProps?.style
+                      }),
+                      value: controller.values.minutes,
+                      onChange: controller.setMinutes,
+                      min: 0,
+                      max: 59,
+                      focusable: true,
+                      step: 1,
+                      ref: _minutesRef,
+                      onPreviousInput: () => controller.focus("hours"),
+                      onNextInput: () => withSeconds ? controller.focus("seconds") : controller.focus("amPm"),
+                      "aria-label": minutesInputLabel,
+                      tabIndex: -1,
+                      readOnly,
+                      disabled,
+                      onPaste: controller.onPaste,
+                      onFocus: (event) => {
+                        handleFocus(event);
+                        minutesInputProps?.onFocus?.(event);
+                      },
+                      placeholder: minutesPlaceholder
+                    }
+                  ),
+                  withSeconds && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { ...getStyles("separator"), children: timeSeparator }),
+                    /* @__PURE__ */ jsx(
+                      SpinInput,
+                      {
+                        ...secondsInputProps,
+                        ...getStyles("field", {
+                          className: secondsInputProps?.className,
+                          style: secondsInputProps?.style
+                        }),
+                        value: controller.values.seconds,
+                        onChange: controller.setSeconds,
+                        min: 0,
+                        max: 59,
+                        focusable: true,
+                        step: 1,
+                        ref: _secondsRef,
+                        onPreviousInput: () => controller.focus("minutes"),
+                        onNextInput: () => controller.focus("amPm"),
+                        "aria-label": secondsInputLabel,
+                        tabIndex: -1,
+                        readOnly,
+                        disabled,
+                        onPaste: controller.onPaste,
+                        onFocus: (event) => {
+                          handleFocus(event);
+                          secondsInputProps?.onFocus?.(event);
+                        },
+                        placeholder: secondsPlaceholder
+                      }
+                    )
+                  ] }),
+                  timeFormat === "12h" && /* @__PURE__ */ jsx(
+                    SimpleAmPmSelect,
+                    {
+                      ...amPmSelectProps,
+                      ...getStyles("field", {
+                        className: amPmSelectProps?.className,
+                        style: amPmSelectProps?.style
+                      }),
+                      labels: amPmLabels,
+                      value: controller.values.amPm,
+                      onChange: controller.setAmPm,
+                      ref: _amPmRef,
+                      "aria-label": amPmInputLabel,
+                      onPreviousInput: () => withSeconds ? controller.focus("seconds") : controller.focus("minutes"),
+                      readOnly,
+                      disabled,
+                      tabIndex: -1,
+                      onFocus: (event) => {
+                        handleFocus(event);
+                        amPmSelectProps?.onFocus?.(event);
+                      }
+                    }
+                  )
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "hidden",
+                  name,
+                  form,
+                  value: controller.hiddenInputValue,
+                  ...hiddenInputProps
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Popover.Dropdown,
+          {
+            ...getStyles("dropdown"),
+            onMouseDown: (event) => event.preventDefault(),
+            children: /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                __staticSelector: "MaskedDateInput",
+                ...calendarProps,
+                unstyled,
+                __preventFocus: true,
+                minDate,
+                maxDate,
+                locale,
+                getDayProps: _getDayProps,
+                size,
+                date: calendarDate,
+                getMonthControlProps: (date) => ({
+                  selected: controller.calendarValue ? isSameMonth(date, controller.calendarValue) : false,
+                  ...getMonthControlProps?.(date)
+                }),
+                getYearControlProps: (date) => ({
+                  selected: controller.calendarValue ? dayjs(date).isSame(controller.calendarValue, "year") : false,
+                  ...getYearControlProps?.(date)
+                }),
+                attributes
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+});
+MaskedDateInput.displayName = "@mantine/dates/MaskedDateInput";
+MaskedDateInput.classes = classes;
+
+export { MaskedDateInput };
+//# sourceMappingURL=MaskedDateInput.mjs.map