feat(input-date): support onKeyDown and onKeyUp

packages/fractal/src/components/InputDate/InputDate.tsx

@@ -82,6 +82,8 @@ export const InputDate = forwardRef<CombinedRefs, InputDateProps>(
  name,
  onChange,
  onFieldChange,
+ onKeyDown,
+ onKeyUp,
  placeholders,
  readOnly = false,
  required = false,
@@ -294,6 +296,10 @@ export const InputDate = forwardRef<CombinedRefs, InputDateProps>(
  default:
  break
  }
+
+ if (isFunction(onKeyDown)) {
+ onKeyDown(event, type)
+ }
  }
 
  return (
@@ -337,6 +343,9 @@ export const InputDate = forwardRef<CombinedRefs, InputDateProps>(
  onChange={(event, newDay) => handleChange(event, newDay, 'day')}
  onFocus={handleFocus}
  onKeyDown={(event) => handleKeyDown(event, 'day')}
+ {...(isFunction(onKeyUp)
+ ? { onKeyUp: (event) => onKeyUp(event, 'day') }
+ : {})}
  />
 
  <InputText
@@ -367,6 +376,9 @@ export const InputDate = forwardRef<CombinedRefs, InputDateProps>(
  }
  onFocus={handleFocus}
  onKeyDown={(event) => handleKeyDown(event, 'month')}
+ {...(isFunction(onKeyUp)
+ ? { onKeyUp: (event) => onKeyUp(event, 'month') }
+ : {})}
  />
 
  <InputText
@@ -402,6 +414,9 @@ export const InputDate = forwardRef<CombinedRefs, InputDateProps>(
  onChange={(event, newYear) => handleChange(event, newYear, 'year')}
  onFocus={handleFocus}
  onKeyDown={(event) => handleKeyDown(event, 'year')}
+ {...(isFunction(onKeyUp)
+ ? { onKeyUp: (event) => onKeyUp(event, 'year') }
+ : {})}
  />
  </div>
 

packages/fractal/src/components/InputDate/InputDate.types.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, HTMLAttributes } from 'react'
+import type { ChangeEvent, HTMLAttributes, KeyboardEvent } from 'react'
 
 export type DateFormat = {
  day?: number | undefined
@@ -27,7 +27,7 @@ export type CombinedRefs = {
 export interface InputDateProps
  extends Omit<
  HTMLAttributes<HTMLDivElement>,
- 'defaultValue' | 'onChange' | 'placeholder'
+ 'defaultValue' | 'onChange' | 'onKeyDown' | 'onKeyUp' | 'placeholder'
  > {
  /** Indicates if the day field must be focused on render. */
  autoFocus?: boolean
@@ -80,6 +80,17 @@ export interface InputDateProps
  type: keyof DateFormat,
  newDay: number,
  ) => void
+ /** Event handler when a key is pressed down in one of the fields. */
+ onKeyDown: (
+ event: KeyboardEvent<HTMLInputElement>,
+ type: keyof DateFormat,
+ ) => void
+
+ /** Event handler when a key is released in one of the fields. */
+ onKeyUp: (
+ event: KeyboardEvent<HTMLInputElement>,
+ type: keyof DateFormat,
+ ) => void
  /**
  * A string to display in each of the date field when the value is
  * empty.