@oslokommune/punkt-react 15.2.0 → 15.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "15.2.0",
+  "version": "15.2.1",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "67c9a3c4ede793c0e6bf1e4611ae29d00cf072ee"
+  "gitHead": "752427d52a7f6ace1d025a726cf9199d2aeaa240"
 }

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

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom'
 
+import { type ChangeEvent, useState } from 'react'
 import { fireEvent, render, waitFor } from '@testing-library/react'
 
 import { IPktDatepicker, PktDatepicker } from './Datepicker'
@@ -196,7 +197,7 @@ describe('PktDatepicker', () => {
       expect(separator).not.toBeInTheDocument()
     })
 
-    test('does not dispatch onValueChange for incomplete range (only from)', () => {
+    test('dispatches onValueChange for partial range (only from)', () => {
       const handleValueChange = jest.fn()
       const { container } = createDatepickerTest({
         range: true,
@@ -206,7 +207,7 @@ describe('PktDatepicker', () => {
       const inputs = container.querySelectorAll('input[type="date"]') as NodeListOf<HTMLInputElement>
       fireEvent.change(inputs[0], { target: { value: '2024-06-15' } })
 
-      expect(handleValueChange).not.toHaveBeenCalled()
+      expect(handleValueChange).toHaveBeenCalledWith(['2024-06-15'])
     })
 
     test('dispatches onValueChange when both range dates are present', () => {
@@ -259,6 +260,41 @@ describe('PktDatepicker', () => {
       const toInput = container.querySelector(`#${datePickerId}-to`) as HTMLInputElement
       expect(toInput).toHaveAttribute('aria-label', `${label} Til`)
     })
+
+    test('controlled range with onChange updates value via useState', async () => {
+      function ControlledRange() {
+        const [val, setVal] = useState('2024-06-15,2024-06-25')
+        return (
+          <>
+            <PktDatepicker
+              id="range-controlled"
+              label="Range"
+              range
+              value={val}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setVal(e.target.value)}
+            />
+            <span data-testid="output">{val}</span>
+          </>
+        )
+      }
+
+      const { container, getByTestId } = render(<ControlledRange />)
+      const inputs = container.querySelectorAll('input[type="date"]') as NodeListOf<HTMLInputElement>
+
+      // Change the "from" date
+      fireEvent.change(inputs[0], { target: { value: '2024-06-10' } })
+
+      await waitFor(() => {
+        expect(getByTestId('output').textContent).toBe('2024-06-10,2024-06-25')
+      })
+
+      // Change the "to" date
+      fireEvent.change(inputs[1], { target: { value: '2024-06-30' } })
+
+      await waitFor(() => {
+        expect(getByTestId('output').textContent).toBe('2024-06-10,2024-06-30')
+      })
+    })
   })
 
   describe('Single date selection', () => {

package/src/components/datepicker/useDatepickerState.ts

@@ -242,10 +242,8 @@ export function useDatepickerState(
       const processed = processDateSelection(selected, multiple, range)
       const newValues = valueToArray(processed)
 
-      // In range mode, only fire callbacks when both dates are selected
-      const shouldNotify = !range || newValues.length === 2
-      updateValues(newValues, shouldNotify)
-      if (shouldNotify) dispatchChange(newValues)
+      updateValues(newValues)
+      dispatchChange(newValues)
 
       if (!multiple && !range) {
         hideCalendar()
@@ -277,9 +275,8 @@ export function useDatepickerState(
       const fromVal = e.target.value
       const toVal = values[1] ?? ''
       const newValues = [fromVal, toVal].filter(Boolean)
-      const shouldNotify = newValues.length === 2
-      updateValues(newValues, shouldNotify)
-      if (shouldNotify) dispatchChange(newValues)
+      updateValues(newValues)
+      dispatchChange(newValues)
     },
     [values, updateValues, dispatchChange],
   )
@@ -289,9 +286,8 @@ export function useDatepickerState(
       const fromVal = values[0] ?? ''
       const toVal = e.target.value
       const newValues = [fromVal, toVal].filter(Boolean)
-      const shouldNotify = newValues.length === 2
-      updateValues(newValues, shouldNotify)
-      if (shouldNotify) dispatchChange(newValues)
+      updateValues(newValues)
+      dispatchChange(newValues)
     },
     [values, updateValues, dispatchChange],
   )