@mantine/dates 9.0.0-alpha.3 → 9.0.0-alpha.4

package/esm/components/MaskedDateInput/MaskedDateInput.mjs

@@ -1,626 +0,0 @@
-'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