@dnb/eufemia 9.22.0 → 9.23.0-beta.1

package/es/components/lib.js

@@ -6,6 +6,8 @@ import Breadcrumb from './breadcrumb/Breadcrumb';
 import Button from './button/Button';
 import Checkbox from './checkbox/Checkbox';
 import DatePicker from './date-picker/DatePicker';
+import Dialog from './dialog/Dialog';
+import Drawer from './drawer/Drawer';
 import Dropdown from './dropdown/Dropdown';
 import FormLabel from './form-label/FormLabel';
 import FormRow from './form-row/FormRow';
@@ -39,7 +41,7 @@ import Timeline from './timeline/Timeline';
 import ToggleButton from './toggle-button/ToggleButton';
 import Tooltip from './tooltip/Tooltip';
 import VisuallyHidden from './visually-hidden/VisuallyHidden';
-export { Accordion, Autocomplete, Avatar, Breadcrumb, Button, Checkbox, DatePicker, Dropdown, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Heading, HelpButton, Icon, IconPrimary, InfoCard, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, Slider, Space, StepIndicator, Switch, Tabs, Tag, Textarea, Timeline, ToggleButton, Tooltip, VisuallyHidden };
+export { Accordion, Autocomplete, Avatar, Breadcrumb, Button, Checkbox, DatePicker, Dialog, Drawer, Dropdown, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Heading, HelpButton, Icon, IconPrimary, InfoCard, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, Slider, Space, StepIndicator, Switch, Tabs, Tag, Textarea, Timeline, ToggleButton, Tooltip, VisuallyHidden };
 export const getComponents = () => {
   return {
     Accordion,
@@ -49,6 +51,8 @@ export const getComponents = () => {
     Button,
     Checkbox,
     DatePicker,
+    Dialog,
+    Drawer,
     Dropdown,
     FormLabel,
     FormRow,

package/es/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/es/components/logo/style/index.d.ts

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 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 = ["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"];
+const _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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -15,17 +15,15 @@ import { warn, isTrue, makeUniqueId, extendPropsWithContext, registerElement, pr
 import { createSpacingClasses } from '../space/SpacingHelper';
 import HelpButtonInstance from '../help-button/HelpButtonInstance';
 import { getListOfModalRoots, getModalRoot } from './helpers';
-import ModalInner from './components/ModalInner';
-import ModalHeader from './components/ModalHeader';
-import ModalHeaderBar from './components/ModalHeaderBar';
-import CloseButton from './components/CloseButton';
+import ModalInner from './parts/ModalInner';
+import ModalHeader from './parts/ModalHeader';
+import ModalHeaderBar from './parts/ModalHeaderBar';
+import CloseButton from './parts/CloseButton';
 import ModalRoot from './ModalRoot';
+import { classWithCamelCaseProps } from '../../shared/helpers/withCamelCaseProps';
 export const ANIMATION_DURATION = 300;
-export default class Modal extends React.PureComponent {
-  static enableWebComponent() {
-    registerElement(Modal === null || Modal === void 0 ? void 0 : Modal.tagName, Modal, Modal.defaultProps);
-  }
 
+class Modal extends React.PureComponent {
   static getContent(props) {
     if (typeof props.modal_content === 'string') {
       return props.modal_content;
@@ -36,6 +34,10 @@ export default class Modal extends React.PureComponent {
     return processChildren(props);
   }
 
+  static enableWebComponent() {
+    registerElement(Modal === null || Modal === void 0 ? void 0 : Modal.tagName, Modal, Modal.defaultProps);
+  }
+
   static getDerivedStateFromProps(props, state) {
     if (props.open_state !== state._open_state) {
       switch (props.open_state) {
@@ -320,7 +322,6 @@ export default class Modal extends React.PureComponent {
       root_id = 'root',
       content_id = null,
       disabled = null,
-      spacing = true,
       labelled_by = null,
       focus_selector = null,
       header_content = null,
@@ -395,7 +396,6 @@ export default class Modal extends React.PureComponent {
         modal_content: modal_content,
         header_content: header_content,
         bar_content: bar_content,
-        spacing: spacing,
         closeModal: this.close,
         hide: hide,
         title: rest.title || fallbackTitle
@@ -407,10 +407,10 @@ export default class Modal extends React.PureComponent {
 
 }
 
-_defineProperty(Modal, "tagName", 'dnb-modal');
-
 _defineProperty(Modal, "contextType", Context);
 
+_defineProperty(Modal, "tagName", 'dnb-modal');
+
 _defineProperty(Modal, "Bar", ModalHeaderBar);
 
 _defineProperty(Modal, "Header", ModalHeader);
@@ -440,7 +440,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,
@@ -471,4 +471,5 @@ _defineProperty(Modal, "defaultProps", {
   bar_content: null
 });
 
-export { CloseButton };
+export { CloseButton, Modal as OriginalComponent };
+export default classWithCamelCaseProps(Modal);

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

@@ -2,7 +2,7 @@ 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 = ["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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -12,13 +12,12 @@ import React from 'react';
 import classnames from 'classnames';
 import keycode from 'keycode';
 import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from './bodyScrollLock';
-import { warn, isTrue, makeUniqueId, InteractionInvalidation, findElementInChildren, combineLabelledBy, combineDescribedBy, validateDOMAttributes, dispatchCustomElementEvent } from '../../shared/component-helper';
-import ScrollView from '../../fragments/scroll-view/ScrollView';
+import { warn, isTrue, makeUniqueId, InteractionInvalidation, combineLabelledBy, combineDescribedBy, dispatchCustomElementEvent } from '../../shared/component-helper';
 import ModalContext from './ModalContext';
-import ModalHeader from './components/ModalHeader';
-import ModalHeaderBar from './components/ModalHeaderBar';
 import { IS_IOS, IS_SAFARI, IS_MAC, isAndroid } from '../../shared/helpers';
 import { getListOfModalRoots, getModalRoot, addToIndex, removeFromIndex } from './helpers';
+import DrawerContent from '../drawer/DrawerContent';
+import DialogContent from '../dialog/DialogContent';
 export default class ModalContent extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -282,31 +281,30 @@ export default class ModalContent extends React.PureComponent {
       hide,
       title,
       labelled_by,
-      header_content,
-      modal_content,
-      bar_content,
       id: _id,
       close_title = 'Lukk',
       dialog_title = 'Vindu',
       hide_close_button = false,
       close_button_attributes,
-      spacing = true,
-      prevent_core_style = false,
       animation_duration,
       no_animation = false,
       no_animation_on_mobile = false,
-      min_width,
-      max_width,
       fullscreen = 'auto',
-      align_content,
-      container_placement,
+      align_content = 'left',
+      container_placement = 'right',
       closeModal,
-      className,
-      class: _className,
       content_class,
       overlay_class,
       content_id,
-      children
+      children,
+      min_width,
+      max_width,
+      modal_content,
+      header_content,
+      bar_content,
+      className,
+      prevent_core_style,
+      class: _className
     } = _this$props,
           rest = _objectWithoutProperties(_this$props, _excluded2);
 
@@ -314,15 +312,6 @@ export default class ModalContent extends React.PureComponent {
       color
     } = this.state;
     const contentId = content_id || makeUniqueId('modal-');
-    let minWidth = min_width;
-    let maxWidth = max_width;
-
-    if (minWidth && !maxWidth && parseFloat(String(minWidth)) > 0) {
-      maxWidth = 0;
-    } else if (maxWidth && !minWidth && parseFloat(String(maxWidth)) > 0) {
-      minWidth = 0;
-    }
-
     const useDialogRole = !(IS_MAC || IS_SAFARI || IS_IOS);
     const contentParams = {
       role: useDialogRole ? 'dialog' : 'region',
@@ -330,24 +319,27 @@ export default class ModalContent extends React.PureComponent {
       'aria-labelledby': combineLabelledBy(this.props, title ? contentId + '-title' : null, labelled_by),
       'aria-describedby': combineDescribedBy(this.props, contentId + '-content'),
       'aria-label': !title && !labelled_by ? dialog_title : undefined,
-      className: classnames('dnb-modal__content', (container_placement || mode === 'drawer') && `dnb-modal__content--${container_placement || 'right'}`, isTrue(fullscreen) ? 'dnb-modal__content--fullscreen' : fullscreen === 'auto' && 'dnb-modal__content--auto-fullscreen', content_class, mode && `dnb-modal__content--${mode}`, hide && 'dnb-modal__content--hide', isTrue(spacing) && 'dnb-modal__content--spacing', align_content && `dnb-modal__content__align--${align_content}`, isTrue(no_animation) && 'dnb-modal__content--no-animation', isTrue(no_animation_on_mobile) && 'dnb-modal__content--no-animation-on-mobile'),
+      className: classnames('dnb-modal__content', isTrue(fullscreen) ? 'dnb-modal__content--fullscreen' : fullscreen === 'auto' && 'dnb-modal__content--auto-fullscreen', (container_placement || mode === 'drawer') && `dnb-modal__content--${container_placement || 'right'}`, content_class, mode && `dnb-modal__content--${mode}`),
       onClick: this.onContentClickHandler
     };
 
-    const innerParams = _objectSpread({
-      className: classnames('dnb-modal__content__inner', className, _className, !isTrue(prevent_core_style) && 'dnb-core-style'),
-      style: (minWidth || maxWidth) && {
-        minWidth,
-        maxWidth
-      },
-      onClick: this.preventClick,
-      onTouchStart: this.preventClick,
-      onKeyDown: this.onKeyDownHandler
+    const modeParams = _objectSpread({
+      minWidth: min_width,
+      maxWidth: max_width,
+      modalContent: modal_content,
+      navContent: bar_content,
+      headerContent: header_content,
+      preventCoreStyle: prevent_core_style,
+      className,
+      class: _className,
+      title,
+      alignContent: align_content,
+      noAnimation: no_animation,
+      noAnimationOnMobile: no_animation_on_mobile,
+      fullscreen,
+      containerPlacement: container_placement
     }, rest);
 
-    validateDOMAttributes(this.props, innerParams);
-    const barExists = findElementInChildren(modal_content, cur => cur.type === ModalHeaderBar);
-    const headerExists = findElementInChildren(modal_content, cur => cur.type === ModalHeader);
     return React.createElement(ModalContext.Provider, {
       value: {
         id: this.props.id,
@@ -356,25 +348,26 @@ export default class ModalContent extends React.PureComponent {
         close_button_attributes,
         close_title,
         mode,
+        hide,
         setBackgroundColor: this.setBackgroundColor,
-        onCloseClickHandler: this.onCloseClickHandler
+        onCloseClickHandler: this.onCloseClickHandler,
+        preventClick: this.preventClick,
+        onKeyDownHandler: this.onKeyDownHandler,
+        contentRef: this._contentRef,
+        contentId,
+        close: closeModal
       }
     }, React.createElement("div", _extends({
-      id: contentId
-    }, contentParams), React.createElement(ScrollView, innerParams, React.createElement("div", {
-      tabIndex: -1,
-      className: "dnb-modal__content__spacing dnb-no-focus",
+      id: contentId,
       style: color ? {
         '--modal-background-color': `var(--color-${color})`
-      } : null,
-      ref: this._contentRef
-    }, !barExists && React.createElement(ModalHeaderBar, null, bar_content), !headerExists && React.createElement(ModalHeader, {
-      title: title
-    }, header_content), React.createElement("div", {
-      id: contentId + '-content',
-      className: "dnb-modal__content__wrapper"
-    }, modal_content)))), React.createElement("span", {
-      className: classnames('dnb-modal__overlay', overlay_class, hide && 'dnb-modal__overlay--hide', mode && `dnb-modal__overlay--${mode}`, isTrue(no_animation) && 'dnb-modal__overlay--no-animation', isTrue(no_animation_on_mobile) && 'dnb-modal__overlay--no-animation-on-mobile'),
+      } : null
+    }, contentParams), mode == 'drawer' && React.createElement(DrawerContent, _extends({
+      className: "dnb-modal__content__inner"
+    }, modeParams)), (mode == 'modal' || mode == 'dialog') && React.createElement(DialogContent, _extends({
+      className: "dnb-modal__content__inner"
+    }, modeParams)), mode == 'custom' && children), React.createElement("span", {
+      className: classnames('dnb-modal__overlay', overlay_class, hide && 'dnb-modal__overlay--hide', isTrue(no_animation) && 'dnb-modal__overlay--no-animation', isTrue(no_animation_on_mobile) && 'dnb-modal__overlay--no-animation-on-mobile'),
       "aria-hidden": "true"
     }));
   }

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

@@ -1,3 +1,18 @@
 import React from 'react';
-const ModalContext = React.createContext({});
+const ModalContext = React.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
+});
 export default ModalContext;

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

@@ -1,4 +1,4 @@
-import { warn } from '../../shared/component-helper';
+import { warn, processChildren } from '../../shared/component-helper';
 export function getListOfModalRoots() {
   if (typeof window !== 'undefined') {
     try {
@@ -57,4 +57,13 @@ export function removeFromIndex(elem) {
       warn(e);
     }
   }
+}
+export 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 processChildren(props);
 }

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

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