@yamada-ui/calendar/dist/chunk-I5M4L5X7.mjs

Yamada UI calendar component

"use client"
import {
  useCalendarPicker
} from "./chunk-RUQS2HL6.mjs";

// src/use-month-picker.ts
import { useControllableState } from "@yamada-ui/use-controllable-state";
import { handlerAll, isActiveElement, useUpdateEffect } from "@yamada-ui/utils";
import dayjs from "dayjs";
import { useCallback, useState } from "react";
var useMonthPicker = ({
  type: typeProp,
  closeOnSelect = true,
  defaultType = "month",
  defaultValue,
  placeholder,
  value: valueProp,
  onChange: onChangeProp,
  onChangeType: onChangeTypeProp,
  ...rest
}) => {
  const [value, setValue] = useControllableState({
    defaultValue,
    value: valueProp,
    onChange: onChangeProp
  });
  const [type, setType] = useControllableState({
    defaultValue: defaultType,
    value: typeProp,
    onChange: onChangeTypeProp
  });
  const {
    allowInput,
    dateToString,
    inputFormat,
    inputRef,
    locale,
    pattern,
    stringToDate,
    formControlProps,
    getCalendarProps,
    getContainerProps,
    getFieldProps,
    getIconProps,
    getPopoverProps,
    inputProps,
    onClose
  } = useCalendarPicker({
    inputFormat: "YYYY/MM",
    ...rest,
    type,
    defaultType,
    defaultValue,
    value,
    onChange: setValue,
    onChangeType: (type2, year, month) => {
      if (type2 !== "date") {
        setType(type2);
      } else {
        let value2 = void 0;
        if (typeof year === "number" && typeof month === "number")
          value2 = new Date(year, month);
        const inputValue2 = dateToString(value2);
        setValue(value2);
        setInputValue(inputValue2);
        if (closeOnSelect && value2) onClose();
      }
    },
    onClear: () => {
      setValue(void 0);
      setInputValue(void 0);
    },
    onClose: () => {
      var _a;
      const inputValue2 = dateToString(value);
      setInputValue(inputValue2);
      (_a = rest.onClose) == null ? void 0 : _a.call(rest);
    },
    __selectType: "month"
  });
  const [inputValue, setInputValue] = useState(
    dateToString(value)
  );
  const onChange = useCallback(
    (ev) => {
      let inputValue2 = ev.target.value;
      inputValue2 = inputValue2.replace(pattern, "");
      const value2 = stringToDate(inputValue2);
      setInputValue(inputValue2);
      if (!!value2 && dayjs(value2).isValid()) {
        setValue(value2);
      } else {
        setValue(void 0);
      }
    },
    [pattern, stringToDate, setInputValue, setValue]
  );
  useUpdateEffect(() => {
    setValue(valueProp);
  }, [valueProp]);
  useUpdateEffect(() => {
    if (inputRef.current && isActiveElement(inputRef.current)) return;
    const inputValue2 = dateToString(value);
    setInputValue(inputValue2);
  }, [value]);
  useUpdateEffect(() => {
    const inputValue2 = dateToString(value);
    setInputValue(inputValue2);
  }, [locale, inputFormat]);
  const getInputProps = useCallback(
    (props = {}, ref = null) => {
      const style = {
        ...props.style,
        ...inputProps.style,
        ...formControlProps.disabled || !allowInput ? { pointerEvents: "none" } : {}
      };
      return {
        placeholder,
        tabIndex: !allowInput ? -1 : 0,
        ...formControlProps,
        ...inputProps,
        ...props,
        ref,
        style,
        value: inputValue != null ? inputValue : "",
        onChange: handlerAll(props.onChange, onChange)
      };
    },
    [
      inputProps,
      allowInput,
      placeholder,
      formControlProps,
      inputValue,
      onChange
    ]
  );
  return {
    value,
    getCalendarProps,
    getContainerProps,
    getFieldProps,
    getIconProps,
    getInputProps,
    getPopoverProps,
    onClose
  };
};

export {
  useMonthPicker
};
//# sourceMappingURL=chunk-I5M4L5X7.mjs.map