@dnb/eufemia 9.25.0 → 9.27.0

package/cjs/components/modal/ModalContent.js

@@ -6,18 +6,8 @@ require("core-js/modules/es.object.get-prototype-of.js");
 
 require("core-js/modules/es.reflect.construct.js");
 
-require("core-js/modules/es.object.keys.js");
-
-require("core-js/modules/es.array.index-of.js");
-
 require("core-js/modules/es.symbol.js");
 
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-
-require("core-js/modules/es.object.assign.js");
-
 require("core-js/modules/es.symbol.description.js");
 
 require("core-js/modules/es.symbol.iterator.js");
@@ -28,6 +18,24 @@ require("core-js/modules/es.string.iterator.js");
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.array.index-of.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+require("core-js/modules/es.object.assign.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -37,6 +45,8 @@ require("core-js/modules/es.array.filter.js");
 
 require("core-js/modules/es.object.to-string.js");
 
+require("core-js/modules/es.array.concat.js");
+
 require("core-js/modules/web.dom-collections.for-each.js");
 
 require("core-js/modules/es.parse-float.js");
@@ -76,6 +86,18 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -118,6 +140,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);
@@ -135,9 +161,11 @@ var ModalContent = function (_React$PureComponent) {
       var firstLevel = modalRoots[0];
 
       if (firstLevel === _assertThisInitialized(_this)) {
+        var _this$props;
+
         _this._ii = new _componentHelper.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 {
@@ -183,7 +211,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 (!(0, _componentHelper.isTrue)(prevent_overlay_close)) {
@@ -221,7 +258,9 @@ var ModalContent = function (_React$PureComponent) {
       });
     });
 
-    _this._contentRef = _react.default.createRef();
+    _this._contentRef = _this.props.content_ref || _react.default.createRef();
+    _this._scrollRef = _this.props.scroll_ref || _react.default.createRef();
+    _this._overlayClickRef = _react.default.createRef();
     _this._id = props.id;
     return _this;
   }
@@ -229,13 +268,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;
       (0, _helpers2.addToIndex)(this);
       this.removeScrollPossibility();
@@ -315,13 +354,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;
 
@@ -350,14 +389,14 @@ var ModalContent = function (_React$PureComponent) {
   }, {
     key: "removeScrollPossibility",
     value: function removeScrollPossibility() {
-      if (this._contentRef.current) {
-        (0, _bodyScrollLock.disableBodyScroll)(this._contentRef.current);
+      if (this._scrollRef.current) {
+        (0, _bodyScrollLock.disableBodyScroll)(this._scrollRef.current);
       }
     }
   }, {
     key: "revertScrollPossibility",
     value: function revertScrollPossibility() {
-      (0, _bodyScrollLock.enableBodyScroll)(this._contentRef.current);
+      (0, _bodyScrollLock.enableBodyScroll)(this._scrollRef.current);
       (0, _bodyScrollLock.clearAllBodyScrollLocks)();
     }
   }, {
@@ -382,47 +421,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 || (0, _componentHelper.makeUniqueId)('modal-');
@@ -440,6 +479,7 @@ var ModalContent = function (_React$PureComponent) {
         'aria-describedby': (0, _componentHelper.combineDescribedBy)(this.props, contentId + '-content'),
         'aria-label': !title && !labelled_by ? dialog_title : undefined,
         className: (0, _classnames.default)('dnb-modal__content', (0, _componentHelper.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
       };
 
@@ -474,6 +514,7 @@ var ModalContent = function (_React$PureComponent) {
           preventClick: this.preventClick,
           onKeyDownHandler: this.onKeyDownHandler,
           contentRef: this._contentRef,
+          scrollRef: this._scrollRef,
           contentId: contentId,
           close: close
         }

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

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

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