@entur/modal 1.8.15 → 2.0.0-next.0

package/dist/Drawer.d.ts

@@ -25,4 +25,4 @@ export type DrawerProps = {
     /** Legger på et overlay over resten av siden */
     overlay?: boolean;
 };
-export declare const Drawer: React.FC<DrawerProps>;
+export declare const Drawer: ({ children, className, closeLabel, contrast, open, onDismiss, title, style, overlay, }: DrawerProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Modal.d.ts

@@ -4,12 +4,16 @@ export type ModalProps = {
     children: React.ReactNode;
     /** Skjermleser-label til lukk-knappen */
     closeLabel?: string;
-    /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */
+    /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til tittelen, ellers første interaktive element */
     initialFocusRef?: React.RefObject<HTMLElement>;
-    /** Flagg som sier om modalen er åpen */
+    /** Styrer om modalen er synlig */
     open?: boolean;
-    /** Callback som kalles når brukeren ber om å lukke modalen */
-    onDismiss?: () => void;
+    /** Callback som kalles når brukeren ber om å lukke modalen. Påkrevd: Esc og klikk utenfor lukker alltid (nettleserens innebygde atferd for native dialog) */
+    onDismiss: () => void;
+    /** Om lukkeknappen skal vises i øvre høyre hjørne
+     * @default true
+     */
+    showCloseButton?: boolean;
     /** Størrelsen på modalen */
     size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';
     /** Hvordan innholdet skal plasseres i modalen
@@ -18,10 +22,11 @@ export type ModalProps = {
     align?: 'start' | 'center' | 'end';
     /** Tittelen som vises i modalen */
     title?: React.ReactNode;
+    /** Tilgjengelig navn for modalen når title ikke er satt */
+    'aria-label'?: string;
     /** Om modalen skal lukkes når man klikker på utsiden av den
      * @default true
      */
     closeOnClickOutside?: boolean;
-    [key: string]: any;
-};
-export declare const Modal: React.FC<ModalProps>;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'aria-label'>;
+export declare const Modal: ({ children, closeLabel, initialFocusRef, open, onDismiss, size, align, title, closeOnClickOutside, showCloseButton, "aria-label": ariaLabel, ...rest }: ModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ModalContent.d.ts

@@ -12,8 +12,7 @@ export type ModalContentProps = {
      * @default 'start'
      */
     align?: 'start' | 'center' | 'end';
-    [key: string]: any;
-};
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>;
 export declare const headingsMap: {
     extraSmall: <E extends React.ElementType = "h4">({ margin, children, as, ...rest }: import('../../typography').Heading4Props<E>) => JSX.Element;
     small: <E extends React.ElementType = "h3">({ margin, children, as, ...rest }: import('../../typography').Heading3Props<E>) => JSX.Element;
@@ -21,4 +20,4 @@ export declare const headingsMap: {
     large: <E extends React.ElementType = "h2">({ margin, children, as, ...rest }: import('../../typography').Heading2Props<E>) => JSX.Element;
     extraLarge: <E extends React.ElementType = "h2">({ margin, children, as, ...rest }: import('../../typography').Heading2Props<E>) => JSX.Element;
 };
-export declare const ModalContent: React.FC<ModalContentProps>;
+export declare const ModalContent: ({ children, className, size, title, align, ...rest }: ModalContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ModalOverlay.d.ts

@@ -10,6 +10,9 @@ export type ModalOverlayProps = {
     className?: string;
     /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */
     initialFocusRef?: React.RefObject<HTMLElement>;
-    [key: string]: any;
-};
-export declare const ModalOverlay: React.FC<ModalOverlayProps>;
+    /** Om modalen skal lukkes når man klikker utenfor den
+     * @default true
+     */
+    closeOnClickOutside?: boolean;
+} & Omit<React.DialogHTMLAttributes<HTMLDialogElement>, 'open' | 'onClick'>;
+export declare const ModalOverlay: ({ className, open, onDismiss, initialFocusRef, closeOnClickOutside, children, ...rest }: ModalOverlayProps) => React.ReactPortal | null;

package/dist/modal.cjs.js

@@ -2,26 +2,69 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const utils = require("@entur/utils");
 const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const icons = require("@entur/icons");
 const button = require("@entur/button");
 const typography = require("@entur/typography");
+const reactDom = require("react-dom");
 const classNames = require("classnames");
-const dialog = require("@reach/dialog");
-const React = require("react");
-const reactFocusLock = require("react-focus-lock");
 const layout = require("@entur/layout");
 const ModalOverlay = ({
   className,
   open,
+  onDismiss,
+  initialFocusRef,
+  closeOnClickOutside = true,
+  children,
   ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  dialog.DialogOverlay,
-  {
-    className: classNames("eds-modal__overlay", className),
-    isOpen: open,
-    ...rest
-  }
-);
+}) => {
+  const dialogRef = react.useRef(null);
+  react.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) {
+      dialog.showModal();
+      const target = initialFocusRef?.current ?? dialog.querySelector("[data-autofocus]") ?? dialog;
+      target.focus();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [open, initialFocusRef]);
+  react.useEffect(
+    function syncCancelEvent() {
+      const dialog = dialogRef.current;
+      if (!dialog || !onDismiss) return;
+      const handleCancel = (e) => {
+        e.preventDefault();
+        onDismiss();
+      };
+      dialog.addEventListener("cancel", handleCancel);
+      return () => dialog.removeEventListener("cancel", handleCancel);
+    },
+    [onDismiss]
+  );
+  const handleClick = react.useCallback(
+    (e) => {
+      if (!closeOnClickOutside) return;
+      if (e.target === dialogRef.current) onDismiss?.();
+    },
+    [onDismiss, closeOnClickOutside]
+  );
+  if (typeof document === "undefined") return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(layout.ContrastContext.Provider, { value: false, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "dialog",
+      {
+        ref: dialogRef,
+        className: classNames("eds-modal__overlay", className),
+        ...rest,
+        onClick: handleClick,
+        children: open && children
+      }
+    ) }),
+    document.body
+  );
+};
 const headingsMap = {
   extraSmall: typography.Heading4,
   small: typography.Heading3,
@@ -38,9 +81,9 @@ const ModalContent = ({
   ...rest
 }) => {
   const Heading = headingsMap[size] || typography.Heading2;
-  const randomId = utils.useRandomId("eds-modal");
+  const randomId = react.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    dialog.DialogContent,
+    "div",
     {
       className: classNames(
         "eds-modal__content",
@@ -48,7 +91,7 @@ const ModalContent = ({
         `eds-modal__content--align-${align}`,
         className
       ),
-      "aria-labelledby": randomId,
+      "aria-labelledby": title ? randomId : void 0,
       ...rest,
       children: [
         title && /* @__PURE__ */ jsxRuntime.jsx(Heading, { margin: "bottom", as: "h2", id: randomId, children: title }),
@@ -67,22 +110,23 @@ const Modal = ({
   align = "start",
   title,
   closeOnClickOutside = true,
+  showCloseButton = true,
+  "aria-label": ariaLabel,
   ...rest
 }) => {
-  const randomId = utils.useRandomId("eds-modal");
+  const randomId = react.useId();
   const Heading = headingsMap[size] || typography.Heading2;
-  const showCloseButton = ["medium", "large", "extraLarge"].includes(size);
-  let handleOnDismiss;
-  if (onDismiss && closeOnClickOutside) {
-    handleOnDismiss = onDismiss;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     ModalOverlay,
     {
       open,
-      onDismiss: handleOnDismiss,
+      onDismiss,
+      closeOnClickOutside,
       initialFocusRef,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { size, align, ...rest, children: [
+      className: `eds-modal__overlay--size-${size}`,
+      "aria-labelledby": title ? randomId : void 0,
+      "aria-label": !title ? ariaLabel : void 0,
+      children: [
         showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
           button.IconButton,
           {
@@ -93,9 +137,21 @@ const Modal = ({
             children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {})
           }
         ),
-        title && /* @__PURE__ */ jsxRuntime.jsx(Heading, { margin: "bottom", as: "h2", id: randomId, children: title }),
-        children
-      ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { size, align, ...rest, children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx(
+            Heading,
+            {
+              margin: "bottom",
+              as: "h2",
+              id: randomId,
+              tabIndex: -1,
+              "data-autofocus": initialFocusRef ? void 0 : "",
+              children: title
+            }
+          ),
+          children
+        ] })
+      ]
     }
   );
 };
@@ -110,31 +166,58 @@ const Drawer = ({
   style,
   overlay = false
 }) => {
-  const titleId = utils.useRandomId("eds-drawer");
-  if (!open) {
-    return null;
-  }
-  const handleKeyDown = (e) => {
+  const titleId = react.useId();
+  const drawerRef = react.useRef(null);
+  const previouslyFocusedRef = react.useRef(null);
+  react.useEffect(
+    function handleFocus() {
+      if (!open || overlay) return;
+      previouslyFocusedRef.current = document.activeElement;
+      drawerRef.current?.querySelector("[data-autofocus]")?.focus();
+      return () => {
+        if (previouslyFocusedRef.current instanceof HTMLElement) {
+          previouslyFocusedRef.current.focus();
+        }
+      };
+    },
+    [open, overlay]
+  );
+  const shouldRemoveFromDOM = !open && !overlay;
+  if (shouldRemoveFromDOM) return null;
+  function handleKeyDown(e) {
     if (e.key === "Escape") {
       e.stopPropagation();
       onDismiss();
     }
+  }
+  const Wrapper = contrast ? layout.Contrast : "div";
+  const nonModalDialogProps = {
+    role: "dialog",
+    "aria-modal": false,
+    "aria-labelledby": titleId
   };
-  const Wrapper = contrast ? layout.Contrast : React.Fragment;
-  const ContentContainer = overlay ? dialog.DialogContent : "div";
   return /* @__PURE__ */ jsxRuntime.jsx(
-    ConditionalWrapper,
+    utils.ConditionalWrapper,
     {
       condition: overlay,
-      wrapper: (children2) => /* @__PURE__ */ jsxRuntime.jsx(ModalOverlay, { open, onDismiss, children: children2 }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        ContentContainer,
+      wrapper: (children2) => /* @__PURE__ */ jsxRuntime.jsx(
+        ModalOverlay,
         {
+          open,
+          onDismiss,
           "aria-labelledby": titleId,
+          children: children2
+        }
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        Wrapper,
+        {
+          ref: drawerRef,
+          ...!overlay && nonModalDialogProps,
           className: classNames("eds-drawer", className),
           onKeyDown: handleKeyDown,
           style,
-          children: /* @__PURE__ */ jsxRuntime.jsxs(reactFocusLock.MoveFocusInside, { children: [
+          children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               button.IconButton,
               {
@@ -146,16 +229,15 @@ const Drawer = ({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eds-drawer__content", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(typography.Heading3, { as: "h2", id: titleId, children: title }),
+              /* @__PURE__ */ jsxRuntime.jsx(typography.Heading3, { as: "h2", id: titleId, tabIndex: -1, "data-autofocus": "", children: title }),
               children
             ] })
-          ] })
+          ]
         }
-      ) })
+      )
     }
   );
 };
-const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
 utils.warnAboutMissingStyles("modal", "icons", "typography", "a11y", "button");
 exports.Drawer = Drawer;
 exports.Modal = Modal;

package/dist/modal.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.cjs.js","sources":["../src/ModalOverlay.tsx","../src/ModalContent.tsx","../src/Modal.tsx","../src/Drawer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { DialogOverlay } from '@reach/dialog';\n\nexport type ModalOverlayProps = {\n  /** Flagg som sier om modalen er åpen */\n  open?: boolean;\n  /** Callback som kalles når brukeren ber om å lukke modalen */\n  onDismiss?: () => void;\n  /** Innholdet i modalen */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n  initialFocusRef?: React.RefObject<HTMLElement>;\n  [key: string]: any;\n};\n\nexport const ModalOverlay: React.FC<ModalOverlayProps> = ({\n  className,\n  open,\n  ...rest\n}) => (\n  <DialogOverlay\n    className={classNames('eds-modal__overlay', className)}\n    isOpen={open}\n    {...rest}\n  />\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DialogContent } from '@reach/dialog';\nimport { Heading2, Heading3, Heading4 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nexport type ModalContentProps = {\n  /** Innholdet i modalen */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Størrelsen på modalen */\n  size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n  /** Tittelen som vises i modalen */\n  title?: React.ReactNode;\n  /** Hvordan innholdet skal plasseres i modalen\n   * @default 'start'\n   */\n  align?: 'start' | 'center' | 'end';\n  [key: string]: any;\n};\n\nexport const headingsMap = {\n  extraSmall: Heading4,\n  small: Heading3,\n  medium: Heading2,\n  large: Heading2,\n  extraLarge: Heading2,\n};\n\nexport const ModalContent: React.FC<ModalContentProps> = ({\n  children,\n  className,\n  size,\n  title,\n  align = 'start',\n  ...rest\n}) => {\n  const Heading: React.ElementType = headingsMap[size] || Heading2;\n  const randomId = useRandomId('eds-modal');\n  return (\n    <DialogContent\n      className={classNames(\n        'eds-modal__content',\n        `eds-modal__content--size-${size}`,\n        `eds-modal__content--align-${align}`,\n        className,\n      )}\n      aria-labelledby={randomId}\n      {...rest}\n    >\n      {title && (\n        <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n          {title}\n        </Heading>\n      )}\n      {children}\n    </DialogContent>\n  );\n};\n","import React from 'react';\n\nimport { CloseIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport { Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent, headingsMap } from './ModalContent';\n\nimport './Modal.scss';\n\nexport type ModalProps = {\n  /** Innholdet i modalen */\n  children: React.ReactNode;\n  /** Skjermleser-label til lukk-knappen */\n  closeLabel?: string;\n  /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n  initialFocusRef?: React.RefObject<HTMLElement>;\n  /** Flagg som sier om modalen er åpen */\n  open?: boolean;\n  /** Callback som kalles når brukeren ber om å lukke modalen */\n  onDismiss?: () => void;\n  /** Størrelsen på modalen */\n  size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n  /** Hvordan innholdet skal plasseres i modalen\n   * @default 'start'\n   */\n  align?: 'start' | 'center' | 'end';\n  /** Tittelen som vises i modalen */\n  title?: React.ReactNode;\n  /** Om modalen skal lukkes når man klikker på utsiden av den\n   * @default true\n   */\n  closeOnClickOutside?: boolean;\n  [key: string]: any;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n  children,\n  closeLabel = 'Lukk',\n  initialFocusRef,\n  open,\n  onDismiss,\n  size,\n  align = 'start',\n  title,\n  closeOnClickOutside = true,\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-modal');\n  const Heading: React.ElementType = headingsMap[size] || Heading2;\n  const showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);\n\n  let handleOnDismiss;\n  if (onDismiss && closeOnClickOutside) {\n    handleOnDismiss = onDismiss;\n  }\n  return (\n    <ModalOverlay\n      open={open}\n      onDismiss={handleOnDismiss}\n      initialFocusRef={initialFocusRef}\n    >\n      <ModalContent size={size} align={align} {...rest}>\n        {showCloseButton && (\n          <IconButton\n            className=\"eds-modal__close\"\n            aria-label={closeLabel}\n            onClick={onDismiss}\n            type=\"button\"\n          >\n            <CloseIcon />\n          </IconButton>\n        )}\n        {title && (\n          <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n            {title}\n          </Heading>\n        )}\n        {children}\n      </ModalContent>\n    </ModalOverlay>\n  );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { MoveFocusInside } from 'react-focus-lock';\nimport { Contrast } from '@entur/layout';\nimport { CloseIcon } from '@entur/icons';\nimport { Heading3 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\nimport { IconButton } from '@entur/button';\n\nimport './Drawer.scss';\nimport { ModalOverlay } from './ModalOverlay';\nimport { DialogContent } from '@reach/dialog';\n\nexport type DrawerProps = {\n  /** Innholdet. Typisk tekst, lenker eller knapper */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Tekst som beskriver lukkeknappen for skjermlesere\n   * @default 'Lukk skuff'\n   */\n  closeLabel?: string;\n  /** Om draweren skal vises i mørk variant\n   * @default false\n   */\n  contrast?: boolean;\n  /** Callback som kalles når brukeren ønsker å lukke draweren */\n  onDismiss: () => void;\n  /** Om draweren er åpen eller ikke\n   * @default true\n   */\n  open?: boolean;\n  /** Tittel på toppen av draweren */\n  title: string;\n  /** Styling som sendes til Drawer */\n  style?: React.CSSProperties;\n  /** Legger på et overlay over resten av siden */\n  overlay?: boolean;\n};\n\nexport const Drawer: React.FC<DrawerProps> = ({\n  children,\n  className,\n  closeLabel = 'Lukk skuff',\n  contrast = false,\n  open = true,\n  onDismiss,\n  title,\n  style,\n  overlay = false,\n}) => {\n  const titleId = useRandomId('eds-drawer');\n\n  if (!open) {\n    return null;\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      onDismiss();\n    }\n  };\n\n  const Wrapper = contrast ? Contrast : React.Fragment;\n  const ContentContainer = overlay ? DialogContent : 'div';\n  return (\n    <ConditionalWrapper\n      condition={overlay}\n      wrapper={(children: React.ReactNode) => (\n        <ModalOverlay open={open} onDismiss={onDismiss}>\n          {children}\n        </ModalOverlay>\n      )}\n    >\n      <Wrapper>\n        <ContentContainer\n          aria-labelledby={titleId}\n          className={classNames('eds-drawer', className)}\n          onKeyDown={handleKeyDown}\n          style={style}\n        >\n          <MoveFocusInside>\n            <IconButton\n              className=\"eds-drawer__close-button\"\n              onClick={onDismiss}\n              type=\"button\"\n              aria-label={closeLabel}\n            >\n              <CloseIcon aria-hidden />\n            </IconButton>\n            <div className=\"eds-drawer__content\">\n              <Heading3 as=\"h2\" id={titleId}>\n                {title}\n              </Heading3>\n              {children}\n            </div>\n          </MoveFocusInside>\n        </ContentContainer>\n      </Wrapper>\n    </ConditionalWrapper>\n  );\n};\n\nconst ConditionalWrapper: React.FC<{\n  condition: boolean;\n  wrapper: (child: JSX.Element) => JSX.Element;\n  children: React.ReactElement;\n}> = ({ condition, wrapper, children }) =>\n  condition ? wrapper(children) : children;\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('modal', 'icons', 'typography', 'a11y', 'button');\n\nexport * from './Modal';\nexport * from './ModalOverlay';\nexport * from './ModalContent';\nexport * from './Drawer';\n"],"names":["jsx","DialogOverlay","Heading4","Heading3","Heading2","useRandomId","jsxs","DialogContent","IconButton","CloseIcon","Contrast","children","MoveFocusInside","warnAboutMissingStyles"],"mappings":"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"}
+{"version":3,"file":"modal.cjs.js","sources":["../src/ModalOverlay.tsx","../src/ModalContent.tsx","../src/Modal.tsx","../src/Drawer.tsx","../src/index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport classNames from 'classnames';\nimport { ContrastContext } from '@entur/layout';\n\nexport type ModalOverlayProps = {\n  /** Flagg som sier om modalen er åpen */\n  open?: boolean;\n  /** Callback som kalles når brukeren ber om å lukke modalen */\n  onDismiss?: () => void;\n  /** Innholdet i modalen */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n  initialFocusRef?: React.RefObject<HTMLElement>;\n  /** Om modalen skal lukkes når man klikker utenfor den\n   * @default true\n   */\n  closeOnClickOutside?: boolean;\n} & Omit<React.DialogHTMLAttributes<HTMLDialogElement>, 'open' | 'onClick'>;\n\nexport const ModalOverlay = ({\n  className,\n  open,\n  onDismiss,\n  initialFocusRef,\n  closeOnClickOutside = true,\n  children,\n  ...rest\n}: ModalOverlayProps) => {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n\n  // Toggle native dialog open state. Always stays in DOM so the browser can\n  // manage initial focus storage + restore on close.\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n    if (open && !dialog.open) {\n      dialog.showModal();\n      const target =\n        initialFocusRef?.current ??\n        dialog.querySelector<HTMLElement>('[data-autofocus]') ??\n        dialog;\n      target.focus();\n    } else if (!open && dialog.open) {\n      dialog.close();\n    }\n  }, [open, initialFocusRef]);\n\n  // Esc fires cancel — preventDefault so we route through onDismiss + state,\n  // which triggers the effect above to call close() (native restore runs).\n  useEffect(\n    function syncCancelEvent() {\n      const dialog = dialogRef.current;\n      if (!dialog || !onDismiss) return;\n      const handleCancel = (e: Event) => {\n        e.preventDefault();\n        onDismiss();\n      };\n      dialog.addEventListener('cancel', handleCancel);\n      return () => dialog.removeEventListener('cancel', handleCancel);\n    },\n    [onDismiss],\n  );\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLDialogElement>) => {\n      if (!closeOnClickOutside) return;\n      if (e.target === dialogRef.current) onDismiss?.();\n    },\n    [onDismiss, closeOnClickOutside],\n  );\n\n  if (typeof document === 'undefined') return null;\n\n  return createPortal(\n    <ContrastContext.Provider value={false}>\n      <dialog\n        ref={dialogRef}\n        className={classNames('eds-modal__overlay', className)}\n        {...rest}\n        onClick={handleClick}\n      >\n        {open && children}\n      </dialog>\n    </ContrastContext.Provider>,\n    document.body,\n  );\n};\n","import React, { useId } from 'react';\nimport classNames from 'classnames';\nimport { Heading4, Heading3, Heading2 } from '@entur/typography';\n\nexport type ModalContentProps = {\n  /** Innholdet i modalen */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Størrelsen på modalen */\n  size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n  /** Tittelen som vises i modalen */\n  title?: React.ReactNode;\n  /** Hvordan innholdet skal plasseres i modalen\n   * @default 'start'\n   */\n  align?: 'start' | 'center' | 'end';\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>;\n\nexport const headingsMap = {\n  extraSmall: Heading4,\n  small: Heading3,\n  medium: Heading2,\n  large: Heading2,\n  extraLarge: Heading2,\n};\n\nexport const ModalContent = ({\n  children,\n  className,\n  size,\n  title,\n  align = 'start',\n  ...rest\n}: ModalContentProps) => {\n  const Heading: React.ElementType = headingsMap[size] || Heading2;\n  const randomId = useId();\n  return (\n    <div\n      className={classNames(\n        'eds-modal__content',\n        `eds-modal__content--size-${size}`,\n        `eds-modal__content--align-${align}`,\n        className,\n      )}\n      aria-labelledby={title ? randomId : undefined}\n      {...rest}\n    >\n      {title && (\n        <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n          {title}\n        </Heading>\n      )}\n      {children}\n    </div>\n  );\n};\n","import React, { useId } from 'react';\n\nimport { CloseIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport { Heading2 } from '@entur/typography';\n\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent, headingsMap } from './ModalContent';\n\nimport './Modal.scss';\n\nexport type ModalProps = {\n  /** Innholdet i modalen */\n  children: React.ReactNode;\n  /** Skjermleser-label til lukk-knappen */\n  closeLabel?: string;\n  /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til tittelen, ellers første interaktive element */\n  initialFocusRef?: React.RefObject<HTMLElement>;\n  /** Styrer om modalen er synlig */\n  open?: boolean;\n  /** Callback som kalles når brukeren ber om å lukke modalen. Påkrevd: Esc og klikk utenfor lukker alltid (nettleserens innebygde atferd for native dialog) */\n  onDismiss: () => void;\n  /** Om lukkeknappen skal vises i øvre høyre hjørne\n   * @default true\n   */\n  showCloseButton?: boolean;\n  /** Størrelsen på modalen */\n  size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n  /** Hvordan innholdet skal plasseres i modalen\n   * @default 'start'\n   */\n  align?: 'start' | 'center' | 'end';\n  /** Tittelen som vises i modalen */\n  title?: React.ReactNode;\n  /** Tilgjengelig navn for modalen når title ikke er satt */\n  'aria-label'?: string;\n  /** Om modalen skal lukkes når man klikker på utsiden av den\n   * @default true\n   */\n  closeOnClickOutside?: boolean;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'aria-label'>;\n\nexport const Modal = ({\n  children,\n  closeLabel = 'Lukk',\n  initialFocusRef,\n  open,\n  onDismiss,\n  size,\n  align = 'start',\n  title,\n  closeOnClickOutside = true,\n  showCloseButton = true,\n  'aria-label': ariaLabel,\n  ...rest\n}: ModalProps) => {\n  const randomId = useId();\n  const Heading: React.ElementType = headingsMap[size] || Heading2;\n\n  return (\n    <ModalOverlay\n      open={open}\n      onDismiss={onDismiss}\n      closeOnClickOutside={closeOnClickOutside}\n      initialFocusRef={initialFocusRef}\n      className={`eds-modal__overlay--size-${size}`}\n      aria-labelledby={title ? randomId : undefined}\n      aria-label={!title ? ariaLabel : undefined}\n    >\n      {showCloseButton && (\n        <IconButton\n          className=\"eds-modal__close\"\n          aria-label={closeLabel}\n          onClick={onDismiss}\n          type=\"button\"\n        >\n          <CloseIcon />\n        </IconButton>\n      )}\n      <ModalContent size={size} align={align} {...rest}>\n        {title && (\n          <Heading\n            margin=\"bottom\"\n            as=\"h2\"\n            id={randomId}\n            tabIndex={-1}\n            data-autofocus={initialFocusRef ? undefined : ''}\n          >\n            {title}\n          </Heading>\n        )}\n        {children}\n      </ModalContent>\n    </ModalOverlay>\n  );\n};\n","import React, { useEffect, useId, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Contrast } from '@entur/layout';\nimport { CloseIcon } from '@entur/icons';\nimport { Heading3 } from '@entur/typography';\nimport { IconButton } from '@entur/button';\nimport { ConditionalWrapper } from '@entur/utils';\nimport { ModalOverlay } from './ModalOverlay';\n\nimport './Drawer.scss';\n\nexport type DrawerProps = {\n  /** Innholdet. Typisk tekst, lenker eller knapper */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Tekst som beskriver lukkeknappen for skjermlesere\n   * @default 'Lukk skuff'\n   */\n  closeLabel?: string;\n  /** Om draweren skal vises i mørk variant\n   * @default false\n   */\n  contrast?: boolean;\n  /** Callback som kalles når brukeren ønsker å lukke draweren */\n  onDismiss: () => void;\n  /** Om draweren er åpen eller ikke\n   * @default true\n   */\n  open?: boolean;\n  /** Tittel på toppen av draweren */\n  title: string;\n  /** Styling som sendes til Drawer */\n  style?: React.CSSProperties;\n  /** Legger på et overlay over resten av siden */\n  overlay?: boolean;\n};\n\nexport const Drawer = ({\n  children,\n  className,\n  closeLabel = 'Lukk skuff',\n  contrast = false,\n  open = true,\n  onDismiss,\n  title,\n  style,\n  overlay = false,\n}: DrawerProps) => {\n  const titleId = useId();\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const previouslyFocusedRef = useRef<Element | null>(null);\n\n  useEffect(\n    function handleFocus() {\n      if (!open || overlay) return;\n      previouslyFocusedRef.current = document.activeElement;\n      drawerRef.current\n        ?.querySelector<HTMLElement>('[data-autofocus]')\n        ?.focus();\n\n      return () => {\n        if (previouslyFocusedRef.current instanceof HTMLElement) {\n          previouslyFocusedRef.current.focus();\n        }\n      };\n    },\n    [open, overlay],\n  );\n\n  const shouldRemoveFromDOM = !open && !overlay;\n  if (shouldRemoveFromDOM) return null;\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      onDismiss();\n    }\n  }\n\n  const Wrapper = contrast ? Contrast : 'div';\n  const nonModalDialogProps = {\n    role: 'dialog' as const,\n    'aria-modal': false,\n    'aria-labelledby': titleId,\n  };\n\n  return (\n    <ConditionalWrapper\n      condition={overlay}\n      wrapper={(children: React.ReactNode) => (\n        <ModalOverlay\n          open={open}\n          onDismiss={onDismiss}\n          aria-labelledby={titleId}\n        >\n          {children}\n        </ModalOverlay>\n      )}\n    >\n      <Wrapper\n        ref={drawerRef}\n        {...(!overlay && nonModalDialogProps)}\n        className={classNames('eds-drawer', className)}\n        onKeyDown={handleKeyDown}\n        style={style}\n      >\n        <IconButton\n          className=\"eds-drawer__close-button\"\n          onClick={onDismiss}\n          type=\"button\"\n          aria-label={closeLabel}\n        >\n          <CloseIcon aria-hidden />\n        </IconButton>\n        <div className=\"eds-drawer__content\">\n          <Heading3 as=\"h2\" id={titleId} tabIndex={-1} data-autofocus=\"\">\n            {title}\n          </Heading3>\n          {children}\n        </div>\n      </Wrapper>\n    </ConditionalWrapper>\n  );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('modal', 'icons', 'typography', 'a11y', 'button');\n\nexport * from './Modal';\nexport * from './ModalOverlay';\nexport * from './ModalContent';\nexport * from './Drawer';\n"],"names":["useRef","useEffect","useCallback","createPortal","jsx","ContrastContext","Heading4","Heading3","Heading2","useId","jsxs","IconButton","CloseIcon","Contrast","ConditionalWrapper","children","warnAboutMissingStyles"],"mappings":"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"}

package/dist/modal.esm.js

@@ -1,25 +1,68 @@
-import { useRandomId, warnAboutMissingStyles } from "@entur/utils";
+import { ConditionalWrapper, warnAboutMissingStyles } from "@entur/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useCallback, useId } from "react";
 import { CloseIcon } from "@entur/icons";
 import { IconButton } from "@entur/button";
 import { Heading2, Heading3, Heading4 } from "@entur/typography";
+import { createPortal } from "react-dom";
 import classNames from "classnames";
-import { DialogOverlay, DialogContent } from "@reach/dialog";
-import React from "react";
-import { MoveFocusInside } from "react-focus-lock";
-import { Contrast } from "@entur/layout";
+import { ContrastContext, Contrast } from "@entur/layout";
 const ModalOverlay = ({
   className,
   open,
+  onDismiss,
+  initialFocusRef,
+  closeOnClickOutside = true,
+  children,
   ...rest
-}) => /* @__PURE__ */ jsx(
-  DialogOverlay,
-  {
-    className: classNames("eds-modal__overlay", className),
-    isOpen: open,
-    ...rest
-  }
-);
+}) => {
+  const dialogRef = useRef(null);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) {
+      dialog.showModal();
+      const target = initialFocusRef?.current ?? dialog.querySelector("[data-autofocus]") ?? dialog;
+      target.focus();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [open, initialFocusRef]);
+  useEffect(
+    function syncCancelEvent() {
+      const dialog = dialogRef.current;
+      if (!dialog || !onDismiss) return;
+      const handleCancel = (e) => {
+        e.preventDefault();
+        onDismiss();
+      };
+      dialog.addEventListener("cancel", handleCancel);
+      return () => dialog.removeEventListener("cancel", handleCancel);
+    },
+    [onDismiss]
+  );
+  const handleClick = useCallback(
+    (e) => {
+      if (!closeOnClickOutside) return;
+      if (e.target === dialogRef.current) onDismiss?.();
+    },
+    [onDismiss, closeOnClickOutside]
+  );
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(ContrastContext.Provider, { value: false, children: /* @__PURE__ */ jsx(
+      "dialog",
+      {
+        ref: dialogRef,
+        className: classNames("eds-modal__overlay", className),
+        ...rest,
+        onClick: handleClick,
+        children: open && children
+      }
+    ) }),
+    document.body
+  );
+};
 const headingsMap = {
   extraSmall: Heading4,
   small: Heading3,
@@ -36,9 +79,9 @@ const ModalContent = ({
   ...rest
 }) => {
   const Heading = headingsMap[size] || Heading2;
-  const randomId = useRandomId("eds-modal");
+  const randomId = useId();
   return /* @__PURE__ */ jsxs(
-    DialogContent,
+    "div",
     {
       className: classNames(
         "eds-modal__content",
@@ -46,7 +89,7 @@ const ModalContent = ({
         `eds-modal__content--align-${align}`,
         className
       ),
-      "aria-labelledby": randomId,
+      "aria-labelledby": title ? randomId : void 0,
       ...rest,
       children: [
         title && /* @__PURE__ */ jsx(Heading, { margin: "bottom", as: "h2", id: randomId, children: title }),
@@ -65,22 +108,23 @@ const Modal = ({
   align = "start",
   title,
   closeOnClickOutside = true,
+  showCloseButton = true,
+  "aria-label": ariaLabel,
   ...rest
 }) => {
-  const randomId = useRandomId("eds-modal");
+  const randomId = useId();
   const Heading = headingsMap[size] || Heading2;
-  const showCloseButton = ["medium", "large", "extraLarge"].includes(size);
-  let handleOnDismiss;
-  if (onDismiss && closeOnClickOutside) {
-    handleOnDismiss = onDismiss;
-  }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     ModalOverlay,
     {
       open,
-      onDismiss: handleOnDismiss,
+      onDismiss,
+      closeOnClickOutside,
       initialFocusRef,
-      children: /* @__PURE__ */ jsxs(ModalContent, { size, align, ...rest, children: [
+      className: `eds-modal__overlay--size-${size}`,
+      "aria-labelledby": title ? randomId : void 0,
+      "aria-label": !title ? ariaLabel : void 0,
+      children: [
         showCloseButton && /* @__PURE__ */ jsx(
           IconButton,
           {
@@ -91,9 +135,21 @@ const Modal = ({
             children: /* @__PURE__ */ jsx(CloseIcon, {})
           }
         ),
-        title && /* @__PURE__ */ jsx(Heading, { margin: "bottom", as: "h2", id: randomId, children: title }),
-        children
-      ] })
+        /* @__PURE__ */ jsxs(ModalContent, { size, align, ...rest, children: [
+          title && /* @__PURE__ */ jsx(
+            Heading,
+            {
+              margin: "bottom",
+              as: "h2",
+              id: randomId,
+              tabIndex: -1,
+              "data-autofocus": initialFocusRef ? void 0 : "",
+              children: title
+            }
+          ),
+          children
+        ] })
+      ]
     }
   );
 };
@@ -108,31 +164,58 @@ const Drawer = ({
   style,
   overlay = false
 }) => {
-  const titleId = useRandomId("eds-drawer");
-  if (!open) {
-    return null;
-  }
-  const handleKeyDown = (e) => {
+  const titleId = useId();
+  const drawerRef = useRef(null);
+  const previouslyFocusedRef = useRef(null);
+  useEffect(
+    function handleFocus() {
+      if (!open || overlay) return;
+      previouslyFocusedRef.current = document.activeElement;
+      drawerRef.current?.querySelector("[data-autofocus]")?.focus();
+      return () => {
+        if (previouslyFocusedRef.current instanceof HTMLElement) {
+          previouslyFocusedRef.current.focus();
+        }
+      };
+    },
+    [open, overlay]
+  );
+  const shouldRemoveFromDOM = !open && !overlay;
+  if (shouldRemoveFromDOM) return null;
+  function handleKeyDown(e) {
     if (e.key === "Escape") {
       e.stopPropagation();
       onDismiss();
     }
+  }
+  const Wrapper = contrast ? Contrast : "div";
+  const nonModalDialogProps = {
+    role: "dialog",
+    "aria-modal": false,
+    "aria-labelledby": titleId
   };
-  const Wrapper = contrast ? Contrast : React.Fragment;
-  const ContentContainer = overlay ? DialogContent : "div";
   return /* @__PURE__ */ jsx(
     ConditionalWrapper,
     {
       condition: overlay,
-      wrapper: (children2) => /* @__PURE__ */ jsx(ModalOverlay, { open, onDismiss, children: children2 }),
-      children: /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(
-        ContentContainer,
+      wrapper: (children2) => /* @__PURE__ */ jsx(
+        ModalOverlay,
         {
+          open,
+          onDismiss,
           "aria-labelledby": titleId,
+          children: children2
+        }
+      ),
+      children: /* @__PURE__ */ jsxs(
+        Wrapper,
+        {
+          ref: drawerRef,
+          ...!overlay && nonModalDialogProps,
           className: classNames("eds-drawer", className),
           onKeyDown: handleKeyDown,
           style,
-          children: /* @__PURE__ */ jsxs(MoveFocusInside, { children: [
+          children: [
             /* @__PURE__ */ jsx(
               IconButton,
               {
@@ -144,16 +227,15 @@ const Drawer = ({
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "eds-drawer__content", children: [
-              /* @__PURE__ */ jsx(Heading3, { as: "h2", id: titleId, children: title }),
+              /* @__PURE__ */ jsx(Heading3, { as: "h2", id: titleId, tabIndex: -1, "data-autofocus": "", children: title }),
               children
             ] })
-          ] })
+          ]
         }
-      ) })
+      )
     }
   );
 };
-const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
 warnAboutMissingStyles("modal", "icons", "typography", "a11y", "button");
 export {
   Drawer,

package/dist/modal.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.esm.js","sources":["../src/ModalOverlay.tsx","../src/ModalContent.tsx","../src/Modal.tsx","../src/Drawer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { DialogOverlay } from '@reach/dialog';\n\nexport type ModalOverlayProps = {\n  /** Flagg som sier om modalen er åpen */\n  open?: boolean;\n  /** Callback som kalles når brukeren ber om å lukke modalen */\n  onDismiss?: () => void;\n  /** Innholdet i modalen */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n  initialFocusRef?: React.RefObject<HTMLElement>;\n  [key: string]: any;\n};\n\nexport const ModalOverlay: React.FC<ModalOverlayProps> = ({\n  className,\n  open,\n  ...rest\n}) => (\n  <DialogOverlay\n    className={classNames('eds-modal__overlay', className)}\n    isOpen={open}\n    {...rest}\n  />\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DialogContent } from '@reach/dialog';\nimport { Heading2, Heading3, Heading4 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nexport type ModalContentProps = {\n  /** Innholdet i modalen */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Størrelsen på modalen */\n  size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n  /** Tittelen som vises i modalen */\n  title?: React.ReactNode;\n  /** Hvordan innholdet skal plasseres i modalen\n   * @default 'start'\n   */\n  align?: 'start' | 'center' | 'end';\n  [key: string]: any;\n};\n\nexport const headingsMap = {\n  extraSmall: Heading4,\n  small: Heading3,\n  medium: Heading2,\n  large: Heading2,\n  extraLarge: Heading2,\n};\n\nexport const ModalContent: React.FC<ModalContentProps> = ({\n  children,\n  className,\n  size,\n  title,\n  align = 'start',\n  ...rest\n}) => {\n  const Heading: React.ElementType = headingsMap[size] || Heading2;\n  const randomId = useRandomId('eds-modal');\n  return (\n    <DialogContent\n      className={classNames(\n        'eds-modal__content',\n        `eds-modal__content--size-${size}`,\n        `eds-modal__content--align-${align}`,\n        className,\n      )}\n      aria-labelledby={randomId}\n      {...rest}\n    >\n      {title && (\n        <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n          {title}\n        </Heading>\n      )}\n      {children}\n    </DialogContent>\n  );\n};\n","import React from 'react';\n\nimport { CloseIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport { Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent, headingsMap } from './ModalContent';\n\nimport './Modal.scss';\n\nexport type ModalProps = {\n  /** Innholdet i modalen */\n  children: React.ReactNode;\n  /** Skjermleser-label til lukk-knappen */\n  closeLabel?: string;\n  /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n  initialFocusRef?: React.RefObject<HTMLElement>;\n  /** Flagg som sier om modalen er åpen */\n  open?: boolean;\n  /** Callback som kalles når brukeren ber om å lukke modalen */\n  onDismiss?: () => void;\n  /** Størrelsen på modalen */\n  size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n  /** Hvordan innholdet skal plasseres i modalen\n   * @default 'start'\n   */\n  align?: 'start' | 'center' | 'end';\n  /** Tittelen som vises i modalen */\n  title?: React.ReactNode;\n  /** Om modalen skal lukkes når man klikker på utsiden av den\n   * @default true\n   */\n  closeOnClickOutside?: boolean;\n  [key: string]: any;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n  children,\n  closeLabel = 'Lukk',\n  initialFocusRef,\n  open,\n  onDismiss,\n  size,\n  align = 'start',\n  title,\n  closeOnClickOutside = true,\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-modal');\n  const Heading: React.ElementType = headingsMap[size] || Heading2;\n  const showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);\n\n  let handleOnDismiss;\n  if (onDismiss && closeOnClickOutside) {\n    handleOnDismiss = onDismiss;\n  }\n  return (\n    <ModalOverlay\n      open={open}\n      onDismiss={handleOnDismiss}\n      initialFocusRef={initialFocusRef}\n    >\n      <ModalContent size={size} align={align} {...rest}>\n        {showCloseButton && (\n          <IconButton\n            className=\"eds-modal__close\"\n            aria-label={closeLabel}\n            onClick={onDismiss}\n            type=\"button\"\n          >\n            <CloseIcon />\n          </IconButton>\n        )}\n        {title && (\n          <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n            {title}\n          </Heading>\n        )}\n        {children}\n      </ModalContent>\n    </ModalOverlay>\n  );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { MoveFocusInside } from 'react-focus-lock';\nimport { Contrast } from '@entur/layout';\nimport { CloseIcon } from '@entur/icons';\nimport { Heading3 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\nimport { IconButton } from '@entur/button';\n\nimport './Drawer.scss';\nimport { ModalOverlay } from './ModalOverlay';\nimport { DialogContent } from '@reach/dialog';\n\nexport type DrawerProps = {\n  /** Innholdet. Typisk tekst, lenker eller knapper */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Tekst som beskriver lukkeknappen for skjermlesere\n   * @default 'Lukk skuff'\n   */\n  closeLabel?: string;\n  /** Om draweren skal vises i mørk variant\n   * @default false\n   */\n  contrast?: boolean;\n  /** Callback som kalles når brukeren ønsker å lukke draweren */\n  onDismiss: () => void;\n  /** Om draweren er åpen eller ikke\n   * @default true\n   */\n  open?: boolean;\n  /** Tittel på toppen av draweren */\n  title: string;\n  /** Styling som sendes til Drawer */\n  style?: React.CSSProperties;\n  /** Legger på et overlay over resten av siden */\n  overlay?: boolean;\n};\n\nexport const Drawer: React.FC<DrawerProps> = ({\n  children,\n  className,\n  closeLabel = 'Lukk skuff',\n  contrast = false,\n  open = true,\n  onDismiss,\n  title,\n  style,\n  overlay = false,\n}) => {\n  const titleId = useRandomId('eds-drawer');\n\n  if (!open) {\n    return null;\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      onDismiss();\n    }\n  };\n\n  const Wrapper = contrast ? Contrast : React.Fragment;\n  const ContentContainer = overlay ? DialogContent : 'div';\n  return (\n    <ConditionalWrapper\n      condition={overlay}\n      wrapper={(children: React.ReactNode) => (\n        <ModalOverlay open={open} onDismiss={onDismiss}>\n          {children}\n        </ModalOverlay>\n      )}\n    >\n      <Wrapper>\n        <ContentContainer\n          aria-labelledby={titleId}\n          className={classNames('eds-drawer', className)}\n          onKeyDown={handleKeyDown}\n          style={style}\n        >\n          <MoveFocusInside>\n            <IconButton\n              className=\"eds-drawer__close-button\"\n              onClick={onDismiss}\n              type=\"button\"\n              aria-label={closeLabel}\n            >\n              <CloseIcon aria-hidden />\n            </IconButton>\n            <div className=\"eds-drawer__content\">\n              <Heading3 as=\"h2\" id={titleId}>\n                {title}\n              </Heading3>\n              {children}\n            </div>\n          </MoveFocusInside>\n        </ContentContainer>\n      </Wrapper>\n    </ConditionalWrapper>\n  );\n};\n\nconst ConditionalWrapper: React.FC<{\n  condition: boolean;\n  wrapper: (child: JSX.Element) => JSX.Element;\n  children: React.ReactElement;\n}> = ({ condition, wrapper, children }) =>\n  condition ? wrapper(children) : children;\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('modal', 'icons', 'typography', 'a11y', 'button');\n\nexport * from './Modal';\nexport * from './ModalOverlay';\nexport * from './ModalContent';\nexport * from './Drawer';\n"],"names":["children"],"mappings":"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"}
+{"version":3,"file":"modal.esm.js","sources":["../src/ModalOverlay.tsx","../src/ModalContent.tsx","../src/Modal.tsx","../src/Drawer.tsx","../src/index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport classNames from 'classnames';\nimport { ContrastContext } from '@entur/layout';\n\nexport type ModalOverlayProps = {\n  /** Flagg som sier om modalen er åpen */\n  open?: boolean;\n  /** Callback som kalles når brukeren ber om å lukke modalen */\n  onDismiss?: () => void;\n  /** Innholdet i modalen */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n  initialFocusRef?: React.RefObject<HTMLElement>;\n  /** Om modalen skal lukkes når man klikker utenfor den\n   * @default true\n   */\n  closeOnClickOutside?: boolean;\n} & Omit<React.DialogHTMLAttributes<HTMLDialogElement>, 'open' | 'onClick'>;\n\nexport const ModalOverlay = ({\n  className,\n  open,\n  onDismiss,\n  initialFocusRef,\n  closeOnClickOutside = true,\n  children,\n  ...rest\n}: ModalOverlayProps) => {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n\n  // Toggle native dialog open state. Always stays in DOM so the browser can\n  // manage initial focus storage + restore on close.\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n    if (open && !dialog.open) {\n      dialog.showModal();\n      const target =\n        initialFocusRef?.current ??\n        dialog.querySelector<HTMLElement>('[data-autofocus]') ??\n        dialog;\n      target.focus();\n    } else if (!open && dialog.open) {\n      dialog.close();\n    }\n  }, [open, initialFocusRef]);\n\n  // Esc fires cancel — preventDefault so we route through onDismiss + state,\n  // which triggers the effect above to call close() (native restore runs).\n  useEffect(\n    function syncCancelEvent() {\n      const dialog = dialogRef.current;\n      if (!dialog || !onDismiss) return;\n      const handleCancel = (e: Event) => {\n        e.preventDefault();\n        onDismiss();\n      };\n      dialog.addEventListener('cancel', handleCancel);\n      return () => dialog.removeEventListener('cancel', handleCancel);\n    },\n    [onDismiss],\n  );\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLDialogElement>) => {\n      if (!closeOnClickOutside) return;\n      if (e.target === dialogRef.current) onDismiss?.();\n    },\n    [onDismiss, closeOnClickOutside],\n  );\n\n  if (typeof document === 'undefined') return null;\n\n  return createPortal(\n    <ContrastContext.Provider value={false}>\n      <dialog\n        ref={dialogRef}\n        className={classNames('eds-modal__overlay', className)}\n        {...rest}\n        onClick={handleClick}\n      >\n        {open && children}\n      </dialog>\n    </ContrastContext.Provider>,\n    document.body,\n  );\n};\n","import React, { useId } from 'react';\nimport classNames from 'classnames';\nimport { Heading4, Heading3, Heading2 } from '@entur/typography';\n\nexport type ModalContentProps = {\n  /** Innholdet i modalen */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Størrelsen på modalen */\n  size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n  /** Tittelen som vises i modalen */\n  title?: React.ReactNode;\n  /** Hvordan innholdet skal plasseres i modalen\n   * @default 'start'\n   */\n  align?: 'start' | 'center' | 'end';\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>;\n\nexport const headingsMap = {\n  extraSmall: Heading4,\n  small: Heading3,\n  medium: Heading2,\n  large: Heading2,\n  extraLarge: Heading2,\n};\n\nexport const ModalContent = ({\n  children,\n  className,\n  size,\n  title,\n  align = 'start',\n  ...rest\n}: ModalContentProps) => {\n  const Heading: React.ElementType = headingsMap[size] || Heading2;\n  const randomId = useId();\n  return (\n    <div\n      className={classNames(\n        'eds-modal__content',\n        `eds-modal__content--size-${size}`,\n        `eds-modal__content--align-${align}`,\n        className,\n      )}\n      aria-labelledby={title ? randomId : undefined}\n      {...rest}\n    >\n      {title && (\n        <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n          {title}\n        </Heading>\n      )}\n      {children}\n    </div>\n  );\n};\n","import React, { useId } from 'react';\n\nimport { CloseIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport { Heading2 } from '@entur/typography';\n\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent, headingsMap } from './ModalContent';\n\nimport './Modal.scss';\n\nexport type ModalProps = {\n  /** Innholdet i modalen */\n  children: React.ReactNode;\n  /** Skjermleser-label til lukk-knappen */\n  closeLabel?: string;\n  /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til tittelen, ellers første interaktive element */\n  initialFocusRef?: React.RefObject<HTMLElement>;\n  /** Styrer om modalen er synlig */\n  open?: boolean;\n  /** Callback som kalles når brukeren ber om å lukke modalen. Påkrevd: Esc og klikk utenfor lukker alltid (nettleserens innebygde atferd for native dialog) */\n  onDismiss: () => void;\n  /** Om lukkeknappen skal vises i øvre høyre hjørne\n   * @default true\n   */\n  showCloseButton?: boolean;\n  /** Størrelsen på modalen */\n  size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n  /** Hvordan innholdet skal plasseres i modalen\n   * @default 'start'\n   */\n  align?: 'start' | 'center' | 'end';\n  /** Tittelen som vises i modalen */\n  title?: React.ReactNode;\n  /** Tilgjengelig navn for modalen når title ikke er satt */\n  'aria-label'?: string;\n  /** Om modalen skal lukkes når man klikker på utsiden av den\n   * @default true\n   */\n  closeOnClickOutside?: boolean;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'aria-label'>;\n\nexport const Modal = ({\n  children,\n  closeLabel = 'Lukk',\n  initialFocusRef,\n  open,\n  onDismiss,\n  size,\n  align = 'start',\n  title,\n  closeOnClickOutside = true,\n  showCloseButton = true,\n  'aria-label': ariaLabel,\n  ...rest\n}: ModalProps) => {\n  const randomId = useId();\n  const Heading: React.ElementType = headingsMap[size] || Heading2;\n\n  return (\n    <ModalOverlay\n      open={open}\n      onDismiss={onDismiss}\n      closeOnClickOutside={closeOnClickOutside}\n      initialFocusRef={initialFocusRef}\n      className={`eds-modal__overlay--size-${size}`}\n      aria-labelledby={title ? randomId : undefined}\n      aria-label={!title ? ariaLabel : undefined}\n    >\n      {showCloseButton && (\n        <IconButton\n          className=\"eds-modal__close\"\n          aria-label={closeLabel}\n          onClick={onDismiss}\n          type=\"button\"\n        >\n          <CloseIcon />\n        </IconButton>\n      )}\n      <ModalContent size={size} align={align} {...rest}>\n        {title && (\n          <Heading\n            margin=\"bottom\"\n            as=\"h2\"\n            id={randomId}\n            tabIndex={-1}\n            data-autofocus={initialFocusRef ? undefined : ''}\n          >\n            {title}\n          </Heading>\n        )}\n        {children}\n      </ModalContent>\n    </ModalOverlay>\n  );\n};\n","import React, { useEffect, useId, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Contrast } from '@entur/layout';\nimport { CloseIcon } from '@entur/icons';\nimport { Heading3 } from '@entur/typography';\nimport { IconButton } from '@entur/button';\nimport { ConditionalWrapper } from '@entur/utils';\nimport { ModalOverlay } from './ModalOverlay';\n\nimport './Drawer.scss';\n\nexport type DrawerProps = {\n  /** Innholdet. Typisk tekst, lenker eller knapper */\n  children: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Tekst som beskriver lukkeknappen for skjermlesere\n   * @default 'Lukk skuff'\n   */\n  closeLabel?: string;\n  /** Om draweren skal vises i mørk variant\n   * @default false\n   */\n  contrast?: boolean;\n  /** Callback som kalles når brukeren ønsker å lukke draweren */\n  onDismiss: () => void;\n  /** Om draweren er åpen eller ikke\n   * @default true\n   */\n  open?: boolean;\n  /** Tittel på toppen av draweren */\n  title: string;\n  /** Styling som sendes til Drawer */\n  style?: React.CSSProperties;\n  /** Legger på et overlay over resten av siden */\n  overlay?: boolean;\n};\n\nexport const Drawer = ({\n  children,\n  className,\n  closeLabel = 'Lukk skuff',\n  contrast = false,\n  open = true,\n  onDismiss,\n  title,\n  style,\n  overlay = false,\n}: DrawerProps) => {\n  const titleId = useId();\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const previouslyFocusedRef = useRef<Element | null>(null);\n\n  useEffect(\n    function handleFocus() {\n      if (!open || overlay) return;\n      previouslyFocusedRef.current = document.activeElement;\n      drawerRef.current\n        ?.querySelector<HTMLElement>('[data-autofocus]')\n        ?.focus();\n\n      return () => {\n        if (previouslyFocusedRef.current instanceof HTMLElement) {\n          previouslyFocusedRef.current.focus();\n        }\n      };\n    },\n    [open, overlay],\n  );\n\n  const shouldRemoveFromDOM = !open && !overlay;\n  if (shouldRemoveFromDOM) return null;\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      onDismiss();\n    }\n  }\n\n  const Wrapper = contrast ? Contrast : 'div';\n  const nonModalDialogProps = {\n    role: 'dialog' as const,\n    'aria-modal': false,\n    'aria-labelledby': titleId,\n  };\n\n  return (\n    <ConditionalWrapper\n      condition={overlay}\n      wrapper={(children: React.ReactNode) => (\n        <ModalOverlay\n          open={open}\n          onDismiss={onDismiss}\n          aria-labelledby={titleId}\n        >\n          {children}\n        </ModalOverlay>\n      )}\n    >\n      <Wrapper\n        ref={drawerRef}\n        {...(!overlay && nonModalDialogProps)}\n        className={classNames('eds-drawer', className)}\n        onKeyDown={handleKeyDown}\n        style={style}\n      >\n        <IconButton\n          className=\"eds-drawer__close-button\"\n          onClick={onDismiss}\n          type=\"button\"\n          aria-label={closeLabel}\n        >\n          <CloseIcon aria-hidden />\n        </IconButton>\n        <div className=\"eds-drawer__content\">\n          <Heading3 as=\"h2\" id={titleId} tabIndex={-1} data-autofocus=\"\">\n            {title}\n          </Heading3>\n          {children}\n        </div>\n      </Wrapper>\n    </ConditionalWrapper>\n  );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('modal', 'icons', 'typography', 'a11y', 'button');\n\nexport * from './Modal';\nexport * from './ModalOverlay';\nexport * from './ModalContent';\nexport * from './Drawer';\n"],"names":["children"],"mappings":"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"}

package/dist/styles.css

@@ -199,35 +199,71 @@
 
 :root{
   --eds-modal:1;
-}:root{
-  --reach-dialog:1;
+}html:has(dialog.eds-modal__overlay[open]),
+html:has(dialog.eds-modal__overlay[open]) body{
+  overflow:hidden;
 }
 
 .eds-modal__overlay{
-  background:rgba(0, 0, 0, 0.5);
-  bottom:0;
-  display:-webkit-box;
-  display:-webkit-flex;
-  display:-moz-box;
-  display:flex;
-  left:0;
-  overflow:hidden;
-  position:fixed;
-  right:0;
-  top:0;
+  border:none;
+  padding:0;
+  background:transparent;
+  color:inherit;
+}
+.eds-modal__overlay[open]{
   z-index:30;
-  -webkit-animation:fadeInOverlay;
-     -moz-animation:fadeInOverlay;
-       -o-animation:fadeInOverlay;
-          animation:fadeInOverlay;
-  -webkit-animation-duration:0.2s;
-     -moz-animation-duration:0.2s;
-       -o-animation-duration:0.2s;
-          animation-duration:0.2s;
-  -webkit-animation-timing-function:ease-in-out;
-     -moz-animation-timing-function:ease-in-out;
-       -o-animation-timing-function:ease-in-out;
-          animation-timing-function:ease-in-out;
+  width:100%;
+  overflow:hidden;
+  -ms-scroll-chaining:none;
+      overscroll-behavior:contain;
+  -webkit-animation:fadeInOverlay 0.2s ease-in-out;
+     -moz-animation:fadeInOverlay 0.2s ease-in-out;
+       -o-animation:fadeInOverlay 0.2s ease-in-out;
+          animation:fadeInOverlay 0.2s ease-in-out;
+}
+.eds-modal__overlay[open]::-webkit-backdrop{
+  background:rgba(0, 0, 0, 0.5);
+  -webkit-animation:fadeInOverlay 0.2s ease-in-out;
+          animation:fadeInOverlay 0.2s ease-in-out;
+}
+.eds-modal__overlay[open]::-ms-backdrop{
+  background:rgba(0, 0, 0, 0.5);
+  animation:fadeInOverlay 0.2s ease-in-out;
+}
+.eds-modal__overlay[open]::backdrop{
+  background:rgba(0, 0, 0, 0.5);
+  -webkit-animation:fadeInOverlay 0.2s ease-in-out;
+     -moz-animation:fadeInOverlay 0.2s ease-in-out;
+       -o-animation:fadeInOverlay 0.2s ease-in-out;
+          animation:fadeInOverlay 0.2s ease-in-out;
+}
+.eds-modal__overlay--size-extraSmall{
+  max-width:21rem;
+}
+.eds-modal__overlay--size-small{
+  max-width:28.125rem;
+}
+.eds-modal__overlay--size-medium{
+  max-width:45rem;
+}
+.eds-modal__overlay--size-large{
+  max-width:56.25rem;
+}
+.eds-modal__overlay--size-extraLarge{
+  max-width:78.75rem;
+}
+.eds-modal__close{
+  position:absolute;
+  top:1rem;
+  right:1rem;
+  color:var(--components-modal-modal-standard-icon);
+  z-index:-webkit-calc(40 + 1);
+  z-index:-moz-calc(40 + 1);
+  z-index:calc(40 + 1);
+  -webkit-animation:slideInContent 0.2s ease-in-out;
+     -moz-animation:slideInContent 0.2s ease-in-out;
+       -o-animation:slideInContent 0.2s ease-in-out;
+          animation:slideInContent 0.2s ease-in-out;
 }
 .eds-modal__content{
   background:var(--components-modal-modal-standard-fill);
@@ -236,25 +272,14 @@
      -moz-border-radius:0.75rem;
           border-radius:0.75rem;
   color:var(--components-modal-modal-standard-text);
-  margin:auto;
   padding:1.5rem;
-  position:relative;
   width:100%;
   max-height:90vh;
   overflow:auto;
-  z-index:40;
-  -webkit-animation:slideInContent;
-     -moz-animation:slideInContent;
-       -o-animation:slideInContent;
-          animation:slideInContent;
-  -webkit-animation-duration:0.2s;
-     -moz-animation-duration:0.2s;
-       -o-animation-duration:0.2s;
-          animation-duration:0.2s;
-  -webkit-animation-timing-function:ease-in-out;
-     -moz-animation-timing-function:ease-in-out;
-       -o-animation-timing-function:ease-in-out;
-          animation-timing-function:ease-in-out;
+  -webkit-animation:slideInContent 0.2s ease-in-out;
+     -moz-animation:slideInContent 0.2s ease-in-out;
+       -o-animation:slideInContent 0.2s ease-in-out;
+          animation:slideInContent 0.2s ease-in-out;
 }
 .eds-modal__content--align-center{
   display:-webkit-box;
@@ -296,18 +321,22 @@
 .eds-modal__content--size-small{
   max-width:28.125rem;
   padding:2.5rem;
+  padding-top:2rem;
 }
 .eds-modal__content--size-medium{
   max-width:45rem;
   padding:3rem;
+  padding-top:2rem;
 }
 .eds-modal__content--size-large{
   max-width:56.25rem;
   padding:3rem;
+  padding-top:2rem;
 }
 .eds-modal__content--size-extraLarge{
   max-width:78.75rem;
   padding:3rem;
+  padding-top:2rem;
 }
 .eds-modal__content::-webkit-scrollbar{
   width:16px;
@@ -325,12 +354,6 @@
 .eds-modal__content::-webkit-scrollbar-thumb:hover{
   background-color:grey;
 }
-.eds-modal__close{
-  position:absolute;
-  top:1rem;
-  right:1rem;
-  color:var(--components-modal-modal-standard-icon);
-}
 
 @-webkit-keyframes fadeInOverlay{
   from{
@@ -369,43 +392,73 @@
 }
 @-webkit-keyframes slideInContent{
   from{
-    top:5rem;
+    -webkit-transform:translateY(0.5rem);
+            transform:translateY(0.5rem);
     opacity:0;
   }
   to{
-    top:0%;
+    -webkit-transform:translateY(0);
+            transform:translateY(0);
     opacity:1;
   }
 }
 @-moz-keyframes slideInContent{
   from{
-    top:5rem;
+    -moz-transform:translateY(0.5rem);
+         transform:translateY(0.5rem);
     opacity:0;
   }
   to{
-    top:0%;
+    -moz-transform:translateY(0);
+         transform:translateY(0);
     opacity:1;
   }
 }
 @-o-keyframes slideInContent{
   from{
-    top:5rem;
+    -o-transform:translateY(0.5rem);
+       transform:translateY(0.5rem);
     opacity:0;
   }
   to{
-    top:0%;
+    -o-transform:translateY(0);
+       transform:translateY(0);
     opacity:1;
   }
 }
 @keyframes slideInContent{
   from{
-    top:5rem;
+    -webkit-transform:translateY(0.5rem);
+       -moz-transform:translateY(0.5rem);
+         -o-transform:translateY(0.5rem);
+            transform:translateY(0.5rem);
     opacity:0;
   }
   to{
-    top:0%;
+    -webkit-transform:translateY(0);
+       -moz-transform:translateY(0);
+         -o-transform:translateY(0);
+            transform:translateY(0);
     opacity:1;
   }
+}
+@media (prefers-reduced-motion: reduce){
+  .eds-modal__overlay::-webkit-backdrop{
+    -webkit-animation:none;
+            animation:none;
+  }
+  .eds-modal__overlay::-ms-backdrop{
+    animation:none;
+  }
+  .eds-modal__overlay,
+  .eds-modal__overlay::backdrop,
+  .eds-modal__content,
+  .eds-modal__close{
+    -webkit-animation:none;
+       -moz-animation:none;
+         -o-animation:none;
+            animation:none;
+  }
 }.eds-drawer{
   -webkit-animation:slideFromRight forwards ease-out 0.1s;
      -moz-animation:slideFromRight forwards ease-out 0.1s;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/modal",
-  "version": "1.8.15",
+  "version": "2.0.0-next.0",
   "license": "EUPL-1.2",
   "main": "dist/modal.cjs.js",
   "module": "dist/modal.esm.js",
@@ -22,24 +22,22 @@
     "test": "jest"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@entur/a11y": "^0.2.112",
-    "@entur/button": "^4.0.10",
-    "@entur/icons": "^9.0.3",
-    "@entur/layout": "^3.7.4",
-    "@entur/tokens": "^3.24.0",
-    "@entur/typography": "^2.1.11",
-    "@entur/utils": "^0.13.5",
-    "@reach/dialog": "^0.16.2",
-    "classnames": "^2.5.1",
-    "react-focus-lock": "^2.13.6"
+    "@entur/a11y": "^1.0.0-next.0",
+    "@entur/button": "^5.0.0-next.0",
+    "@entur/icons": "^10.0.0-next.0",
+    "@entur/layout": "^4.0.0-next.0",
+    "@entur/tokens": "^3.24.1-next.0",
+    "@entur/typography": "^3.0.0-next.0",
+    "@entur/utils": "^1.0.0-next.0",
+    "classnames": "^2.5.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^10.4.9",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@vitejs/plugin-react": "^5.0.1",
     "jest": "^29.0.0",
@@ -49,5 +47,5 @@
     "vite": "^7.3.2",
     "vite-plugin-dts": "^4.5.4"
   },
-  "gitHead": "ac37425c6b442481549814941b317886e3a7defb"
+  "gitHead": "0f435bdeec98cc3cea1db7434b13b1f771a39a18"
 }