@dnb/eufemia 9.26.0 → 9.28.0

package/components/modal/Modal.js

@@ -13,7 +13,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["root_id", "content_id", "disabled", "labelled_by", "focus_selector", "header_content", "bar_content", "id", "open_state", "open_delay", "omit_trigger_button", "trigger", "trigger_attributes", "trigger_hidden", "trigger_disabled", "trigger_variant", "trigger_text", "trigger_title", "trigger_size", "trigger_icon", "trigger_icon_position", "trigger_class"];
+var _excluded = ["root_id", "content_id", "disabled", "labelled_by", "focus_selector", "header_content", "bar_content", "bypass_invalidation_selectors", "id", "open_state", "open_delay", "omit_trigger_button", "trigger", "trigger_attributes", "trigger_hidden", "trigger_disabled", "trigger_variant", "trigger_text", "trigger_title", "trigger_size", "trigger_icon", "trigger_icon_position", "trigger_class"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -326,6 +326,8 @@ var Modal = function (_React$PureComponent) {
           header_content = _props$header_content === void 0 ? null : _props$header_content,
           _props$bar_content = props.bar_content,
           bar_content = _props$bar_content === void 0 ? null : _props$bar_content,
+          _props$bypass_invalid = props.bypass_invalidation_selectors,
+          bypass_invalidation_selectors = _props$bypass_invalid === void 0 ? null : _props$bypass_invalid,
           id = props.id,
           open_state = props.open_state,
           open_delay = props.open_delay,
@@ -406,6 +408,7 @@ var Modal = function (_React$PureComponent) {
           modal_content: modal_content,
           header_content: header_content,
           bar_content: bar_content,
+          bypass_invalidation_selectors: bypass_invalidation_selectors,
           close: _this2.close,
           hide: hide,
           title: rest.title || fallbackTitle

package/components/modal/ModalContent.d.ts

@@ -23,6 +23,10 @@ export default class ModalContent extends React.PureComponent<ModalContentProps,
         color: any;
     };
     _contentRef: React.RefObject<HTMLElement>;
+    _scrollRef: React.RefObject<HTMLElement>;
+    _overlayClickRef: {
+        current: null | HTMLElement;
+    };
     _id: string;
     _lockTimeout: NodeJS.Timeout;
     _focusTimeout: NodeJS.Timeout;
@@ -41,8 +45,9 @@ export default class ModalContent extends React.PureComponent<ModalContentProps,
     removeScrollPossibility(): void;
     revertScrollPossibility(): void;
     preventClick: (event: any) => void;
-    onCloseClickHandler: (event: any) => void;
-    onContentClickHandler: (event: any) => void;
+    onCloseClickHandler: (event: React.SyntheticEvent) => void;
+    onContentMouseDownHandler: (event: React.SyntheticEvent) => void;
+    onContentClickHandler: (event: React.SyntheticEvent) => void;
     onKeyDownHandler: (event: any) => void;
     closeModalContent(event: any, { triggeredBy, ...params }: {
         [x: string]: any;

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)) {
@@ -155,14 +172,14 @@ var ModalContent = function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "setBackgroundColor", function (color) {
-      document.documentElement.style.setProperty('--modal-background-color', color);
-
       _this.setState({
         color: color
       });
     });
 
-    _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 +187,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 +273,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 +308,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 +340,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 +398,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 +433,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;
@@ -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/components/modal/style/_modal.scss

@@ -8,8 +8,6 @@
 :root {
   --modal-z-index: 3000;
   --modal-animation-duration: 300ms;
-  --modal-overlay-bg: black;
-  --modal-overlay-opacity: 0.32;
 }
 
 html[data-dnb-modal-active] {
@@ -79,22 +77,20 @@ html[data-dnb-modal-active] {
 
     width: 100%;
     height: 100%;
-
-    background-color: var(--modal-overlay-bg);
   }
 
   &-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;
     }
   }