@dnb/eufemia 9.26.1 → 9.27.0

package/components/modal/ModalContent.js

@@ -5,6 +5,7 @@ import "core-js/modules/es.object.get-own-property-descriptor.js";
 import "core-js/modules/es.object.get-own-property-descriptors.js";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
@@ -21,6 +22,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import "core-js/modules/es.array.filter.js";
 import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.array.concat.js";
 import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.parse-float.js";
 
@@ -59,6 +61,10 @@ var ModalContent = function (_React$PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "_contentRef", void 0);
 
+    _defineProperty(_assertThisInitialized(_this), "_scrollRef", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_overlayClickRef", void 0);
+
     _defineProperty(_assertThisInitialized(_this), "_id", void 0);
 
     _defineProperty(_assertThisInitialized(_this), "_lockTimeout", void 0);
@@ -76,9 +82,11 @@ var ModalContent = function (_React$PureComponent) {
       var firstLevel = modalRoots[0];
 
       if (firstLevel === _assertThisInitialized(_this)) {
+        var _this$props;
+
         _this._ii = new InteractionInvalidation();
 
-        _this._ii.setBypassSelector(['.dnb-modal__content *', "#dnb-modal-".concat(_this.props.root_id || 'root'), "#dnb-modal-".concat(_this.props.root_id || 'root', " *")].filter(Boolean));
+        _this._ii.setBypassSelector(['.dnb-modal__content *', "#dnb-modal-".concat(_this.props.root_id || 'root'), "#dnb-modal-".concat(_this.props.root_id || 'root', " *")].concat(_toConsumableArray(((_this$props = _this.props) === null || _this$props === void 0 ? void 0 : _this$props.bypass_invalidation_selectors) || [])).filter(Boolean));
 
         _this._ii.activate();
       } else {
@@ -124,7 +132,16 @@ var ModalContent = function (_React$PureComponent) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onContentMouseDownHandler", function (event) {
+      _this._overlayClickRef.current = event.target === event.currentTarget ? event.target : null;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onContentClickHandler", function (event) {
+      if (_this._overlayClickRef.current !== event.target) {
+        return;
+      }
+
+      _this._overlayClickRef.current = null;
       var prevent_overlay_close = _this.props.prevent_overlay_close;
 
       if (!isTrue(prevent_overlay_close)) {
@@ -162,7 +179,9 @@ var ModalContent = function (_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;
     return _this;
   }
@@ -170,13 +189,13 @@ var ModalContent = function (_React$PureComponent) {
   _createClass(ModalContent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props = this.props,
-          _this$props$id = _this$props.id,
-          id = _this$props$id === void 0 ? null : _this$props$id,
-          _this$props$no_animat = _this$props.no_animation,
-          no_animation = _this$props$no_animat === void 0 ? false : _this$props$no_animat,
-          _this$props$animation2 = _this$props.animation_duration,
-          animation_duration = _this$props$animation2 === void 0 ? null : _this$props$animation2;
+      var _this$props2 = this.props,
+          _this$props2$id = _this$props2.id,
+          id = _this$props2$id === void 0 ? null : _this$props2$id,
+          _this$props2$no_anima = _this$props2.no_animation,
+          no_animation = _this$props2$no_anima === void 0 ? false : _this$props2$no_anima,
+          _this$props2$animatio = _this$props2.animation_duration,
+          animation_duration = _this$props2$animatio === void 0 ? null : _this$props2$animatio;
       var timeoutDuration = typeof animation_duration === 'string' ? parseFloat(animation_duration) : animation_duration;
       addToIndex(this);
       this.removeScrollPossibility();
@@ -256,13 +275,13 @@ var ModalContent = function (_React$PureComponent) {
   }, {
     key: "setFocus",
     value: function setFocus() {
-      var _this$props2 = this.props,
-          _this$props2$focus_se = _this$props2.focus_selector,
-          focus_selector = _this$props2$focus_se === void 0 ? null : _this$props2$focus_se,
-          _this$props2$no_anima = _this$props2.no_animation,
-          no_animation = _this$props2$no_anima === void 0 ? null : _this$props2$no_anima,
-          _this$props2$animatio = _this$props2.animation_duration,
-          animation_duration = _this$props2$animatio === void 0 ? null : _this$props2$animatio;
+      var _this$props3 = this.props,
+          _this$props3$focus_se = _this$props3.focus_selector,
+          focus_selector = _this$props3$focus_se === void 0 ? null : _this$props3$focus_se,
+          _this$props3$no_anima = _this$props3.no_animation,
+          no_animation = _this$props3$no_anima === void 0 ? null : _this$props3$no_anima,
+          _this$props3$animatio = _this$props3.animation_duration,
+          animation_duration = _this$props3$animatio === void 0 ? null : _this$props3$animatio;
       var elem = this._contentRef.current;
       var timeoutDuration = typeof animation_duration === 'string' ? parseFloat(animation_duration) : animation_duration;
 
@@ -291,14 +310,14 @@ var ModalContent = function (_React$PureComponent) {
   }, {
     key: "removeScrollPossibility",
     value: function removeScrollPossibility() {
-      if (this._contentRef.current) {
-        disableBodyScroll(this._contentRef.current);
+      if (this._scrollRef.current) {
+        disableBodyScroll(this._scrollRef.current);
       }
     }
   }, {
     key: "revertScrollPossibility",
     value: function revertScrollPossibility() {
-      enableBodyScroll(this._contentRef.current);
+      enableBodyScroll(this._scrollRef.current);
       clearAllBodyScrollLocks();
     }
   }, {
@@ -323,47 +342,47 @@ var ModalContent = function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-          _this$props3$mode = _this$props3.mode,
-          mode = _this$props3$mode === void 0 ? 'modal' : _this$props3$mode,
-          hide = _this$props3.hide,
-          title = _this$props3.title,
-          labelled_by = _this$props3.labelled_by,
-          _id = _this$props3.id,
-          _this$props3$close_ti = _this$props3.close_title,
-          close_title = _this$props3$close_ti === void 0 ? 'Lukk' : _this$props3$close_ti,
-          _this$props3$dialog_t = _this$props3.dialog_title,
-          dialog_title = _this$props3$dialog_t === void 0 ? 'Vindu' : _this$props3$dialog_t,
-          _this$props3$hide_clo = _this$props3.hide_close_button,
-          hide_close_button = _this$props3$hide_clo === void 0 ? false : _this$props3$hide_clo,
-          close_button_attributes = _this$props3.close_button_attributes,
-          animation_duration = _this$props3.animation_duration,
-          _this$props3$no_anima = _this$props3.no_animation,
-          no_animation = _this$props3$no_anima === void 0 ? false : _this$props3$no_anima,
-          _this$props3$no_anima2 = _this$props3.no_animation_on_mobile,
-          no_animation_on_mobile = _this$props3$no_anima2 === void 0 ? false : _this$props3$no_anima2,
-          _this$props3$fullscre = _this$props3.fullscreen,
-          fullscreen = _this$props3$fullscre === void 0 ? 'auto' : _this$props3$fullscre,
-          _this$props3$align_co = _this$props3.align_content,
-          align_content = _this$props3$align_co === void 0 ? 'left' : _this$props3$align_co,
-          _this$props3$containe = _this$props3.container_placement,
-          container_placement = _this$props3$containe === void 0 ? 'right' : _this$props3$containe,
-          close = _this$props3.close,
-          content_class = _this$props3.content_class,
-          overlay_class = _this$props3.overlay_class,
-          content_id = _this$props3.content_id,
-          children = _this$props3.children,
-          min_width = _this$props3.min_width,
-          max_width = _this$props3.max_width,
-          modal_content = _this$props3.modal_content,
-          header_content = _this$props3.header_content,
-          bar_content = _this$props3.bar_content,
-          className = _this$props3.className,
-          prevent_core_style = _this$props3.prevent_core_style,
-          _className = _this$props3.class,
-          _this$props3$dialog_r = _this$props3.dialog_role,
-          dialog_role = _this$props3$dialog_r === void 0 ? null : _this$props3$dialog_r,
-          rest = _objectWithoutProperties(_this$props3, _excluded2);
+      var _this$props4 = this.props,
+          _this$props4$mode = _this$props4.mode,
+          mode = _this$props4$mode === void 0 ? 'modal' : _this$props4$mode,
+          hide = _this$props4.hide,
+          title = _this$props4.title,
+          labelled_by = _this$props4.labelled_by,
+          _id = _this$props4.id,
+          _this$props4$close_ti = _this$props4.close_title,
+          close_title = _this$props4$close_ti === void 0 ? 'Lukk' : _this$props4$close_ti,
+          _this$props4$dialog_t = _this$props4.dialog_title,
+          dialog_title = _this$props4$dialog_t === void 0 ? 'Vindu' : _this$props4$dialog_t,
+          _this$props4$hide_clo = _this$props4.hide_close_button,
+          hide_close_button = _this$props4$hide_clo === void 0 ? false : _this$props4$hide_clo,
+          close_button_attributes = _this$props4.close_button_attributes,
+          animation_duration = _this$props4.animation_duration,
+          _this$props4$no_anima = _this$props4.no_animation,
+          no_animation = _this$props4$no_anima === void 0 ? false : _this$props4$no_anima,
+          _this$props4$no_anima2 = _this$props4.no_animation_on_mobile,
+          no_animation_on_mobile = _this$props4$no_anima2 === void 0 ? false : _this$props4$no_anima2,
+          _this$props4$fullscre = _this$props4.fullscreen,
+          fullscreen = _this$props4$fullscre === void 0 ? 'auto' : _this$props4$fullscre,
+          _this$props4$align_co = _this$props4.align_content,
+          align_content = _this$props4$align_co === void 0 ? 'left' : _this$props4$align_co,
+          _this$props4$containe = _this$props4.container_placement,
+          container_placement = _this$props4$containe === void 0 ? 'right' : _this$props4$containe,
+          close = _this$props4.close,
+          content_class = _this$props4.content_class,
+          overlay_class = _this$props4.overlay_class,
+          content_id = _this$props4.content_id,
+          children = _this$props4.children,
+          min_width = _this$props4.min_width,
+          max_width = _this$props4.max_width,
+          modal_content = _this$props4.modal_content,
+          header_content = _this$props4.header_content,
+          bar_content = _this$props4.bar_content,
+          className = _this$props4.className,
+          prevent_core_style = _this$props4.prevent_core_style,
+          _className = _this$props4.class,
+          _this$props4$dialog_r = _this$props4.dialog_role,
+          dialog_role = _this$props4$dialog_r === void 0 ? null : _this$props4$dialog_r,
+          rest = _objectWithoutProperties(_this$props4, _excluded2);
 
       var color = this.state.color;
       var contentId = content_id || makeUniqueId('modal-');
@@ -381,6 +400,7 @@ var ModalContent = function (_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--".concat(container_placement || 'right'), content_class, mode && "dnb-modal__content--".concat(mode)),
+        onMouseDown: this.onContentMouseDownHandler,
         onClick: this.onContentClickHandler
       };
 
@@ -415,6 +435,7 @@ var ModalContent = function (_React$PureComponent) {
           preventClick: this.preventClick,
           onKeyDownHandler: this.onKeyDownHandler,
           contentRef: this._contentRef,
+          scrollRef: this._scrollRef,
           contentId: contentId,
           close: close
         }

package/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/components/modal/ModalContext.js

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

package/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/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/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/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/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;

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

@@ -1099,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;
@@ -1128,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; } }
@@ -1223,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; }
@@ -1458,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);
@@ -1469,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);
@@ -1480,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);
@@ -1552,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;
@@ -1710,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; }