@entur/modal 1.5.7 → 1.5.10

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.5.10](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.9...@entur/modal@1.5.10) (2022-03-01)
+
+**Note:** Version bump only for package @entur/modal
+
+## [1.5.9](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.8...@entur/modal@1.5.9) (2022-02-09)
+
+**Note:** Version bump only for package @entur/modal
+
+## [1.5.8](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.7...@entur/modal@1.5.8) (2021-11-17)
+
+**Note:** Version bump only for package @entur/modal
+
 ## [1.5.7](https://bitbucket.org/enturas/design-system/compare/@entur/modal@1.5.6...@entur/modal@1.5.7) (2021-09-23)
 
 **Note:** Version bump only for package @entur/modal

package/dist/modal.cjs.development.js

@@ -2,12 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var utils = require('@entur/utils');
-var React = _interopDefault(require('react'));
+var React = require('react');
 var icons = require('@entur/icons');
-var classNames = _interopDefault(require('classnames'));
+var classNames = require('classnames');
 var dialog = require('@reach/dialog');
 var typography = require('@entur/typography');
 var button = require('@entur/button');
@@ -15,6 +13,29 @@ var reactFocusLock = require('react-focus-lock');
 var a11y = require('@entur/a11y');
 var layout = require('@entur/layout');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -30,17 +51,19 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var _excluded$2 = ["className", "open"];
 var ModalOverlay = function ModalOverlay(_ref) {
   var className = _ref.className,
       open = _ref.open,
-      rest = _objectWithoutPropertiesLoose(_ref, ["className", "open"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
-  return React.createElement(dialog.DialogOverlay, Object.assign({
-    className: classNames('eds-modal__overlay', className),
+  return React__default["default"].createElement(dialog.DialogOverlay, _extends({
+    className: classNames__default["default"]('eds-modal__overlay', className),
     isOpen: open
   }, rest));
 };
 
+var _excluded$1 = ["children", "className", "size", "title"];
 var headingsMap = {
   extraSmall: typography.Heading4,
   small: typography.Heading3,
@@ -53,20 +76,21 @@ var ModalContent = function ModalContent(_ref) {
       className = _ref.className,
       size = _ref.size,
       title = _ref.title,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "size", "title"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
   var Heading = headingsMap[size] || typography.Heading2;
   var randomId = utils.useRandomId('eds-modal');
-  return React.createElement(dialog.DialogContent, Object.assign({
-    className: classNames('eds-modal__content', "eds-modal__content--size-" + size, className),
+  return React__default["default"].createElement(dialog.DialogContent, _extends({
+    className: classNames__default["default"]('eds-modal__content', "eds-modal__content--size-" + size, className),
     "aria-labelledby": randomId
-  }, rest), React.createElement(Heading, {
+  }, rest), React__default["default"].createElement(Heading, {
     margin: "bottom",
     as: "h2",
     id: randomId
   }, title), children);
 };
 
+var _excluded = ["children", "closeLabel", "initialFocusRef", "open", "onDismiss", "size", "closeOnClickOutside"];
 var Modal = function Modal(_ref) {
   var children = _ref.children,
       _ref$closeLabel = _ref.closeLabel,
@@ -77,7 +101,7 @@ var Modal = function Modal(_ref) {
       size = _ref.size,
       _ref$closeOnClickOuts = _ref.closeOnClickOutside,
       closeOnClickOutside = _ref$closeOnClickOuts === void 0 ? true : _ref$closeOnClickOuts,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "closeLabel", "initialFocusRef", "open", "onDismiss", "size", "closeOnClickOutside"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);
   var handleOnDismiss;
@@ -86,17 +110,17 @@ var Modal = function Modal(_ref) {
     handleOnDismiss = onDismiss;
   }
 
-  return React.createElement(ModalOverlay, {
+  return React__default["default"].createElement(ModalOverlay, {
     open: open,
     onDismiss: handleOnDismiss,
     initialFocusRef: initialFocusRef
-  }, React.createElement(ModalContent, Object.assign({
+  }, React__default["default"].createElement(ModalContent, _extends({
     size: size
-  }, rest), showCloseButton && React.createElement(button.IconButton, {
+  }, rest), showCloseButton && React__default["default"].createElement(button.IconButton, {
     className: "eds-modal__close",
     "aria-label": closeLabel,
     onClick: onDismiss
-  }, React.createElement(icons.CloseIcon, null)), children));
+  }, React__default["default"].createElement(icons.CloseIcon, null)), children));
 };
 
 var Drawer = function Drawer(_ref) {
@@ -126,33 +150,33 @@ var Drawer = function Drawer(_ref) {
     }
   };
 
-  var Wrapper = contrast ? layout.Contrast : React.Fragment;
+  var Wrapper = contrast ? layout.Contrast : React__default["default"].Fragment;
   var ContentContainer = overlay ? dialog.DialogContent : 'div';
-  return React.createElement(ConditionalWrapper, {
+  return React__default["default"].createElement(ConditionalWrapper, {
     condition: overlay,
     wrapper: function wrapper(children) {
-      return React.createElement(ModalOverlay, {
+      return React__default["default"].createElement(ModalOverlay, {
         open: open,
         onDismiss: onDismiss
       }, children);
     }
-  }, React.createElement(Wrapper, null, React.createElement(ContentContainer, {
+  }, React__default["default"].createElement(Wrapper, null, React__default["default"].createElement(ContentContainer, {
     "aria-labelledby": titleId,
-    className: classNames('eds-drawer', className),
+    className: classNames__default["default"]('eds-drawer', className),
     onKeyDown: handleKeyDown,
     style: style
-  }, React.createElement(reactFocusLock.MoveFocusInside, null, React.createElement("div", {
+  }, React__default["default"].createElement(reactFocusLock.MoveFocusInside, null, React__default["default"].createElement("div", {
     className: "eds-drawer__content"
-  }, React.createElement(typography.Heading3, {
+  }, React__default["default"].createElement(typography.Heading3, {
     as: "h2",
     id: titleId
-  }, title), children), React.createElement(button.IconButton, {
+  }, title), children), React__default["default"].createElement(button.IconButton, {
     className: "eds-drawer__close-button",
     onClick: onDismiss,
     type: "button"
-  }, React.createElement(icons.CloseIcon, {
+  }, React__default["default"].createElement(icons.CloseIcon, {
     "aria-hidden": true
-  }), React.createElement(a11y.VisuallyHidden, null, closeLabel))))));
+  }), React__default["default"].createElement(a11y.VisuallyHidden, null, closeLabel))))));
 };
 
 var ConditionalWrapper = function ConditionalWrapper(_ref2) {

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

@@ -1 +1 @@
-{"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: string;\n  [key: string]: any;\n};\n\nconst 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  ...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        className,\n      )}\n      aria-labelledby={randomId}\n      {...rest}\n    >\n      <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n        {title}\n      </Heading>\n      {children}\n    </DialogContent>\n  );\n};\n","import React from 'react';\nimport { CloseIcon } from '@entur/icons';\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent } from './ModalContent';\nimport { IconButton } from '@entur/button';\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  /** Tittelen som vises i modalen */\n  title: string;\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  closeOnClickOutside = true,\n  ...rest\n}) => {\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} {...rest}>\n        {showCloseButton && (\n          <IconButton\n            className=\"eds-modal__close\"\n            aria-label={closeLabel}\n            onClick={onDismiss}\n          >\n            <CloseIcon />\n          </IconButton>\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 { VisuallyHidden } from '@entur/a11y';\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            <div className=\"eds-drawer__content\">\n              <Heading3 as=\"h2\" id={titleId}>\n                {title}\n              </Heading3>\n              {children}\n            </div>\n            <IconButton\n              className=\"eds-drawer__close-button\"\n              onClick={onDismiss}\n              type=\"button\"\n            >\n              <CloseIcon aria-hidden />\n              <VisuallyHidden>{closeLabel}</VisuallyHidden>\n            </IconButton>\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","className","open","rest","React","DialogOverlay","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","Heading","randomId","useRandomId","DialogContent","margin","as","id","Modal","closeLabel","initialFocusRef","onDismiss","closeOnClickOutside","showCloseButton","includes","handleOnDismiss","IconButton","onClick","CloseIcon","Drawer","contrast","style","overlay","titleId","handleKeyDown","e","key","stopPropagation","Wrapper","Contrast","Fragment","ContentContainer","ConditionalWrapper","condition","wrapper","onKeyDown","MoveFocusInside","type","VisuallyHidden","warnAboutMissingStyles"],"mappings":"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"}
+{"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: string;\n  [key: string]: any;\n};\n\nconst 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  ...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        className,\n      )}\n      aria-labelledby={randomId}\n      {...rest}\n    >\n      <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n        {title}\n      </Heading>\n      {children}\n    </DialogContent>\n  );\n};\n","import React from 'react';\nimport { CloseIcon } from '@entur/icons';\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent } from './ModalContent';\nimport { IconButton } from '@entur/button';\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  /** Tittelen som vises i modalen */\n  title: string;\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  closeOnClickOutside = true,\n  ...rest\n}) => {\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} {...rest}>\n        {showCloseButton && (\n          <IconButton\n            className=\"eds-modal__close\"\n            aria-label={closeLabel}\n            onClick={onDismiss}\n          >\n            <CloseIcon />\n          </IconButton>\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 { VisuallyHidden } from '@entur/a11y';\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            <div className=\"eds-drawer__content\">\n              <Heading3 as=\"h2\" id={titleId}>\n                {title}\n              </Heading3>\n              {children}\n            </div>\n            <IconButton\n              className=\"eds-drawer__close-button\"\n              onClick={onDismiss}\n              type=\"button\"\n            >\n              <CloseIcon aria-hidden />\n              <VisuallyHidden>{closeLabel}</VisuallyHidden>\n            </IconButton>\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","className","open","rest","React","DialogOverlay","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","Heading","randomId","useRandomId","DialogContent","margin","as","id","Modal","closeLabel","initialFocusRef","onDismiss","closeOnClickOutside","showCloseButton","includes","handleOnDismiss","IconButton","onClick","CloseIcon","Drawer","contrast","style","overlay","titleId","handleKeyDown","e","key","stopPropagation","Wrapper","Contrast","Fragment","ContentContainer","ConditionalWrapper","condition","wrapper","onKeyDown","MoveFocusInside","type","VisuallyHidden","warnAboutMissingStyles"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"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: string;\n  [key: string]: any;\n};\n\nconst 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  ...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        className,\n      )}\n      aria-labelledby={randomId}\n      {...rest}\n    >\n      <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n        {title}\n      </Heading>\n      {children}\n    </DialogContent>\n  );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { MoveFocusInside } from 'react-focus-lock';\nimport { VisuallyHidden } from '@entur/a11y';\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            <div className=\"eds-drawer__content\">\n              <Heading3 as=\"h2\" id={titleId}>\n                {title}\n              </Heading3>\n              {children}\n            </div>\n            <IconButton\n              className=\"eds-drawer__close-button\"\n              onClick={onDismiss}\n              type=\"button\"\n            >\n              <CloseIcon aria-hidden />\n              <VisuallyHidden>{closeLabel}</VisuallyHidden>\n            </IconButton>\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';\nimport { CloseIcon } from '@entur/icons';\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent } from './ModalContent';\nimport { IconButton } from '@entur/button';\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  /** Tittelen som vises i modalen */\n  title: string;\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  closeOnClickOutside = true,\n  ...rest\n}) => {\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} {...rest}>\n        {showCloseButton && (\n          <IconButton\n            className=\"eds-modal__close\"\n            aria-label={closeLabel}\n            onClick={onDismiss}\n          >\n            <CloseIcon />\n          </IconButton>\n        )}\n        {children}\n      </ModalContent>\n    </ModalOverlay>\n  );\n};\n"],"names":["ModalOverlay","className","open","rest","React","DialogOverlay","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","Heading","randomId","useRandomId","DialogContent","margin","as","id","ConditionalWrapper","condition","wrapper","warnAboutMissingStyles","closeLabel","contrast","onDismiss","style","overlay","titleId","Contrast","Fragment","onKeyDown","e","key","stopPropagation","MoveFocusInside","IconButton","onClick","type","CloseIcon","VisuallyHidden","handleOnDismiss","initialFocusRef","closeOnClickOutside","showCloseButton","includes"],"mappings":"kiBAkBaA,EAA4C,gBACvDC,IAAAA,UACAC,IAAAA,KACGC,mCAEHC,gBAACC,+BACCJ,UAAWK,EAAW,qBAAsBL,GAC5CM,OAAQL,GACJC,KCRFK,EAAc,CAClBC,WAAYC,WACZC,MAAOC,WACPC,OAAQC,WACRC,MAAOD,WACPE,WAAYF,YAGDG,EAA4C,gBACvDC,IAAAA,SACAjB,IAAAA,UACAkB,IAAAA,KACAC,IAAAA,MACGjB,+CAEGkB,EAA6Bb,EAAYW,IAASL,WAClDQ,EAAWC,cAAY,oBAE3BnB,gBAACoB,+BACCvB,UAAWK,EACT,iDAC4Ba,EAC5BlB,qBAEeqB,GACbnB,GAEJC,gBAACiB,GAAQI,OAAO,SAASC,GAAG,KAAKC,GAAIL,GAClCF,GAEFF,ICyDDU,EAID,gBAAuBV,IAAAA,kBAApBW,WACMC,IADKA,SACGZ,GAAYA,GC3GlCa,yBAAuB,QAAS,QAAS,aAAc,OAAQ,yBDsClB,gBAC3Cb,IAAAA,SACAjB,IAAAA,cACA+B,WAAAA,aAAa,mBACbC,SAAAA,oBACA/B,KAAAA,gBACAgC,IAAAA,UACAd,IAAAA,MACAe,IAAAA,UACAC,QAAAA,gBAEMC,EAAUd,cAAY,qBAEvBrB,EAcHE,gBAACwB,GACCC,UAAWO,EACXN,QAAS,SAACZ,UACRd,gBAACJ,GAAaE,KAAMA,EAAMgC,UAAWA,GAClChB,KAILd,gBAXY6B,EAAWK,WAAWlC,EAAMmC,cAYtCnC,gBAXmBgC,EAAUZ,gBAAgB,yBAY1Ba,EACjBpC,UAAWK,EAAW,aAAcL,GACpCuC,UAtBc,SAACC,GACP,WAAVA,EAAEC,MACJD,EAAEE,kBACFT,MAoBIC,MAAOA,GAEP/B,gBAACwC,uBACCxC,uBAAKH,UAAU,uBACbG,gBAACQ,YAASc,GAAG,KAAKC,GAAIU,GACnBjB,GAEFF,GAEHd,gBAACyC,cACC5C,UAAU,2BACV6C,QAASZ,EACTa,KAAK,UAEL3C,gBAAC4C,gCACD5C,gBAAC6C,sBAAgBjB,QAzCpB,oBE1BgC,gBAYrCkB,EAXJhC,IAAAA,aACAc,WAAAA,aAAa,SACbmB,IAAAA,gBACAjD,IAAAA,KACAgC,IAAAA,UACAf,IAAAA,SACAiC,oBAAAA,gBACGjD,mGAEGkD,EAAkB,CAAC,SAAU,QAAS,cAAcC,SAASnC,UAG/De,GAAakB,IACfF,EAAkBhB,GAGlB9B,gBAACJ,GACCE,KAAMA,EACNgC,UAAWgB,EACXC,gBAAiBA,GAEjB/C,gBAACa,iBAAaE,KAAMA,GAAUhB,GAC3BkD,GACCjD,gBAACyC,cACC5C,UAAU,gCACE+B,EACZc,QAASZ,GAET9B,gBAAC4C,mBAGJ9B"}
+{"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: string;\n  [key: string]: any;\n};\n\nconst 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  ...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        className,\n      )}\n      aria-labelledby={randomId}\n      {...rest}\n    >\n      <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n        {title}\n      </Heading>\n      {children}\n    </DialogContent>\n  );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { MoveFocusInside } from 'react-focus-lock';\nimport { VisuallyHidden } from '@entur/a11y';\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            <div className=\"eds-drawer__content\">\n              <Heading3 as=\"h2\" id={titleId}>\n                {title}\n              </Heading3>\n              {children}\n            </div>\n            <IconButton\n              className=\"eds-drawer__close-button\"\n              onClick={onDismiss}\n              type=\"button\"\n            >\n              <CloseIcon aria-hidden />\n              <VisuallyHidden>{closeLabel}</VisuallyHidden>\n            </IconButton>\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';\nimport { CloseIcon } from '@entur/icons';\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent } from './ModalContent';\nimport { IconButton } from '@entur/button';\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  /** Tittelen som vises i modalen */\n  title: string;\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  closeOnClickOutside = true,\n  ...rest\n}) => {\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} {...rest}>\n        {showCloseButton && (\n          <IconButton\n            className=\"eds-modal__close\"\n            aria-label={closeLabel}\n            onClick={onDismiss}\n          >\n            <CloseIcon />\n          </IconButton>\n        )}\n        {children}\n      </ModalContent>\n    </ModalOverlay>\n  );\n};\n"],"names":["ModalOverlay","className","open","rest","React","DialogOverlay","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","Heading","randomId","useRandomId","DialogContent","margin","as","id","ConditionalWrapper","condition","wrapper","warnAboutMissingStyles","closeLabel","contrast","onDismiss","style","overlay","titleId","Contrast","Fragment","onKeyDown","e","key","stopPropagation","MoveFocusInside","IconButton","onClick","type","CloseIcon","VisuallyHidden","handleOnDismiss","initialFocusRef","closeOnClickOutside","showCloseButton","includes"],"mappings":"uxBAkBaA,EAA4C,gBACvDC,IAAAA,UACAC,IAAAA,KACGC,gBAEHC,wBAACC,mBACCJ,UAAWK,UAAW,qBAAsBL,GAC5CM,OAAQL,GACJC,+CCRFK,EAAc,CAClBC,WAAYC,WACZC,MAAOC,WACPC,OAAQC,WACRC,MAAOD,WACPE,WAAYF,YAGDG,EAA4C,gBACvDC,IAAAA,SACAjB,IAAAA,UACAkB,IAAAA,KACAC,IAAAA,MACGjB,SAEGkB,EAA6Bb,EAAYW,IAASL,WAClDQ,EAAWC,cAAY,oBAE3BnB,wBAACoB,mBACCvB,UAAWK,UACT,iDAC4Ba,EAC5BlB,qBAEeqB,GACbnB,GAEJC,wBAACiB,GAAQI,OAAO,SAASC,GAAG,KAAKC,GAAIL,GAClCF,GAEFF,kGCyDDU,EAID,gBAAuBV,IAAAA,kBAApBW,WACMC,IADKA,SACGZ,GAAYA,GC3GlCa,yBAAuB,QAAS,QAAS,aAAc,OAAQ,yBDsClB,gBAC3Cb,IAAAA,SACAjB,IAAAA,cACA+B,WAAAA,aAAa,mBACbC,SAAAA,oBACA/B,KAAAA,gBACAgC,IAAAA,UACAd,IAAAA,MACAe,IAAAA,UACAC,QAAAA,gBAEMC,EAAUd,cAAY,qBAEvBrB,EAcHE,wBAACwB,GACCC,UAAWO,EACXN,QAAS,SAACZ,UACRd,wBAACJ,GAAaE,KAAMA,EAAMgC,UAAWA,GAClChB,KAILd,wBAXY6B,EAAWK,WAAWlC,UAAMmC,cAYtCnC,wBAXmBgC,EAAUZ,gBAAgB,yBAY1Ba,EACjBpC,UAAWK,UAAW,aAAcL,GACpCuC,UAtBc,SAACC,GACP,WAAVA,EAAEC,MACJD,EAAEE,kBACFT,MAoBIC,MAAOA,GAEP/B,wBAACwC,uBACCxC,+BAAKH,UAAU,uBACbG,wBAACQ,YAASc,GAAG,KAAKC,GAAIU,GACnBjB,GAEFF,GAEHd,wBAACyC,cACC5C,UAAU,2BACV6C,QAASZ,EACTa,KAAK,UAEL3C,wBAAC4C,gCACD5C,wBAAC6C,sBAAgBjB,QAzCpB,oBE1BgC,gBAYrCkB,EAXJhC,IAAAA,aACAc,WAAAA,aAAa,SACbmB,IAAAA,gBACAjD,IAAAA,KACAgC,IAAAA,UACAf,IAAAA,SACAiC,oBAAAA,gBACGjD,SAEGkD,EAAkB,CAAC,SAAU,QAAS,cAAcC,SAASnC,UAG/De,GAAakB,IACfF,EAAkBhB,GAGlB9B,wBAACJ,GACCE,KAAMA,EACNgC,UAAWgB,EACXC,gBAAiBA,GAEjB/C,wBAACa,KAAaE,KAAMA,GAAUhB,GAC3BkD,GACCjD,wBAACyC,cACC5C,UAAU,gCACE+B,EACZc,QAASZ,GAET9B,wBAAC4C,mBAGJ9B"}

package/dist/modal.esm.js

@@ -9,6 +9,24 @@ import { MoveFocusInside } from 'react-focus-lock';
 import { VisuallyHidden } from '@entur/a11y';
 import { Contrast } from '@entur/layout';
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -24,17 +42,19 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var _excluded$2 = ["className", "open"];
 var ModalOverlay = function ModalOverlay(_ref) {
   var className = _ref.className,
       open = _ref.open,
-      rest = _objectWithoutPropertiesLoose(_ref, ["className", "open"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
-  return React.createElement(DialogOverlay, Object.assign({
+  return React.createElement(DialogOverlay, _extends({
     className: classNames('eds-modal__overlay', className),
     isOpen: open
   }, rest));
 };
 
+var _excluded$1 = ["children", "className", "size", "title"];
 var headingsMap = {
   extraSmall: Heading4,
   small: Heading3,
@@ -47,11 +67,11 @@ var ModalContent = function ModalContent(_ref) {
       className = _ref.className,
       size = _ref.size,
       title = _ref.title,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "size", "title"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
   var Heading = headingsMap[size] || Heading2;
   var randomId = useRandomId('eds-modal');
-  return React.createElement(DialogContent, Object.assign({
+  return React.createElement(DialogContent, _extends({
     className: classNames('eds-modal__content', "eds-modal__content--size-" + size, className),
     "aria-labelledby": randomId
   }, rest), React.createElement(Heading, {
@@ -61,6 +81,7 @@ var ModalContent = function ModalContent(_ref) {
   }, title), children);
 };
 
+var _excluded = ["children", "closeLabel", "initialFocusRef", "open", "onDismiss", "size", "closeOnClickOutside"];
 var Modal = function Modal(_ref) {
   var children = _ref.children,
       _ref$closeLabel = _ref.closeLabel,
@@ -71,7 +92,7 @@ var Modal = function Modal(_ref) {
       size = _ref.size,
       _ref$closeOnClickOuts = _ref.closeOnClickOutside,
       closeOnClickOutside = _ref$closeOnClickOuts === void 0 ? true : _ref$closeOnClickOuts,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "closeLabel", "initialFocusRef", "open", "onDismiss", "size", "closeOnClickOutside"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);
   var handleOnDismiss;
@@ -84,7 +105,7 @@ var Modal = function Modal(_ref) {
     open: open,
     onDismiss: handleOnDismiss,
     initialFocusRef: initialFocusRef
-  }, React.createElement(ModalContent, Object.assign({
+  }, React.createElement(ModalContent, _extends({
     size: size
   }, rest), showCloseButton && React.createElement(IconButton, {
     className: "eds-modal__close",

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: string;\n  [key: string]: any;\n};\n\nconst 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  ...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        className,\n      )}\n      aria-labelledby={randomId}\n      {...rest}\n    >\n      <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n        {title}\n      </Heading>\n      {children}\n    </DialogContent>\n  );\n};\n","import React from 'react';\nimport { CloseIcon } from '@entur/icons';\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent } from './ModalContent';\nimport { IconButton } from '@entur/button';\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  /** Tittelen som vises i modalen */\n  title: string;\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  closeOnClickOutside = true,\n  ...rest\n}) => {\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} {...rest}>\n        {showCloseButton && (\n          <IconButton\n            className=\"eds-modal__close\"\n            aria-label={closeLabel}\n            onClick={onDismiss}\n          >\n            <CloseIcon />\n          </IconButton>\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 { VisuallyHidden } from '@entur/a11y';\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            <div className=\"eds-drawer__content\">\n              <Heading3 as=\"h2\" id={titleId}>\n                {title}\n              </Heading3>\n              {children}\n            </div>\n            <IconButton\n              className=\"eds-drawer__close-button\"\n              onClick={onDismiss}\n              type=\"button\"\n            >\n              <CloseIcon aria-hidden />\n              <VisuallyHidden>{closeLabel}</VisuallyHidden>\n            </IconButton>\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","className","open","rest","React","DialogOverlay","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","Heading","randomId","useRandomId","DialogContent","margin","as","id","Modal","closeLabel","initialFocusRef","onDismiss","closeOnClickOutside","showCloseButton","includes","handleOnDismiss","IconButton","onClick","CloseIcon","Drawer","contrast","style","overlay","titleId","handleKeyDown","e","key","stopPropagation","Wrapper","Contrast","Fragment","ContentContainer","ConditionalWrapper","condition","wrapper","onKeyDown","MoveFocusInside","type","VisuallyHidden","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: string;\n  [key: string]: any;\n};\n\nconst 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  ...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        className,\n      )}\n      aria-labelledby={randomId}\n      {...rest}\n    >\n      <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n        {title}\n      </Heading>\n      {children}\n    </DialogContent>\n  );\n};\n","import React from 'react';\nimport { CloseIcon } from '@entur/icons';\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent } from './ModalContent';\nimport { IconButton } from '@entur/button';\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  /** Tittelen som vises i modalen */\n  title: string;\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  closeOnClickOutside = true,\n  ...rest\n}) => {\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} {...rest}>\n        {showCloseButton && (\n          <IconButton\n            className=\"eds-modal__close\"\n            aria-label={closeLabel}\n            onClick={onDismiss}\n          >\n            <CloseIcon />\n          </IconButton>\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 { VisuallyHidden } from '@entur/a11y';\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            <div className=\"eds-drawer__content\">\n              <Heading3 as=\"h2\" id={titleId}>\n                {title}\n              </Heading3>\n              {children}\n            </div>\n            <IconButton\n              className=\"eds-drawer__close-button\"\n              onClick={onDismiss}\n              type=\"button\"\n            >\n              <CloseIcon aria-hidden />\n              <VisuallyHidden>{closeLabel}</VisuallyHidden>\n            </IconButton>\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","className","open","rest","React","DialogOverlay","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","Heading","randomId","useRandomId","DialogContent","margin","as","id","Modal","closeLabel","initialFocusRef","onDismiss","closeOnClickOutside","showCloseButton","includes","handleOnDismiss","IconButton","onClick","CloseIcon","Drawer","contrast","style","overlay","titleId","handleKeyDown","e","key","stopPropagation","Wrapper","Contrast","Fragment","ContentContainer","ConditionalWrapper","condition","wrapper","onKeyDown","MoveFocusInside","type","VisuallyHidden","warnAboutMissingStyles"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/modal",
-  "version": "1.5.7",
+  "version": "1.5.10",
   "license": "EUPL-1.2",
   "main": "dist/index.js",
   "module": "dist/modal.esm.js",
@@ -17,27 +17,27 @@
     "access": "public"
   },
   "scripts": {
-    "start": "tsdx watch --noClean",
-    "build": "tsdx build",
-    "test": "tsdx test --env=jsdom",
-    "lint": "tsdx lint"
+    "start": "dts watch --noClean",
+    "build": "dts build",
+    "test": "dts test --env=jsdom",
+    "lint": "dts lint"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@entur/a11y": "^0.2.40",
-    "@entur/button": "^2.7.3",
-    "@entur/icons": "^3.3.0",
-    "@entur/layout": "^2.1.2",
-    "@entur/tokens": "^3.2.1",
-    "@entur/typography": "^1.6.9",
-    "@entur/utils": "^0.4.2",
+    "@entur/a11y": "^0.2.42",
+    "@entur/button": "^2.8.0",
+    "@entur/icons": "^3.5.0",
+    "@entur/layout": "^2.1.4",
+    "@entur/tokens": "^3.3.1",
+    "@entur/typography": "^1.6.11",
+    "@entur/utils": "^0.4.3",
     "@reach/dialog": "^0.16.0",
     "@types/reach__dialog": "^0.4.0",
     "classnames": "^2.3.1",
     "react-focus-lock": "^2.5.2"
   },
-  "gitHead": "d3611d9b3374c6aafc0b95b9ebac011f7b1a7785"
+  "gitHead": "bf06a9d451cb7f978946c05ce04bb4e6f63379af"
 }