@oslokommune/punkt-react 12.32.0 → 12.32.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.32.0",
+  "version": "12.32.7",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.5",
-    "@oslokommune/punkt-elements": "^12.32.0",
+    "@oslokommune/punkt-elements": "^12.32.7",
     "angular-html-parser": "^6.0.2",
     "html-format": "^1.1.7",
     "prettier": "^3.3.3",
@@ -47,9 +47,9 @@
     "react-syntax-highlighter": "^15.5.0"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
     "@oslokommune/punkt-assets": "^12.30.1",
-    "@oslokommune/punkt-css": "^12.32.0",
-    "@oslokommune/punkt-testing-utils": "^12.32.0",
+    "@oslokommune/punkt-css": "^12.32.1",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -72,7 +72,7 @@
     "react-scripts": "^5.0.1",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
-    "vite": "^5.4.4",
+    "vite": "^5.4.18",
     "vite-plugin-dts": "^4.2.1"
   },
   "peerDependencies": {
@@ -112,5 +112,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "8d17b2b21d83b498b237d837747e753c64570285"
+  "gitHead": "001ce7fd764b33b5f4c7d90ad5418a62a4d780a6"
 }

package/src/components/button/Button.test.tsx

@@ -94,6 +94,38 @@ test('forwardRef works correctly', async () => {
   expect(ref.current).toBe(screen.getByRole('button'))
 })
 
+test('PktButton triggers click when focused and enter is pressed', async () => {
+  const handleClick = jest.fn()
+  render(<PktButton onClick={handleClick}>Trøkk her</PktButton>)
+
+  await window.customElements.whenDefined('pkt-button')
+
+  const button = screen.getByRole('button')
+
+  button.focus()
+  expect(button).toHaveFocus()
+
+  await userEvent.keyboard('{Enter}')
+
+  expect(handleClick).toHaveBeenCalledTimes(1)
+})
+
+test('PktButton triggers click when focused and space is pressed', async () => {
+  const handleClick = jest.fn()
+  render(<PktButton onClick={handleClick}>Trøkk igjen</PktButton>)
+
+  await window.customElements.whenDefined('pkt-button')
+
+  const button = screen.getByRole('button')
+
+  button.focus()
+  expect(button).toHaveFocus()
+
+  await userEvent.keyboard(' ')
+
+  expect(handleClick).toHaveBeenCalledTimes(1)
+})
+
 describe('accessibility', () => {
   it('renders with no wcag errors with axe', async () => {
     const { container } = render(<PktButton title="Normal" skin="primary"></PktButton>)

package/src/components/combobox/Combobox.tsx

@@ -4,8 +4,8 @@ import React, {
   SelectHTMLAttributes,
   ChangeEventHandler,
   FocusEventHandler,
-  LegacyRef,
   FC,
+  LegacyRef,
   forwardRef,
 } from 'react'
 import { PktCombobox as PktElCombobox } from '@oslokommune/punkt-elements'

package/src/components/preview/PreviewPropEditor.tsx

@@ -78,7 +78,7 @@ export const PktPreviewPropEditor: FC<PropEditorProps> = ({ propKey, spec, props
         requiredTag={spec.required}
       >
         <option value=""></option>
-        {icons.map((icon) => (
+        {(icons as { id: string }[]).map((icon) => (
           <option key={icon.id} value={icon.id}>
             {icon.id}
           </option>

package/src/components/combobox/Combobox.test.tsx

@@ -1,219 +0,0 @@
-import '@testing-library/jest-dom'
-import * as ReactTestingLibrary from '@testing-library/react'
-import { setupPktTestingLibrary } from '@oslokommune/punkt-testing-utils'
-import { axe, toHaveNoViolations } from 'jest-axe'
-import { PktCombobox } from './Combobox'
-
-const { getPktElementByLabelText, waitForPktElementsToBeDefined } = setupPktTestingLibrary(ReactTestingLibrary)
-
-describe('PktCombobox', () => {
-  beforeAll(() => {
-    expect.extend(toHaveNoViolations)
-  })
-
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
-
-  it('renders a basic combobox with label', async () => {
-    const { container } = ReactTestingLibrary.render(<PktCombobox id="myCombobox" label="My Combobox" allowUserInput />)
-
-    await waitForPktElementsToBeDefined()
-
-    // Check if the label is present in the document
-    const comboboxLabel = getPktElementByLabelText('My Combobox')
-    expect(comboboxLabel).toBeInTheDocument()
-  })
-  it('renders an error state combobox', async () => {
-    const { container } = ReactTestingLibrary.render(<PktCombobox id="myCombobox" label="My Combobox" hasError />)
-
-    await waitForPktElementsToBeDefined()
-
-    const comboboxError = getPktElementByLabelText('My Combobox').querySelector('.pkt-combobox__input') as HTMLElement
-
-    // Verify that the error class is applied to the combobox
-    expect(comboboxError).toHaveClass('pkt-combobox__input--error')
-  })
-  it('renders a disabled combobox', async () => {
-    const { container } = ReactTestingLibrary.render(<PktCombobox id="myCombobox" label="My Combobox" disabled />)
-
-    await waitForPktElementsToBeDefined()
-
-    const comboboxDisabled = getPktElementByLabelText('My Combobox') as HTMLElement
-
-    // Verify that the error class is applied to the combobox
-    expect(comboboxDisabled).toBeDisabled()
-  })
-  it('renders a combobox with default value', async () => {
-    const { container } = ReactTestingLibrary.render(
-      <PktCombobox id="myCombobox" label="My Combobox" defaultValue="Option 1" />,
-    )
-
-    await waitForPktElementsToBeDefined()
-
-    const combobox: HTMLElement = getPktElementByLabelText('My Combobox')
-
-    // Verify that the default value is set
-    expect(combobox).toHaveAttribute('value', 'Option 1')
-  })
-  it('renders a combobox with options', async () => {
-    const { queryAllByRole } = ReactTestingLibrary.render(
-      <PktCombobox id="myCombobox" label="My Combobox">
-        <option value="Option 1">Option 1</option>
-        <option value="Option 2">Option 2</option>
-        <option value="Option 3">Option 3</option>
-      </PktCombobox>,
-    )
-    await waitForPktElementsToBeDefined()
-    const options = queryAllByRole('option')
-    // Verify that the options are rendered correctly
-    expect(options).toHaveLength(3)
-    expect(options[0].textContent).toContain('Option 1')
-    expect(options[1].textContent).toContain('Option 2')
-    expect(options[2].textContent).toContain('Option 3')
-  })
-  it('handles onChange callback', async () => {
-    const onChangeMock = jest.fn()
-    const { container } = ReactTestingLibrary.render(
-      <PktCombobox id="myCombobox" label="My Combobox" onChange={onChangeMock} allowUserInput />,
-    )
-
-    await waitForPktElementsToBeDefined()
-
-    // Get the combobox element
-    const combobox = getPktElementByLabelText('My Combobox')
-    const comboboxInput = combobox.querySelector('input') as HTMLInputElement
-
-    ReactTestingLibrary.fireEvent.change(comboboxInput, { target: { value: 'New Value' } })
-
-    // Verify that the onChange callback is called
-    expect(onChangeMock).toHaveBeenCalledTimes(1)
-  })
-  it('handles onFocus callback', async () => {
-    const onFocusMock = jest.fn()
-    const { container } = ReactTestingLibrary.render(
-      <PktCombobox id="myCombobox" label="My Combobox" onFocus={onFocusMock} allowUserInput />,
-    )
-
-    await waitForPktElementsToBeDefined()
-
-    // Get the combobox element
-    const combobox = getPktElementByLabelText('My Combobox')
-    const comboboxInput = combobox.querySelector('input') as HTMLInputElement
-
-    // Simulate a focus event on the combobox
-    ReactTestingLibrary.fireEvent.focus(comboboxInput)
-
-    // Verify that the onFocus callback is called
-    expect(onFocusMock).toHaveBeenCalledTimes(1)
-  })
-  it('handles onBlur callback', async () => {
-    const onBlurMock = jest.fn()
-    const { container } = ReactTestingLibrary.render(
-      <PktCombobox id="myCombobox" label="My Combobox" onBlur={onBlurMock} allowUserInput />,
-    )
-
-    await waitForPktElementsToBeDefined()
-
-    // Get the combobox element
-    const combobox = getPktElementByLabelText('My Combobox')
-    const comboboxInput = combobox.querySelector('input') as HTMLInputElement
-
-    // Simulate a blur event on the combobox
-    ReactTestingLibrary.fireEvent.blur(comboboxInput)
-
-    // Verify that the onBlur callback is called
-    expect(onBlurMock).toHaveBeenCalled()
-  })
-  it('should not have any accessibility violations', async () => {
-    const { container } = ReactTestingLibrary.render(<PktCombobox id="myCombobox" label="My Combobox" />)
-
-    await waitForPktElementsToBeDefined()
-
-    const results = await axe(container)
-
-    expect(results).toHaveNoViolations()
-  })
-  it('should not have any accessibility violations with options', async () => {
-    const { container } = ReactTestingLibrary.render(
-      <PktCombobox id="myCombobox" label="My Combobox">
-        <option value="Option 1">Option 1</option>
-        <option value="Option 2">Option 2</option>
-        <option value="Option 3">Option 3</option>
-      </PktCombobox>,
-    )
-
-    await waitForPktElementsToBeDefined()
-
-    const results = await axe(container)
-
-    expect(results).toHaveNoViolations()
-  })
-  it('should not have any accessibility violations with options and default value', async () => {
-    const { container } = ReactTestingLibrary.render(
-      <PktCombobox id="myCombobox" label="My Combobox" defaultValue="Option 1">
-        <option value="Option 1">Option 1</option>
-        <option value="Option 2">Option 2</option>
-        <option value="Option 3">Option 3</option>
-      </PktCombobox>,
-    )
-
-    await waitForPktElementsToBeDefined()
-
-    const results = await axe(container)
-
-    expect(results).toHaveNoViolations()
-  })
-  it('should not have any accessibility violations with options and default value and error state', async () => {
-    const { container } = ReactTestingLibrary.render(
-      <PktCombobox id="myCombobox" label="My Combobox" defaultValue="Option 1" hasError>
-        <option value="Option 1">Option 1</option>
-        <option value="Option 2">Option 2</option>
-        <option value="Option 3">Option 3</option>
-      </PktCombobox>,
-    )
-
-    await waitForPktElementsToBeDefined()
-
-    const results = await axe(container)
-
-    expect(results).toHaveNoViolations()
-  })
-  it('should not have any accessibility violations with options and default value and error state and disabled', async () => {
-    const { container } = ReactTestingLibrary.render(
-      <PktCombobox id="myCombobox" label="My Combobox" defaultValue="Option 1" hasError disabled>
-        <option value="Option 1">Option 1</option>
-        <option value="Option 2">Option 2</option>
-        <option value="Option 3">Option 3</option>
-      </PktCombobox>,
-    )
-
-    await waitForPktElementsToBeDefined()
-
-    const results = await axe(container)
-
-    expect(results).toHaveNoViolations()
-  })
-  it('should not have any accessibility violations with options and default value and error state and disabled and placeholder', async () => {
-    const { container } = ReactTestingLibrary.render(
-      <PktCombobox
-        id="myCombobox"
-        label="My Combobox"
-        defaultValue="Option 1"
-        hasError
-        disabled
-        placeholder="Select an option"
-      >
-        <option value="Option 1">Option 1</option>
-        <option value="Option 2">Option 2</option>
-        <option value="Option 3">Option 3</option>
-      </PktCombobox>,
-    )
-
-    await waitForPktElementsToBeDefined()
-
-    const results = await axe(container)
-
-    expect(results).toHaveNoViolations()
-  })
-})