feat: DatePickerを内部的に利用する用になるため、onChangeDateを非推奨にし、onChangeを追加する

Author: AtsushiM

packages/smarthr-ui/src/components/DatePicker/DatePicker.tsx

@@ -2,9 +2,11 @@
 
 import dayjs from 'dayjs'
 import {
+  type ChangeEvent,
   type ComponentProps,
   type ComponentPropsWithRef,
   type FocusEventHandler,
+  type MouseEvent,
   type ReactNode,
   forwardRef,
   memo,
@@ -28,6 +30,7 @@ import { Portal } from './Portal'
 import { parseJpnDateString } from './datePickerHelper'
 import { useGlobalKeyDown } from './useGlobalKeyDown'
 
+type ChangeLikeEvent = ChangeEvent | React.KeyboardEvent | MouseEvent
 type Props = {
   /** input 要素の `value` 属性の値 */
   value?: string | null
@@ -53,13 +56,17 @@ type Props = {
   formatDate?: (date: Date | null) => string
   /** 入出力用文字列と併記する別フォーマット処理を記述する関数 */
   showAlternative?: (date: Date | null) => ReactNode
-  /** 選択された日付が変わった時に発火するコールバック関数 */
+  /** @deprecated onChangeDate は非推奨です。onChange を使ってください。 */
   onChangeDate?: (date: Date | null, value: string, other: { errors: string[] }) => void
+  /** 選択された日付が変わった時に発火するコールバック関数 */
+  onChange?: (
+    e: ChangeEvent<HTMLInputElement>,
+    other: { date: Date | null; formatValue: string; errors: string[] },
+  ) => void
 }
 type OmitInputAttributes =
   | keyof Props
   | 'type'
-  | 'onChange'
   | 'onKeyPress'
   | 'onFocus'
   | 'aria-expanded'
@@ -101,6 +108,7 @@ export const DatePicker = forwardRef<HTMLInputElement, Props & InputAttributes>(
       formatDate,
       showAlternative,
       onChangeDate,
+      onChange,
       onBlur,
       ...inputAttrs
     },
@@ -172,31 +180,54 @@ export const DatePicker = forwardRef<HTMLInputElement, Props & InputAttributes>(
         }
 
         const nextDate = isValid ? newDate : null
-        const currentValue = dateToString(nextDate)
+        const formatValue = dateToString(nextDate)
 
-        inputRef.current.value = currentValue
+        inputRef.current.value = formatValue
         setAlternativeFormat(dateToAlternativeFormat(nextDate))
         setSelectedDate(nextDate)
 
-        return [nextDate, currentValue, errors] as [Date | null, string, string[]]
+        return [nextDate, formatValue, errors] as [Date | null, string, string[]]
       },
       [selectedDate, dateToString, dateToAlternativeFormat],
     )
-    const updateDate = useMemo(
-      () =>
-        onChangeDate
-          ? (newDate: Date | null) => {
-              const result = baseUpdateDate(newDate)
+    const updateDate = useMemo(() => {
+      if (onChange) {
+        return (e: ChangeLikeEvent, newDate: Date | null) => {
+          const result = baseUpdateDate(newDate)
+
+          if (result) {
+            e.preventDefault()
+            e.stopPropagation()
+
+            const [nextDate, formatValue, errors] = result
+            const event = new Event('change', { bubbles: true })
+            // HINT: resultが存在する時点でinputRef.currentは必ず存在する
+            const input = inputRef.current as HTMLInputElement
+
+            input.dispatchEvent(event)
+            onChange(
+              // HINT: Eventのままではtargetがnullの場合もあり得ることになるので強制的に型変換する
+              event as ChangeEvent<HTMLInputElement>,
+              { date: nextDate, formatValue, errors },
+            )
+          }
+        }
+      }
+
+      return onChangeDate
+        ? (_e: ChangeLikeEvent, newDate: Date | null) => {
+            const result = baseUpdateDate(newDate)
 
-              if (result) {
-                const [nextDate, currentValue, errors] = result
+            if (result) {
+              const [nextDate, formatValue, errors] = result
 
-                onChangeDate(nextDate, currentValue, { errors })
-              }
+              onChangeDate(nextDate, formatValue, { errors })
             }
-          : baseUpdateDate,
-      [onChangeDate, baseUpdateDate],
-    )
+          }
+        : (_e: ChangeLikeEvent, newDate: Date | null) => {
+            baseUpdateDate(newDate)
+          }
+    }, [onChange, onChangeDate, baseUpdateDate])
 
     const closeCalendar = useCallback(() => setIsCalendarShown(false), [])
     const openCalendar = useCallback(() => {
@@ -288,7 +319,7 @@ export const DatePicker = forwardRef<HTMLInputElement, Props & InputAttributes>(
     const baseHandleBlur = useCallback<FocusEventHandler<HTMLInputElement>>(
       (e) => {
         setIsInputFocused(false)
-        updateDate(e.target.value ? stringToDate(e.target.value) : null)
+        updateDate(e, e.target.value ? stringToDate(e.target.value) : null)
       },
       [stringToDate, updateDate],
     )
@@ -328,7 +359,7 @@ export const DatePicker = forwardRef<HTMLInputElement, Props & InputAttributes>(
       (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === 'Enter') {
           ;(isCalendarShown ? openCalendar : closeCalendar)()
-          updateDate(stringToDate(e.currentTarget.value))
+          updateDate(e, stringToDate(e.currentTarget.value))
         }
       },
       [isCalendarShown, updateDate, closeCalendar, openCalendar, stringToDate],
@@ -338,8 +369,8 @@ export const DatePicker = forwardRef<HTMLInputElement, Props & InputAttributes>(
       openCalendar()
     }, [openCalendar])
     const onSelectDateCalendar = useCallback(
-      (_: any, selected: Date | null) => {
-        updateDate(selected)
+      (e: ChangeLikeEvent, selected: Date | null) => {
+        updateDate(e, selected)
         // delay hiding calendar because calendar will be displayed when input is focused
         requestAnimationFrame(closeCalendar)