@dnb/eufemia 9.25.0 → 9.27.0

package/es/components/modal/ModalContent.js

@@ -30,6 +30,10 @@ export default class ModalContent extends React.PureComponent {
 
     _defineProperty(this, "_contentRef", void 0);
 
+    _defineProperty(this, "_scrollRef", void 0);
+
+    _defineProperty(this, "_overlayClickRef", void 0);
+
     _defineProperty(this, "_id", void 0);
 
     _defineProperty(this, "_lockTimeout", void 0);
@@ -47,9 +51,11 @@ export default class ModalContent extends React.PureComponent {
       const firstLevel = modalRoots[0];
 
       if (firstLevel === this) {
+        var _this$props;
+
         this._ii = new InteractionInvalidation();
 
-        this._ii.setBypassSelector(['.dnb-modal__content *', `#dnb-modal-${this.props.root_id || 'root'}`, `#dnb-modal-${this.props.root_id || 'root'} *`].filter(Boolean));
+        this._ii.setBypassSelector(['.dnb-modal__content *', `#dnb-modal-${this.props.root_id || 'root'}`, `#dnb-modal-${this.props.root_id || 'root'} *`, ...(((_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.bypass_invalidation_selectors) || [])].filter(Boolean));
 
         this._ii.activate();
       } else {
@@ -96,7 +102,16 @@ export default class ModalContent extends React.PureComponent {
       });
     });
 
+    _defineProperty(this, "onContentMouseDownHandler", event => {
+      this._overlayClickRef.current = event.target === event.currentTarget ? event.target : null;
+    });
+
     _defineProperty(this, "onContentClickHandler", event => {
+      if (this._overlayClickRef.current !== event.target) {
+        return;
+      }
+
+      this._overlayClickRef.current = null;
       const {
         prevent_overlay_close
       } = this.props;
@@ -134,7 +149,9 @@ export default class ModalContent extends React.PureComponent {
       });
     });
 
-    this._contentRef = React.createRef();
+    this._contentRef = this.props.content_ref || React.createRef();
+    this._scrollRef = this.props.scroll_ref || React.createRef();
+    this._overlayClickRef = React.createRef();
     this._id = props.id;
   }
 
@@ -251,13 +268,13 @@ export default class ModalContent extends React.PureComponent {
   }
 
   removeScrollPossibility() {
-    if (this._contentRef.current) {
-      disableBodyScroll(this._contentRef.current);
+    if (this._scrollRef.current) {
+      disableBodyScroll(this._scrollRef.current);
     }
   }
 
   revertScrollPossibility() {
-    enableBodyScroll(this._contentRef.current);
+    enableBodyScroll(this._scrollRef.current);
     clearAllBodyScrollLocks();
   }
 
@@ -281,7 +298,7 @@ export default class ModalContent extends React.PureComponent {
   }
 
   render() {
-    const _this$props = this.props,
+    const _this$props2 = this.props,
           {
       mode = 'modal',
       hide,
@@ -312,8 +329,8 @@ export default class ModalContent extends React.PureComponent {
       prevent_core_style,
       class: _className,
       dialog_role = null
-    } = _this$props,
-          rest = _objectWithoutProperties(_this$props, _excluded2);
+    } = _this$props2,
+          rest = _objectWithoutProperties(_this$props2, _excluded2);
 
     const {
       color
@@ -333,6 +350,7 @@ export default class ModalContent extends React.PureComponent {
       'aria-describedby': combineDescribedBy(this.props, contentId + '-content'),
       'aria-label': !title && !labelled_by ? dialog_title : undefined,
       className: classnames('dnb-modal__content', isTrue(fullscreen) ? 'dnb-modal__content--fullscreen' : fullscreen === 'auto' && 'dnb-modal__content--auto-fullscreen', (container_placement || mode === 'drawer') && `dnb-modal__content--${container_placement || 'right'}`, content_class, mode && `dnb-modal__content--${mode}`),
+      onMouseDown: this.onContentMouseDownHandler,
       onClick: this.onContentClickHandler
     };
 
@@ -367,6 +385,7 @@ export default class ModalContent extends React.PureComponent {
         preventClick: this.preventClick,
         onKeyDownHandler: this.onKeyDownHandler,
         contentRef: this._contentRef,
+        scrollRef: this._scrollRef,
         contentId,
         close
       }

package/es/components/modal/ModalContext.d.ts

@@ -15,6 +15,7 @@ declare const ModalContext: React.Context<{
     setBackgroundColor: any;
     onCloseClickHandler: any;
     contentRef: any;
+    scrollRef: any;
     hide: any;
     contentId: any;
     close: any;

package/es/components/modal/ModalContext.js

@@ -11,6 +11,7 @@ const ModalContext = React.createContext({
   setBackgroundColor: null,
   onCloseClickHandler: null,
   contentRef: null,
+  scrollRef: null,
   hide: null,
   contentId: null,
   close: null

package/es/components/modal/parts/CloseButton.d.ts

@@ -4,35 +4,14 @@
  */
 import React from 'react';
 import { ButtonProps } from '../../button';
-export interface CloseButtonProps extends ButtonProps {
+export declare type CloseButtonProps = {
     /**
      * The title of the close button. Defaults to <em>Close</em> or <em>Lukk</em>.
      */
     close_title?: string;
-}
+} & Partial<ButtonProps>;
 export default class CloseButton extends React.PureComponent<CloseButtonProps> {
-    static contextType: React.Context<{
-        translation: any;
-        updateTranslation: (locale: any, translation: any) => void;
-        getTranslation: (props: any) => any;
-        locale: any;
-        locales: any;
-        skeleton: any;
-        Button: {};
-        Avatar: {};
-        AvatarGroup: {};
-        Breadcrumb: {};
-        BreadcrumbItem: {};
-        InfoCard: {};
-        Tag: {};
-        TagGroup: {};
-        Timeline: {};
-        TimelineItem: {};
-        VisuallyHidden: {};
-        Drawer: {};
-        Dialog: {};
-        NumberFormat: {};
-    }>;
+    static contextType: React.Context<import("../../../shared/Context").ContextProps>;
     static defaultProps: {
         close_title: any;
         size: string;

package/es/components/modal/parts/ModalHeader.d.ts

@@ -40,6 +40,7 @@ export default class ModalHeader extends React.PureComponent<ModalHeaderProps> {
         setBackgroundColor: any;
         onCloseClickHandler: any;
         contentRef: any;
+        scrollRef: any;
         hide: any;
         contentId: any;
         close: any;

package/es/components/modal/parts/ModalHeaderBar.d.ts

@@ -31,10 +31,11 @@ export default class ModalHeaderBar extends React.PureComponent<ModalHeaderBarPr
         setBackgroundColor: any;
         onCloseClickHandler: any;
         contentRef: any;
-        hide: any;
-        contentId: any; /**
+        scrollRef: any;
+        hide: any; /**
          * The content which will appear when triggering the modal/drawer.
          */
+        contentId: any;
         close: any;
     }>;
     _ref: React.RefObject<any>;

package/es/components/modal/parts/ModalInner.d.ts

@@ -23,6 +23,7 @@ export default class ModalInner extends React.PureComponent<ModalInnerProps> {
         setBackgroundColor: any;
         onCloseClickHandler: any;
         contentRef: any;
+        scrollRef: any;
         hide: any;
         contentId: any;
         close: any;

package/es/components/modal/style/_modal-mixins.scss

@@ -7,6 +7,7 @@
   width: 100%;
   height: 100vh;
   max-width: 100%; // Edge/IE overflow fix
+  max-height: 100vh;
 
   // NB: Do not set "max-height" here – old Android 4.4 does have then troubles
   // max-height: none;
@@ -88,12 +89,12 @@
     opacity: 0;
   }
   to {
-    opacity: var(--modal-overlay-opacity);
+    opacity: 1;
   }
 }
 @keyframes hide-modal-overlay {
   from {
-    opacity: var(--modal-overlay-opacity);
+    opacity: 1;
   }
   to {
     opacity: 0;

package/es/components/modal/style/_modal.scss

@@ -8,8 +8,7 @@
 :root {
   --modal-z-index: 3000;
   --modal-animation-duration: 300ms;
-  --modal-overlay-bg: black;
-  --modal-overlay-opacity: 0.32;
+  --modal-overlay-bg: rgba(0, 0, 0, 0.32);
 }
 
 html[data-dnb-modal-active] {
@@ -84,17 +83,17 @@ html[data-dnb-modal-active] {
   }
 
   &-root__inner &__overlay {
-    animation: hide-modal-overlay var(--modal-animation-duration)
-      ease-in-out forwards;
+    animation: hide-modal-overlay var(--modal-animation-duration) ease-out
+      forwards;
   }
 
   &-root__inner:last-of-type &__overlay {
     animation: show-modal-overlay var(--modal-animation-duration) ease-out
-      forwards 0ms;
+      forwards;
 
     &--hide {
       animation: hide-modal-overlay var(--modal-animation-duration)
-        ease-in-out forwards;
+        ease-out forwards;
     }
   }
 

package/es/components/modal/style/dnb-modal.css

@@ -1066,27 +1066,23 @@ button.dnb-button::-moz-focus-inner {
   from {
     opacity: 0; }
   to {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); } }
+    opacity: 1; } }
 
 @keyframes show-modal-overlay {
   from {
     opacity: 0; }
   to {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); } }
+    opacity: 1; } }
 
 @-webkit-keyframes hide-modal-overlay {
   from {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); }
+    opacity: 1; }
   to {
     opacity: 0; } }
 
 @keyframes hide-modal-overlay {
   from {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); }
+    opacity: 1; }
   to {
     opacity: 0; } }
 
@@ -1103,6 +1099,7 @@ button.dnb-button::-moz-focus-inner {
   width: 100%;
   height: 100vh;
   max-width: 100%;
+  max-height: 100vh;
   border-radius: 0;
   -webkit-box-shadow: none;
           box-shadow: none;
@@ -1132,6 +1129,7 @@ button.dnb-button::-moz-focus-inner {
       width: 100%;
       height: 100vh;
       max-width: 100%;
+      max-height: 100vh;
       border-radius: 0;
       -webkit-box-shadow: none;
               box-shadow: none; } }
@@ -1227,6 +1225,7 @@ button.dnb-button::-moz-focus-inner {
     width: 100%;
     height: 100vh;
     max-width: 100%;
+    max-height: 100vh;
     border-radius: 0;
     -webkit-box-shadow: none;
             box-shadow: none; }
@@ -1444,13 +1443,11 @@ button.dnb-button::-moz-focus-inner {
   from {
     opacity: 0; }
   to {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); } }
+    opacity: 1; } }
 
 @keyframes hide-modal-overlay {
   from {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); }
+    opacity: 1; }
   to {
     opacity: 0; } }
 
@@ -1464,7 +1461,6 @@ button.dnb-button::-moz-focus-inner {
 
 .dnb-dialog {
   position: relative;
-  max-height: 100vh;
   border-radius: 0.5rem;
   -webkit-box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
           box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
@@ -1475,7 +1471,22 @@ button.dnb-button::-moz-focus-inner {
        user-select: text;
   -webkit-user-select: text;
   border: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  max-height: 100vh;
+  overflow: hidden; }
+  .dnb-dialog .dnb-scroll-view {
+    max-height: 90vh; }
+  .dnb-dialog__inner {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    width: 100%;
+    height: 100%; }
   .dnb-dialog--information {
     min-width: 320px;
     min-width: var(--dialog-min-width);
@@ -1486,33 +1497,32 @@ button.dnb-button::-moz-focus-inner {
   .dnb-dialog--confirmation {
     max-width: 40rem;
     max-width: var(--dialog-confirm-max-width);
-    margin: 0 1rem; }
+    margin-left: 1rem;
+    margin-right: 1rem; }
   @media screen and (max-width: 40em) {
     .dnb-dialog--auto-fullscreen {
       width: 100%;
       height: 100vh;
       max-width: 100%;
+      max-height: 100vh;
       border-radius: 0;
       -webkit-box-shadow: none;
-              box-shadow: none; } }
+              box-shadow: none;
+      margin: auto 0; } }
   .dnb-dialog--fullscreen {
     width: 100%;
     height: 100vh;
     max-width: 100%;
+    max-height: 100vh;
     border-radius: 0;
     -webkit-box-shadow: none;
-            box-shadow: none; }
+            box-shadow: none;
+    margin: auto 0; }
   .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__content {
     padding-bottom: 4rem;
     padding-bottom: calc(2rem * 2);
     padding-bottom: calc(var(--dialog-spacing)*2);
     padding-bottom: calc(var(--dialog-spacing) * 2); }
-    @supports (-webkit-touch-callout: none) {
-      .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__content {
-        padding-bottom: 16rem;
-        padding-bottom: calc(2rem * 8);
-        padding-bottom: calc(var(--dialog-spacing)*8);
-        padding-bottom: calc(var(--dialog-spacing) * 8); } }
   .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner {
     padding-left: 3.5rem;
     padding-left: calc(2rem * 1.75);
@@ -1558,32 +1568,6 @@ button.dnb-button::-moz-focus-inner {
     padding: 2rem;
     padding: calc(2rem);
     padding: calc(var(--dialog-spacing)); }
-    @supports (-webkit-touch-callout: none) {
-      .dnb-dialog--spacing.dnb-dialog--confirmation .dnb-dialog__inner {
-        padding-bottom: 16rem;
-        padding-bottom: calc(2rem * 8);
-        padding-bottom: calc(var(--dialog-spacing)*8);
-        padding-bottom: calc(var(--dialog-spacing) * 8); } }
-  .dnb-dialog__inner {
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden; }
-    .dnb-dialog__inner::after {
-      content: '';
-      position: absolute;
-      z-index: -4;
-      left: 0;
-      top: 0;
-      width: 100vw;
-      height: 100%; }
   .dnb-dialog__align--centered .dnb-dialog__inner {
     -webkit-box-align: center;
         -ms-flex-align: center;
@@ -1716,9 +1700,9 @@ button.dnb-button::-moz-focus-inner {
   .dnb-dialog__icon ~ .dnb-dialog__header {
     margin-top: 1.5rem; }
   @supports (-webkit-touch-callout: none) {
-    @media (max-height: 40em) and (orientation: landscape) {
-      .dnb-dialog:not(.dnb-dialog--fullscreen) {
-        max-height: 80vh; } } }
+    @media (max-height: 40em) {
+      .dnb-dialog .dnb-scroll-view {
+        max-height: 82vh; } } }
 
 [data-visual-test].hide-page-content #___gatsby {
   opacity: 0; }
@@ -1801,21 +1785,18 @@ button.dnb-button::-moz-focus-inner {
   from {
     opacity: 0; }
   to {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); } }
+    opacity: 1; } }
 
 @keyframes hide-modal-overlay {
   from {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); }
+    opacity: 1; }
   to {
     opacity: 0; } }
 
 :root {
   --modal-z-index: 3000;
   --modal-animation-duration: 300ms;
-  --modal-overlay-bg: black;
-  --modal-overlay-opacity: 0.32; }
+  --modal-overlay-bg: rgba(0, 0, 0, 0.32); }
 
 html[data-dnb-modal-active] {
   -moz-user-select: none;
@@ -1894,23 +1875,23 @@ html[data-dnb-modal-active] {
     top: 0;
     width: 100%;
     height: 100%;
-    background-color: black;
+    background-color: rgba(0, 0, 0, 0.32);
     background-color: var(--modal-overlay-bg); }
   .dnb-modal-root__inner .dnb-modal__overlay {
-    -webkit-animation: hide-modal-overlay 300ms ease-in-out forwards;
-            animation: hide-modal-overlay 300ms ease-in-out forwards;
-    -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards;
-            animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+    -webkit-animation: hide-modal-overlay 300ms ease-out forwards;
+            animation: hide-modal-overlay 300ms ease-out forwards;
+    -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards;
+            animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; }
   .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
-    -webkit-animation: show-modal-overlay 300ms ease-out forwards 0ms;
-            animation: show-modal-overlay 300ms ease-out forwards 0ms;
-    -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms;
-            animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms; }
+    -webkit-animation: show-modal-overlay 300ms ease-out forwards;
+            animation: show-modal-overlay 300ms ease-out forwards;
+    -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards;
+            animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards; }
     .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide {
-      -webkit-animation: hide-modal-overlay 300ms ease-in-out forwards;
-              animation: hide-modal-overlay 300ms ease-in-out forwards;
-      -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards;
-              animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+      -webkit-animation: hide-modal-overlay 300ms ease-out forwards;
+              animation: hide-modal-overlay 300ms ease-out forwards;
+      -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards;
+              animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; }
   html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
     -webkit-animation-delay: 0ms !important;
             animation-delay: 0ms !important;