@dnb/eufemia 9.16.3 → 9.18.0

package/components/modal/ModalContent.d.ts

@@ -1,168 +0,0 @@
-import * as React from 'react';
-export type ModalContentMode = 'modal' | 'drawer';
-export type ModalContentHideCloseButton = string | boolean;
-export type ModalContentSpacing = string | boolean;
-export type ModalContentPreventClose = string | boolean;
-export type ModalContentPreventCoreStyle = string | boolean;
-export type ModalContentAnimationDuration = string | number;
-export type ModalContentNoAnimation = string | boolean;
-export type ModalContentNoAnimationOnMobile = string | boolean;
-export type ModalContentMinWidth = string | number;
-export type ModalContentMaxWidth = string | number;
-export type ModalContentFullscreen = string | boolean;
-export type ModalContentChildren =
-  | string
-  | React.ReactNode
-  | ((...args: any[]) => any);
-
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-export interface ModalContentProps extends React.HTMLProps<HTMLElement> {
-  /**
-   * The content which will appear when triggering the modal/drawer.
-   */
-  modal_content: React.ReactNode;
-
-  /**
-   * The modal/drawer mode. Can be set to `drawer`. Defaults to `modal`.
-   */
-  mode?: ModalContentMode;
-
-  /**
-   * The content which will appear in the bar, above the header, and side-by-side the close button.
-   */
-  bar_content?: React.ReactNode;
-
-  /**
-   * The content which will appear in the header of the modal/drawer the modal/drawer.
-   */
-  header_content?: React.ReactNode;
-  hide?: boolean;
-
-  /**
-   * 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;
-
-  /**
-   * The ID of the trigger component, describing the modal/drawer content. Defaults to the internal `trigger`, so make sure You define the `trigger_title`.
-   */
-  labelled_by?: string;
-
-  /**
-   * The Modal handles the first focus – automatically. How ever, you can defined a custom focus selector the will be used instead `focus_selector=".css-selector"`.
-   */
-  focus_selector?: string;
-
-  /**
-   * Defines an unique identifier to a modal. Use it in case you have to refer in some way to the modal/drawer content wrapper.
-   */
-  content_id?: string;
-
-  /**
-   * The modal/drawer title. Displays on the very top of the content.
-   */
-  title?: React.ReactNode;
-
-  /**
-   * The title of the close button. Defaults to <em>Close Modal Window</em>.
-   */
-  close_title?: string;
-  dialog_title?: string;
-
-  /**
-   * If truthy, the close button will not be shown.
-   */
-  hide_close_button?: ModalContentHideCloseButton;
-
-  /**
-   * Define any valid Eufemia Button property or HTML attribute inside an object.
-   */
-  close_button_attributes?: Object;
-
-  /**
-   * If set to `false` then the modal/drawer content will be shown without any spacing. Defaults to `true`.
-   */
-  spacing?: ModalContentSpacing;
-
-  /**
-   * If set to `true` (boolean or string), then the user can&#39;t close the modal/drawer.
-   */
-  prevent_close?: ModalContentPreventClose;
-
-  /**
-   * By default the modal/drawer content gets added the core style class `dnb-core-style`. Use `false` to disable this behavior.
-   */
-  prevent_core_style?: ModalContentPreventCoreStyle;
-  animation_duration?: ModalContentAnimationDuration;
-
-  /**
-   * If set to `true`, no open/close animation will be shown. Defaults to false.
-   */
-  no_animation?: ModalContentNoAnimation;
-
-  /**
-   * Same as `no_animation`, but gets triggered only if the viewport width is less than `40em`. Defaults to false.
-   */
-  no_animation_on_mobile?: ModalContentNoAnimationOnMobile;
-
-  /**
-   * The minimum Modal content width, defined by a CSS width value like `50vw` (50% of the viewport). Be careful on using fixed `min_width` so you don&#39;t break responsiveness. Defaults to `30rem` (average width is set to `60vw`).
-   */
-  min_width?: ModalContentMinWidth;
-
-  /**
-   * The maximum Modal content width, defined by a CSS width value like `20rem`. Defaults to `60rem` (average width is set to `60vw`).
-   */
-  max_width?: ModalContentMaxWidth;
-
-  /**
-   * If set to `true` then the modal/drawer content will be shown as fullscreen, without showing the original content behind. Can be set to `false` to omit the auto fullscreen. Defaults to `auto`.
-   */
-  fullscreen?: ModalContentFullscreen;
-
-  /**
-   * Define the inner horizontal alignment of the content. Can be set to `left`, `center`, `right` and `centered`. If `centered`, then the content will also be centered vertically. Defaults to `left`.
-   */
-  align_content?: string;
-
-  /**
-   * For `drawer` mode only. Defines the placement on what side the Drawer should be opened. Can be set to `left`, `right`, `top` and `bottom`. Defaults to `right`.
-   */
-  container_placement?: string;
-
-  /**
-   * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).
-   */
-  class?: string;
-
-  /**
-   * Give the content wrapper a custom class name (maps to `dnb-modal__content`).
-   */
-  content_class?: string;
-
-  /**
-   * Give the page overlay a custom class name (maps to `dnb-modal__overlay`).
-   */
-  overlay_class?: string;
-  closeModal: (...args: any[]) => any;
-
-  /**
-   * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).
-   */
-  className?: string;
-
-  /**
-   * The content which will appear when triggering the modal/drawer.
-   */
-  children?: ModalContentChildren;
-}
-export default class ModalContent extends React.Component<
-  ModalContentProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}

package/components/modal/ModalHeader.d.ts

@@ -1,73 +0,0 @@
-import * as React from 'react';
-
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-export interface ModalHeaderProps extends React.HTMLProps<HTMLElement> {
-  /**
-   * The content which will appear when triggering the modal/drawer.
-   */
-  children?: React.ReactNode;
-
-  /**
-   * The modal/drawer title. Displays on the very top of the content.
-   */
-  title?: React.ReactNode;
-
-  /**
-   * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).
-   */
-  className?: string;
-}
-export default class ModalHeader extends React.Component<
-  ModalHeaderProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}
-
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-export interface ModalHeaderBarProps {
-  /**
-   * 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;
-}
-export class ModalHeaderBar extends React.Component<
-  ModalHeaderBarProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}
-
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-export interface CloseButtonProps {
-  on_click: (...args: any[]) => any;
-
-  /**
-   * The title of the close button. Defaults to <em>Close Modal Window</em>.
-   */
-  close_title?: string;
-  size?: string;
-  icon_position?: string;
-
-  /**
-   * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).
-   */
-  className?: string;
-}
-export class CloseButton extends React.Component<CloseButtonProps, any> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}

package/components/modal/ModalHeader.js

@@ -1,224 +0,0 @@
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.reflect.construct.js";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-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"],
-    _excluded2 = ["className", "children"],
-    _excluded3 = ["on_click", "close_title", "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 PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { isTrue, findElementInChildren, extendPropsWithContext } from '../../shared/component-helper';
-import Section from '../section/Section';
-import ModalContext from './ModalContext';
-import Button from '../button/Button';
-import H1 from '../../elements/H1';
-import Context from '../../shared/Context';
-
-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,
-          title = _this$props.title,
-          className = _this$props.className,
-          children = _this$props.children,
-          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);
-
-_defineProperty(ModalHeader, "defaultProps", {
-  children: null,
-  title: null,
-  className: null
-});
-
-export { ModalHeader as default };
-process.env.NODE_ENV !== "production" ? ModalHeader.propTypes = {
-  children: PropTypes.node,
-  title: PropTypes.node,
-  className: PropTypes.string
-} : void 0;
-export var ModalHeaderBar = function (_React$PureComponent2) {
-  _inherits(ModalHeaderBar, _React$PureComponent2);
-
-  var _super2 = _createSuper(ModalHeaderBar);
-
-  function ModalHeaderBar(props) {
-    var _this;
-
-    _classCallCheck(this, ModalHeaderBar);
-
-    _this = _super2.call(this, props);
-
-    _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$props2 = this.props,
-          className = _this$props2.className,
-          children = _this$props2.children,
-          props = _objectWithoutProperties(_this$props2, _excluded2);
-
-      if (!this.context.title && isTrue(this.context.hide_close_button) && !this._ref.current) {
-        return null;
-      }
-
-      return React.createElement(Section, _extends({
-        style_type: "white",
-        className: classnames('dnb-modal__header__bar', className, this.state.showShadow && 'dnb-modal__header__bar--sticky'),
-        inner_ref: this._ref
-      }, props), React.createElement("div", {
-        className: "dnb-modal__header__bar__inner"
-      }, children), !isTrue(this.context.hide_close_button) && React.createElement("div", {
-        className: "dnb-modal__header__bar__close"
-      }, React.createElement(CloseButton, _extends({
-        on_click: this.context.onCloseClickHandler,
-        close_title: this.context.close_title
-      }, this.context.close_button_attributes))));
-    }
-  }]);
-
-  return ModalHeaderBar;
-}(React.PureComponent);
-
-_defineProperty(ModalHeaderBar, "contextType", ModalContext);
-
-_defineProperty(ModalHeaderBar, "defaultProps", {
-  children: null,
-  className: null
-});
-
-process.env.NODE_ENV !== "production" ? ModalHeaderBar.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-} : void 0;
-export var CloseButton = function (_React$PureComponent3) {
-  _inherits(CloseButton, _React$PureComponent3);
-
-  var _super3 = _createSuper(CloseButton);
-
-  function CloseButton() {
-    _classCallCheck(this, CloseButton);
-
-    return _super3.apply(this, arguments);
-  }
-
-  _createClass(CloseButton, [{
-    key: "render",
-    value: function render() {
-      var _extendPropsWithConte = extendPropsWithContext(this.props, CloseButton.defaultProps, this.context.getTranslation(this.props).Modal),
-          on_click = _extendPropsWithConte.on_click,
-          close_title = _extendPropsWithConte.close_title,
-          _extendPropsWithConte2 = _extendPropsWithConte.className,
-          className = _extendPropsWithConte2 === void 0 ? null : _extendPropsWithConte2,
-          rest = _objectWithoutProperties(_extendPropsWithConte, _excluded3);
-
-      return React.createElement(Button, _extends({
-        type: "button",
-        text: close_title,
-        variant: "tertiary",
-        className: classnames('dnb-modal__close-button', className),
-        icon: "close",
-        on_click: on_click
-      }, rest));
-    }
-  }]);
-
-  return CloseButton;
-}(React.PureComponent);
-
-_defineProperty(CloseButton, "contextType", Context);
-
-_defineProperty(CloseButton, "defaultProps", {
-  close_title: null,
-  size: 'large',
-  icon_position: 'left',
-  className: null
-});
-
-process.env.NODE_ENV !== "production" ? CloseButton.propTypes = {
-  on_click: PropTypes.func.isRequired,
-  close_title: PropTypes.string,
-  size: PropTypes.string,
-  icon_position: PropTypes.string,
-  className: PropTypes.string
-} : void 0;

package/components/modal/ModalInner.d.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-export interface ModalInnerProps extends React.HTMLProps<HTMLElement> {
-  style_type?: string;
-
-  /**
-   * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).
-   */
-  className?: string;
-}
-export default class ModalInner extends React.Component<
-  ModalInnerProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}

package/es/components/modal/ModalContent.d.ts

@@ -1,168 +0,0 @@
-import * as React from 'react';
-export type ModalContentMode = 'modal' | 'drawer';
-export type ModalContentHideCloseButton = string | boolean;
-export type ModalContentSpacing = string | boolean;
-export type ModalContentPreventClose = string | boolean;
-export type ModalContentPreventCoreStyle = string | boolean;
-export type ModalContentAnimationDuration = string | number;
-export type ModalContentNoAnimation = string | boolean;
-export type ModalContentNoAnimationOnMobile = string | boolean;
-export type ModalContentMinWidth = string | number;
-export type ModalContentMaxWidth = string | number;
-export type ModalContentFullscreen = string | boolean;
-export type ModalContentChildren =
-  | string
-  | React.ReactNode
-  | ((...args: any[]) => any);
-
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-export interface ModalContentProps extends React.HTMLProps<HTMLElement> {
-  /**
-   * The content which will appear when triggering the modal/drawer.
-   */
-  modal_content: React.ReactNode;
-
-  /**
-   * The modal/drawer mode. Can be set to `drawer`. Defaults to `modal`.
-   */
-  mode?: ModalContentMode;
-
-  /**
-   * The content which will appear in the bar, above the header, and side-by-side the close button.
-   */
-  bar_content?: React.ReactNode;
-
-  /**
-   * The content which will appear in the header of the modal/drawer the modal/drawer.
-   */
-  header_content?: React.ReactNode;
-  hide?: boolean;
-
-  /**
-   * 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;
-
-  /**
-   * The ID of the trigger component, describing the modal/drawer content. Defaults to the internal `trigger`, so make sure You define the `trigger_title`.
-   */
-  labelled_by?: string;
-
-  /**
-   * The Modal handles the first focus – automatically. How ever, you can defined a custom focus selector the will be used instead `focus_selector=".css-selector"`.
-   */
-  focus_selector?: string;
-
-  /**
-   * Defines an unique identifier to a modal. Use it in case you have to refer in some way to the modal/drawer content wrapper.
-   */
-  content_id?: string;
-
-  /**
-   * The modal/drawer title. Displays on the very top of the content.
-   */
-  title?: React.ReactNode;
-
-  /**
-   * The title of the close button. Defaults to <em>Close Modal Window</em>.
-   */
-  close_title?: string;
-  dialog_title?: string;
-
-  /**
-   * If truthy, the close button will not be shown.
-   */
-  hide_close_button?: ModalContentHideCloseButton;
-
-  /**
-   * Define any valid Eufemia Button property or HTML attribute inside an object.
-   */
-  close_button_attributes?: Object;
-
-  /**
-   * If set to `false` then the modal/drawer content will be shown without any spacing. Defaults to `true`.
-   */
-  spacing?: ModalContentSpacing;
-
-  /**
-   * If set to `true` (boolean or string), then the user can&#39;t close the modal/drawer.
-   */
-  prevent_close?: ModalContentPreventClose;
-
-  /**
-   * By default the modal/drawer content gets added the core style class `dnb-core-style`. Use `false` to disable this behavior.
-   */
-  prevent_core_style?: ModalContentPreventCoreStyle;
-  animation_duration?: ModalContentAnimationDuration;
-
-  /**
-   * If set to `true`, no open/close animation will be shown. Defaults to false.
-   */
-  no_animation?: ModalContentNoAnimation;
-
-  /**
-   * Same as `no_animation`, but gets triggered only if the viewport width is less than `40em`. Defaults to false.
-   */
-  no_animation_on_mobile?: ModalContentNoAnimationOnMobile;
-
-  /**
-   * The minimum Modal content width, defined by a CSS width value like `50vw` (50% of the viewport). Be careful on using fixed `min_width` so you don&#39;t break responsiveness. Defaults to `30rem` (average width is set to `60vw`).
-   */
-  min_width?: ModalContentMinWidth;
-
-  /**
-   * The maximum Modal content width, defined by a CSS width value like `20rem`. Defaults to `60rem` (average width is set to `60vw`).
-   */
-  max_width?: ModalContentMaxWidth;
-
-  /**
-   * If set to `true` then the modal/drawer content will be shown as fullscreen, without showing the original content behind. Can be set to `false` to omit the auto fullscreen. Defaults to `auto`.
-   */
-  fullscreen?: ModalContentFullscreen;
-
-  /**
-   * Define the inner horizontal alignment of the content. Can be set to `left`, `center`, `right` and `centered`. If `centered`, then the content will also be centered vertically. Defaults to `left`.
-   */
-  align_content?: string;
-
-  /**
-   * For `drawer` mode only. Defines the placement on what side the Drawer should be opened. Can be set to `left`, `right`, `top` and `bottom`. Defaults to `right`.
-   */
-  container_placement?: string;
-
-  /**
-   * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).
-   */
-  class?: string;
-
-  /**
-   * Give the content wrapper a custom class name (maps to `dnb-modal__content`).
-   */
-  content_class?: string;
-
-  /**
-   * Give the page overlay a custom class name (maps to `dnb-modal__overlay`).
-   */
-  overlay_class?: string;
-  closeModal: (...args: any[]) => any;
-
-  /**
-   * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).
-   */
-  className?: string;
-
-  /**
-   * The content which will appear when triggering the modal/drawer.
-   */
-  children?: ModalContentChildren;
-}
-export default class ModalContent extends React.Component<
-  ModalContentProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}