@dnb/eufemia 9.22.0 → 9.23.0-beta.4

package/cjs/components/lib.js

@@ -45,6 +45,18 @@ Object.defineProperty(exports, "DatePicker", {
     return _DatePicker.default;
   }
 });
+Object.defineProperty(exports, "Dialog", {
+  enumerable: true,
+  get: function get() {
+    return _Dialog.default;
+  }
+});
+Object.defineProperty(exports, "Drawer", {
+  enumerable: true,
+  get: function get() {
+    return _Drawer.default;
+  }
+});
 Object.defineProperty(exports, "Dropdown", {
   enumerable: true,
   get: function get() {
@@ -261,6 +273,10 @@ var _Checkbox = _interopRequireDefault(require("./checkbox/Checkbox"));
 
 var _DatePicker = _interopRequireDefault(require("./date-picker/DatePicker"));
 
+var _Dialog = _interopRequireDefault(require("./dialog/Dialog"));
+
+var _Drawer = _interopRequireDefault(require("./drawer/Drawer"));
+
 var _Dropdown = _interopRequireDefault(require("./dropdown/Dropdown"));
 
 var _FormLabel = _interopRequireDefault(require("./form-label/FormLabel"));
@@ -338,6 +354,8 @@ var getComponents = function getComponents() {
     Button: _Button.default,
     Checkbox: _Checkbox.default,
     DatePicker: _DatePicker.default,
+    Dialog: _Dialog.default,
+    Drawer: _Drawer.default,
     Dropdown: _Dropdown.default,
     FormLabel: _FormLabel.default,
     FormRow: _FormRow.default,

package/cjs/components/logo/index.d.ts

@@ -1,8 +1,3 @@
-/**
- * Component Entry
- *
- */
-
-import Logo from './Logo'
-export default Logo
-export * from './Logo'
+export default Logo;
+export * from "./Logo";
+import Logo from "./Logo";

package/cjs/components/logo/style/index.d.ts

@@ -1,6 +1 @@
-/**
- * Web Style Import
- *
- */
-
-import './dnb-logo.scss'
+export {};

package/cjs/components/logo/style.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/components/logo/web-component.d.ts

@@ -0,0 +1,3 @@
+export default Logo;
+export * from "./Logo";
+import Logo from "./Logo";

package/cjs/components/modal/Modal.d.ts

@@ -0,0 +1,136 @@
+/**
+ * Web Modal Component
+ *
+ */
+/// <reference types="node" />
+import React from 'react';
+import ModalInner from './parts/ModalInner';
+import { ModalProps } from './types';
+import ModalHeader from './parts/ModalHeader';
+import ModalHeaderBar from './parts/ModalHeaderBar';
+import { ScrollViewProps } from '../../fragments/scroll-view/ScrollView';
+import CloseButton from './parts/CloseButton';
+import { ISpacingProps } from '../../shared/interfaces';
+import { ToCamelCasePartial } from '../../shared/helpers/withCamelCaseProps';
+export declare const ANIMATION_DURATION = 300;
+interface ModalState {
+    hide: boolean;
+    modalActive: boolean;
+}
+export declare type ModalPropTypes = ModalProps & ISpacingProps & ScrollViewProps;
+declare class Modal extends React.PureComponent<ModalPropTypes & ToCamelCasePartial<ModalPropTypes>, ModalState> {
+    static contextType: React.Context<{
+        translation: any;
+        updateTranslation: (locale: any, translation: any) => void;
+        getTranslation: (props: any) => any;
+        locales: any;
+        Avatar: {};
+        AvatarGroup: {};
+        Breadcrumb: {};
+        BreadcrumbItem: {};
+        InfoCard: {};
+        Tag: {};
+        TagGroup: {};
+        Timeline: {};
+        TimelineItem: {};
+        VisuallyHidden: {};
+        Drawer: {};
+        Dialog: {};
+    }>;
+    static tagName: string;
+    static Bar: typeof ModalHeaderBar;
+    static Header: typeof ModalHeader;
+    static Content: typeof ModalInner;
+    static Inner: typeof ModalInner;
+    static getContent(props: any): any;
+    static enableWebComponent(): void;
+    _id: string;
+    _triggerRef: React.RefObject<any>;
+    _onUnmount: Array<() => void>;
+    _openTimeout: NodeJS.Timeout;
+    _closeTimeout: NodeJS.Timeout;
+    _sideEffectsTimeout: NodeJS.Timeout;
+    _tryToOpenTimeout: NodeJS.Timeout;
+    activeElement: Element;
+    isInTransition: boolean;
+    state: {
+        hide: boolean;
+        modalActive: boolean;
+    };
+    static defaultProps: {
+        id: any;
+        focus_selector: any;
+        labelled_by: any;
+        title: any;
+        disabled: any;
+        spacing: boolean;
+        open_delay: any;
+        content_id: any;
+        dialog_title: string;
+        close_title: string;
+        hide_close_button: boolean;
+        close_button_attributes: any;
+        prevent_close: boolean;
+        prevent_core_style: boolean;
+        animation_duration: number;
+        no_animation: boolean;
+        no_animation_on_mobile: boolean;
+        fullscreen: string;
+        min_width: any;
+        max_width: any;
+        align_content: string;
+        container_placement: any;
+        open_state: any;
+        direct_dom_return: boolean;
+        class: any;
+        root_id: string;
+        className: any;
+        children: any;
+        on_open: any;
+        on_close: any;
+        on_close_prevent: any;
+        open_modal: any;
+        close_modal: any;
+        trigger: any;
+        trigger_attributes: any;
+        trigger_hidden: boolean;
+        trigger_disabled: any;
+        trigger_variant: string;
+        trigger_text: any;
+        trigger_title: any;
+        trigger_size: any;
+        trigger_icon: any;
+        trigger_icon_position: string;
+        trigger_class: any;
+        overlay_class: any;
+        content_class: any;
+        modal_content: any;
+        header_content: any;
+        bar_content: any;
+    };
+    static getDerivedStateFromProps(props: any, state: any): any;
+    constructor(props: any);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: any): void;
+    openBasedOnStateUpdate(): void;
+    toggleOpenClose: (event?: any, showModal?: any) => void;
+    handleSideEffects: () => void;
+    open: (e: Event) => void;
+    close: (event: Event, { ifIsLatest, triggeredBy }?: {
+        ifIsLatest: boolean;
+        triggeredBy?: any;
+    }) => void;
+    removeActiveState(): void;
+    /**
+     * Prevent scrolling on the background
+     * But checks if this instance was the last one or not
+     *
+     * @param {string} modalId Will remove the attribute if false is given
+     */
+    setActiveState(modalId: string): void;
+    render(): JSX.Element;
+}
+export { CloseButton, Modal as OriginalComponent };
+declare const _default: typeof Modal;
+export default _default;

package/cjs/components/modal/Modal.js

@@ -40,7 +40,7 @@ Object.defineProperty(exports, "CloseButton", {
     return _CloseButton.default;
   }
 });
-exports.default = void 0;
+exports.default = exports.OriginalComponent = void 0;
 
 require("core-js/modules/es.parse-float.js");
 
@@ -66,17 +66,19 @@ var _HelpButtonInstance = _interopRequireDefault(require("../help-button/HelpBut
 
 var _helpers = require("./helpers");
 
-var _ModalInner = _interopRequireDefault(require("./components/ModalInner"));
+var _ModalInner = _interopRequireDefault(require("./parts/ModalInner"));
 
-var _ModalHeader = _interopRequireDefault(require("./components/ModalHeader"));
+var _ModalHeader = _interopRequireDefault(require("./parts/ModalHeader"));
 
-var _ModalHeaderBar = _interopRequireDefault(require("./components/ModalHeaderBar"));
+var _ModalHeaderBar = _interopRequireDefault(require("./parts/ModalHeaderBar"));
 
-var _CloseButton = _interopRequireDefault(require("./components/CloseButton"));
+var _CloseButton = _interopRequireDefault(require("./parts/CloseButton"));
 
 var _ModalRoot = _interopRequireDefault(require("./ModalRoot"));
 
-var _excluded = ["root_id", "content_id", "disabled", "spacing", "labelled_by", "focus_selector", "header_content", "bar_content", "id", "open_state", "open_delay", "trigger", "trigger_attributes", "trigger_hidden", "trigger_disabled", "trigger_variant", "trigger_text", "trigger_title", "trigger_size", "trigger_icon", "trigger_icon_position", "trigger_class"];
+var _withCamelCaseProps = require("../../shared/helpers/withCamelCaseProps");
+
+var _excluded = ["root_id", "content_id", "disabled", "labelled_by", "focus_selector", "header_content", "bar_content", "id", "open_state", "open_delay", "trigger", "trigger_attributes", "trigger_hidden", "trigger_disabled", "trigger_variant", "trigger_text", "trigger_title", "trigger_size", "trigger_icon", "trigger_icon_position", "trigger_class"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -389,8 +391,6 @@ var Modal = function (_React$PureComponent) {
           content_id = _props$content_id === void 0 ? null : _props$content_id,
           _props$disabled = props.disabled,
           disabled = _props$disabled === void 0 ? null : _props$disabled,
-          _props$spacing = props.spacing,
-          spacing = _props$spacing === void 0 ? true : _props$spacing,
           _props$labelled_by = props.labelled_by,
           labelled_by = _props$labelled_by === void 0 ? null : _props$labelled_by,
           _props$focus_selector = props.focus_selector,
@@ -477,7 +477,6 @@ var Modal = function (_React$PureComponent) {
           modal_content: modal_content,
           header_content: header_content,
           bar_content: bar_content,
-          spacing: spacing,
           closeModal: _this2.close,
           hide: hide,
           title: rest.title || fallbackTitle
@@ -487,11 +486,6 @@ var Modal = function (_React$PureComponent) {
       return _react.default.createElement(_Suffix.SuffixContext.Consumer, null, render);
     }
   }], [{
-    key: "enableWebComponent",
-    value: function enableWebComponent() {
-      (0, _componentHelper.registerElement)(Modal === null || Modal === void 0 ? void 0 : Modal.tagName, Modal, Modal.defaultProps);
-    }
-  }, {
     key: "getContent",
     value: function getContent(props) {
       if (typeof props.modal_content === 'string') {
@@ -502,6 +496,11 @@ var Modal = function (_React$PureComponent) {
 
       return (0, _componentHelper.processChildren)(props);
     }
+  }, {
+    key: "enableWebComponent",
+    value: function enableWebComponent() {
+      (0, _componentHelper.registerElement)(Modal === null || Modal === void 0 ? void 0 : Modal.tagName, Modal, Modal.defaultProps);
+    }
   }, {
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(props, state) {
@@ -537,12 +536,12 @@ var Modal = function (_React$PureComponent) {
   return Modal;
 }(_react.default.PureComponent);
 
-exports.default = Modal;
-
-_defineProperty(Modal, "tagName", 'dnb-modal');
+exports.OriginalComponent = Modal;
 
 _defineProperty(Modal, "contextType", _Context.default);
 
+_defineProperty(Modal, "tagName", 'dnb-modal');
+
 _defineProperty(Modal, "Bar", _ModalHeaderBar.default);
 
 _defineProperty(Modal, "Header", _ModalHeader.default);
@@ -572,7 +571,7 @@ _defineProperty(Modal, "defaultProps", {
   fullscreen: 'auto',
   min_width: null,
   max_width: null,
-  align_content: null,
+  align_content: 'left',
   container_placement: null,
   open_state: null,
   direct_dom_return: false,
@@ -601,4 +600,8 @@ _defineProperty(Modal, "defaultProps", {
   modal_content: null,
   header_content: null,
   bar_content: null
-});
+});
+
+var _default = (0, _withCamelCaseProps.classWithCamelCaseProps)(Modal);
+
+exports.default = _default;

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

@@ -0,0 +1,54 @@
+/**
+ * Web Modal Component
+ *
+ */
+/// <reference types="node" />
+import React from 'react';
+import { InteractionInvalidation } from '../../shared/component-helper';
+import { ModalContentProps } from './types';
+interface ModalContentState {
+    triggeredBy: string;
+    triggeredByEvent: Event;
+    color: string;
+}
+declare global {
+    interface Window {
+        __modalStack: any[];
+    }
+}
+export default class ModalContent extends React.PureComponent<ModalContentProps, ModalContentState> {
+    state: {
+        triggeredBy: any;
+        triggeredByEvent: any;
+        color: any;
+    };
+    _contentRef: React.RefObject<HTMLElement>;
+    _id: string;
+    _lockTimeout: NodeJS.Timeout;
+    _focusTimeout: NodeJS.Timeout;
+    _androidFocusTimeout: NodeJS.Timeout;
+    _ii: InteractionInvalidation;
+    _iiLocal: InteractionInvalidation;
+    constructor(props: ModalContentProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    lockBody: () => void;
+    removeLocks(): void;
+    setAndroidFocusHelper(): void;
+    removeAndroidFocusHelper(): void;
+    _androidFocusHelper: () => void;
+    setFocus(): void;
+    removeScrollPossibility(): void;
+    revertScrollPossibility(): void;
+    preventClick: (event: any) => void;
+    onCloseClickHandler: (event: any) => void;
+    onContentClickHandler: (event: any) => void;
+    onKeyDownHandler: (event: any) => void;
+    closeModalContent(event: any, { triggeredBy, ...params }: {
+        [x: string]: any;
+        triggeredBy: any;
+    }): void;
+    setBackgroundColor: (color: string) => void;
+    render(): JSX.Element;
+}
+export {};

package/cjs/components/modal/ModalContent.js

@@ -51,20 +51,18 @@ var _bodyScrollLock = require("./bodyScrollLock");
 
 var _componentHelper = require("../../shared/component-helper");
 
-var _ScrollView = _interopRequireDefault(require("../../fragments/scroll-view/ScrollView"));
-
 var _ModalContext = _interopRequireDefault(require("./ModalContext"));
 
-var _ModalHeader = _interopRequireDefault(require("./components/ModalHeader"));
-
-var _ModalHeaderBar = _interopRequireDefault(require("./components/ModalHeaderBar"));
-
 var _helpers = require("../../shared/helpers");
 
 var _helpers2 = require("./helpers");
 
+var _DrawerContent = _interopRequireDefault(require("../drawer/DrawerContent"));
+
+var _DialogContent = _interopRequireDefault(require("../dialog/DialogContent"));
+
 var _excluded = ["triggeredBy"],
-    _excluded2 = ["mode", "hide", "title", "labelled_by", "header_content", "modal_content", "bar_content", "id", "close_title", "dialog_title", "hide_close_button", "close_button_attributes", "spacing", "prevent_core_style", "animation_duration", "no_animation", "no_animation_on_mobile", "min_width", "max_width", "fullscreen", "align_content", "container_placement", "closeModal", "className", "class", "content_class", "overlay_class", "content_id", "children"];
+    _excluded2 = ["mode", "hide", "title", "labelled_by", "id", "close_title", "dialog_title", "hide_close_button", "close_button_attributes", "animation_duration", "no_animation", "no_animation_on_mobile", "fullscreen", "align_content", "container_placement", "closeModal", "content_class", "overlay_class", "content_id", "children", "min_width", "max_width", "modal_content", "header_content", "bar_content", "className", "prevent_core_style", "class"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -386,9 +384,6 @@ var ModalContent = function (_React$PureComponent) {
           hide = _this$props3.hide,
           title = _this$props3.title,
           labelled_by = _this$props3.labelled_by,
-          header_content = _this$props3.header_content,
-          modal_content = _this$props3.modal_content,
-          bar_content = _this$props3.bar_content,
           _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,
@@ -397,41 +392,34 @@ var ModalContent = function (_React$PureComponent) {
           _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,
-          _this$props3$spacing = _this$props3.spacing,
-          spacing = _this$props3$spacing === void 0 ? true : _this$props3$spacing,
-          _this$props3$prevent_ = _this$props3.prevent_core_style,
-          prevent_core_style = _this$props3$prevent_ === void 0 ? false : _this$props3$prevent_,
           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,
-          min_width = _this$props3.min_width,
-          max_width = _this$props3.max_width,
           _this$props3$fullscre = _this$props3.fullscreen,
           fullscreen = _this$props3$fullscre === void 0 ? 'auto' : _this$props3$fullscre,
-          align_content = _this$props3.align_content,
-          container_placement = _this$props3.container_placement,
+          _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,
           closeModal = _this$props3.closeModal,
-          className = _this$props3.className,
-          _className = _this$props3.class,
           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,
           rest = _objectWithoutProperties(_this$props3, _excluded2);
 
       var color = this.state.color;
       var contentId = content_id || (0, _componentHelper.makeUniqueId)('modal-');
-      var minWidth = min_width;
-      var maxWidth = max_width;
-
-      if (minWidth && !maxWidth && parseFloat(String(minWidth)) > 0) {
-        maxWidth = 0;
-      } else if (maxWidth && !minWidth && parseFloat(String(maxWidth)) > 0) {
-        minWidth = 0;
-      }
-
       var useDialogRole = !(_helpers.IS_MAC || _helpers.IS_SAFARI || _helpers.IS_IOS);
       var contentParams = {
         role: useDialogRole ? 'dialog' : 'region',
@@ -439,28 +427,27 @@ var ModalContent = function (_React$PureComponent) {
         'aria-labelledby': (0, _componentHelper.combineLabelledBy)(this.props, title ? contentId + '-title' : null, labelled_by),
         'aria-describedby': (0, _componentHelper.combineDescribedBy)(this.props, contentId + '-content'),
         'aria-label': !title && !labelled_by ? dialog_title : undefined,
-        className: (0, _classnames.default)('dnb-modal__content', (container_placement || mode === 'drawer') && "dnb-modal__content--".concat(container_placement || 'right'), (0, _componentHelper.isTrue)(fullscreen) ? 'dnb-modal__content--fullscreen' : fullscreen === 'auto' && 'dnb-modal__content--auto-fullscreen', content_class, mode && "dnb-modal__content--".concat(mode), hide && 'dnb-modal__content--hide', (0, _componentHelper.isTrue)(spacing) && 'dnb-modal__content--spacing', align_content && "dnb-modal__content__align--".concat(align_content), (0, _componentHelper.isTrue)(no_animation) && 'dnb-modal__content--no-animation', (0, _componentHelper.isTrue)(no_animation_on_mobile) && 'dnb-modal__content--no-animation-on-mobile'),
+        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)),
         onClick: this.onContentClickHandler
       };
 
-      var innerParams = _objectSpread({
-        className: (0, _classnames.default)('dnb-modal__content__inner', className, _className, !(0, _componentHelper.isTrue)(prevent_core_style) && 'dnb-core-style'),
-        style: (minWidth || maxWidth) && {
-          minWidth: minWidth,
-          maxWidth: maxWidth
-        },
-        onClick: this.preventClick,
-        onTouchStart: this.preventClick,
-        onKeyDown: this.onKeyDownHandler
+      var modeParams = _objectSpread({
+        minWidth: min_width,
+        maxWidth: max_width,
+        modalContent: modal_content,
+        navContent: bar_content,
+        headerContent: header_content,
+        preventCoreStyle: prevent_core_style,
+        className: className,
+        class: _className,
+        title: title,
+        alignContent: align_content,
+        noAnimation: no_animation,
+        noAnimationOnMobile: no_animation_on_mobile,
+        fullscreen: fullscreen,
+        containerPlacement: container_placement
       }, rest);
 
-      (0, _componentHelper.validateDOMAttributes)(this.props, innerParams);
-      var barExists = (0, _componentHelper.findElementInChildren)(modal_content, function (cur) {
-        return cur.type === _ModalHeaderBar.default;
-      });
-      var headerExists = (0, _componentHelper.findElementInChildren)(modal_content, function (cur) {
-        return cur.type === _ModalHeader.default;
-      });
       return _react.default.createElement(_ModalContext.default.Provider, {
         value: {
           id: this.props.id,
@@ -469,25 +456,26 @@ var ModalContent = function (_React$PureComponent) {
           close_button_attributes: close_button_attributes,
           close_title: close_title,
           mode: mode,
+          hide: hide,
           setBackgroundColor: this.setBackgroundColor,
-          onCloseClickHandler: this.onCloseClickHandler
+          onCloseClickHandler: this.onCloseClickHandler,
+          preventClick: this.preventClick,
+          onKeyDownHandler: this.onKeyDownHandler,
+          contentRef: this._contentRef,
+          contentId: contentId,
+          close: closeModal
         }
       }, _react.default.createElement("div", _extends({
-        id: contentId
-      }, contentParams), _react.default.createElement(_ScrollView.default, innerParams, _react.default.createElement("div", {
-        tabIndex: -1,
-        className: "dnb-modal__content__spacing dnb-no-focus",
+        id: contentId,
         style: color ? {
           '--modal-background-color': "var(--color-".concat(color, ")")
-        } : null,
-        ref: this._contentRef
-      }, !barExists && _react.default.createElement(_ModalHeaderBar.default, null, bar_content), !headerExists && _react.default.createElement(_ModalHeader.default, {
-        title: title
-      }, header_content), _react.default.createElement("div", {
-        id: contentId + '-content',
-        className: "dnb-modal__content__wrapper"
-      }, modal_content)))), _react.default.createElement("span", {
-        className: (0, _classnames.default)('dnb-modal__overlay', overlay_class, hide && 'dnb-modal__overlay--hide', mode && "dnb-modal__overlay--".concat(mode), (0, _componentHelper.isTrue)(no_animation) && 'dnb-modal__overlay--no-animation', (0, _componentHelper.isTrue)(no_animation_on_mobile) && 'dnb-modal__overlay--no-animation-on-mobile'),
+        } : null
+      }, contentParams), mode == 'drawer' && _react.default.createElement(_DrawerContent.default, _extends({
+        className: "dnb-modal__content__inner"
+      }, modeParams)), (mode == 'modal' || mode == 'dialog') && _react.default.createElement(_DialogContent.default, _extends({
+        className: "dnb-modal__content__inner"
+      }, modeParams)), mode == 'custom' && children), _react.default.createElement("span", {
+        className: (0, _classnames.default)('dnb-modal__overlay', overlay_class, hide && 'dnb-modal__overlay--hide', (0, _componentHelper.isTrue)(no_animation) && 'dnb-modal__overlay--no-animation', (0, _componentHelper.isTrue)(no_animation_on_mobile) && 'dnb-modal__overlay--no-animation-on-mobile'),
         "aria-hidden": "true"
       }));
     }

package/cjs/components/modal/ModalContext.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Web ModalContext Context
+ *
+ */
+import React from 'react';
+declare const ModalContext: React.Context<{
+    preventClick: any;
+    onKeyDownHandler: any;
+    id: any;
+    title: any;
+    hide_close_button: any;
+    close_button_attributes: any;
+    close_title: any;
+    mode: any;
+    setBackgroundColor: any;
+    onCloseClickHandler: any;
+    contentRef: any;
+    hide: any;
+    contentId: any;
+    close: any;
+}>;
+export default ModalContext;

package/cjs/components/modal/ModalContext.js

@@ -9,7 +9,22 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var ModalContext = _react.default.createContext({});
+var ModalContext = _react.default.createContext({
+  preventClick: null,
+  onKeyDownHandler: null,
+  id: null,
+  title: null,
+  hide_close_button: null,
+  close_button_attributes: null,
+  close_title: null,
+  mode: null,
+  setBackgroundColor: null,
+  onCloseClickHandler: null,
+  contentRef: null,
+  hide: null,
+  contentId: null,
+  close: null
+});
 
 var _default = ModalContext;
 exports.default = _default;

package/cjs/components/modal/ModalRoot.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+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: any;
+        root_id: string;
+        direct_dom_return: boolean;
+        children: any;
+    };
+    state: {
+        isMounted: boolean;
+    };
+    static insertModalRoot(id: any): false | HTMLElement;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+export {};

package/cjs/components/modal/bodyScrollLock.d.ts

@@ -0,0 +1,3 @@
+export function disableBodyScroll(targetElement: any): void;
+export function enableBodyScroll(targetElement: any): void;
+export function clearAllBodyScrollLocks(): void;

package/cjs/components/modal/helpers.d.ts

@@ -0,0 +1,5 @@
+export declare function getListOfModalRoots(): any[];
+export declare function getModalRoot(index?: number): any;
+export declare function addToIndex(elem: any): void;
+export declare function removeFromIndex(elem: any): void;
+export declare function getContent(props: any): any;

package/cjs/components/modal/helpers.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.addToIndex = addToIndex;
+exports.getContent = getContent;
 exports.getListOfModalRoots = getListOfModalRoots;
 exports.getModalRoot = getModalRoot;
 exports.removeFromIndex = removeFromIndex;
@@ -77,4 +78,14 @@ function removeFromIndex(elem) {
       (0, _componentHelper.warn)(e);
     }
   }
+}
+
+function getContent(props) {
+  if (typeof props.modal_content === 'string') {
+    return props.modal_content;
+  } else if (typeof props.modal_content === 'function') {
+    return props.modal_content(props);
+  }
+
+  return (0, _componentHelper.processChildren)(props);
 }