@entur/modal 1.7.73-beta.9 → 1.7.74

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;

package/dist/Modal.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import './Modal.scss';
+import { default as React } from 'react';
 export type ModalProps = {
     /** Innholdet i modalen */
     children: React.ReactNode;

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;
@@ -15,10 +15,10 @@ export type ModalContentProps = {
     [key: string]: any;
 };
 export declare const headingsMap: {
-    extraSmall: <E extends React.ElementType = "h4">({ margin, children, as, ...rest }: import("@entur/typography").Heading4Props<E>) => JSX.Element;
-    small: <E extends React.ElementType = "h3">({ margin, children, as, ...rest }: import("@entur/typography").Heading3Props<E>) => JSX.Element;
-    medium: <E extends React.ElementType = "h2">({ margin, children, as, ...rest }: import("@entur/typography").Heading2Props<E>) => JSX.Element;
-    large: <E extends React.ElementType = "h2">({ margin, children, as, ...rest }: import("@entur/typography").Heading2Props<E>) => JSX.Element;
-    extraLarge: <E extends React.ElementType = "h2">({ margin, children, as, ...rest }: import("@entur/typography").Heading2Props<E>) => 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>;

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;

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,165 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils = require("@entur/utils");
+const jsxRuntime = require("react/jsx-runtime");
+const icons = require("@entur/icons");
+const button = require("@entur/button");
+const typography = require("@entur/typography");
+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,
+  ...rest
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  dialog.DialogOverlay,
+  {
+    className: classNames("eds-modal__overlay", className),
+    isOpen: open,
+    ...rest
+  }
+);
+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 = utils.useRandomId("eds-modal");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    dialog.DialogContent,
+    {
+      className: classNames(
+        "eds-modal__content",
+        `eds-modal__content--size-${size}`,
+        `eds-modal__content--align-${align}`,
+        className
+      ),
+      "aria-labelledby": randomId,
+      ...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,
+  ...rest
+}) => {
+  const randomId = utils.useRandomId("eds-modal");
+  const Heading = headingsMap[size] || typography.Heading2;
+  const showCloseButton = ["medium", "large", "extraLarge"].includes(size);
+  let handleOnDismiss;
+  if (onDismiss && closeOnClickOutside) {
+    handleOnDismiss = onDismiss;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ModalOverlay,
+    {
+      open,
+      onDismiss: handleOnDismiss,
+      initialFocusRef,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { size, align, ...rest, children: [
+        showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
+          button.IconButton,
+          {
+            className: "eds-modal__close",
+            "aria-label": closeLabel,
+            onClick: onDismiss,
+            type: "button",
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {})
+          }
+        ),
+        title && /* @__PURE__ */ jsxRuntime.jsx(Heading, { margin: "bottom", as: "h2", id: randomId, children: title }),
+        children
+      ] })
+    }
+  );
+};
+const Drawer = ({
+  children,
+  className,
+  closeLabel = "Lukk skuff",
+  contrast = false,
+  open = true,
+  onDismiss,
+  title,
+  style,
+  overlay = false
+}) => {
+  const titleId = utils.useRandomId("eds-drawer");
+  if (!open) {
+    return null;
+  }
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      onDismiss();
+    }
+  };
+  const Wrapper = contrast ? layout.Contrast : React.Fragment;
+  const ContentContainer = overlay ? dialog.DialogContent : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ConditionalWrapper,
+    {
+      condition: overlay,
+      wrapper: (children2) => /* @__PURE__ */ jsxRuntime.jsx(ModalOverlay, { open, onDismiss, children: children2 }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        ContentContainer,
+        {
+          "aria-labelledby": titleId,
+          className: classNames("eds-drawer", className),
+          onKeyDown: handleKeyDown,
+          style,
+          children: /* @__PURE__ */ jsxRuntime.jsxs(reactFocusLock.MoveFocusInside, { 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, 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;
+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 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 { Heading4, Heading3, Heading2 } 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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"}

package/dist/modal.esm.js

@@ -1,173 +1,165 @@
-import { useRandomId, warnAboutMissingStyles } from '@entur/utils';
-import React from 'react';
-import { CloseIcon } from '@entur/icons';
-import { IconButton } from '@entur/button';
-import { Heading4, Heading3, Heading2 } from '@entur/typography';
-import classNames from 'classnames';
-import { DialogOverlay, DialogContent } from '@reach/dialog';
-import { MoveFocusInside } from 'react-focus-lock';
-import { Contrast } from '@entur/layout';
-
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
+import { useRandomId, warnAboutMissingStyles } from "@entur/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CloseIcon } from "@entur/icons";
+import { IconButton } from "@entur/button";
+import { Heading2, Heading3, Heading4 } from "@entur/typography";
+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";
+const ModalOverlay = ({
+  className,
+  open,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  DialogOverlay,
+  {
+    className: classNames("eds-modal__overlay", className),
+    isOpen: open,
+    ...rest
   }
-  return t;
-}
-
-var _excluded$2 = ["className", "open"];
-var ModalOverlay = function ModalOverlay(_ref) {
-  var className = _ref.className,
-    open = _ref.open,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  return React.createElement(DialogOverlay, _extends({
-    className: classNames('eds-modal__overlay', className),
-    isOpen: open
-  }, rest));
-};
-
-var _excluded$1 = ["children", "className", "size", "title", "align"];
-var headingsMap = {
+);
+const headingsMap = {
   extraSmall: Heading4,
   small: Heading3,
   medium: Heading2,
   large: Heading2,
   extraLarge: Heading2
 };
-var ModalContent = function ModalContent(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    size = _ref.size,
-    title = _ref.title,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? 'start' : _ref$align,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  var Heading = headingsMap[size] || Heading2;
-  var randomId = useRandomId('eds-modal');
-  return React.createElement(DialogContent, _extends({
-    className: classNames('eds-modal__content', "eds-modal__content--size-" + size, "eds-modal__content--align-" + align, className),
-    "aria-labelledby": randomId
-  }, rest), title && React.createElement(Heading, {
-    margin: "bottom",
-    as: "h2",
-    id: randomId
-  }, title), children);
+const ModalContent = ({
+  children,
+  className,
+  size,
+  title,
+  align = "start",
+  ...rest
+}) => {
+  const Heading = headingsMap[size] || Heading2;
+  const randomId = useRandomId("eds-modal");
+  return /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      className: classNames(
+        "eds-modal__content",
+        `eds-modal__content--size-${size}`,
+        `eds-modal__content--align-${align}`,
+        className
+      ),
+      "aria-labelledby": randomId,
+      ...rest,
+      children: [
+        title && /* @__PURE__ */ jsx(Heading, { margin: "bottom", as: "h2", id: randomId, children: title }),
+        children
+      ]
+    }
+  );
 };
-
-var _excluded = ["children", "closeLabel", "initialFocusRef", "open", "onDismiss", "size", "align", "title", "closeOnClickOutside"];
-var Modal = function Modal(_ref) {
-  var children = _ref.children,
-    _ref$closeLabel = _ref.closeLabel,
-    closeLabel = _ref$closeLabel === void 0 ? 'Lukk' : _ref$closeLabel,
-    initialFocusRef = _ref.initialFocusRef,
-    open = _ref.open,
-    onDismiss = _ref.onDismiss,
-    size = _ref.size,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? 'start' : _ref$align,
-    title = _ref.title,
-    _ref$closeOnClickOuts = _ref.closeOnClickOutside,
-    closeOnClickOutside = _ref$closeOnClickOuts === void 0 ? true : _ref$closeOnClickOuts,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var randomId = useRandomId('eds-modal');
-  var Heading = headingsMap[size] || Heading2;
-  var showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);
-  var handleOnDismiss;
+const Modal = ({
+  children,
+  closeLabel = "Lukk",
+  initialFocusRef,
+  open,
+  onDismiss,
+  size,
+  align = "start",
+  title,
+  closeOnClickOutside = true,
+  ...rest
+}) => {
+  const randomId = useRandomId("eds-modal");
+  const Heading = headingsMap[size] || Heading2;
+  const showCloseButton = ["medium", "large", "extraLarge"].includes(size);
+  let handleOnDismiss;
   if (onDismiss && closeOnClickOutside) {
     handleOnDismiss = onDismiss;
   }
-  return React.createElement(ModalOverlay, {
-    open: open,
-    onDismiss: handleOnDismiss,
-    initialFocusRef: initialFocusRef
-  }, React.createElement(ModalContent, _extends({
-    size: size,
-    align: align
-  }, rest), showCloseButton && React.createElement(IconButton, {
-    className: "eds-modal__close",
-    "aria-label": closeLabel,
-    onClick: onDismiss,
-    type: "button"
-  }, React.createElement(CloseIcon, null)), title && React.createElement(Heading, {
-    margin: "bottom",
-    as: "h2",
-    id: randomId
-  }, title), children));
+  return /* @__PURE__ */ jsx(
+    ModalOverlay,
+    {
+      open,
+      onDismiss: handleOnDismiss,
+      initialFocusRef,
+      children: /* @__PURE__ */ jsxs(ModalContent, { size, align, ...rest, children: [
+        showCloseButton && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            className: "eds-modal__close",
+            "aria-label": closeLabel,
+            onClick: onDismiss,
+            type: "button",
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        ),
+        title && /* @__PURE__ */ jsx(Heading, { margin: "bottom", as: "h2", id: randomId, children: title }),
+        children
+      ] })
+    }
+  );
 };
-
-var Drawer = function Drawer(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    _ref$closeLabel = _ref.closeLabel,
-    closeLabel = _ref$closeLabel === void 0 ? 'Lukk skuff' : _ref$closeLabel,
-    _ref$contrast = _ref.contrast,
-    contrast = _ref$contrast === void 0 ? false : _ref$contrast,
-    _ref$open = _ref.open,
-    open = _ref$open === void 0 ? true : _ref$open,
-    onDismiss = _ref.onDismiss,
-    title = _ref.title,
-    style = _ref.style,
-    _ref$overlay = _ref.overlay,
-    overlay = _ref$overlay === void 0 ? false : _ref$overlay;
-  var titleId = useRandomId('eds-drawer');
+const Drawer = ({
+  children,
+  className,
+  closeLabel = "Lukk skuff",
+  contrast = false,
+  open = true,
+  onDismiss,
+  title,
+  style,
+  overlay = false
+}) => {
+  const titleId = useRandomId("eds-drawer");
   if (!open) {
     return null;
   }
-  var handleKeyDown = function handleKeyDown(e) {
-    if (e.key === 'Escape') {
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
       e.stopPropagation();
       onDismiss();
     }
   };
-  var Wrapper = contrast ? Contrast : React.Fragment;
-  var ContentContainer = overlay ? DialogContent : 'div';
-  return React.createElement(ConditionalWrapper, {
-    condition: overlay,
-    wrapper: function wrapper(children) {
-      return React.createElement(ModalOverlay, {
-        open: open,
-        onDismiss: onDismiss
-      }, children);
+  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,
+        {
+          "aria-labelledby": titleId,
+          className: classNames("eds-drawer", className),
+          onKeyDown: handleKeyDown,
+          style,
+          children: /* @__PURE__ */ jsxs(MoveFocusInside, { children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                className: "eds-drawer__close-button",
+                onClick: onDismiss,
+                type: "button",
+                "aria-label": closeLabel,
+                children: /* @__PURE__ */ jsx(CloseIcon, { "aria-hidden": true })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "eds-drawer__content", children: [
+              /* @__PURE__ */ jsx(Heading3, { as: "h2", id: titleId, children: title }),
+              children
+            ] })
+          ] })
+        }
+      ) })
     }
-  }, React.createElement(Wrapper, null, React.createElement(ContentContainer, {
-    "aria-labelledby": titleId,
-    className: classNames('eds-drawer', className),
-    onKeyDown: handleKeyDown,
-    style: style
-  }, React.createElement(MoveFocusInside, null, React.createElement(IconButton, {
-    className: "eds-drawer__close-button",
-    onClick: onDismiss,
-    type: "button",
-    "aria-label": closeLabel
-  }, React.createElement(CloseIcon, {
-    "aria-hidden": true
-  })), React.createElement("div", {
-    className: "eds-drawer__content"
-  }, React.createElement(Heading3, {
-    as: "h2",
-    id: titleId
-  }, title), children)))));
+  );
 };
-var ConditionalWrapper = function ConditionalWrapper(_ref2) {
-  var condition = _ref2.condition,
-    wrapper = _ref2.wrapper,
-    children = _ref2.children;
-  return condition ? wrapper(children) : children;
+const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
+warnAboutMissingStyles("modal", "icons", "typography", "a11y", "button");
+export {
+  Drawer,
+  Modal,
+  ModalContent,
+  ModalOverlay,
+  headingsMap
 };
-
-warnAboutMissingStyles('modal', 'icons', 'typography', 'a11y', 'button');
-
-export { Drawer, Modal, ModalContent, ModalOverlay, headingsMap };
 //# sourceMappingURL=modal.esm.js.map

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 { Heading4, Heading3, Heading2 } 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":["ModalOverlay","_ref","className","open","rest","_objectWithoutPropertiesLoose","_excluded","React","createElement","DialogOverlay","_extends","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","_ref$align","align","Heading","randomId","useRandomId","DialogContent","margin","as","id","Modal","_ref$closeLabel","closeLabel","initialFocusRef","onDismiss","_ref$closeOnClickOuts","closeOnClickOutside","showCloseButton","includes","handleOnDismiss","IconButton","onClick","type","CloseIcon","Drawer","_ref$contrast","contrast","_ref$open","style","_ref$overlay","overlay","titleId","handleKeyDown","e","key","stopPropagation","Wrapper","Contrast","Fragment","ContentContainer","ConditionalWrapper","condition","wrapper","onKeyDown","MoveFocusInside","_ref2","warnAboutMissingStyles"],"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 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 { Heading4, Heading3, Heading2 } 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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"}

package/dist/styles.css

@@ -1,113 +1,5 @@
 /* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-:root {
-  --reach-dialog: 1;
-}
-
-.eds-modal__overlay {
-  background: rgba(0, 0, 0, 0.5);
-  bottom: 0;
-  display: flex;
-  left: 0;
-  overflow: hidden;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 30;
-  animation: fadeInOverlay;
-  animation-duration: 0.2s;
-  animation-timing-function: ease-in-out;
-}
-.eds-modal__content {
-  background: var(--components-modal-modal-standard-fill);
-  border: 1px solid var(--components-modal-modal-standard-border);
-  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;
-  animation: slideInContent;
-  animation-duration: 0.2s;
-  animation-timing-function: ease-in-out;
-}
-.eds-modal__content--align-center {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-.eds-modal__content--align-end {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-.eds-modal__content--size-extraSmall {
-  max-width: 21rem;
-  padding: 1.5rem;
-}
-.eds-modal__content--size-small {
-  max-width: 28.125rem;
-  padding: 2.5rem;
-}
-.eds-modal__content--size-medium {
-  max-width: 45rem;
-  padding: 3rem;
-}
-.eds-modal__content--size-large {
-  max-width: 56.25rem;
-  padding: 3rem;
-}
-.eds-modal__content--size-extraLarge {
-  max-width: 78.75rem;
-  padding: 3rem;
-}
-.eds-modal__content::-webkit-scrollbar {
-  width: 16px;
-}
-.eds-modal__content::-webkit-scrollbar-track {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-.eds-modal__content::-webkit-scrollbar-thumb {
-  background-color: lightgrey;
-  border: 4px solid transparent;
-  border-radius: 8px;
-  background-clip: padding-box;
-}
-.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);
-}
-
-@keyframes fadeInOverlay {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes slideInContent {
-  from {
-    top: 5rem;
-    opacity: 0;
-  }
-  to {
-    top: 0%;
-    opacity: 1;
-  }
-}
-/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 /* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 /* DO NOT CHANGE!*/
@@ -282,8 +174,113 @@
 
 :root {
   --eds-modal: 1;
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+:root {
+  --reach-dialog: 1;
 }
-/* DO NOT CHANGE!*/
+
+.eds-modal__overlay {
+  background: rgba(0, 0, 0, 0.5);
+  bottom: 0;
+  display: flex;
+  left: 0;
+  overflow: hidden;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 30;
+  animation: fadeInOverlay;
+  animation-duration: 0.2s;
+  animation-timing-function: ease-in-out;
+}
+.eds-modal__content {
+  background: var(--components-modal-modal-standard-fill);
+  border: 1px solid var(--components-modal-modal-standard-border);
+  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;
+  animation: slideInContent;
+  animation-duration: 0.2s;
+  animation-timing-function: ease-in-out;
+}
+.eds-modal__content--align-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.eds-modal__content--align-end {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.eds-modal__content--size-extraSmall {
+  max-width: 21rem;
+  padding: 1.5rem;
+}
+.eds-modal__content--size-small {
+  max-width: 28.125rem;
+  padding: 2.5rem;
+}
+.eds-modal__content--size-medium {
+  max-width: 45rem;
+  padding: 3rem;
+}
+.eds-modal__content--size-large {
+  max-width: 56.25rem;
+  padding: 3rem;
+}
+.eds-modal__content--size-extraLarge {
+  max-width: 78.75rem;
+  padding: 3rem;
+}
+.eds-modal__content::-webkit-scrollbar {
+  width: 16px;
+}
+.eds-modal__content::-webkit-scrollbar-track {
+  margin-block: 0.5rem;
+}
+.eds-modal__content::-webkit-scrollbar-thumb {
+  background-color: lightgrey;
+  border: 4px solid transparent;
+  border-radius: 8px;
+  background-clip: padding-box;
+}
+.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);
+}
+
+@keyframes fadeInOverlay {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes slideInContent {
+  from {
+    top: 5rem;
+    opacity: 0;
+  }
+  to {
+    top: 0%;
+    opacity: 1;
+  }
+}/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-drawer {
   animation: slideFromRight forwards ease-out 0.1s;
@@ -320,4 +317,4 @@
     box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
     transform: 0;
   }
-}
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@entur/modal",
-  "version": "1.7.73-beta.9",
+  "version": "1.7.74",
   "license": "EUPL-1.2",
-  "main": "dist/index.js",
+  "main": "dist/modal.cjs.js",
   "module": "dist/modal.esm.js",
-  "typings": "dist/index.d.ts",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -17,29 +17,39 @@
     "access": "public"
   },
   "scripts": {
-    "start": "dts watch --noClean",
-    "build": "dts build",
-    "test": "dts test",
-    "lint": "dts lint src"
+    "start": "vite build --watch",
+    "build": "vite build",
+    "test": "jest",
+    "lint": "eslint src"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@entur/a11y": "^0.2.99",
-    "@entur/button": "^3.3.13-beta.9",
-    "@entur/icons": "^8.0.0",
-    "@entur/layout": "^3.1.9-beta.9",
-    "@entur/tokens": "^3.19.1",
-    "@entur/typography": "^1.10.0-beta.9",
-    "@entur/utils": "^0.12.3",
-    "@reach/dialog": "^0.16.0",
-    "classnames": "^2.3.1",
-    "react-focus-lock": "^2.9.1"
+    "@entur/a11y": "^0.2.101",
+    "@entur/button": "^3.3.14",
+    "@entur/icons": "^8.0.2",
+    "@entur/layout": "^3.1.10",
+    "@entur/tokens": "^3.19.3",
+    "@entur/typography": "^1.9.14",
+    "@entur/utils": "^0.12.5",
+    "@reach/dialog": "^0.16.2",
+    "classnames": "^2.5.1",
+    "react-focus-lock": "^2.13.6"
   },
   "devDependencies": {
-    "dts-cli": "2.0.5"
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^10.4.9",
+    "@testing-library/user-event": "14.6.1",
+    "@vitejs/plugin-react": "^5.0.1",
+    "eslint": "^7.32.0",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.0.0",
+    "ts-jest": "^29.0.0",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.3",
+    "vite-plugin-dts": "^4.5.4"
   },
-  "gitHead": "6f685d2e4ac13bdaf9c6480f9e7922c9d8f4619c"
+  "gitHead": "5dd9d318f1d79f6f522f978de27b551fda1e91cc"
 }

package/dist/index.js

@@ -1,8 +0,0 @@
-
-'use strict'
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./modal.cjs.production.min.js')
-} else {
-  module.exports = require('./modal.cjs.development.js')
-}

package/dist/modal.cjs.development.js

@@ -1,181 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var utils = require('@entur/utils');
-var React = require('react');
-var icons = require('@entur/icons');
-var button = require('@entur/button');
-var typography = require('@entur/typography');
-var classNames = require('classnames');
-var dialog = require('@reach/dialog');
-var reactFocusLock = require('react-focus-lock');
-var layout = require('@entur/layout');
-
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-
-var _excluded$2 = ["className", "open"];
-var ModalOverlay = function ModalOverlay(_ref) {
-  var className = _ref.className,
-    open = _ref.open,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  return React.createElement(dialog.DialogOverlay, _extends({
-    className: classNames('eds-modal__overlay', className),
-    isOpen: open
-  }, rest));
-};
-
-var _excluded$1 = ["children", "className", "size", "title", "align"];
-var headingsMap = {
-  extraSmall: typography.Heading4,
-  small: typography.Heading3,
-  medium: typography.Heading2,
-  large: typography.Heading2,
-  extraLarge: typography.Heading2
-};
-var ModalContent = function ModalContent(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    size = _ref.size,
-    title = _ref.title,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? 'start' : _ref$align,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  var Heading = headingsMap[size] || typography.Heading2;
-  var randomId = utils.useRandomId('eds-modal');
-  return React.createElement(dialog.DialogContent, _extends({
-    className: classNames('eds-modal__content', "eds-modal__content--size-" + size, "eds-modal__content--align-" + align, className),
-    "aria-labelledby": randomId
-  }, rest), title && React.createElement(Heading, {
-    margin: "bottom",
-    as: "h2",
-    id: randomId
-  }, title), children);
-};
-
-var _excluded = ["children", "closeLabel", "initialFocusRef", "open", "onDismiss", "size", "align", "title", "closeOnClickOutside"];
-var Modal = function Modal(_ref) {
-  var children = _ref.children,
-    _ref$closeLabel = _ref.closeLabel,
-    closeLabel = _ref$closeLabel === void 0 ? 'Lukk' : _ref$closeLabel,
-    initialFocusRef = _ref.initialFocusRef,
-    open = _ref.open,
-    onDismiss = _ref.onDismiss,
-    size = _ref.size,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? 'start' : _ref$align,
-    title = _ref.title,
-    _ref$closeOnClickOuts = _ref.closeOnClickOutside,
-    closeOnClickOutside = _ref$closeOnClickOuts === void 0 ? true : _ref$closeOnClickOuts,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var randomId = utils.useRandomId('eds-modal');
-  var Heading = headingsMap[size] || typography.Heading2;
-  var showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);
-  var handleOnDismiss;
-  if (onDismiss && closeOnClickOutside) {
-    handleOnDismiss = onDismiss;
-  }
-  return React.createElement(ModalOverlay, {
-    open: open,
-    onDismiss: handleOnDismiss,
-    initialFocusRef: initialFocusRef
-  }, React.createElement(ModalContent, _extends({
-    size: size,
-    align: align
-  }, rest), showCloseButton && React.createElement(button.IconButton, {
-    className: "eds-modal__close",
-    "aria-label": closeLabel,
-    onClick: onDismiss,
-    type: "button"
-  }, React.createElement(icons.CloseIcon, null)), title && React.createElement(Heading, {
-    margin: "bottom",
-    as: "h2",
-    id: randomId
-  }, title), children));
-};
-
-var Drawer = function Drawer(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    _ref$closeLabel = _ref.closeLabel,
-    closeLabel = _ref$closeLabel === void 0 ? 'Lukk skuff' : _ref$closeLabel,
-    _ref$contrast = _ref.contrast,
-    contrast = _ref$contrast === void 0 ? false : _ref$contrast,
-    _ref$open = _ref.open,
-    open = _ref$open === void 0 ? true : _ref$open,
-    onDismiss = _ref.onDismiss,
-    title = _ref.title,
-    style = _ref.style,
-    _ref$overlay = _ref.overlay,
-    overlay = _ref$overlay === void 0 ? false : _ref$overlay;
-  var titleId = utils.useRandomId('eds-drawer');
-  if (!open) {
-    return null;
-  }
-  var handleKeyDown = function handleKeyDown(e) {
-    if (e.key === 'Escape') {
-      e.stopPropagation();
-      onDismiss();
-    }
-  };
-  var Wrapper = contrast ? layout.Contrast : React.Fragment;
-  var ContentContainer = overlay ? dialog.DialogContent : 'div';
-  return React.createElement(ConditionalWrapper, {
-    condition: overlay,
-    wrapper: function wrapper(children) {
-      return React.createElement(ModalOverlay, {
-        open: open,
-        onDismiss: onDismiss
-      }, children);
-    }
-  }, React.createElement(Wrapper, null, React.createElement(ContentContainer, {
-    "aria-labelledby": titleId,
-    className: classNames('eds-drawer', className),
-    onKeyDown: handleKeyDown,
-    style: style
-  }, React.createElement(reactFocusLock.MoveFocusInside, null, React.createElement(button.IconButton, {
-    className: "eds-drawer__close-button",
-    onClick: onDismiss,
-    type: "button",
-    "aria-label": closeLabel
-  }, React.createElement(icons.CloseIcon, {
-    "aria-hidden": true
-  })), React.createElement("div", {
-    className: "eds-drawer__content"
-  }, React.createElement(typography.Heading3, {
-    as: "h2",
-    id: titleId
-  }, title), children)))));
-};
-var ConditionalWrapper = function ConditionalWrapper(_ref2) {
-  var condition = _ref2.condition,
-    wrapper = _ref2.wrapper,
-    children = _ref2.children;
-  return condition ? wrapper(children) : 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.development.js.map

package/dist/modal.cjs.development.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"modal.cjs.development.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 { Heading4, Heading3, Heading2 } 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":["ModalOverlay","_ref","className","open","rest","_objectWithoutPropertiesLoose","_excluded","React","createElement","DialogOverlay","_extends","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","_ref$align","align","Heading","randomId","useRandomId","DialogContent","margin","as","id","Modal","_ref$closeLabel","closeLabel","initialFocusRef","onDismiss","_ref$closeOnClickOuts","closeOnClickOutside","showCloseButton","includes","handleOnDismiss","IconButton","onClick","type","CloseIcon","Drawer","_ref$contrast","contrast","_ref$open","style","_ref$overlay","overlay","titleId","handleKeyDown","e","key","stopPropagation","Wrapper","Contrast","Fragment","ContentContainer","ConditionalWrapper","condition","wrapper","onKeyDown","MoveFocusInside","_ref2","warnAboutMissingStyles"],"mappings":"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"}

package/dist/modal.cjs.production.min.js

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),n=require("react"),a=require("@entur/icons"),t=require("@entur/button"),r=require("@entur/typography"),i=require("classnames"),l=require("@reach/dialog"),o=require("react-focus-lock"),s=require("@entur/layout");function c(){return c=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var a=arguments[n];for(var t in a)({}).hasOwnProperty.call(a,t)&&(e[t]=a[t])}return e},c.apply(null,arguments)}function d(e,n){if(null==e)return{};var a={};for(var t in e)if({}.hasOwnProperty.call(e,t)){if(-1!==n.indexOf(t))continue;a[t]=e[t]}return a}var u=["className","open"],m=function(e){var a=e.className,t=e.open,r=d(e,u);return n.createElement(l.DialogOverlay,c({className:i("eds-modal__overlay",a),isOpen:t},r))},g=["children","className","size","title","align"],p={extraSmall:r.Heading4,small:r.Heading3,medium:r.Heading2,large:r.Heading2,extraLarge:r.Heading2},v=function(a){var t=a.children,o=a.className,s=a.size,u=a.title,m=a.align,v=void 0===m?"start":m,f=d(a,g),y=p[s]||r.Heading2,b=e.useRandomId("eds-modal");return n.createElement(l.DialogContent,c({className:i("eds-modal__content","eds-modal__content--size-"+s,"eds-modal__content--align-"+v,o),"aria-labelledby":b},f),u&&n.createElement(y,{margin:"bottom",as:"h2",id:b},u),t)},f=["children","closeLabel","initialFocusRef","open","onDismiss","size","align","title","closeOnClickOutside"],y=function(e){var n=e.children;return e.condition?(0,e.wrapper)(n):n};e.warnAboutMissingStyles("modal","icons","typography","a11y","button"),exports.Drawer=function(c){var d=c.children,u=c.className,g=c.closeLabel,p=void 0===g?"Lukk skuff":g,v=c.contrast,f=void 0!==v&&v,b=c.open,E=void 0===b||b,h=c.onDismiss,_=c.title,O=c.style,k=c.overlay,w=void 0!==k&&k,N=e.useRandomId("eds-drawer");return E?n.createElement(y,{condition:w,wrapper:function(e){return n.createElement(m,{open:E,onDismiss:h},e)}},n.createElement(f?s.Contrast:n.Fragment,null,n.createElement(w?l.DialogContent:"div",{"aria-labelledby":N,className:i("eds-drawer",u),onKeyDown:function(e){"Escape"===e.key&&(e.stopPropagation(),h())},style:O},n.createElement(o.MoveFocusInside,null,n.createElement(t.IconButton,{className:"eds-drawer__close-button",onClick:h,type:"button","aria-label":p},n.createElement(a.CloseIcon,{"aria-hidden":!0})),n.createElement("div",{className:"eds-drawer__content"},n.createElement(r.Heading3,{as:"h2",id:N},_),d))))):null},exports.Modal=function(i){var l,o=i.children,s=i.closeLabel,u=void 0===s?"Lukk":s,g=i.initialFocusRef,y=i.open,b=i.onDismiss,E=i.size,h=i.align,_=void 0===h?"start":h,O=i.title,k=i.closeOnClickOutside,w=void 0===k||k,N=d(i,f),x=e.useRandomId("eds-modal"),C=p[E]||r.Heading2,D=["medium","large","extraLarge"].includes(E);return b&&w&&(l=b),n.createElement(m,{open:y,onDismiss:l,initialFocusRef:g},n.createElement(v,c({size:E,align:_},N),D&&n.createElement(t.IconButton,{className:"eds-modal__close","aria-label":u,onClick:b,type:"button"},n.createElement(a.CloseIcon,null)),O&&n.createElement(C,{margin:"bottom",as:"h2",id:x},O),o))},exports.ModalContent=v,exports.ModalOverlay=m,exports.headingsMap=p;
-//# sourceMappingURL=modal.cjs.production.min.js.map

package/dist/modal.cjs.production.min.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"modal.cjs.production.min.js","sources":["../src/ModalOverlay.tsx","../src/ModalContent.tsx","../src/Drawer.tsx","../src/index.tsx","../src/Modal.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 { Heading4, Heading3, Heading2 } 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';\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","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"],"names":["ModalOverlay","_ref","className","open","rest","_objectWithoutPropertiesLoose","_excluded","React","createElement","DialogOverlay","_extends","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","_ref$align","align","Heading","randomId","useRandomId","DialogContent","margin","as","id","ConditionalWrapper","_ref2","condition","wrapper","warnAboutMissingStyles","_ref$closeLabel","closeLabel","_ref$contrast","contrast","_ref$open","onDismiss","style","_ref$overlay","overlay","titleId","Contrast","Fragment","onKeyDown","e","key","stopPropagation","MoveFocusInside","IconButton","onClick","type","CloseIcon","handleOnDismiss","initialFocusRef","_ref$closeOnClickOuts","closeOnClickOutside","showCloseButton","includes"],"mappings":"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"}