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

Yamada UI calendar component

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

// src/use-date-picker.ts
import { useControllableState } from "@yamada-ui/use-controllable-state";
import {
  createContext,
  handlerAll,
  isActiveElement,
  useUpdateEffect
} from "@yamada-ui/utils";
import dayjs from "dayjs";
import { useCallback, useState } from "react";
var [DatePickerProvider, useDatePickerContext] = createContext({
  name: "DatePickerContext",
  errorMessage: `useDatePickerContext returned is 'undefined'. Seems you forgot to wrap the components in "<DatePicker />"`
});
var useDatePicker = ({
  closeOnSelect = true,
  defaultValue,
  placeholder,
  value: valueProp,
  onChange: onChangeProp,
  ...rest
}) => {
  const [value, setValue] = useControllableState({
    defaultValue,
    value: valueProp,
    onChange: onChangeProp,
    onUpdate: (prev, next) => !isSameDate(prev, next)
  });
  const {
    allowInput,
    dateToString,
    inputFormat,
    inputRef,
    locale,
    pattern,
    stringToDate,
    formControlProps,
    getCalendarProps,
    getContainerProps,
    getFieldProps,
    getIconProps,
    getPopoverProps,
    inputProps,
    onClose
  } = useCalendarPicker({
    ...rest,
    defaultValue,
    value,
    onChange: (value2) => {
      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);
    }
  });
  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 {
        autoComplete: "off",
        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 {
  DatePickerProvider,
  useDatePickerContext,
  useDatePicker
};
//# sourceMappingURL=chunk-C27PTBDA.mjs.map