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

Yamada UI calendar component

{"version":3,"sources":["../src/use-month-picker.ts"],"sourcesContent":["import type { PropGetter } from \"@yamada-ui/core\"\nimport type { ChangeEvent, CSSProperties } from \"react\"\nimport type { UseCalendarProps } from \"./use-calendar\"\nimport type { UseCalendarPickerProps } from \"./use-calendar-picker\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { handlerAll, isActiveElement, useUpdateEffect } from \"@yamada-ui/utils\"\nimport dayjs from \"dayjs\"\nimport { useCallback, useState } from \"react\"\nimport { useCalendarPicker } from \"./use-calendar-picker\"\n\ninterface CalendarProps\n  extends Pick<\n    UseCalendarProps<Date | undefined>,\n    | \"defaultMonth\"\n    | \"defaultValue\"\n    | \"locale\"\n    | \"maxDate\"\n    | \"minDate\"\n    | \"month\"\n    | \"monthFormat\"\n    | \"onChange\"\n    | \"onChangeMonth\"\n    | \"value\"\n    | \"withControls\"\n    | \"withHeader\"\n    | \"withLabel\"\n    | \"yearFormat\"\n  > {}\n\ninterface UseMonthPickerOptions {\n  /**\n   * The type of the month picker.\n   */\n  type?: \"month\" | \"year\"\n  /**\n   * If `true`, the calendar component will be closed when value is selected.\n   *\n   * @default true\n   */\n  closeOnSelect?: boolean\n  /**\n   * The initial type of the month picker.\n   *\n   * @default 'month'\n   */\n  defaultType?: \"month\" | \"year\"\n  /**\n   * The format used for conversion.\n   * Check the docs to see the format of possible modifiers you can pass.\n   *\n   * @see Docs https://day.js.org/docs/en/display/format#list-of-localized-formats\n   * @default 'YYYY/MM'\n   */\n  inputFormat?: string\n  /**\n   * The callback invoked when type state changes.\n   */\n  onChangeType?: (type: \"month\" | \"year\") => void\n}\n\nexport interface UseMonthPickerProps\n  extends UseCalendarPickerProps<CalendarProps>,\n    UseMonthPickerOptions {}\n\nexport const useMonthPicker = ({\n  type: typeProp,\n  closeOnSelect = true,\n  defaultType = \"month\",\n  defaultValue,\n  placeholder,\n  value: valueProp,\n  onChange: onChangeProp,\n  onChangeType: onChangeTypeProp,\n  ...rest\n}: UseMonthPickerProps) => {\n  const [value, setValue] = useControllableState<Date | undefined>({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [type, setType] = useControllableState({\n    defaultValue: defaultType,\n    value: typeProp,\n    onChange: onChangeTypeProp,\n  })\n\n  const {\n    allowInput,\n    dateToString,\n    inputFormat,\n    inputRef,\n    locale,\n    pattern,\n    stringToDate,\n    formControlProps,\n    getCalendarProps,\n    getContainerProps,\n    getFieldProps,\n    getIconProps,\n    getPopoverProps,\n    inputProps,\n    onClose,\n  } = useCalendarPicker({\n    inputFormat: \"YYYY/MM\",\n    ...rest,\n    type,\n    defaultType,\n    defaultValue,\n    value,\n    onChange: setValue,\n    onChangeType: (type, year, month) => {\n      if (type !== \"date\") {\n        setType(type)\n      } else {\n        let value: Date | undefined = undefined\n\n        if (typeof year === \"number\" && typeof month === \"number\")\n          value = new Date(year, month)\n\n        const inputValue = dateToString(value)\n\n        setValue(value)\n        setInputValue(inputValue)\n\n        if (closeOnSelect && value) onClose()\n      }\n    },\n    onClear: () => {\n      setValue(undefined)\n      setInputValue(undefined)\n    },\n    onClose: () => {\n      const inputValue = dateToString(value)\n\n      setInputValue(inputValue)\n\n      rest.onClose?.()\n    },\n    __selectType: \"month\",\n  })\n\n  const [inputValue, setInputValue] = useState<string | undefined>(\n    dateToString(value),\n  )\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      let inputValue = ev.target.value\n\n      inputValue = inputValue.replace(pattern, \"\")\n\n      const value = stringToDate(inputValue)\n\n      setInputValue(inputValue)\n\n      if (!!value && dayjs(value).isValid()) {\n        setValue(value)\n      } else {\n        setValue(undefined)\n      }\n    },\n    [pattern, stringToDate, setInputValue, setValue],\n  )\n\n  useUpdateEffect(() => {\n    setValue(valueProp)\n  }, [valueProp])\n\n  useUpdateEffect(() => {\n    if (inputRef.current && isActiveElement(inputRef.current)) return\n\n    const inputValue = dateToString(value)\n\n    setInputValue(inputValue)\n  }, [value])\n\n  useUpdateEffect(() => {\n    const inputValue = dateToString(value)\n\n    setInputValue(inputValue)\n  }, [locale, inputFormat])\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}, ref = null) => {\n      const style: CSSProperties = {\n        ...props.style,\n        ...inputProps.style,\n        ...(formControlProps.disabled || !allowInput\n          ? { pointerEvents: \"none\" }\n          : {}),\n      }\n\n      return {\n        placeholder,\n        tabIndex: !allowInput ? -1 : 0,\n        ...formControlProps,\n        ...inputProps,\n        ...props,\n        ref,\n        style,\n        value: inputValue ?? \"\",\n        onChange: handlerAll(props.onChange, onChange),\n      }\n    },\n    [\n      inputProps,\n      allowInput,\n      placeholder,\n      formControlProps,\n      inputValue,\n      onChange,\n    ],\n  )\n\n  return {\n    value,\n    getCalendarProps,\n    getContainerProps,\n    getFieldProps,\n    getIconProps,\n    getInputProps,\n    getPopoverProps,\n    onClose,\n  }\n}\n\nexport type UseMonthPickerReturn = ReturnType<typeof useMonthPicker>\n"],"mappings":"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","names":["type","value","inputValue"]}