@oslokommune/punkt-react 14.5.4 → 15.0.0

package/src/components/calendar/Calendar.selection.test.tsx

@@ -0,0 +1,227 @@
+import '@testing-library/jest-dom'
+import { render, fireEvent, act } from '@testing-library/react'
+import { createRef } from 'react'
+import { parseISODateString } from 'shared-utils/date-utils'
+
+import { PktCalendar, IPktCalendar, PktCalendarHandle } from './Calendar'
+
+const createCalendar = (props: Partial<IPktCalendar> = {}) => {
+  return render(<PktCalendar {...props} />)
+}
+
+describe('PktCalendar', () => {
+  describe('Date selection functionality', () => {
+    test('selects single date correctly', () => {
+      const { container } = createCalendar()
+
+      // Find and click on a date
+      const availableDate = container.querySelector(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+      expect(availableDate).toBeInTheDocument()
+
+      fireEvent.click(availableDate!)
+
+      expect(availableDate).toHaveClass('pkt-calendar__date--selected')
+    })
+
+    test('handles multiple date selection', () => {
+      const { container } = createCalendar({ multiple: true })
+
+      // Find and click on multiple dates
+      const availableDates = container.querySelectorAll(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+      expect(availableDates.length).toBeGreaterThan(1)
+
+      fireEvent.click(availableDates[0])
+      fireEvent.click(availableDates[1])
+
+      expect(availableDates[0]).toHaveClass('pkt-calendar__date--selected')
+      expect(availableDates[1]).toHaveClass('pkt-calendar__date--selected')
+    })
+
+    test('respects maxMultiple limit', () => {
+      const { container } = createCalendar({ multiple: true, maxMultiple: 2 })
+
+      // Try to select more than maxMultiple dates
+      const availableDates = container.querySelectorAll(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+      expect(availableDates.length).toBeGreaterThan(2)
+
+      // Select 3 dates but only 2 should be selected
+      fireEvent.click(availableDates[0])
+      fireEvent.click(availableDates[1])
+      fireEvent.click(availableDates[2])
+
+      const selectedDates = container.querySelectorAll('.pkt-calendar__date--selected')
+      expect(selectedDates.length).toBeLessThanOrEqual(2)
+    })
+
+    test('handles pre-selected dates', () => {
+      const preSelectedDates = ['2024-06-15', '2024-06-20']
+      const { container } = createCalendar({
+        selected: preSelectedDates,
+        currentmonth: '2024-06-01',
+      })
+
+      const selectedDates = container.querySelectorAll('.pkt-calendar__date--selected')
+      expect(selectedDates.length).toBe(2)
+    })
+
+    test('toggles date selection when clicking same date twice', () => {
+      const { container } = createCalendar()
+
+      const availableDate = container.querySelector(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+      expect(availableDate).toBeInTheDocument()
+
+      // First click - select
+      fireEvent.click(availableDate!)
+      expect(availableDate).toHaveClass('pkt-calendar__date--selected')
+
+      // Second click - deselect
+      fireEvent.click(availableDate!)
+      expect(availableDate).not.toHaveClass('pkt-calendar__date--selected')
+    })
+  })
+
+  describe('Range selection functionality', () => {
+    test('handles range selection correctly', () => {
+      const { container } = createCalendar({ range: true })
+
+      const availableDates = container.querySelectorAll(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+      expect(availableDates.length).toBeGreaterThan(3)
+
+      // Select start date
+      fireEvent.click(availableDates[5])
+
+      // Select end date
+      fireEvent.click(availableDates[10])
+
+      // Check for range styling
+      const rangeStart = container.querySelector('.pkt-calendar__date--range-start')
+      const rangeEnd = container.querySelector('.pkt-calendar__date--range-end')
+      const rangeInBetween = container.querySelectorAll('.pkt-calendar__date--in-range')
+
+      expect(rangeStart).toBeInTheDocument()
+      expect(rangeEnd).toBeInTheDocument()
+      expect(rangeInBetween.length).toBeGreaterThan(0)
+    })
+
+    test('shows range hover preview', () => {
+      const { container } = createCalendar({ range: true })
+
+      const availableDates = container.querySelectorAll(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+
+      // Select start date
+      fireEvent.click(availableDates[5])
+
+      // Hover over potential end date
+      fireEvent.mouseOver(availableDates[10])
+
+      // Should show hover preview styling
+      const hoveredRanges = container.querySelectorAll('.pkt-calendar__date--in-range-hover')
+      expect(hoveredRanges.length).toBeGreaterThan(0)
+    })
+
+    test('clears range when selecting new start date', () => {
+      const { container } = createCalendar({ range: true })
+
+      const availableDates = container.querySelectorAll(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+
+      // Create initial range
+      fireEvent.click(availableDates[5])
+      fireEvent.click(availableDates[10])
+
+      // Select new start date
+      fireEvent.click(availableDates[2])
+
+      // Old range should be cleared
+      const selectedDates = container.querySelectorAll('.pkt-calendar__date--selected')
+      expect(selectedDates.length).toBe(1)
+    })
+  })
+
+  describe('API methods', () => {
+    test('addToSelected method works correctly', () => {
+      const ref = createRef<PktCalendarHandle>()
+      const { container } = render(
+        <PktCalendar ref={ref} multiple currentmonth="2024-06-01" />,
+      )
+
+      const testDate = parseISODateString('2024-06-15')
+      act(() => {
+        ref.current!.addToSelected(testDate)
+      })
+
+      const dateButton = container.querySelector('button[data-date="2024-06-15"]')
+      expect(dateButton).toHaveClass('pkt-calendar__date--selected')
+    })
+
+    test('removeFromSelected method works correctly', () => {
+      const ref = createRef<PktCalendarHandle>()
+      const { container } = render(
+        <PktCalendar ref={ref} multiple currentmonth="2024-06-01" />,
+      )
+
+      const testDate = parseISODateString('2024-06-15')
+      act(() => {
+        ref.current!.addToSelected(testDate)
+      })
+
+      act(() => {
+        ref.current!.removeFromSelected(testDate)
+      })
+
+      const dateButton = container.querySelector('button[data-date="2024-06-15"]')
+      expect(dateButton).not.toHaveClass('pkt-calendar__date--selected')
+    })
+
+    test('toggleSelected method works correctly', () => {
+      const ref = createRef<PktCalendarHandle>()
+      const { container } = render(
+        <PktCalendar ref={ref} currentmonth="2024-06-01" />,
+      )
+
+      const testDate = parseISODateString('2024-06-15')
+
+      // Toggle on
+      act(() => {
+        ref.current!.toggleSelected(testDate)
+      })
+
+      let dateButton = container.querySelector('button[data-date="2024-06-15"]')
+      expect(dateButton).toHaveClass('pkt-calendar__date--selected')
+
+      // Toggle off
+      act(() => {
+        ref.current!.toggleSelected(testDate)
+      })
+
+      dateButton = container.querySelector('button[data-date="2024-06-15"]')
+      expect(dateButton).not.toHaveClass('pkt-calendar__date--selected')
+    })
+
+    test('focusOnCurrentDate method works correctly', () => {
+      const ref = createRef<PktCalendarHandle>()
+      render(<PktCalendar ref={ref} />)
+
+      act(() => {
+        ref.current!.focusOnCurrentDate()
+      })
+
+      // Should focus on a date element
+      const focusedElement = document.activeElement
+      expect(focusedElement).toHaveClass('pkt-calendar__date')
+    })
+  })
+})

package/src/components/calendar/Calendar.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { type ForwardedRef, forwardRef, useImperativeHandle } from 'react'
+import { useCalendarState } from './useCalendarState'
+import { CalendarNav } from './CalendarNav'
+import { CalendarGrid } from './CalendarGrid'
+import type { IPktCalendar, PktCalendarHandle } from './types'
+
+export type { IPktCalendar, IPktCalendarStrings, PktCalendarHandle } from './types'
+
+export const PktCalendar = forwardRef<PktCalendarHandle, IPktCalendar>((
+  props,
+  ref: ForwardedRef<PktCalendarHandle>,
+) => {
+  const state = useCalendarState(props)
+
+  useImperativeHandle(ref, () => ({
+    handleDateSelect: state.handleDateSelect,
+    addToSelected: state.addToSelected,
+    removeFromSelected: state.removeFromSelected,
+    toggleSelected: state.toggleSelectedDate,
+    focusOnCurrentDate: state.focusOnCurrentDate,
+    close: state.close,
+  }), [state.handleDateSelect, state.addToSelected, state.removeFromSelected, state.toggleSelectedDate, state.focusOnCurrentDate, state.close])
+
+  return (
+    <div
+      ref={state.calendarRef}
+      className={[
+        'pkt-calendar',
+        state.weeknumbers && 'pkt-cal-weeknumbers',
+        state.className,
+      ].filter(Boolean).join(' ')}
+      onBlur={state.handleFocusOut}
+      onKeyDown={state.handleKeydown}
+    >
+      <CalendarNav
+        componentId={state.componentId}
+        strings={state.strings}
+        year={state.year}
+        month={state.month}
+        earliest={state.earliest}
+        latest={state.latest}
+        withcontrols={state.withcontrols}
+        prevMonth={state.prevMonth}
+        nextMonth={state.nextMonth}
+        changeMonth={state.changeMonth}
+      />
+      <CalendarGrid state={state} />
+    </div>
+  )
+})
+
+PktCalendar.displayName = 'PktCalendar'

package/src/components/calendar/CalendarGrid.tsx

@@ -0,0 +1,192 @@
+import {
+  DAYS_PER_WEEK,
+  calculateCalendarDimensions,
+  getCellType,
+  getDayNumber,
+} from 'shared-utils/calendar/calendar-grid'
+import {
+  getDayViewData,
+  getDayCellClasses,
+  getDayButtonClasses,
+  type IDayViewContext,
+  type IDayCellClassContext,
+} from './calendar-utils'
+import type { ICalendarState } from './types'
+
+export const CalendarGrid = ({ state }: { state: ICalendarState }) => {
+  const {
+    strings,
+    year,
+    month,
+    activeSelected,
+    focusedDate,
+    inRange,
+    rangeHovered,
+    range,
+    multiple,
+    weeknumbers,
+    selectableDatesRef,
+    tabIndexSetRef,
+    handleDateSelect,
+    handleRangeHover,
+    isExcluded,
+    isDayDisabled,
+    setFocusedDate,
+    todayDate,
+  } = state
+
+  const dayViewCtx: IDayViewContext = {
+    year,
+    month,
+    activeSelected,
+    focusedDate,
+    tabIndexSetRef,
+    isDayDisabled,
+  }
+
+  const cellClassCtx: IDayCellClassContext = {
+    range,
+    activeSelected,
+    rangeHovered,
+    inRange,
+    isExcluded,
+  }
+
+  const renderDayNames = () => {
+    const headers: React.ReactNode[] = []
+
+    if (weeknumbers) {
+      headers.push(
+        <th key="week-header">
+          <div className="pkt-calendar__week-number">{strings.week}</div>
+        </th>,
+      )
+    }
+
+    for (let i = 0; i < strings.daysShort.length; i++) {
+      headers.push(
+        <th key={`day-${i}`}>
+          <div className="pkt-calendar__day-name" aria-label={strings.days[i]}>
+            {strings.daysShort[i]}
+          </div>
+        </th>,
+      )
+    }
+
+    return <tr className="pkt-cal-week-row">{headers}</tr>
+  }
+
+  const renderDayView = (dayCounter: number, today: Date) => {
+    const data = getDayViewData(dayCounter, today, dayViewCtx)
+    const { currentDate, currentDateISO, isSelected, isDisabled: isDisabledVal, ariaLabel, tabindex } = data
+
+    selectableDatesRef.current.push({ currentDateISO, isDisabled: isDisabledVal, tabindex })
+
+    const cellClasses = getDayCellClasses(data, cellClassCtx)
+    const buttonClasses = getDayButtonClasses(data, cellClassCtx)
+
+    return (
+      <td key={currentDateISO} className={cellClasses}>
+        <button
+          type="button"
+          aria-pressed={isSelected ? 'true' : 'false'}
+          disabled={isDisabledVal}
+          className={`pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only ${buttonClasses}`}
+          onMouseOver={() => range && !isExcluded(currentDate) && handleRangeHover(currentDate)}
+          onFocus={() => {
+            if (range && !isExcluded(currentDate)) {
+              handleRangeHover(currentDate)
+            }
+            setFocusedDate(currentDateISO)
+          }}
+          aria-label={ariaLabel}
+          tabIndex={parseInt(tabindex)}
+          data-disabled={isDisabledVal ? 'disabled' : undefined}
+          data-date={currentDateISO}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              handleDateSelect(currentDate)
+            }
+          }}
+          onClick={(e) => {
+            if (!isDisabledVal) {
+              e.preventDefault()
+              handleDateSelect(currentDate)
+            }
+          }}
+        >
+          <span className="pkt-btn__text pkt-txt-14-light">{dayCounter}</span>
+        </button>
+      </td>
+    )
+  }
+
+  const renderEmptyDayCell = (day: number, key: string) => (
+    <td key={key} className="pkt-cal-other">
+      <div className="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only" data-disabled="disabled">
+        <span className="pkt-btn__text pkt-txt-14-light">{day}</span>
+      </div>
+    </td>
+  )
+
+  const renderCalendarBody = () => {
+    const today = todayDate
+    const dimensions = calculateCalendarDimensions(year, month)
+
+    selectableDatesRef.current = []
+    tabIndexSetRef.current = 0
+
+    let dayCounter = 1
+    let currentWeek = dimensions.initialWeek
+
+    const rows: React.ReactNode[] = []
+
+    for (let i = 0; i < dimensions.numRows; i++) {
+      const cells: React.ReactNode[] = []
+
+      if (weeknumbers) {
+        cells.push(
+          <td key={`week-${currentWeek}`} className="pkt-cal-week">
+            {currentWeek}
+          </td>,
+        )
+      }
+      currentWeek++
+
+      for (let j = 0; j < DAYS_PER_WEEK; j++) {
+        const cellType = getCellType(i, j, dayCounter, dimensions)
+
+        if (cellType === 'current-month') {
+          cells.push(renderDayView(dayCounter, today))
+          dayCounter++
+        } else {
+          const dayNumber = getDayNumber(cellType, j, dayCounter, dimensions)
+          cells.push(renderEmptyDayCell(dayNumber, `${cellType}-${i}-${j}`))
+          if (cellType === 'next-month') {
+            dayCounter++
+          }
+        }
+      }
+
+      rows.push(
+        <tr key={`row-${i}`} className="pkt-cal-week-row" role="row">
+          {cells}
+        </tr>,
+      )
+    }
+
+    return rows
+  }
+
+  return (
+    <table
+      className="pkt-cal-days pkt-txt-12-medium pkt-calendar__body"
+      role="grid"
+      aria-multiselectable={range || multiple || undefined}
+    >
+      <thead>{renderDayNames()}</thead>
+      <tbody>{renderCalendarBody()}</tbody>
+    </table>
+  )
+}

package/src/components/calendar/CalendarNav.tsx

@@ -0,0 +1,111 @@
+import {
+  isPrevMonthAllowed as checkPrevMonthAllowed,
+  isNextMonthAllowed as checkNextMonthAllowed,
+} from 'shared-utils/calendar/date-validation'
+import { PktIcon } from '../icon/Icon'
+import type { ICalendarNavProps } from './types'
+
+export const CalendarNav = ({
+  componentId,
+  strings,
+  year,
+  month,
+  earliest,
+  latest,
+  withcontrols,
+  prevMonth,
+  nextMonth,
+  changeMonth,
+}: ICalendarNavProps) => {
+  const renderMonthNavButton = (direction: 'prev' | 'next') => {
+    const isPrev = direction === 'prev'
+    const isAllowed = isPrev
+      ? checkPrevMonthAllowed(year, month, earliest)
+      : checkNextMonthAllowed(year, month, latest)
+    const label = isPrev ? strings.prevMonth : strings.nextMonth
+    const iconName = isPrev ? 'chevron-thin-left' : 'chevron-thin-right'
+    const btnClassName = isPrev ? 'pkt-calendar__prev-month' : 'pkt-calendar__next-month'
+    const onClick = isPrev ? prevMonth : nextMonth
+
+    return (
+      <div>
+        <button
+          type="button"
+          aria-label={label}
+          onClick={() => isAllowed && onClick()}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              if (isAllowed) onClick()
+            }
+          }}
+          className={[
+            'pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only',
+            btnClassName,
+            !isAllowed && 'pkt-invisible',
+          ].filter(Boolean).join(' ')}
+          data-disabled={!isAllowed ? 'disabled' : undefined}
+          aria-disabled={!isAllowed || undefined}
+          tabIndex={isAllowed ? 0 : -1}
+        >
+          <PktIcon className="pkt-btn__icon" name={iconName} />
+          <span className="pkt-btn__text">{label}</span>
+        </button>
+      </div>
+    )
+  }
+
+  const renderMonthNav = () => {
+    if (withcontrols) {
+      return (
+        <div className="pkt-cal-month-picker">
+          <label htmlFor={`${componentId}-monthnav`} className="pkt-hide">{strings.month}</label>
+          <select
+            aria-label={strings.month}
+            className="pkt-input pkt-input-compact"
+            id={`${componentId}-monthnav`}
+            value={month}
+            onChange={(e) => {
+              e.stopPropagation()
+              changeMonth(year, parseInt(e.target.value))
+            }}
+          >
+            {strings.months.map((monthName, index) => (
+              <option key={index} value={index}>
+                {monthName}
+              </option>
+            ))}
+          </select>
+          <label htmlFor={`${componentId}-yearnav`} className="pkt-hide">{strings.year}</label>
+          <input
+            aria-label={strings.year}
+            className="pkt-input pkt-cal-input-year pkt-input-compact"
+            id={`${componentId}-yearnav`}
+            type="number"
+            size={4}
+            placeholder="0000"
+            value={year}
+            onChange={(e) => {
+              e.stopPropagation()
+              changeMonth(parseInt(e.target.value), month)
+            }}
+          />
+        </div>
+      )
+    }
+
+    return (
+      <div className="pkt-txt-16-medium pkt-calendar__month-title" aria-live="polite">
+        {strings.months[month]} {year}
+      </div>
+    )
+  }
+
+  return (
+    <nav className="pkt-cal-month-nav">
+      {renderMonthNavButton('prev')}
+      {renderMonthNav()}
+      {renderMonthNavButton('next')}
+    </nav>
+  )
+}

package/src/components/calendar/calendar-utils.ts

@@ -0,0 +1,90 @@
+import classNames from 'classnames'
+import { formatISODate, newDateYMD, formatReadableDate } from 'shared-utils/date-utils'
+import type { TDateRangeMap } from 'shared-types/calendar'
+import type { TDayViewData } from './types'
+
+export interface IDayViewContext {
+  year: number
+  month: number
+  activeSelected: string[]
+  focusedDate: string | null
+  // Side-effect ref: tracks which day gets tabindex="0" (first non-disabled day)
+  tabIndexSetRef: React.MutableRefObject<number>
+  isDayDisabled: (date: Date, isSelected: boolean) => boolean
+}
+
+export interface IDayCellClassContext {
+  range: boolean
+  activeSelected: string[]
+  rangeHovered: Date | null
+  inRange: TDateRangeMap
+  isExcluded: (date: Date) => boolean
+}
+
+export function getDayViewData(dayCounter: number, today: Date, ctx: IDayViewContext): TDayViewData {
+  const currentDate = newDateYMD(ctx.year, ctx.month, dayCounter)
+  const currentDateISO = formatISODate(currentDate)
+  const isToday = currentDateISO === formatISODate(today)
+  const isSelected = ctx.activeSelected.includes(currentDateISO)
+  const isDisabledVal = ctx.isDayDisabled(currentDate, isSelected)
+
+  let tabindex: string
+  if (ctx.focusedDate) {
+    tabindex = ctx.focusedDate === currentDateISO && !isDisabledVal ? '0' : '-1'
+  } else if (!isDisabledVal && ctx.tabIndexSetRef.current === 0) {
+    ctx.tabIndexSetRef.current = dayCounter
+    tabindex = '0'
+  } else {
+    tabindex = ctx.tabIndexSetRef.current === dayCounter ? '0' : '-1'
+  }
+
+  return {
+    currentDate,
+    currentDateISO,
+    isToday,
+    isSelected,
+    isDisabled: isDisabledVal,
+    ariaLabel: formatReadableDate(currentDate),
+    tabindex,
+  }
+}
+
+export function getDayCellClasses(data: TDayViewData, ctx: IDayCellClassContext): string {
+  const { currentDateISO, isToday, isSelected } = data
+  const isRangeStart =
+    ctx.range &&
+    (ctx.activeSelected.length === 2 || ctx.rangeHovered !== null) &&
+    currentDateISO === ctx.activeSelected[0]
+  const isRangeEnd = ctx.range && ctx.activeSelected.length === 2 && currentDateISO === ctx.activeSelected[1]
+
+  return classNames({
+    'pkt-cal-today': isToday,
+    'pkt-cal-selected': isSelected,
+    'pkt-cal-in-range': ctx.inRange[currentDateISO],
+    'pkt-cal-excluded': ctx.isExcluded(data.currentDate),
+    'pkt-cal-in-range-first': isRangeStart,
+    'pkt-cal-in-range-last': isRangeEnd,
+    'pkt-cal-range-hover': ctx.rangeHovered !== null && currentDateISO === formatISODate(ctx.rangeHovered),
+  })
+}
+
+export function getDayButtonClasses(data: TDayViewData, ctx: IDayCellClassContext): string {
+  const { currentDateISO, isToday, isSelected, isDisabled: isDisabledVal } = data
+  const isRangeStart =
+    ctx.range &&
+    (ctx.activeSelected.length === 2 || ctx.rangeHovered !== null) &&
+    currentDateISO === ctx.activeSelected[0]
+  const isRangeEnd = ctx.range && ctx.activeSelected.length === 2 && currentDateISO === ctx.activeSelected[1]
+
+  return classNames({
+    'pkt-calendar__date': true,
+    'pkt-calendar__date--today': isToday,
+    'pkt-calendar__date--selected': isSelected,
+    'pkt-calendar__date--disabled': isDisabledVal,
+    'pkt-calendar__date--in-range': ctx.inRange[currentDateISO],
+    'pkt-calendar__date--in-range-hover':
+      ctx.rangeHovered !== null && currentDateISO === formatISODate(ctx.rangeHovered),
+    'pkt-calendar__date--range-start': isRangeStart,
+    'pkt-calendar__date--range-end': isRangeEnd,
+  })
+}