@oslokommune/punkt-react 13.16.0 → 13.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.16.0",
+  "version": "13.18.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^13.16.0",
+    "@oslokommune/punkt-elements": "^13.18.0",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -47,7 +47,7 @@
   "devDependencies": {
     "@babel/plugin-transform-private-property-in-object": "^7.25.9",
     "@oslokommune/punkt-assets": "^13.16.0",
-    "@oslokommune/punkt-css": "^13.16.0",
+    "@oslokommune/punkt-css": "^13.18.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -103,5 +103,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "fd4584ed1b629e67a752a6a5f6315b3bd80549f2"
+  "gitHead": "d1f7500eed274abde4ea0532a746a54d74a38877"
 }

package/src/components/checkbox/Checkbox.test.tsx

@@ -58,6 +58,42 @@ describe('PktCheckbox', () => {
     expect(onClickMock).toHaveBeenCalledTimes(1)
   })
 
+  test('renders indeterminate checkbox', async () => {
+    const { getByRole } = render(<PktCheckbox id="myCheckbox" label="My Checkbox" indeterminate={true} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    // Verify that the checkbox is in indeterminate state
+    expect(checkbox.indeterminate).toBe(true)
+  })
+
+  test('handles indeterminate state changes', async () => {
+    const { getByRole, rerender } = render(<PktCheckbox id="myCheckbox" label="My Checkbox" indeterminate={false} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+    expect(checkbox.indeterminate).toBe(false)
+
+    // Re-render with indeterminate true
+    rerender(<PktCheckbox id="myCheckbox" label="My Checkbox" indeterminate={true} />)
+    expect(checkbox.indeterminate).toBe(true)
+
+    // Re-render with indeterminate false again
+    rerender(<PktCheckbox id="myCheckbox" label="My Checkbox" indeterminate={false} />)
+    expect(checkbox.indeterminate).toBe(false)
+  })
+
+  test('indeterminate state is independent of checked state', async () => {
+    const { getByRole } = render(
+      <PktCheckbox id="myCheckbox" label="My Checkbox" indeterminate={true} checked={true} />,
+    )
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    // Both can be true simultaneously
+    expect(checkbox.indeterminate).toBe(true)
+    expect(checkbox.checked).toBe(true)
+  })
+
   describe('accessibility', () => {
     it('renders with no wcag errors with axe', async () => {
       const { container } = render(<PktCheckbox id="accessibilityTest" label="My checkkbox"></PktCheckbox>)

package/src/components/checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, ForwardedRef, forwardRef, ReactNode, ReactElement } from 'react'
+import { ChangeEventHandler, ForwardedRef, forwardRef, ReactNode, ReactElement, useEffect, useRef } from 'react'
 import type { InputHTMLAttributes } from 'react'
 
 export interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement> {
@@ -10,6 +10,7 @@ export interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement> {
   hasError?: boolean
   defaultChecked?: boolean
   checked?: boolean
+  indeterminate?: boolean
   value?: string
   isSwitch?: boolean
   hideLabel?: boolean
@@ -37,6 +38,7 @@ export const PktCheckbox = forwardRef(
       labelPosition = 'right',
       defaultChecked,
       checked,
+      indeterminate,
       optionalTag,
       optionalText = 'Valgfritt',
       requiredTag,
@@ -46,6 +48,22 @@ export const PktCheckbox = forwardRef(
     }: IPktCheckbox,
     ref: ForwardedRef<HTMLInputElement>,
   ): ReactElement => {
+    const internalRef = useRef<HTMLInputElement>(null)
+
+    useEffect(() => {
+      if (internalRef.current && indeterminate !== undefined) {
+        internalRef.current.indeterminate = indeterminate
+      }
+    }, [indeterminate])
+
+    useEffect(() => {
+      if (typeof ref === 'function') {
+        ref(internalRef.current)
+      } else if (ref) {
+        ref.current = internalRef.current
+      }
+    }, [ref])
+
     const classes = [className, 'pkt-input-check'].filter(Boolean).join(' ')
 
     const labelClasses = [
@@ -88,7 +106,7 @@ export const PktCheckbox = forwardRef(
           )}
           <input
             role={isSwitch ? 'switch' : 'checkbox'}
-            ref={ref}
+            ref={internalRef}
             className={`pkt-input-check__input-checkbox ${hasError ? 'pkt-input-check__input-checkbox--error' : ''}`}
             type="checkbox"
             id={id}