diginet-core-ui 1.3.33 → 1.3.34

package/components/form-control/dropdown/index.js

@@ -3,6 +3,7 @@
 /** @jsx jsx */
 import { Fragment, memo, useState, useEffect, useMemo, useRef, useImperativeHandle, forwardRef } from 'react';
 import ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { Account } from '../../../icons';
@@ -121,71 +122,71 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
 
   const forInput = css`
-        ${flexRow}
-        flex: 1 1 auto;
-        ${!multiple && renderSelectedItem ? `width: calc(100% - 34px${clearAble ? ' - 18px' : ''})` : ''}
-    `;
+                ${flexRow}
+                flex: 1 1 auto;
+                ${!multiple && renderSelectedItem ? `width: calc(100% - 34px${clearAble ? ' - 18px' : ''})` : ''}
+            `;
   const DropdownIcon = css`
-        ${inlineFlex}
-        ${alignCenter}
+                ${inlineFlex}
+                ${alignCenter}
         ${positionRelative}
         ${overflowHidden}
         height: inherit;
-        margin-right: 8px;
-        height: 32px;
-        width: 32px;
-        border-radius: 16px;
-        img {
-            height: 32px;
-            width: 32px;
-            object-fit: cover;
-        }
-    `;
+                margin-right: 8px;
+                height: 32px;
+                width: 32px;
+                border-radius: 16px;
+                img {
+                    height: 32px;
+                    width: 32px;
+                    object-fit: cover;
+                }
+            `;
   const DropdownInput = css`
-        ${flexRow}
-        ${alignCenter}
+                ${flexRow}
+                ${alignCenter}
         ${outlineNone}
         ${backgroundTransparent}
         ${paragraph1};
-        width: 100%;
-        border: none;
-        color: ${main};
-        padding-top: 0;
-        padding-bottom: ${viewType !== 'outlined' ? 0 : 'inherit'};
-        padding-left: ${viewType !== 'outlined' ? 0 : '16px'};
-        min-height: ${multiple ? 30 : 24}px;
-        &.dgn-dropdown-multiple {
-            ${flexWrap}
-            ${overflowHidden}
+                width: 100%;
+                border: none;
+                color: ${main};
+                padding-top: 0;
+                padding-bottom: ${viewType !== 'outlined' ? 0 : 'inherit'};
+                padding-left: ${viewType !== 'outlined' ? 0 : '16px'};
+                min-height: ${multiple ? 30 : 24}px;
+                &.dgn-dropdown-multiple {
+                    ${flexWrap}
+                    ${overflowHidden}
             /* max-height: max-content; */
             word-break: break-word;
-            ${!multiple ? 'min-height: 24px; max-width: 100%; white-space: nowrap;' : ''}
-            &::after {
-                ${flexRow}
-                ${positionAbsolute}
+                    ${!multiple ? 'min-height: 24px; max-width: 100%; white-space: nowrap;' : ''}
+                    &::after {
+                        ${flexRow}
+                        ${positionAbsolute}
                 ${alignCenter}
                 ${justifyCenter}
                 content: '${placeholder}';
-                color: ${sub};
-            }
-            &:not(:empty)::after {
-                visibility: hidden;
-            }
-        }
-        &:focus {
-            ${backgroundTransparent}
-        }
-        .dropdown-item {
-            &:not(:last-child) {
-                margin-right: 5px;
-            }
-            svg {
-                ${borderBox}
-                padding: ${itemMultipleSize === 'medium' ? 2 : 1}px;
-            }
-        }
-        .css-${DropdownIcon.name} {
-            ${renderSelectedItem ? `
+                        color: ${sub};
+                    }
+                    &:not(:empty)::after {
+                        visibility: hidden;
+                    }
+                }
+                &:focus {
+                    ${backgroundTransparent}
+                }
+                .dropdown-item {
+                    &:not(:last-child) {
+                        margin-right: 5px;
+                    }
+                    svg {
+                        ${borderBox}
+                        padding: ${itemMultipleSize === 'medium' ? 2 : 1}px;
+                    }
+                }
+                .css-${DropdownIcon.name} {
+                    ${renderSelectedItem ? `
                 min-height: 24px;
                 min-width: 24px;
             ` : `
@@ -196,230 +197,230 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     width: 24px;
                 }
             `}
-        }
-    `;
+                }
+            `;
   const forIcon = css`
-        ${flexRow}
-        ${alignCenter}
+                ${flexRow}
+                ${alignCenter}
         margin-left: 8px;
-        margin-right: ${viewType !== 'outlined' ? 2 : 16}px;
-        color: inherit;
-        .icon-close {
-            display: ${showClear ? 'flex' : 'none'};
-            margin-right: 4px;
-        }
-        .dgn-dropdown-loading {
-            display: ${loading ? 'flex' : 'none'};
-        }
-	`;
+                margin-right: ${viewType !== 'outlined' ? 2 : 16}px;
+                color: inherit;
+                .icon-close {
+                    display: ${showClear ? 'flex' : 'none'};
+                    margin-right: 4px;
+                }
+                .dgn-dropdown-loading {
+                    display: ${loading ? 'flex' : 'none'};
+                }
+            `;
   const DropdownForm = viewType !== 'outlined' ? css`
-        ${flexRow}
-        ${alignCenter}
+                          ${flexRow}
+                          ${alignCenter}
         ${positionRelative}
         ${borderBox}
         flex: 1 1 auto;
-        padding-bottom: ${multiple ? 1 : 4}px;
-        padding-top: ${multiple ? 1 : 4}px;
-        &:not(:focus-within):hover {
-            &::before {
-                border-bottom-color: ${active};
-            }
-            .css-${DropdownInput.name} {
-                color: ${active};
-            }
-        }
-        &:focus-within {
-            border-bottom-color: ${focus};
-            &::after {
-                border-bottom-color: inherit;
-                transform: scaleX(1);
-            }
-            .css-${DropdownInput.name} {
-                color: ${active};
-            }
-        }
-        &.dropdown-showing {
-            .icon-dropdown {
-                transform: rotateX(180deg);
-            }
-        }
-        &::placeholder {
-            color: ${sub};
-        }
-        &::before {
-            ${positionAbsolute}
-            content: '';
-            left: 0;
-            right: 0;
-            bottom: 0;
-            border-bottom: 1px solid ${rest};
-        }
-        &::after {
-            ${positionAbsolute}
-            content: '';
-            left: 0px;
-            right: 0px;
-            bottom: -1px;
-            border-bottom: 2px solid transparent;
-            transform: scaleX(0);
-            transform-origin: center;
-            transition: all 0.2s ease;
-        }
-    ` : css`
-        ${flexRow}
-        ${alignCenter}
+                          padding-bottom: ${multiple ? 1 : 4}px;
+                          padding-top: ${multiple ? 1 : 4}px;
+                          &:not(:focus-within):hover {
+                              &::before {
+                                  border-bottom-color: ${active};
+                              }
+                              .css-${DropdownInput.name} {
+                                  color: ${active};
+                              }
+                          }
+                          &:focus-within {
+                              border-bottom-color: ${focus};
+                              &::after {
+                                  border-bottom-color: inherit;
+                                  transform: scaleX(1);
+                              }
+                              .css-${DropdownInput.name} {
+                                  color: ${active};
+                              }
+                          }
+                          &.dropdown-showing {
+                              .icon-dropdown {
+                                  transform: rotateX(180deg);
+                              }
+                          }
+                          &::placeholder {
+                              color: ${sub};
+                          }
+                          &::before {
+                              ${positionAbsolute}
+                              content: '';
+                              left: 0;
+                              right: 0;
+                              bottom: 0;
+                              border-bottom: 1px solid ${rest};
+                          }
+                          &::after {
+                              ${positionAbsolute}
+                              content: '';
+                              left: 0px;
+                              right: 0px;
+                              bottom: -1px;
+                              border-bottom: 2px solid transparent;
+                              transform: scaleX(0);
+                              transform-origin: center;
+                              transition: all 0.2s ease;
+                          }
+                      ` : css`
+                          ${flexRow}
+                          ${alignCenter}
         ${positionRelative}
         ${borderRadius4px}
         ${borderBox}
         flex: 1 1 auto;
-        border: 1px solid ${rest};
-        min-height: 40px;
-        &:not(:focus-within):hover {
-            background-color: ${hover};
-            border-color: ${active};
-            input {
-                background-color: ${hover};
-            }
-        }
-        &:focus-within {
-            border-color: ${focus};
-        }
-        &.dropdown-showing {
-            .icon-dropdown {
-                transform: rotateX(180deg);
-            }
-        }
-        &::placeholder {
-            color: ${sub};
-        }
-        &::after {
-            ${positionAbsolute}
-            ${pointerEventsNone}
+                          border: 1px solid ${rest};
+                          min-height: 40px;
+                          &:not(:focus-within):hover {
+                              background-color: ${hover};
+                              border-color: ${active};
+                              input {
+                                  background-color: ${hover};
+                              }
+                          }
+                          &:focus-within {
+                              border-color: ${focus};
+                          }
+                          &.dropdown-showing {
+                              .icon-dropdown {
+                                  transform: rotateX(180deg);
+                              }
+                          }
+                          &::placeholder {
+                              color: ${sub};
+                          }
+                          &::after {
+                              ${positionAbsolute}
+                              ${pointerEventsNone}
             content: '';
-            left: -2px;
-            right: -2px;
-            top: -2px;
-            bottom: -2px;
-            border: 2px solid transparent;
-            border-radius: 4px;
-        }
-    `;
+                              left: -2px;
+                              right: -2px;
+                              top: -2px;
+                              bottom: -2px;
+                              border: 2px solid transparent;
+                              border-radius: 4px;
+                          }
+                      `;
   const DropdownBox = css`
-		${displayBlock}
-        ${positionRelative}
+                ${displayBlock}
+                ${positionRelative}
         ${borderBox}
 		width: 100%;
-		max-height: 280px;
-		overflow: auto;
-        background-color: #FFF;
-		border-radius: 4px;
-		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-        z-index: 9001;
-		&::-webkit-scrollbar {
-			width: 24px;
-			background-color: #FFF !important;
-            border-radius: 4px;
-		}
-		&::-webkit-scrollbar-thumb {
-			border-radius: 24px;
-            border: 8px solid transparent;
-			mix-blend-mode: normal;
-			background-color: ${scrollbar} !important;
-			background-clip: content-box;
-		}
-        .DGN-UI-TreeView {
-            padding: 1px;
-        }
-    `;
+                max-height: 280px;
+                overflow: auto;
+                background-color: #fff;
+                border-radius: 4px;
+                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+                z-index: 9001;
+                &::-webkit-scrollbar {
+                    width: 24px;
+                    background-color: #fff !important;
+                    border-radius: 4px;
+                }
+                &::-webkit-scrollbar-thumb {
+                    border-radius: 24px;
+                    border: 8px solid transparent;
+                    mix-blend-mode: normal;
+                    background-color: ${scrollbar} !important;
+                    background-clip: content-box;
+                }
+                .DGN-UI-TreeView {
+                    padding: 1px;
+                }
+            `;
   const DropdownItem = css`
-        ${flexRow}
-        ${positionRelative}
+                ${flexRow}
+                ${positionRelative}
         ${alignCenter}
         ${justifyStart}
         ${borderBox}
         ${cursorPointer}
         ${userSelectNone}
 		min-height: 40px;
-		width: 100%;
-		background-color: #FFF;
-		padding: 8px ${multiple && selectBox ? 0 : '16px'};
-        color: ${main};
-		&.no-data {
-            font-style: italic;
-			justify-content: center;
-			cursor: initial;
-		}
-		&:not(.no-data):hover,
-		&:not(.no-data):focus {
-			background-color: ${hover};
-            color: ${active};
-            outline: none;
-		}
-    `;
+                width: 100%;
+                background-color: #fff;
+                padding: 8px ${multiple && selectBox ? 0 : '16px'};
+                color: ${main};
+                &.no-data {
+                    font-style: italic;
+                    justify-content: center;
+                    cursor: initial;
+                }
+                &:not(.no-data):hover,
+                &:not(.no-data):focus {
+                    background-color: ${hover};
+                    color: ${active};
+                    outline: none;
+                }
+            `;
   const DropdownText = css`
-        ${paragraph1};
-        color: inherit;
-        .DGN-UI-Dropdown-PrimaryText {
-            ${paragraph1};
-            ${displayBlock}
-        }
-        .DGN-UI-Dropdown-SubText {
-            ${paragraph3};
-            ${displayBlock}
-            color: ${sub};
-        }
-    `;
+                ${paragraph1};
+                color: inherit;
+                .DGN-UI-Dropdown-PrimaryText {
+                    ${paragraph1};
+                    ${displayBlock}
+                }
+                .DGN-UI-Dropdown-SubText {
+                    ${paragraph3};
+                    ${displayBlock}
+                    color: ${sub};
+                }
+            `;
   const DropdownRoot = css`
-        ${displayBlock}
-        ${positionRelative}
+                ${displayBlock}
+                ${positionRelative}
         margin-bottom: 20px;
-        min-width: 150px;
-        height: max-content;
-        &.error {
-            .css-${DropdownForm.name} {
-                border-color: ${danger};
-                path {
-                    fill: ${danger};
-                }
-                &::before {
-                    border-color: ${danger};
+                min-width: 150px;
+                height: max-content;
+                &.error {
+                    .css-${DropdownForm.name} {
+                        border-color: ${danger};
+                        path {
+                            fill: ${danger};
+                        }
+                        &::before {
+                            border-color: ${danger};
+                        }
+                    }
                 }
-            }
-        }
-        &.dgn-dropdown-loading,
-        &.disabled {
-            ${pointerEventsNone}
-            ${userSelectNone}
+                &.dgn-dropdown-loading,
+                &.disabled {
+                    ${pointerEventsNone}
+                    ${userSelectNone}
             .css-${DropdownInput.name} {
-                //color: ${systemDisabled} !important;
-            }
-            .css-${DropdownForm.name} {
-                border-color: ${systemDisabled};
-                .css-${forIcon.name} {
-                    path {
-                        fill: transparent;
+                        //color: ${systemDisabled} !important;
+                    }
+                    .css-${DropdownForm.name} {
+                        border-color: ${systemDisabled};
+                        .css-${forIcon.name} {
+                            path {
+                                fill: transparent;
+                            }
+                        }
+                        &::before {
+                            border-color: ${systemDisabled};
+                        }
                     }
                 }
-                &::before {
-                    border-color: ${systemDisabled};
-                }
-            }
-        }
-        &.readOnly {
-            .css-${forIcon.name} {
-                ${pointerEventsNone}
-            }
-            .css-${DropdownInput.name} {
-                .dropdown-item {
-                    ${pointerEventsNone}
+                &.readOnly {
+                    .css-${forIcon.name} {
+                        ${pointerEventsNone}
+                    }
+                    .css-${DropdownInput.name} {
+                        .dropdown-item {
+                            ${pointerEventsNone}
+                        }
+                    }
                 }
-            }
-        }
-    `;
+            `;
   const Disabled = css`
-        pointer-events: none !important;
-        opacity: 0.4 !important;
-    `;
+                pointer-events: none !important;
+                opacity: 0.4 !important;
+            `;
   /* End styled */
 
   /* Start handler */
@@ -494,6 +495,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const showDropdown = () => {
+    var _searchRef$current;
+
     if (displayExpr && Array.isArray(displayExpr)) {
       displayExpr = displayExpr.join(' - ');
     }
@@ -524,58 +527,76 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
 
-    const el = document.createElement('div');
-    const elBox = document.createElement('div');
-    const elLoading = document.createElement('div');
-    let _cssText = `position: fixed; top: ${positionTop}px; left: ${left}px; width: ${width}px; background-color: #FFF; opacity: 0; transition: opacity 0.3s; z-index: 9001;`;
-    if (_isMobile && allowSearch) _cssText += `bottom: 0px; top: auto; display: flex; flex-direction: column-reverse; height: max-content`;
-    el.style.cssText = _cssText;
-    elLoading.style.cssText = `display: none; justify-content: center; align-items: center;position: absolute; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.6); border-radius: 4px; opacity: 0; transition: opacity 0.3s; z-index: 9002;`;
-    el.className = `DGN-UI-Portal DGN-Dropdown-${unique}`;
-    elBox.className = `DGN-Dropdown-Box`;
-    elLoading.className = `DGN-Dropdown-Loading`;
-    const node = document.body.appendChild(el);
-
-    if ((multiple || allowSearch) && itemMode === 'normal' && !children) {
-      var _searchRef$current;
-
-      const defaultSearch = !!onInput ? (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.value : '';
-      const searchInput = jsx(InputBase, {
-        inputRef: searchRef,
-        viewType: 'outlined',
-        defaultValue: defaultSearch,
-        onChange: onChangeInput,
-        style: {
-          backgroundColor: '#FFF',
-          marginBottom: 1
-        },
-        onKeyDown: pressESCHandler,
-        autoFocus: true
-      });
-      const elSearch = document.createElement('div');
-      elSearch.className = `DGN-Dropdown-Box-Search`;
-      ReactDOM.render(searchInput, node.appendChild(elSearch));
-    } else {
+    let dropdownStyle = {
+      position: 'fixed',
+      top: `${positionTop}px`,
+      left: `${left}px`,
+      width: `${width}px`,
+      backgroundColor: '#FFF',
+      zIndex: 9001
+    };
+    if (_isMobile && allowSearch) dropdownStyle = { ...dropdownStyle,
+      bottom: 0,
+      top: 'auto',
+      display: 'flex',
+      flexDirection: 'column-reverse',
+      height: 'max-content'
+    };
+    const loadingStyle = {
+      display: 'none',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'absolute',
+      top: 0,
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'rgba(255, 255, 255, 0.6)',
+      borderRadius: 4,
+      zIndex: 9002
+    };
+    const defaultSearch = onInput ? (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.value : '';
+    const el = jsx("div", {
+      className: `DGN-UI-Portal DGN-Dropdown-${unique}`,
+      style: dropdownStyle
+    }, (multiple || allowSearch) && itemMode === 'normal' && !children && jsx("div", {
+      className: 'DGN-Dropdown-Box-Search'
+    }, jsx(InputBase, {
+      inputRef: searchRef,
+      viewType: 'outlined',
+      defaultValue: defaultSearch,
+      onChange: onChangeInput,
+      style: {
+        backgroundColor: '#FFF',
+        marginBottom: 1
+      },
+      onKeyDown: pressESCHandler,
+      autoFocus: true
+    })), jsx("div", {
+      className: 'DGN-Dropdown-Box'
+    }, dropdown), jsx("div", {
+      className: 'DGN-Dropdown-Loading',
+      style: loadingStyle
+    }, jsx(CircularProgress, {
+      size: 'xs'
+    })));
+
+    if (!((multiple || allowSearch) && itemMode === 'normal' && !children)) {
       inputRef.current.addEventListener('keydown', pressESCHandler);
     }
 
-    ReactDOM.render(dropdown, node.appendChild(elBox));
-    ReactDOM.render(jsx(CircularProgress, {
-      size: 'xs'
-    }), node.appendChild(elLoading));
     document.documentElement.style.overflow = 'hidden';
     setTimeout(() => {
-      el.style.opacity = 1;
       window.addEventListener('resize', customizeWidthDropdown);
       document.addEventListener('wheel', onWheelHandler);
-      document.addEventListener('click', onClickOutsideOfInput);
+      document.addEventListener('mousedown', onClickOutsideOfInput);
       document.addEventListener('keydown', preventScroll);
-      boxRef.current.addEventListener('keydown', moveOnItem);
+      boxRef.current && boxRef.current.addEventListener('keydown', moveOnItem);
 
       if (onLoadMore && dataSource.length < total) {
         boxRef.current.addEventListener('scroll', onLoadMoreHandler);
       }
     }, 10);
+    return el;
   };
 
   const moveOnItem = e => {
@@ -587,7 +608,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         activeEl.focus();
         activeEl.scrollIntoView({
           block: 'center',
-          behavior: "smooth"
+          behavior: 'smooth'
         });
       }
     }
@@ -643,7 +664,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         boxRef.current = null;
       }, 300);
       setOpenState(false);
-      document.removeEventListener('click', onClickOutsideOfInput);
+      document.removeEventListener('mousedown', onClickOutsideOfInput);
       window.removeEventListener('resize', customizeWidthDropdown);
       document.removeEventListener('wheel', onWheelHandler);
       document.removeEventListener('keydown', preventScroll);
@@ -687,7 +708,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const items = [];
     const dataSourceUsable = [...dataSource];
 
-    if (onLoadMore && currentObjectDefault[unique].length) {
+    if (currentObjectDefault[unique] && currentObjectDefault[unique].length) {
       const length = currentObjectDefault[unique].length;
       let existItemQuantity = 0;
 
@@ -729,7 +750,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
 
       const value = typeof data === 'object' ? data[valueExpr] : data;
-      const itemDisabled = typeof data === 'object' ? data["disabled"] : data;
+      const itemDisabled = typeof data === 'object' ? data['disabled'] : data;
       const icon = getIconFromData(data);
 
       if (multiple && selectBox) {
@@ -787,7 +808,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, items.length ? items : jsx("div", {
       css: DropdownItem,
       className: 'no-data'
-    }, " ", noDataText, " "));
+    }, ' ', noDataText, ' '));
   };
 
   const mapTreeView = () => {
@@ -1268,7 +1289,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           }
         }
 
-        if (onLoadMore && currentObjectDefault[unique].length) {
+        if (currentObjectDefault[unique].length) {
           const itemOfValue = currentObjectDefault[unique].find(valueObject => valueObject[valueExpr] === v || valueObject === v);
 
           if (itemOfValue) {
@@ -1286,7 +1307,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
 
-      if (onLoadMore && currentObjectDefault[unique].length) {
+      if (currentObjectDefault[unique].length) {
         const itemOfValue = currentObjectDefault[unique].find(valueObject => valueObject[valueExpr] === source || valueObject === source);
 
         if (itemOfValue) {
@@ -1374,7 +1395,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setShowClear(clearAble && checkHasValue(valueProp) && !disabled && !readOnly && !loading);
   }, [clearAble, valueProp, disabled, readOnly, loading]);
   useEffect(() => {
-    if (onLoadMore && valueObjectDefault) {
+    if (valueObjectDefault) {
       if (Array.isArray(valueObjectDefault)) {
         currentObjectDefault[unique] = [...valueObjectDefault];
       } else if (typeof valueObjectDefault === 'object') {
@@ -1631,13 +1652,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, error), [error, valueProp, disabled, errorState]);
   /* End component */
 
-  return jsx("div", {
+  return jsx(Fragment, null, jsx("div", {
     ref: dropdownRef,
     css: DropdownRoot,
     className: ['DGN-UI-Dropdown', className, errorState && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly'].join(' ').trim().replace(/\s+/g, ' '),
     style: style,
     ...props
-  }, labelComp, inputComp, errorComp);
+  }, labelComp, inputComp, errorComp), openState ? /*#__PURE__*/createPortal(showDropdown(), document.body) : null);
 }));
 Dropdown.defaultProps = {
   viewType: 'underlined',
@@ -1702,14 +1723,14 @@ Dropdown.propTypes = {
   /** display this icon if not found the icon follow iconExpr */
   iconDefault: PropTypes.string,
 
-  /** field name used for icon display<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** field name used for icon display<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1727,9 +1748,9 @@ Dropdown.propTypes = {
   /** field name used for text display in input */
   keyExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
-  /** field name used for text display<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** field name used for text display<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
@@ -1739,9 +1760,9 @@ Dropdown.propTypes = {
   /** the field name used for the returned result */
   valueExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   * duration wait enter search content on search<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+  /**
+   * duration wait enter search content on search<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
@@ -1811,19 +1832,19 @@ Dropdown.propTypes = {
   /** The function to get ref of Dropdown component */
   refs: PropTypes.func,
 
-  /** function displays items by custom<br/>
-   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
-   * --> such as: displayExpr={'name - role'}
+  /** function displays items by custom<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
 
-  /** function displays selected items by custom, example:<br/>
-   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** function displays selected items by custom, example:<br/>
+   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.func,
 
-  /** the function will run when entering input<br/>
-   * if undefined: the filter function will run (default)
+  /** the function will run when entering input<br/>
+   * if undefined: the filter function will run (default)
    */
   onInput: PropTypes.func,