@dnb/eufemia 9.17.2 → 9.18.0

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

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+const _excluded = ["close_title", "size", "icon_position", "className"];
+import React from 'react';
+import classnames from 'classnames';
+import { extendPropsWithContext } from '../../../shared/component-helper';
+import Button from '../../button/Button';
+import Context from '../../../shared/Context';
+export default class CloseButton extends React.PureComponent {
+  render() {
+    const _extendPropsWithConte = extendPropsWithContext(this.props, CloseButton.defaultProps, this.context.getTranslation(this.props).Modal),
+          {
+      close_title = null,
+      size = 'large',
+      icon_position = 'left',
+      className = null
+    } = _extendPropsWithConte,
+          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));
+  }
+
+}
+
+_defineProperty(CloseButton, "contextType", Context);
+
+_defineProperty(CloseButton, "defaultProps", {
+  close_title: null,
+  size: 'large',
+  icon_position: 'left',
+  className: null
+});

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

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+const _excluded = ["title", "className", "children", "ref"];
+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';
+export default class ModalHeader extends React.PureComponent {
+  render() {
+    const _this$props = this.props,
+          {
+      title = null,
+      className = null,
+      children = null,
+      ref
+    } = _this$props,
+          props = _objectWithoutProperties(_this$props, _excluded);
+
+    const customHeader = findElementInChildren(children, cur => {
+      return cur.type === 'h1' || cur.type === H1;
+    });
+    const usedTitle = title || this.context.title;
+    const 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));
+  }
+
+}
+
+_defineProperty(ModalHeader, "contextType", ModalContext);

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

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+const _excluded = ["className", "children", "ref"];
+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';
+export default class ModalHeaderBar extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "_ref", void 0);
+
+    _defineProperty(this, "intersectionObserver", void 0);
+
+    _defineProperty(this, "state", {
+      showShadow: false
+    });
+
+    this._ref = React.createRef();
+  }
+
+  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() {
+    var _this$intersectionObs;
+
+    (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.disconnect();
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      className = null,
+      children = null,
+      ref
+    } = _this$props,
+          props = _objectWithoutProperties(_this$props, _excluded);
+
+    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 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))));
+  }
+
+}
+
+_defineProperty(ModalHeaderBar, "contextType", ModalContext);

package/es/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>
+    )
+  }
+}

package/es/components/modal/{ModalInner.js → components/ModalInner.js}

@@ -1,16 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["className", "style_type"];
+const _excluded = ["className", "style_type", "ref"];
 import React from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import Section from '../section/Section';
-import ModalContext from './ModalContext';
+import Section from '../../section/Section';
+import ModalContext from '../ModalContext';
 export default class ModalInner extends React.PureComponent {
   componentDidMount() {
     const {
-      style_type
+      style_type = 'black-3'
     } = this.props;
 
     if (style_type) {
@@ -21,8 +20,9 @@ export default class ModalInner extends React.PureComponent {
   render() {
     const _this$props = this.props,
           {
-      className,
-      style_type
+      className = null,
+      style_type = 'black-3',
+      ref
     } = _this$props,
           props = _objectWithoutProperties(_this$props, _excluded);
 
@@ -34,14 +34,4 @@ export default class ModalInner extends React.PureComponent {
 
 }
 
-_defineProperty(ModalInner, "contextType", ModalContext);
-
-_defineProperty(ModalInner, "defaultProps", {
-  style_type: 'black-3',
-  className: null
-});
-
-process.env.NODE_ENV !== "production" ? ModalInner.propTypes = {
-  style_type: PropTypes.string,
-  className: PropTypes.string
-} : void 0;
+_defineProperty(ModalInner, "contextType", ModalContext);

package/es/components/modal/components/ModalInner.tsx

@@ -0,0 +1,45 @@
+/**
+ * Web Modal Component
+ *
+ */
+
+import React from 'react'
+import classnames from 'classnames'
+import Section from '../../section/Section'
+import ModalContext from '../ModalContext'
+import { SectionProps } from '../../Section'
+
+export interface ModalInnerProps extends SectionProps {
+  /**
+   * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).
+   */
+  className?: string
+}
+
+export default class ModalInner extends React.PureComponent<ModalInnerProps> {
+  static contextType = ModalContext
+
+  componentDidMount() {
+    const { style_type = 'black-3' } = this.props
+    if (style_type) {
+      this.context.setBackgroundColor(style_type)
+    }
+  }
+
+  render() {
+    const {
+      className = null,
+      style_type = 'black-3',
+      ref, // eslint-disable-line
+      ...props
+    } = this.props
+
+    return (
+      <Section
+        style_type={style_type}
+        className={classnames('dnb-modal__wrapper__inner', className)}
+        {...props}
+      />
+    )
+  }
+}