@oslokommune/punkt-react 12.31.2 → 12.32.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.31.2",
+  "version": "12.32.6",
   "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.31.2",
+    "@oslokommune/punkt-elements": "^12.32.4",
     "angular-html-parser": "^6.0.2",
     "html-format": "^1.1.7",
     "prettier": "^3.3.3",
@@ -47,8 +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.31.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",
@@ -71,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": {
@@ -111,5 +112,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "bb030d6ba98fa9e45a95cf3092d95b46a750a730"
+  "gitHead": "20594471ca6c6134e84a9de6b6e332d391566369"
 }

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

@@ -0,0 +1,60 @@
+import React, {
+  ForwardRefExoticComponent,
+  ReactNode,
+  SelectHTMLAttributes,
+  ChangeEventHandler,
+  FocusEventHandler,
+  FC,
+  LegacyRef,
+  forwardRef,
+} from 'react'
+import { PktCombobox as PktElCombobox } from '@oslokommune/punkt-elements'
+import type { IPktCombobox as IPktElCombobox, IPktComboboxOption } from '@oslokommune/punkt-elements'
+import { createComponent, EventName } from '@lit/react'
+import { PktEventWithTarget } from '@/interfaces/IPktElements'
+
+type ExtendedCombobox = Omit<IPktElCombobox, 'helptext'> & SelectHTMLAttributes<HTMLSelectElement>
+
+export interface IPktCombobox extends ExtendedCombobox {
+  helptext?: string | ReactNode | ReactNode[]
+  ref?: LegacyRef<HTMLSelectElement>
+  onChange?: ChangeEventHandler<HTMLSelectElement>
+  onInput?: ChangeEventHandler<HTMLSelectElement>
+  onBlur?: FocusEventHandler<HTMLSelectElement>
+  onFocus?: FocusEventHandler<HTMLSelectElement>
+  onValueChange?: (e: CustomEvent) => void
+  onToggleHelpText?: (e: CustomEvent) => void
+}
+
+export const LitComponent = createComponent({
+  tagName: 'pkt-combobox',
+  elementClass: PktElCombobox,
+  react: React,
+  displayName: 'PktCombobox',
+  events: {
+    onChange: 'change' as EventName<PktEventWithTarget>,
+    onInput: 'input' as EventName<PktEventWithTarget>,
+    onBlur: 'blur' as EventName<FocusEvent>,
+    onFocus: 'focus' as EventName<FocusEvent>,
+    onValueChange: 'valueChange' as EventName<CustomEvent>,
+    onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
+  },
+}) as ForwardRefExoticComponent<IPktCombobox>
+
+// Note:
+// helptext slot needs to be before children because of how React reactivity works.
+// Please do not change this.
+export const PktCombobox: FC<IPktCombobox> = forwardRef(({ children, helptext, ...props }: IPktCombobox, ref) => {
+  return (
+    <LitComponent {...props} ref={ref}>
+      {helptext && (
+        <div slot="helptext" className="pkt-contents">
+          {helptext}
+        </div>
+      )}
+      {children}
+    </LitComponent>
+  )
+})
+
+PktCombobox.displayName = 'PktCombobox'

package/src/components/index.ts

@@ -6,6 +6,7 @@ export { PktBreadcrumbs } from './breadcrumbs/Breadcrumbs'
 export { PktButton } from './button/Button'
 export { PktCard } from './card/Card'
 export { PktCheckbox } from './checkbox/Checkbox'
+export { PktCombobox } from './combobox/Combobox'
 export { PktDatepicker } from './datepicker/Datepicker'
 export { PktFooter } from './footer/Footer'
 export { PktFooterSimple } from './footerSimple/FooterSimple'

package/src/components/interfaces.ts

@@ -5,6 +5,7 @@ export type { IPktBackLink } from './backlink/BackLink'
 export type { IPktBreadcrumbs } from './breadcrumbs/Breadcrumbs'
 export type { IPktButton } from './button/Button'
 export type { IPktCheckbox } from './checkbox/Checkbox'
+export type { IPktCombobox } from './combobox/Combobox'
 export type { IPktDatepicker } from './datepicker/Datepicker'
 export type { IPktFooter } from './footer/Footer'
 export type { IPktFooterSimple } from './footerSimple/FooterSimple'

package/src/components/preview/Preview.tsx

@@ -26,6 +26,19 @@ export const PktPreview: React.FC<PreviewProps> = ({ specs, children, fullWidth
     specs.props && typeof specs.props === 'object' && !Array.isArray(specs.props)
       ? Object.entries(specs.props).reduce<Record<string, any>>((acc, [key, value]) => {
           if (
+            typeof value === 'object' &&
+            !Array.isArray(value) &&
+            value.previewDefault !== undefined &&
+            value.previewDefault !== null
+          ) {
+            if (value.previewDefault === 'false') {
+              value.previewDefault = false
+            }
+            if (value.previewDefault === 'true') {
+              value.previewDefault = true
+            }
+            acc[key] = value.previewDefault
+          } else if (
             typeof value === 'object' &&
             !Array.isArray(value) &&
             value.default !== undefined &&

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/preview/PreviewSpecs.tsx

@@ -25,6 +25,7 @@ type PropObject = {
   converter?: string
   reflect?: boolean
   default?: any
+  previewDefault?: any
   items?: PropObject
 }