@oslokommune/punkt-react 14.5.3 → 15.0.0

package/src/components/datepicker/Datepicker.validation.test.tsx

@@ -0,0 +1,317 @@
+import '@testing-library/jest-dom'
+
+import { fireEvent, render } from '@testing-library/react'
+
+import { IPktDatepicker, PktDatepicker } from './Datepicker'
+
+const datePickerId = 'datepickerId'
+const label = 'Date Picker Label'
+
+const createDatepickerTest = (props: Partial<IPktDatepicker> = {}) => {
+  const defaultProps: IPktDatepicker = {
+    label,
+    id: datePickerId,
+    ...props,
+  }
+
+  return render(<PktDatepicker {...defaultProps} />)
+}
+
+describe('PktDatepicker', () => {
+  describe('Date boundary testing', () => {
+    test('handles minimum possible dates', () => {
+      const { container } = createDatepickerTest({
+        value: '1900-01-01',
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input.value).toBe('1900-01-01')
+    })
+
+    test('handles maximum possible dates', () => {
+      const { container } = createDatepickerTest({
+        value: '2100-12-31',
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input.value).toBe('2100-12-31')
+    })
+
+    test('handles year boundaries correctly', () => {
+      const { container } = createDatepickerTest({
+        value: '2024-12-31',
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input.value).toBe('2024-12-31')
+    })
+
+    test('handles month boundaries correctly', () => {
+      const { container } = createDatepickerTest({
+        value: '2024-01-31',
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input.value).toBe('2024-01-31')
+    })
+
+    test('handles leap year dates correctly', () => {
+      const { container } = createDatepickerTest({
+        value: '2024-02-29',
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input.value).toBe('2024-02-29')
+    })
+
+    test.each([
+      { desc: 'date before min', min: '2024-06-01', max: '2024-06-30', value: '2024-05-15' },
+      { desc: 'date after max', min: '2024-06-01', max: '2024-06-30', value: '2024-07-15' },
+      { desc: 'valid date within range', min: '2024-06-01', max: '2024-06-30', value: '2024-06-15' },
+    ])('renders with $desc ($value) without crashing', ({ min, max, value }) => {
+      const { container } = createDatepickerTest({
+        min,
+        max,
+        value,
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input.value).toBe(value)
+      expect(input).toHaveAttribute('min', min)
+      expect(input).toHaveAttribute('max', max)
+    })
+  })
+
+  describe('Error handling and edge cases', () => {
+    test('handles empty values correctly', () => {
+      const { container } = createDatepickerTest({
+        value: '',
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input.value).toBe('')
+    })
+
+    test('handles undefined value correctly', () => {
+      const { container } = createDatepickerTest({
+        value: undefined,
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input.value).toBe('')
+    })
+
+    test('handles empty array value for multiple', () => {
+      const { container } = createDatepickerTest({
+        multiple: true,
+        value: [],
+      })
+
+      const tags = container.querySelectorAll('.pkt-date-tags .pkt-tag')
+      expect(tags.length).toBe(0)
+    })
+
+    test('handles single-value array for range mode', () => {
+      const { container } = createDatepickerTest({
+        range: true,
+        value: ['2024-06-15'],
+      })
+
+      const inputs = container.querySelectorAll('input[type="date"]') as NodeListOf<HTMLInputElement>
+      expect(inputs[0].value).toBe('2024-06-15')
+      expect(inputs[1].value).toBe('')
+    })
+
+    test('handles many dates with maxlength', () => {
+      // Generate 20 unique dates
+      const dates = Array.from({ length: 20 }, (_, i) => {
+        const day = String(i + 1).padStart(2, '0')
+        return `2024-06-${day}`
+      })
+
+      const { container } = createDatepickerTest({
+        multiple: true,
+        maxlength: 10,
+        value: dates,
+      })
+
+      // Should render all dates as tags (maxlength only restricts new additions)
+      const tags = container.querySelectorAll('.pkt-date-tags .pkt-tag')
+      expect(tags.length).toBe(dates.length)
+
+      // Input should be disabled since we're over maxlength
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input).toBeDisabled()
+    })
+
+    test('handles conflicting properties gracefully (both multiple and range)', () => {
+      // When both multiple and range are set, multiple takes precedence
+      const { container } = createDatepickerTest({
+        multiple: true,
+        range: true,
+        value: ['2024-06-15', '2024-06-20'],
+      })
+
+      // Multiple mode should render tags
+      const tags = container.querySelectorAll('.pkt-date-tags .pkt-tag')
+      expect(tags.length).toBe(2)
+
+      // Should have only one input (multiple mode), not two (range mode)
+      const inputs = container.querySelectorAll('input[type="date"]')
+      expect(inputs.length).toBe(1)
+    })
+
+    test('handles string value passed as array', () => {
+      const { container } = createDatepickerTest({
+        value: '2024-06-15',
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input.value).toBe('2024-06-15')
+    })
+
+    test('handles array value passed for single mode', () => {
+      const { container } = createDatepickerTest({
+        value: ['2024-06-15'],
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input.value).toBe('2024-06-15')
+    })
+  })
+
+  describe('Controlled vs uncontrolled', () => {
+    test('works as controlled component', () => {
+      const { container, rerender } = render(
+        <PktDatepicker id={datePickerId} label={label} value="2024-06-15" />,
+      )
+
+      let input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input.value).toBe('2024-06-15')
+
+      rerender(<PktDatepicker id={datePickerId} label={label} value="2024-07-20" />)
+
+      input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input.value).toBe('2024-07-20')
+    })
+
+    test('works as uncontrolled component', () => {
+      const { container } = createDatepickerTest()
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input.value).toBe('')
+    })
+
+    test('controlled range updates both inputs on rerender', () => {
+      const { container, rerender } = render(
+        <PktDatepicker id={datePickerId} label={label} range value={['2024-06-15', '2024-06-25']} />,
+      )
+
+      const inputs = container.querySelectorAll('input[type="date"]') as NodeListOf<HTMLInputElement>
+      expect(inputs[0].value).toBe('2024-06-15')
+      expect(inputs[1].value).toBe('2024-06-25')
+
+      rerender(
+        <PktDatepicker id={datePickerId} label={label} range value={['2024-07-01', '2024-07-31']} />,
+      )
+
+      const updatedInputs = container.querySelectorAll('input[type="date"]') as NodeListOf<HTMLInputElement>
+      expect(updatedInputs[0].value).toBe('2024-07-01')
+      expect(updatedInputs[1].value).toBe('2024-07-31')
+    })
+
+    test('controlled multiple updates tags on rerender', () => {
+      const { container, rerender } = render(
+        <PktDatepicker id={datePickerId} label={label} multiple value={['2024-06-15']} />,
+      )
+
+      let tags = container.querySelectorAll('.pkt-date-tags .pkt-tag')
+      expect(tags.length).toBe(1)
+
+      rerender(
+        <PktDatepicker
+          id={datePickerId}
+          label={label}
+          multiple
+          value={['2024-06-15', '2024-06-20', '2024-06-25']}
+        />,
+      )
+
+      tags = container.querySelectorAll('.pkt-date-tags .pkt-tag')
+      expect(tags.length).toBe(3)
+    })
+
+    test('calendarOpen prop controls calendar state', () => {
+      const { container, rerender } = render(
+        <PktDatepicker id={datePickerId} label={label} calendarOpen={false} />,
+      )
+
+      let popup = container.querySelector('.pkt-calendar-popup')
+      expect(popup).toHaveAttribute('hidden')
+
+      rerender(<PktDatepicker id={datePickerId} label={label} calendarOpen={true} />)
+
+      popup = container.querySelector('.pkt-calendar-popup')
+      expect(popup).not.toHaveAttribute('hidden')
+    })
+  })
+
+  describe('Form integration', () => {
+    test('renders hidden input for form submission when name is set', () => {
+      const { container } = createDatepickerTest({
+        name: 'dateField',
+        value: '2024-06-15',
+      })
+
+      const hiddenInput = container.querySelector('input[type="hidden"]') as HTMLInputElement
+      expect(hiddenInput).toBeInTheDocument()
+      expect(hiddenInput).toHaveAttribute('name', 'dateField')
+      expect(hiddenInput.value).toBe('2024-06-15')
+    })
+
+    test('does not render hidden input when name is not set', () => {
+      const { container } = createDatepickerTest({
+        value: '2024-06-15',
+      })
+
+      const hiddenInput = container.querySelector('input[type="hidden"]')
+      expect(hiddenInput).not.toBeInTheDocument()
+    })
+
+    test('hidden input has comma-separated value for multiple', () => {
+      const { container } = createDatepickerTest({
+        name: 'dates',
+        multiple: true,
+        value: ['2024-06-15', '2024-06-20'],
+      })
+
+      const hiddenInput = container.querySelector('input[type="hidden"]') as HTMLInputElement
+      expect(hiddenInput.value).toBe('2024-06-15,2024-06-20')
+    })
+
+    test('hidden input has comma-separated value for range', () => {
+      const { container } = createDatepickerTest({
+        name: 'dateRange',
+        range: true,
+        value: ['2024-06-15', '2024-06-25'],
+      })
+
+      const hiddenInput = container.querySelector('input[type="hidden"]') as HTMLInputElement
+      expect(hiddenInput.value).toBe('2024-06-15,2024-06-25')
+    })
+
+    test('submits form on Enter key press', () => {
+      const submitHandler = jest.fn((e: Event) => e.preventDefault())
+      const { container } = render(
+        <form onSubmit={submitHandler as unknown as React.FormEventHandler}>
+          <PktDatepicker id={datePickerId} label={label} value="2024-06-15" />
+        </form>,
+      )
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      fireEvent.keyDown(input, { key: 'Enter' })
+
+      expect(submitHandler).toHaveBeenCalled()
+    })
+  })
+})

package/src/components/datepicker/DatepickerInputs.tsx

@@ -0,0 +1,184 @@
+import { PktIcon } from '../icon/Icon'
+import { DateTags } from './DateTags'
+import type { IDatepickerState } from './types'
+
+export const DatepickerInputs = ({ state }: { state: IDatepickerState }) => {
+  const {
+    id,
+    inputId,
+    values,
+    dateformat,
+    multiple,
+    range,
+    showRangeLabels,
+    disabled,
+    readOnly,
+    required,
+    label,
+    name,
+    placeholder,
+    hasError,
+    helptext,
+    minStr,
+    maxStr,
+    inputType,
+    isIOSDevice,
+    strings,
+    inputClasses,
+    buttonClasses,
+    rangeLabelClasses,
+    datepickerInputsClasses,
+    isInputDisabled,
+    inputRef,
+    inputRefTo,
+    btnRef,
+    toggleCalendar,
+    handleFocus,
+    handleSingleInputChange,
+    handleRangeFromChange,
+    handleRangeToChange,
+    handleRangeBlur,
+    handleMultipleBlur,
+    handleTagRemoved,
+    handleSingleKeydown,
+    handleRangeFromKeydown,
+    handleRangeToKeydown,
+    handleMultipleKeydown,
+    restProps,
+  } = state
+
+  const renderCalendarButton = () => (
+    <button
+      ref={btnRef}
+      className={buttonClasses}
+      type="button"
+      onClick={toggleCalendar}
+      disabled={disabled}
+      aria-label={strings.calendar?.buttonAltText ?? 'Åpne kalender'}
+    >
+      <PktIcon name="calendar" />
+      <span className="pkt-btn__text">{strings.calendar?.buttonAltText ?? 'Åpne kalender'}</span>
+    </button>
+  )
+
+  if (multiple) {
+    return (
+      <>
+        <DateTags dates={values} dateformat={dateformat} idBase={id} strings={strings} onDateRemoved={handleTagRemoved} />
+        <div className="pkt-datepicker__inputs">
+          <div className="pkt-input__container">
+            <input
+              {...restProps}
+              ref={inputRef}
+              className={inputClasses}
+              type={inputType}
+              id={inputId}
+              name={name ?? id}
+              placeholder={placeholder}
+              readOnly={readOnly || (isIOSDevice && !readOnly)}
+              disabled={isInputDisabled}
+              aria-describedby={helptext ? `${id}-helptext` : undefined}
+              aria-invalid={hasError}
+              aria-errormessage={hasError ? `${id}-error` : undefined}
+              onClick={toggleCalendar}
+              onKeyDown={handleMultipleKeydown}
+              onFocus={handleFocus}
+              onBlur={handleMultipleBlur}
+            />
+            {renderCalendarButton()}
+          </div>
+        </div>
+      </>
+    )
+  }
+
+  if (range) {
+    return (
+      <div className={datepickerInputsClasses}>
+        <div className="pkt-input__container">
+          {showRangeLabels && <div className="pkt-input-prefix">{strings.generic?.from ?? 'Fra'}</div>}
+          <input
+            {...restProps}
+            ref={inputRef}
+            className={inputClasses}
+            type={inputType}
+            id={inputId}
+            name={name ? `${name}-from` : `${id}-from`}
+            value={values[0] ?? ''}
+            min={minStr}
+            max={maxStr}
+            placeholder={placeholder}
+            readOnly={readOnly || (isIOSDevice && !readOnly)}
+            disabled={disabled}
+            required={required}
+            aria-label={`${label} ${strings.generic?.from ?? 'Fra'}`}
+            aria-describedby={helptext ? `${id}-helptext` : undefined}
+            aria-invalid={hasError}
+            aria-errormessage={hasError ? `${id}-error` : undefined}
+            onClick={toggleCalendar}
+            onKeyDown={handleRangeFromKeydown}
+            onFocus={handleFocus}
+            onBlur={handleRangeBlur}
+            onChange={handleRangeFromChange}
+          />
+          <div className={rangeLabelClasses} id={`${id}-to-label`}>
+            {strings.generic?.to ?? 'Til'}
+          </div>
+          {!showRangeLabels && <div className="pkt-input-separator">–</div>}
+          <input
+            ref={inputRefTo}
+            className={inputClasses}
+            type={inputType}
+            id={`${id}-to`}
+            name={name ? `${name}-to` : `${id}-to`}
+            value={values[1] ?? ''}
+            min={minStr}
+            max={maxStr}
+            readOnly={readOnly || (isIOSDevice && !readOnly)}
+            disabled={disabled}
+            aria-label={`${label} ${strings.generic?.to ?? 'Til'}`}
+            aria-invalid={hasError}
+            onClick={toggleCalendar}
+            onKeyDown={handleRangeToKeydown}
+            onFocus={handleFocus}
+            onBlur={handleRangeBlur}
+            onChange={handleRangeToChange}
+          />
+          {renderCalendarButton()}
+        </div>
+      </div>
+    )
+  }
+
+  // Single mode
+  return (
+    <div className="pkt-datepicker__inputs">
+      <div className="pkt-input__container">
+        <input
+          {...restProps}
+          ref={inputRef}
+          className={inputClasses}
+          type={inputType}
+          id={inputId}
+          name={name ?? id}
+          value={values[0] ?? ''}
+          min={minStr}
+          max={maxStr}
+          placeholder={placeholder}
+          readOnly={readOnly || (isIOSDevice && !readOnly)}
+          disabled={disabled}
+          required={required}
+          aria-describedby={helptext ? `${id}-helptext` : undefined}
+          aria-invalid={hasError}
+          aria-errormessage={hasError ? `${id}-error` : undefined}
+          onClick={toggleCalendar}
+          onKeyDown={handleSingleKeydown}
+          onFocus={handleFocus}
+          onBlur={undefined}
+          onChange={handleSingleInputChange}
+        />
+        {renderCalendarButton()}
+      </div>
+    </div>
+  )
+}

package/src/components/datepicker/DatepickerPopup.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import { handleCalendarPosition } from 'shared-utils/datepicker-utils'
+
+import { PktCalendar } from '../calendar/Calendar'
+
+interface DatepickerPopupProps {
+  open: boolean
+  multiple?: boolean
+  range?: boolean
+  weeknumbers?: boolean
+  withcontrols?: boolean
+  selected?: string[]
+  earliest?: string | null
+  latest?: string | null
+  excludedates?: string[]
+  excludeweekdays?: string[]
+  maxMultiple?: number
+  currentmonth?: string | null
+  today?: string
+  inputRef?: React.RefObject<HTMLInputElement | null>
+  hasCounter?: boolean
+  onDateSelected: (selected: string[]) => void
+  onClose: () => void
+}
+
+export const DatepickerPopup = ({
+  open,
+  multiple = false,
+  range = false,
+  weeknumbers = false,
+  withcontrols = false,
+  selected = [],
+  earliest,
+  latest,
+  excludedates,
+  excludeweekdays,
+  maxMultiple,
+  currentmonth,
+  today,
+  inputRef,
+  hasCounter = false,
+  onDateSelected,
+  onClose,
+}: DatepickerPopupProps) => {
+  const popupRef = useRef<HTMLDivElement>(null)
+  const hasBeenOpenedRef = useRef(false)
+
+  if (open) {
+    hasBeenOpenedRef.current = true
+  }
+
+  useEffect(() => {
+    if (open) {
+      handleCalendarPosition(popupRef.current, inputRef?.current ?? null, hasCounter)
+    }
+  }, [open, inputRef, hasCounter])
+
+  const popupClasses = ['pkt-calendar-popup', open ? 'show' : 'hide'].join(' ')
+  const shouldRenderCalendar = open || hasBeenOpenedRef.current
+
+  return (
+    <div
+      ref={popupRef}
+      className={popupClasses}
+      hidden={!open}
+      aria-hidden={!open}
+    >
+      {shouldRenderCalendar && (
+        <PktCalendar
+          multiple={multiple}
+          range={range}
+          weeknumbers={weeknumbers}
+          withcontrols={withcontrols}
+          selected={selected}
+          earliest={earliest}
+          latest={latest}
+          excludedates={excludedates}
+          excludeweekdays={excludeweekdays}
+          maxMultiple={maxMultiple}
+          currentmonth={currentmonth}
+          today={today}
+          onDateSelected={onDateSelected}
+          onClose={onClose}
+        />
+      )}
+    </div>
+  )
+}