@oslokommune/punkt-react/src/components/datepicker/types.ts

React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo

import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react'
import type { IDatepickerStrings } from 'shared-types/datepicker'
import type { TPktInputSize } from 'shared-types/size'

export interface IPktDatepicker extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
  id: string
  label: string

  // Datepicker-specific
  value?: string | string[]
  dateformat?: string
  multiple?: boolean
  maxlength?: number
  range?: boolean
  showRangeLabels?: boolean
  weeknumbers?: boolean
  withcontrols?: boolean
  excludedates?: string[]
  excludeweekdays?: string[]
  currentmonth?: string
  today?: string
  calendarOpen?: boolean
  timezone?: string

  // InputWrapper props
  fullwidth?: boolean
  inputSize?: TPktInputSize
  hasFieldset?: boolean
  inline?: boolean
  helptext?: string | ReactNode
  helptextDropdown?: string | ReactNode
  helptextDropdownButton?: string
  hasError?: boolean
  errorMessage?: string | ReactNode
  optionalTag?: boolean
  optionalText?: string
  requiredTag?: boolean
  requiredText?: string
  tagText?: string
  useWrapper?: boolean

  // Localization
  strings?: IDatepickerStrings

  // Events
  onChange?: (e: ChangeEvent<HTMLInputElement>) => void
  onValueChange?: (values: string[]) => void

  // React standard
  className?: string
}

export interface IDatepickerState {
  // Identity
  id: string
  inputId: string

  // Values
  values: string[]

  // Calendar state
  calendarOpen: boolean

  // Props passthrough
  label: string
  dateformat: string
  multiple: boolean
  maxlength?: number
  range: boolean
  showRangeLabels: boolean
  weeknumbers: boolean
  withcontrols: boolean
  excludedates?: string[]
  excludeweekdays?: string[]
  disabled: boolean
  readOnly: boolean
  required: boolean
  name?: string
  placeholder?: string
  fullwidth: boolean
  inputSize: TPktInputSize
  hasFieldset: boolean
  inline: boolean
  helptext?: string | ReactNode
  helptextDropdown?: string | ReactNode
  helptextDropdownButton?: string
  hasError: boolean
  errorMessage?: string | ReactNode
  optionalTag: boolean
  optionalText?: string
  requiredTag: boolean
  requiredText?: string
  tagText?: string
  useWrapper: boolean
  className?: string
  minStr?: string
  maxStr?: string
  effectiveCurrentMonth?: string
  today?: string

  // Derived state
  inputType: string
  isIOSDevice: boolean
  strings: IDatepickerStrings
  inputClasses: string
  buttonClasses: string
  rangeLabelClasses: string
  datepickerInputsClasses: string
  isInputDisabled: boolean
  hasCounter: boolean

  // Refs
  inputRef: React.RefObject<HTMLInputElement | null>
  inputRefTo: React.RefObject<HTMLInputElement | null>
  changeInputRef: React.RefObject<HTMLInputElement | null>
  btnRef: React.RefObject<HTMLButtonElement | null>
  wrapperRef: React.RefObject<HTMLDivElement | null>

  // onChange passthrough for hidden input
  onChange?: (e: ChangeEvent<HTMLInputElement>) => void

  // Calendar callbacks
  toggleCalendar: () => void
  hideCalendar: () => void
  handleDateSelected: (selected: string[]) => void
  handleCalendarClose: () => void

  // Input callbacks
  handleFocus: () => void
  handleSingleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void
  handleRangeFromChange: (e: React.ChangeEvent<HTMLInputElement>) => void
  handleRangeToChange: (e: React.ChangeEvent<HTMLInputElement>) => void
  handleRangeBlur: () => void
  handleMultipleBlur: (e: React.FocusEvent<HTMLInputElement>) => void
  handleTagRemoved: (date: string) => void

  // Keyboard callbacks
  handleSingleKeydown: (e: React.KeyboardEvent<HTMLInputElement>) => void
  handleRangeFromKeydown: (e: React.KeyboardEvent<HTMLInputElement>) => void
  handleRangeToKeydown: (e: React.KeyboardEvent<HTMLInputElement>) => void
  handleMultipleKeydown: (e: React.KeyboardEvent<HTMLInputElement>) => void

  // Rest props (spread onto inputs)
  restProps: Record<string, unknown>
}