@oslokommune/punkt-react 16.2.0 → 16.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.2.0",
+  "version": "16.3.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": "^16.2.0",
+    "@oslokommune/punkt-elements": "^16.3.0",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -50,7 +50,7 @@
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.37.0",
     "@oslokommune/punkt-assets": "^16.0.0",
-    "@oslokommune/punkt-css": "^16.2.0",
+    "@oslokommune/punkt-css": "^16.3.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "554167272be133d1486fb9b041b3afe0980c5069"
+  "gitHead": "3561a39e6329e3fc85d558d89cf20b58aa410d24"
 }

package/src/components/accordion/AccordionItem.tsx

@@ -58,6 +58,9 @@ export const PktAccordionItem = forwardRef<HTMLDetailsElement, IPktAccordionItem
       const detailsElement = e.currentTarget
       const newOpenState = detailsElement.open
 
+      // Ignorer toggle-events som skyldes React-synkronisering av open-attributtet
+      if (newOpenState === isOpen) return
+
       if (controlledIsOpen === undefined) {
         setInternalIsOpen(newOpenState)
       }

package/src/components/modal/Modal.test.tsx

@@ -11,35 +11,40 @@ expect.extend(toHaveNoViolations)
 afterEach(cleanup)
 
 describe('PktModal', () => {
-  test('ref works correctly', async () => {
-    const ref = createRef<HTMLElement>()
+  test('ref works correctly', () => {
+    const ref = createRef<HTMLDialogElement>()
     const { unmount } = render(
       <PktModal ref={ref} headingText="Modal Title">
         modal content
       </PktModal>,
     )
-    await window.customElements.whenDefined('pkt-modal')
-    expect(ref.current).toBeInstanceOf(HTMLElement)
+    expect(ref.current).toBeInstanceOf(HTMLDialogElement)
     unmount()
     expect(ref.current).toBeNull()
   })
 
-  test('renders with the specified size', async () => {
+  test('renders with the specified size', () => {
     const { container } = render(
       <PktModal headingText="Modal Title" size="small">
         modal content
       </PktModal>,
     )
-    await window.customElements.whenDefined('pkt-modal')
     const dialogElement = container.querySelector('dialog.pkt-modal')
     expect(dialogElement).toHaveClass('pkt-modal--small')
   })
 
   test('renders with no wcag errors with axe', async () => {
     const { container } = render(<PktModal headingText="Modal Title"></PktModal>)
-    await window.customElements.whenDefined('pkt-modal')
     const results = await axe(container)
 
     expect(results).toHaveNoViolations()
   })
+
+  test('renders with default props', () => {
+    const { container } = render(<PktModal>innhold</PktModal>)
+    const dialog = container.querySelector('dialog.pkt-modal')
+    expect(dialog).toBeInTheDocument()
+    expect(dialog).toHaveClass('pkt-modal--medium')
+  })
+
 })

package/src/components/modal/Modal.tsx

@@ -1,13 +1,22 @@
 'use client'
 
-import { createComponent } from '@lit/react'
-import { PktModal as PktElModal } from '@oslokommune/punkt-elements'
-// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
-import React, { FC, ForwardedRef, forwardRef, type ReactElement } from 'react'
+import classNames from 'classnames'
+import {
+  ForwardedRef,
+  forwardRef,
+  HTMLAttributes,
+  ReactNode,
+  Ref,
+  useCallback,
+  useEffect,
+  useRef,
+} from 'react'
 
-import type { PktElConstructor,PktElType } from '@/interfaces/IPktElements'
+import { PktButton } from '../button/Button'
 
-export interface IPktModal extends PktElType {
+export interface IPktModal
+  extends Omit<HTMLAttributes<HTMLDialogElement>, 'onClose' | 'open'> {
+  open?: boolean
   headingText?: string
   hideCloseButton?: boolean
   closeOnBackdropClick?: boolean
@@ -17,21 +26,148 @@ export interface IPktModal extends PktElType {
   variant?: 'dialog' | 'drawer'
   drawerPosition?: 'left' | 'right'
   transparentBackdrop?: boolean
+  onClose?: () => void
+  children?: ReactNode
+  ref?: Ref<HTMLDialogElement>
 }
-const LitComponent: FC<IPktModal> = createComponent({
-  tagName: 'pkt-modal',
-  elementClass: PktElModal as PktElConstructor<HTMLElement>,
-  react: React,
-  displayName: 'PktModal',
-  events: {},
-})
-
-export const PktModal: FC<IPktModal> = forwardRef(
-  ({ children, ...props }: IPktModal, ref: ForwardedRef<HTMLElement>): ReactElement => {
+
+export const PktModal = forwardRef(
+  (
+    {
+      children,
+      className,
+      open = false,
+      headingText = '',
+      hideCloseButton = false,
+      closeOnBackdropClick = false,
+      size = 'medium',
+      removePadding = false,
+      closeButtonSkin = 'blue',
+      variant = 'dialog',
+      drawerPosition = 'right',
+      transparentBackdrop = false,
+      onClose,
+      ...props
+    }: IPktModal,
+    ref: ForwardedRef<HTMLDialogElement>,
+  ) => {
+    const internalRef = useRef<HTMLDialogElement>(null)
+    const dialogRef = (ref as React.RefObject<HTMLDialogElement>) || internalRef
+
+    const close = useCallback(() => {
+      if (!dialogRef.current?.open) return
+      dialogRef.current?.close()
+      onClose?.()
+    }, [dialogRef, onClose])
+
+    // Synkroniser scroll-lock med dialogens faktiske åpen/lukket-tilstand
+    useEffect(() => {
+      const dialog = dialogRef.current
+      if (!dialog) return
+
+      const observer = new MutationObserver(() => {
+        if (dialog.open) {
+          document.body.classList.add('pkt-modal--open')
+        } else {
+          document.body.classList.remove('pkt-modal--open')
+        }
+      })
+      observer.observe(dialog, { attributes: true, attributeFilter: ['open'] })
+      return () => observer.disconnect()
+    }, [dialogRef])
+
+    // Deklarativ åpne/lukke via open-prop
+    useEffect(() => {
+      if (open) {
+        if (!dialogRef.current?.open) {
+          dialogRef.current?.showModal()
+        }
+      } else {
+        if (dialogRef.current?.open) {
+          dialogRef.current?.close()
+        }
+      }
+    }, [open, dialogRef])
+
+    const handleBackdropClick = useCallback(
+      (event: React.MouseEvent<HTMLDialogElement>) => {
+        if (closeOnBackdropClick && event.target === dialogRef.current) {
+          close()
+        }
+      },
+      [closeOnBackdropClick, dialogRef, close],
+    )
+
+    const handleNativeClose = useCallback(() => {
+      onClose?.()
+    }, [onClose])
+
+    const isCloseButtonSkinDefault = closeButtonSkin === 'blue'
+
+    const classes = classNames(
+      {
+        'pkt-modal': true,
+        'pkt-modal--removePadding': removePadding,
+        'pkt-modal--noHeadingText': !headingText,
+        'pkt-modal--noShadow': closeButtonSkin === 'yellow-filled',
+        'pkt-modal--transparentBackdrop': transparentBackdrop,
+        [`pkt-modal--${size}`]: size,
+        [`pkt-modal__${variant}`]: variant,
+        [`pkt-modal__drawer--${drawerPosition}`]: variant === 'drawer',
+      },
+      className,
+    )
+
     return (
-      <LitComponent {...props} ref={ref}>
-        <div className="pkt-contents">{children}</div>
-      </LitComponent>
+      <dialog
+        {...props}
+        className={classes}
+        ref={dialogRef}
+        aria-labelledby={headingText ? 'pkt-modal__headingText' : undefined}
+        aria-describedby="pkt-modal__content"
+        onClick={handleBackdropClick}
+        onClose={handleNativeClose}
+      >
+        <div className="pkt-modal__wrapper">
+          {(headingText || !hideCloseButton) && (
+            <div className="pkt-modal__header">
+              <div className="pkt-modal__header-background" />
+              {headingText ? (
+                <h1 id="pkt-modal__headingText" className="pkt-modal__headingText pkt-txt-24">
+                  {headingText}
+                </h1>
+              ) : (
+                <div className="pkt-modal__headingText" />
+              )}
+              {!hideCloseButton ? (
+                <div
+                  className={classNames('pkt-modal__closeButton', {
+                    [`pkt-modal__closeButton--${closeButtonSkin}`]: true,
+                  })}
+                >
+                  <PktButton
+                    onClick={close}
+                    aria-label="close"
+                    iconName="close"
+                    variant="icon-only"
+                    size="medium"
+                    skin={isCloseButtonSkinDefault ? 'tertiary' : 'primary'}
+                  >
+                    Lukk
+                  </PktButton>
+                </div>
+              ) : (
+                <div className="pkt-modal__noCloseButton" />
+              )}
+            </div>
+          )}
+          <div className="pkt-modal__container">
+            <div id="pkt-modal__content" className="pkt-modal__content pkt-txt-18-light">
+              {children}
+            </div>
+          </div>
+        </div>
+      </dialog>
     )
   },
 )