@dnb/eufemia 9.17.2 → 9.18.0

package/esm/components/modal/ModalRoot.tsx

@@ -0,0 +1,131 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { warn, isTrue } from '../../shared/component-helper'
+import ModalContent from './ModalContent'
+import { ModalContentProps } from './types'
+
+declare global {
+  interface Window {
+    __modalRoot: HTMLElement
+  }
+}
+
+export interface ModalRootProps extends ModalContentProps {
+  /**
+   * The id used internal in the modal/drawer root element. Defaults to `root`, so the element id will be `dnb-modal-root`.
+   */
+  id?: string
+  root_id?: string
+  direct_dom_return?: string | boolean
+
+  /**
+   * The content which will appear when triggering the modal/drawer.
+   */
+  children?: string | React.ReactNode | ((...args: any[]) => any)
+}
+
+interface ModalRootState {
+  isMounted: boolean
+}
+
+export default class ModalRoot extends React.PureComponent<
+  ModalRootProps,
+  ModalRootState
+> {
+  portalElem: HTMLDivElement | null
+  static defaultProps = {
+    id: null,
+    root_id: 'root',
+    direct_dom_return: false,
+    children: null,
+  }
+
+  state = {
+    isMounted: false,
+  }
+
+  static insertModalRoot(id) {
+    if (typeof window === 'undefined') {
+      return false
+    }
+
+    try {
+      id = `dnb-modal-${id || 'root'}`
+      window.__modalRoot = document.getElementById(id)
+      if (!window.__modalRoot) {
+        window.__modalRoot = document.createElement('div')
+        window.__modalRoot.setAttribute('id', id)
+        document.body.insertBefore(
+          window.__modalRoot,
+          document.body.firstChild
+        )
+      }
+    } catch (e) {
+      warn('Modal: Could not insert dnb-modal-root', e)
+    }
+
+    return window.__modalRoot
+  }
+
+  componentDidMount() {
+    const { direct_dom_return = false, root_id = 'root' } = this.props
+    if (!isTrue(direct_dom_return)) {
+      ModalRoot.insertModalRoot(root_id)
+
+      try {
+        if (!this.portalElem) {
+          this.portalElem = document.createElement('div')
+          this.portalElem.className = 'dnb-modal-root__inner'
+        }
+        if (
+          this.portalElem &&
+          typeof window !== 'undefined' &&
+          window.__modalRoot
+        ) {
+          window.__modalRoot.appendChild(this.portalElem)
+        }
+      } catch (e) {
+        warn(e)
+      }
+      this.setState({ isMounted: true })
+    }
+  }
+
+  componentWillUnmount() {
+    try {
+      if (
+        this.portalElem &&
+        typeof window !== 'undefined' &&
+        window.__modalRoot &&
+        window.__modalRoot.removeChild
+      ) {
+        window.__modalRoot.removeChild(this.portalElem)
+        this.portalElem = null
+      }
+    } catch (e) {
+      warn(e)
+    }
+  }
+
+  render() {
+    const { children, direct_dom_return, ...props } = this.props
+
+    if (isTrue(direct_dom_return)) {
+      return <ModalContent {...props}>{children}</ModalContent>
+    }
+
+    if (
+      this.portalElem &&
+      typeof window !== 'undefined' &&
+      window.__modalRoot &&
+      this.state.isMounted
+    ) {
+      return ReactDOM.createPortal(
+        <ModalContent {...props}>{children}</ModalContent>,
+        this.portalElem
+      )
+    }
+
+    return null
+  }
+}

package/esm/components/modal/components/CloseButton.js

@@ -0,0 +1,72 @@
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.reflect.construct.js";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+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 = ["close_title", "size", "icon_position", "className"];
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import classnames from 'classnames';
+import { extendPropsWithContext } from '../../../shared/component-helper';
+import Button from '../../button/Button';
+import Context from '../../../shared/Context';
+
+var CloseButton = function (_React$PureComponent) {
+  _inherits(CloseButton, _React$PureComponent);
+
+  var _super = _createSuper(CloseButton);
+
+  function CloseButton() {
+    _classCallCheck(this, CloseButton);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(CloseButton, [{
+    key: "render",
+    value: function render() {
+      var _extendPropsWithConte = extendPropsWithContext(this.props, CloseButton.defaultProps, this.context.getTranslation(this.props).Modal),
+          _extendPropsWithConte2 = _extendPropsWithConte.close_title,
+          close_title = _extendPropsWithConte2 === void 0 ? null : _extendPropsWithConte2,
+          _extendPropsWithConte3 = _extendPropsWithConte.size,
+          size = _extendPropsWithConte3 === void 0 ? 'large' : _extendPropsWithConte3,
+          _extendPropsWithConte4 = _extendPropsWithConte.icon_position,
+          icon_position = _extendPropsWithConte4 === void 0 ? 'left' : _extendPropsWithConte4,
+          _extendPropsWithConte5 = _extendPropsWithConte.className,
+          className = _extendPropsWithConte5 === void 0 ? null : _extendPropsWithConte5,
+          button_props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+
+      return React.createElement(Button, _extends({
+        type: "button",
+        variant: "tertiary",
+        icon: "close",
+        text: close_title,
+        size: size,
+        icon_position: icon_position,
+        className: classnames('dnb-modal__close-button', className)
+      }, button_props));
+    }
+  }]);
+
+  return CloseButton;
+}(React.PureComponent);
+
+_defineProperty(CloseButton, "contextType", Context);
+
+_defineProperty(CloseButton, "defaultProps", {
+  close_title: null,
+  size: 'large',
+  icon_position: 'left',
+  className: null
+});
+
+export { CloseButton as default };

package/esm/components/modal/components/CloseButton.tsx

@@ -0,0 +1,56 @@
+/**
+ * Web Modal Component
+ *
+ */
+
+import React from 'react'
+import classnames from 'classnames'
+import { extendPropsWithContext } from '../../../shared/component-helper'
+import Button from '../../button/Button'
+import Context from '../../../shared/Context'
+import { ButtonProps } from '../../button'
+
+export interface CloseButtonProps extends ButtonProps {
+  /**
+   * The title of the close button. Defaults to <em>Close</em> or <em>Lukk</em>.
+   */
+  close_title?: string
+}
+
+export default class CloseButton extends React.PureComponent<CloseButtonProps> {
+  static contextType = Context
+  static defaultProps = {
+    close_title: null,
+    size: 'large',
+    icon_position: 'left',
+    className: null,
+  }
+
+  render() {
+    // use only the props from context, who are available here anyway
+    const {
+      close_title = null,
+      size = 'large',
+      icon_position = 'left',
+      className = null,
+      ...button_props
+    } = extendPropsWithContext(
+      this.props,
+      CloseButton.defaultProps,
+      this.context.getTranslation(this.props).Modal
+    )
+
+    return (
+      <Button
+        type="button"
+        variant="tertiary"
+        icon="close"
+        text={close_title}
+        size={size}
+        icon_position={icon_position}
+        className={classnames('dnb-modal__close-button', className)}
+        {...button_props}
+      />
+    )
+  }
+}

package/esm/components/modal/components/ModalHeader.js

@@ -0,0 +1,70 @@
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.reflect.construct.js";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+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 = ["title", "className", "children", "ref"];
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import classnames from 'classnames';
+import { findElementInChildren } from '../../../shared/component-helper';
+import Section from '../../section/Section';
+import ModalContext from '../ModalContext';
+import H1 from '../../../elements/H1';
+
+var ModalHeader = function (_React$PureComponent) {
+  _inherits(ModalHeader, _React$PureComponent);
+
+  var _super = _createSuper(ModalHeader);
+
+  function ModalHeader() {
+    _classCallCheck(this, ModalHeader);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(ModalHeader, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          _this$props$title = _this$props.title,
+          title = _this$props$title === void 0 ? null : _this$props$title,
+          _this$props$className = _this$props.className,
+          className = _this$props$className === void 0 ? null : _this$props$className,
+          _this$props$children = _this$props.children,
+          children = _this$props$children === void 0 ? null : _this$props$children,
+          ref = _this$props.ref,
+          props = _objectWithoutProperties(_this$props, _excluded);
+
+      var customHeader = findElementInChildren(children, function (cur) {
+        return cur.type === 'h1' || cur.type === H1;
+      });
+      var usedTitle = title || this.context.title;
+      var showTitle = !customHeader && usedTitle;
+      return React.createElement(Section, _extends({
+        style_type: "white",
+        className: classnames('dnb-modal__header', className),
+        id: showTitle ? 'dnb-modal-' + this.context.id + '-title' : undefined
+      }, props), showTitle && React.createElement("h1", {
+        className: "dnb-modal__title dnb-space__top--zero dnb-space__bottom--small " + (this.context.mode === 'drawer' ? 'dnb-h--x-large' : 'dnb-h--large')
+      }, usedTitle), React.createElement("div", {
+        className: "dnb-modal__header__inner"
+      }, children));
+    }
+  }]);
+
+  return ModalHeader;
+}(React.PureComponent);
+
+_defineProperty(ModalHeader, "contextType", ModalContext);
+
+export { ModalHeader as default };

package/esm/components/modal/components/ModalHeader.tsx

@@ -0,0 +1,79 @@
+/**
+ * Web Modal Component
+ *
+ */
+
+import React from 'react'
+import classnames from 'classnames'
+import { findElementInChildren } from '../../../shared/component-helper'
+import Section from '../../section/Section'
+import { SectionProps } from '../../section'
+import ModalContext from '../ModalContext'
+import H1 from '../../../elements/H1'
+import { ReactChildType } from '../types'
+
+interface ModalHeaderProps {
+  /**
+   * The content which will appear when triggering the modal/drawer.
+   */
+  children?: ReactChildType
+
+  /**
+   * The modal/drawer title. Displays on the very top of the content.
+   */
+  title?: React.ReactNode | string
+
+  /**
+   * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).
+   */
+  className?: string
+}
+
+export default class ModalHeader extends React.PureComponent<
+  ModalHeaderProps & SectionProps
+> {
+  static contextType = ModalContext
+  render() {
+    const {
+      title = null,
+      className = null,
+      children = null,
+      ref, // eslint-disable-line
+      ...props
+    } = this.props
+
+    const customHeader = findElementInChildren(children, (cur) => {
+      return cur.type === 'h1' || cur.type === H1
+    })
+
+    const usedTitle = title || this.context.title
+    const showTitle = !customHeader && usedTitle
+
+    return (
+      <Section
+        style_type="white"
+        className={classnames('dnb-modal__header', className)}
+        id={
+          showTitle ? 'dnb-modal-' + this.context.id + '-title' : undefined
+        }
+        {...props}
+      >
+        {showTitle && (
+          <h1
+            className={classnames(
+              'dnb-modal__title',
+              'dnb-space__top--zero',
+              'dnb-space__bottom--small',
+              this.context.mode === 'drawer'
+                ? 'dnb-h--x-large'
+                : 'dnb-h--large'
+            )}
+          >
+            {usedTitle}
+          </h1>
+        )}
+        <div className="dnb-modal__header__inner">{children}</div>
+      </Section>
+    )
+  }
+}

package/esm/components/modal/components/ModalHeaderBar.js

@@ -0,0 +1,122 @@
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.reflect.construct.js";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+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 = ["className", "children", "ref"];
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import classnames from 'classnames';
+import { isTrue } from '../../../shared/component-helper';
+import Section from '../../section/Section';
+import ModalContext from '../ModalContext';
+import CloseButton from './CloseButton';
+
+var ModalHeaderBar = function (_React$PureComponent) {
+  _inherits(ModalHeaderBar, _React$PureComponent);
+
+  var _super = _createSuper(ModalHeaderBar);
+
+  function ModalHeaderBar(props) {
+    var _this;
+
+    _classCallCheck(this, ModalHeaderBar);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "_ref", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "intersectionObserver", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      showShadow: false
+    });
+
+    _this._ref = React.createRef();
+    return _this;
+  }
+
+  _createClass(ModalHeaderBar, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      if (typeof window !== 'undefined' && typeof IntersectionObserver !== 'undefined' && this._ref.current) {
+        var marginTop = -this._ref.current.clientHeight;
+        this.intersectionObserver = new IntersectionObserver(function (entries) {
+          var _entries = _slicedToArray(entries, 1),
+              entry = _entries[0];
+
+          _this2.setState({
+            showShadow: !entry.isIntersecting
+          });
+        }, {
+          rootMargin: "".concat(marginTop, "px 0px 0px 0px"),
+          threshold: 0.001
+        });
+        this.intersectionObserver.observe(this._ref.current);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this$intersectionObs;
+
+      (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.disconnect();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          _this$props$className = _this$props.className,
+          className = _this$props$className === void 0 ? null : _this$props$className,
+          _this$props$children = _this$props.children,
+          children = _this$props$children === void 0 ? null : _this$props$children,
+          ref = _this$props.ref,
+          props = _objectWithoutProperties(_this$props, _excluded);
+
+      var showShadow = this.state.showShadow;
+      var _this$context = this.context,
+          title = _this$context.title,
+          _this$context$hide_cl = _this$context.hide_close_button,
+          hide_close_button = _this$context$hide_cl === void 0 ? false : _this$context$hide_cl,
+          close_button_attributes = _this$context.close_button_attributes,
+          onCloseClickHandler = _this$context.onCloseClickHandler,
+          close_title = _this$context.close_title;
+
+      if (!title && isTrue(hide_close_button) && !this._ref.current) {
+        return null;
+      }
+
+      return React.createElement(Section, _extends({
+        style_type: "white",
+        className: classnames('dnb-modal__header__bar', className, showShadow && 'dnb-modal__header__bar--sticky'),
+        inner_ref: this._ref
+      }, props), React.createElement("div", {
+        className: "dnb-modal__header__bar__inner"
+      }, children), !isTrue(hide_close_button) && React.createElement("div", {
+        className: "dnb-modal__header__bar__close"
+      }, React.createElement(CloseButton, _extends({
+        on_click: onCloseClickHandler,
+        close_title: close_title
+      }, close_button_attributes))));
+    }
+  }]);
+
+  return ModalHeaderBar;
+}(React.PureComponent);
+
+_defineProperty(ModalHeaderBar, "contextType", ModalContext);
+
+export { ModalHeaderBar as default };

package/esm/components/modal/components/ModalHeaderBar.tsx

@@ -0,0 +1,118 @@
+/**
+ * Web Modal Component
+ *
+ */
+
+import React from 'react'
+import classnames from 'classnames'
+import { isTrue } from '../../../shared/component-helper'
+import Section from '../../section/Section'
+import ModalContext from '../ModalContext'
+import CloseButton from './CloseButton'
+import { SectionProps } from '../../Section'
+
+export interface ModalHeaderBarProps extends SectionProps {
+  /**
+   * The content which will appear when triggering the modal/drawer.
+   */
+  children?: React.ReactNode
+
+  /**
+   * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).
+   */
+  className?: string
+}
+
+interface ModalHeaderBarState {
+  showShadow: boolean
+}
+
+export default class ModalHeaderBar extends React.PureComponent<
+  ModalHeaderBarProps,
+  ModalHeaderBarState
+> {
+  static contextType = ModalContext
+  _ref: React.RefObject<any>
+  intersectionObserver: IntersectionObserver
+
+  constructor(props) {
+    super(props)
+    this._ref = React.createRef()
+  }
+
+  state = { showShadow: false }
+
+  componentDidMount() {
+    if (
+      typeof window !== 'undefined' &&
+      typeof IntersectionObserver !== 'undefined' &&
+      this._ref.current
+    ) {
+      const marginTop = -this._ref.current.clientHeight
+      this.intersectionObserver = new IntersectionObserver(
+        (entries) => {
+          const [entry] = entries
+          this.setState({
+            showShadow: !entry.isIntersecting,
+          })
+        },
+        {
+          rootMargin: `${marginTop}px 0px 0px 0px`,
+          threshold: 0.001,
+        }
+      )
+
+      this.intersectionObserver.observe(this._ref.current)
+    }
+  }
+
+  componentWillUnmount() {
+    this.intersectionObserver?.disconnect()
+  }
+
+  render() {
+    const {
+      className = null,
+      children = null,
+      ref, //eslint-disable-line
+      ...props
+    } = this.props
+    const { showShadow } = this.state
+    const {
+      title,
+      hide_close_button = false,
+      close_button_attributes,
+      onCloseClickHandler,
+      close_title,
+    } = this.context
+
+    if (!title && isTrue(hide_close_button) && !this._ref.current) {
+      return null
+    }
+
+    return (
+      <Section
+        style_type="white"
+        className={classnames(
+          'dnb-modal__header__bar',
+          showShadow && 'dnb-modal__header__bar--sticky',
+          className
+        )}
+        inner_ref={this._ref}
+        {...props}
+      >
+        <div className="dnb-modal__header__bar__inner">{children}</div>
+
+        {!isTrue(hide_close_button) && (
+          <div className="dnb-modal__header__bar__close">
+            <CloseButton
+              on_click={onCloseClickHandler}
+              close_title={close_title}
+              {...close_button_attributes}
+            />
+          </div>
+        )}
+      </Section>
+    )
+  }
+}