@entur/modal 2.0.0-alpha.0 → 2.0.0-next.1

package/README.md

@@ -2,7 +2,7 @@
 
 This package contains the different Modal components.
 
-> 💡 Looking for the [documentation](https://design.entur.no/komponenter/layout-and-surfaces/modals)?
+> 💡 Looking for the [documentation](https://linje.entur.no/komponenter/layout-og-flater/modal)?
 
 ## Installation
 
@@ -14,4 +14,4 @@ yarn add @entur/modal
 
 ## Usage
 
-Please refer to the [documentation](https://design.entur.no/komponenter/layout-and-surfaces/modals) for usage information.
+Please refer to the [documentation](https://linje.entur.no/komponenter/layout-og-flater/modal) for usage information.

package/dist/Drawer.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import './Drawer.scss';
+import { default as React } from 'react';
 export type DrawerProps = {
     /** Innholdet. Typisk tekst, lenker eller knapper */
     children: React.ReactNode;
@@ -26,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

@@ -1,16 +1,19 @@
-import React from 'react';
-import './Modal.scss';
+import { default as React } from 'react';
 export type ModalProps = {
     /** Innholdet i modalen */
     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
@@ -19,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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export type ModalContentProps = {
     /** Innholdet i modalen */
     children: React.ReactNode;
@@ -12,13 +12,12 @@ 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<any> = "h4">({ margin, children, as, ...rest }: import("@entur/typography").Heading4Props<E>) => JSX.Element;
-    small: <E_1 extends React.ElementType<any> = "h3">({ margin, children, as, ...rest }: import("@entur/typography").Heading3Props<E_1>) => JSX.Element;
-    medium: <E_2 extends React.ElementType<any> = "h2">({ margin, children, as, ...rest }: import("@entur/typography").Heading2Props<E_2>) => JSX.Element;
-    large: <E_2 extends React.ElementType<any> = "h2">({ margin, children, as, ...rest }: import("@entur/typography").Heading2Props<E_2>) => JSX.Element;
-    extraLarge: <E_2 extends React.ElementType<any> = "h2">({ margin, children, as, ...rest }: import("@entur/typography").Heading2Props<E_2>) => JSX.Element;
+    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;
+    medium: <E extends React.ElementType = "h2">({ margin, children, as, ...rest }: import('../../typography').Heading2Props<E>) => JSX.Element;
+    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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export type ModalOverlayProps = {
     /** Flagg som sier om modalen er åpen */
     open?: boolean;
@@ -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/index.d.ts

@@ -1,4 +1,3 @@
-import './index.scss';
 export * from './Modal';
 export * from './ModalOverlay';
 export * from './ModalContent';

package/dist/modal.cjs.js

@@ -0,0 +1,247 @@
+"use strict";
+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 layout = require("@entur/layout");
+const ModalOverlay = ({
+  className,
+  open,
+  onDismiss,
+  initialFocusRef,
+  closeOnClickOutside = true,
+  children,
+  ...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,
+  medium: typography.Heading2,
+  large: typography.Heading2,
+  extraLarge: typography.Heading2
+};
+const ModalContent = ({
+  children,
+  className,
+  size,
+  title,
+  align = "start",
+  ...rest
+}) => {
+  const Heading = headingsMap[size] || typography.Heading2;
+  const randomId = react.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classNames(
+        "eds-modal__content",
+        `eds-modal__content--size-${size}`,
+        `eds-modal__content--align-${align}`,
+        className
+      ),
+      "aria-labelledby": title ? randomId : void 0,
+      ...rest,
+      children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx(Heading, { margin: "bottom", as: "h2", id: randomId, children: title }),
+        children
+      ]
+    }
+  );
+};
+const Modal = ({
+  children,
+  closeLabel = "Lukk",
+  initialFocusRef,
+  open,
+  onDismiss,
+  size,
+  align = "start",
+  title,
+  closeOnClickOutside = true,
+  showCloseButton = true,
+  "aria-label": ariaLabel,
+  ...rest
+}) => {
+  const randomId = react.useId();
+  const Heading = headingsMap[size] || typography.Heading2;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ModalOverlay,
+    {
+      open,
+      onDismiss,
+      closeOnClickOutside,
+      initialFocusRef,
+      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,
+          {
+            className: "eds-modal__close",
+            "aria-label": closeLabel,
+            onClick: onDismiss,
+            type: "button",
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {})
+          }
+        ),
+        /* @__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
+        ] })
+      ]
+    }
+  );
+};
+const Drawer = ({
+  children,
+  className,
+  closeLabel = "Lukk skuff",
+  contrast = false,
+  open = true,
+  onDismiss,
+  title,
+  style,
+  overlay = false
+}) => {
+  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
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    utils.ConditionalWrapper,
+    {
+      condition: overlay,
+      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.jsx(
+              button.IconButton,
+              {
+                className: "eds-drawer__close-button",
+                onClick: onDismiss,
+                type: "button",
+                "aria-label": closeLabel,
+                children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { "aria-hidden": true })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eds-drawer__content", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(typography.Heading3, { as: "h2", id: titleId, tabIndex: -1, "data-autofocus": "", children: title }),
+              children
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+utils.warnAboutMissingStyles("modal", "icons", "typography", "a11y", "button");
+exports.Drawer = Drawer;
+exports.Modal = Modal;
+exports.ModalContent = ModalContent;
+exports.ModalOverlay = ModalOverlay;
+exports.headingsMap = headingsMap;
+//# sourceMappingURL=modal.cjs.js.map

package/dist/modal.cjs.js.map

@@ -0,0 +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, { 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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"}