@skatteetaten/ds-overlays 1.1.1 → 1.3.0

package/Modal/index.esm.js

@@ -1,4 +1,3 @@
-import '../es.string.trim-9652bb40.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useId, useRef, useImperativeHandle } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -9,125 +8,126 @@ import { Heading } from '@skatteetaten/ds-typography';
 import './styles.css';
 
 
-const getModalPaddingDefault = () => 'l';
-const getModalVariantDefault = () => 'outline';
-const getModalDismissOnOutsideClickDefault = () => true;
-const getModalDismissOnEscDefault = () => true;
+const getModalPaddingDefault = ()=>'l';
+const getModalVariantDefault = ()=>'outline';
+const getModalDismissOnOutsideClickDefault = ()=>true;
+const getModalDismissOnEscDefault = ()=>true;
 
-var styles = {"modal":"Modal-module_modal__Kyr-Y","modalContainer":"Modal-module_modalContainer__muf75","modalLogo":"Modal-module_modalLogo__Vaf6E","modalHeading":"Modal-module_modalHeading__uwT1R","modalHeadingNoPadding":"Modal-module_modalHeadingNoPadding__t2hkH","modalIllustration":"Modal-module_modalIllustration__jbA32","modalNoBorder":"Modal-module_modalNoBorder__ReNVP","modalPaddingNONE":"Modal-module_modalPaddingNONE__02HaX","modalPaddingS":"Modal-module_modalPaddingS__O93ax","modalPaddingM":"Modal-module_modalPaddingM__c5Wi2","modalPaddingL":"Modal-module_modalPaddingL__IbVyg","modalPaddingMEGA":"Modal-module_modalPaddingMEGA__wWHwS","modalNoPaddingTop":"Modal-module_modalNoPaddingTop__REBWr","closeButton":"Modal-module_closeButton__jgbDq","srOnly":"Modal-module_srOnly__W8dQv"};
+var styles = {
+    "modal": "Modal-module_modal__Kyr-Y",
+    "modalContainer": "Modal-module_modalContainer__muf75",
+    "modalLogo": "Modal-module_modalLogo__Vaf6E",
+    "modalHeading": "Modal-module_modalHeading__uwT1R",
+    "modalHeadingNoPadding": "Modal-module_modalHeadingNoPadding__t2hkH",
+    "modalIllustration": "Modal-module_modalIllustration__jbA32",
+    "modalNoBorder": "Modal-module_modalNoBorder__ReNVP",
+    "modalPaddingNONE": "Modal-module_modalPaddingNONE__02HaX",
+    "modalPaddingS": "Modal-module_modalPaddingS__O93ax",
+    "modalPaddingM": "Modal-module_modalPaddingM__c5Wi2",
+    "modalPaddingL": "Modal-module_modalPaddingL__IbVyg",
+    "modalPaddingMEGA": "Modal-module_modalPaddingMEGA__wWHwS",
+    "modalNoPaddingTop": "Modal-module_modalNoPaddingTop__REBWr",
+    "closeButton": "Modal-module_closeButton__jgbDq",
+    "srOnly": "Modal-module_srOnly__W8dQv"
+};
 
-const Modal = /*#__PURE__*/forwardRef(({
-  id,
-  className: _className = getCommonClassNameDefault(),
-  classNames,
-  lang,
-  'data-testid': dataTestId,
-  dismissOnEsc: _dismissOnEsc = getModalDismissOnEscDefault(),
-  dismissOnOutsideClick: _dismissOnOutsideClick = getModalDismissOnOutsideClickDefault(),
-  hideCloseButton,
-  hideTitle,
-  imageSource,
-  imageSourceAltText,
-  padding: _padding = getModalPaddingDefault(),
-  title,
-  variant: _variant = getModalVariantDefault(),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  shadowRootNode,
-  onClose,
-  children
-}, ref) => {
-  var _classNames$container, _classNames$image;
-  const headingId = `modalHeadingId-${useId()}`;
-  const {
-    t
-  } = useTranslation('ds_overlays', {
-    i18n: dsI18n
-  });
-  const statusFlagRef = useRef({
-    mouseDownCaptured: false
-  });
-  const modalRef = useRef(null);
-  useImperativeHandle(ref, () => modalRef == null ? void 0 : modalRef.current);
-  const isClickOutside = event => {
-    if (!(event.target instanceof HTMLElement)) {
-      return true;
-    }
-    const rect = event.target.getBoundingClientRect();
-    return rect.left > event.clientX || rect.right < event.clientX || rect.top > event.clientY || rect.bottom < event.clientY;
-  };
-  const handleMouseEvent = event => {
-    if (!_dismissOnOutsideClick || !(event.target instanceof HTMLElement)) {
-      return;
-    }
-    if (event.type === 'mousedown') {
-      statusFlagRef.current.mouseDownCaptured = false;
-    }
-    if (isClickOutside(event)) {
-      if (event.type === 'mouseup' && statusFlagRef.current.mouseDownCaptured) {
-        var _modalRef$current;
-        onClose == null || onClose();
-        (_modalRef$current = modalRef.current) == null || _modalRef$current.close();
-      } else {
-        statusFlagRef.current.mouseDownCaptured = true;
-      }
-    }
-  };
-  const hideTitleClassName = hideTitle ? styles.srOnly : '';
-  const hideOutlineClassName = _variant === 'plain' || _variant === 'important' ? styles.modalNoBorder : '';
-  const paddingClassName = styles[`modalPadding${_padding.toUpperCase()}`];
-  const noPaddingTop = imageSource ? styles.modalNoPaddingTop : '';
-  const headingNoPaddingClassName = _padding === 'mega' ? styles.modalHeadingNoPadding : '';
-  return jsx("dialog", {
-    ref: modalRef,
-    id: id,
-    className: `${styles.modal} ${hideOutlineClassName} ${_className} ${(_classNames$container = classNames == null ? void 0 : classNames.container) != null ? _classNames$container : ''}`.trim(),
-    lang: lang,
-    "data-testid": dataTestId,
-    "aria-labelledby": headingId,
-    autoFocus: true,
-    /* Merk at onCancel kan ikke brukes til å hindre lukking fordi to trykk på esc lukker allikevel i chrome  */
-    onKeyDown: e => {
-      if (e.key === 'Escape') {
-        if (_dismissOnEsc) {
-          onClose == null || onClose();
-        } else {
-          e.preventDefault();
+const Modal = /*#__PURE__*/ forwardRef(({ id, className = getCommonClassNameDefault(), classNames, lang, 'data-testid': dataTestId, dismissOnEsc = getModalDismissOnEscDefault(), dismissOnOutsideClick = getModalDismissOnOutsideClickDefault(), hideCloseButton, hideTitle, imageSource, imageSourceAltText, padding = getModalPaddingDefault(), title, variant = getModalVariantDefault(), // eslint-disable-next-line @typescript-eslint/no-unused-vars
+shadowRootNode, onClose, children }, ref)=>{
+    const headingId = `modalHeadingId-${useId()}`;
+    const { t } = useTranslation('ds_overlays', {
+        i18n: dsI18n
+    });
+    const statusFlagRef = useRef({
+        mouseDownCaptured: false
+    });
+    const modalRef = useRef(null);
+    useImperativeHandle(ref, ()=>modalRef?.current);
+    const isClickOutside = (event)=>{
+        if (!(event.target instanceof HTMLElement)) {
+            return true;
         }
-      }
-    },
-    onMouseUp: handleMouseEvent,
-    onMouseDown: handleMouseEvent,
-    children: jsxs("div", {
-      tabIndex: -1,
-      className: styles.modalContainer,
-      children: [!hideCloseButton && jsx(IconButton, {
-        className: styles.closeButton,
-        svgPath: CancelSVGpath,
-        title: t('modal.CloseModal'),
-        onClick: () => {
-          var _modalRef$current2;
-          onClose == null || onClose();
-          (_modalRef$current2 = modalRef.current) == null || _modalRef$current2.close();
+        const rect = event.target.getBoundingClientRect();
+        return rect.left > event.clientX || rect.right < event.clientX || rect.top > event.clientY || rect.bottom < event.clientY;
+    };
+    const handleMouseEvent = (event)=>{
+        if (!dismissOnOutsideClick || !(event.target instanceof HTMLElement)) {
+            return;
         }
-      }), imageSource && jsx("img", {
-        src: imageSource,
-        alt: imageSourceAltText != null ? imageSourceAltText : '',
-        className: `${styles.modalIllustration} ${(_classNames$image = classNames == null ? void 0 : classNames.image) != null ? _classNames$image : ''}`.trim()
-      }), jsxs("div", {
-        className: `${paddingClassName} ${noPaddingTop}`.trim(),
-        children: [_variant === 'important' && jsx(SkatteetatenLogo, {
-          className: styles.modalLogo
-        }), jsx(Heading, {
-          className: `${styles.modalHeading} ${headingNoPaddingClassName} ${hideTitleClassName}`.trim(),
-          id: headingId,
-          as: 'h1',
-          level: 3,
-          hasSpacing: true,
-          children: title
-        }), children]
-      }), _variant === 'important' && jsx(Separator, {})]
-    })
-  });
+        if (event.type === 'mousedown') {
+            statusFlagRef.current.mouseDownCaptured = false;
+        }
+        if (isClickOutside(event)) {
+            if (event.type === 'mouseup' && statusFlagRef.current.mouseDownCaptured) {
+                onClose?.();
+                modalRef.current?.close();
+            } else {
+                statusFlagRef.current.mouseDownCaptured = true;
+            }
+        }
+    };
+    const hideTitleClassName = hideTitle ? styles.srOnly : '';
+    const hideOutlineClassName = variant === 'plain' || variant === 'important' ? styles.modalNoBorder : '';
+    const paddingClassName = styles[`modalPadding${padding.toUpperCase()}`];
+    const noPaddingTop = imageSource ? styles.modalNoPaddingTop : '';
+    const headingNoPaddingClassName = padding === 'mega' ? styles.modalHeadingNoPadding : '';
+    return /*#__PURE__*/ jsx("dialog", {
+        ref: modalRef,
+        id: id,
+        className: `${styles.modal} ${hideOutlineClassName} ${className} ${classNames?.container ?? ''}`.trim(),
+        lang: lang,
+        "data-testid": dataTestId,
+        "aria-labelledby": headingId,
+        autoFocus: true,
+        /* Merk at onCancel kan ikke brukes til å hindre lukking fordi to trykk på esc lukker allikevel i chrome  */ onKeyDown: (e)=>{
+            if (e.key === 'Escape') {
+                if (dismissOnEsc) {
+                    onClose?.();
+                } else {
+                    e.preventDefault();
+                }
+            }
+        },
+        onMouseUp: handleMouseEvent,
+        onMouseDown: handleMouseEvent,
+        children: /*#__PURE__*/ jsxs("div", {
+            tabIndex: -1,
+            className: styles.modalContainer,
+            children: [
+                !hideCloseButton && /*#__PURE__*/ jsx(IconButton, {
+                    className: styles.closeButton,
+                    svgPath: CancelSVGpath,
+                    title: t('modal.CloseModal'),
+                    onClick: ()=>{
+                        onClose?.();
+                        modalRef.current?.close();
+                    }
+                }),
+                imageSource && /*#__PURE__*/ jsx("img", {
+                    src: imageSource,
+                    alt: imageSourceAltText ?? '',
+                    className: `${styles.modalIllustration} ${classNames?.image ?? ''}`.trim()
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: `${paddingClassName} ${noPaddingTop}`.trim(),
+                    children: [
+                        variant === 'important' && /*#__PURE__*/ jsx(SkatteetatenLogo, {
+                            className: styles.modalLogo
+                        }),
+                        /*#__PURE__*/ jsx(Heading, {
+                            className: `${styles.modalHeading} ${headingNoPaddingClassName} ${hideTitleClassName}`.trim(),
+                            id: headingId,
+                            as: 'h1',
+                            level: 3,
+                            hasSpacing: true,
+                            children: title
+                        }),
+                        children
+                    ]
+                }),
+                variant === 'important' && /*#__PURE__*/ jsx(Separator, {})
+            ]
+        })
+    });
 });
 Modal.displayName = 'Modal';