diginet-core-ui 1.3.32-beta.5 → 1.3.32-beta.6

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';
@@ -494,6 +495,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const showDropdown = () => {
+    var _searchRef$current;
+
     if (displayExpr && Array.isArray(displayExpr)) {
       displayExpr = displayExpr.join(' - ');
     }
@@ -524,51 +527,68 @@ 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);
 
@@ -576,6 +596,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         boxRef.current.addEventListener('scroll', onLoadMoreHandler);
       }
     }, 10);
+    return el;
   };
 
   const moveOnItem = e => {
@@ -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);
@@ -1622,13 +1643,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',

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

@@ -132,7 +132,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onClickOutsideOfInput = event => {
-    if ((!ref.current || !ref.current.contains(event.target)) && (!dropdownBoxRef.current || !dropdownBoxRef.current.contains(event.target))) {
+    if (ref.current && !ref.current.contains(event.target) && dropdownBoxRef.current && !dropdownBoxRef.current.contains(event.target)) {
       closeDropdownBox();
     }
   };
@@ -157,7 +157,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       dropdownBoxRef.current.style.opacity = 1; // window.addEventListener('resize', customizeWidthDropdown);
       // window.addEventListener('scroll', updatePositionDropdown);
 
-      document.addEventListener('click', onClickOutsideOfInput);
+      document.addEventListener('mousedown', onClickOutsideOfInput);
       document.addEventListener('keydown', pressESCHandler);
       !!onOpened && onOpened(ref.current);
     }, 10);
@@ -181,7 +181,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       //     inputBaseRef.current.classList.remove('dropdown-focus');
       // }
 
-      document.removeEventListener('click', onClickOutsideOfInput);
+      document.removeEventListener('mousedown', onClickOutsideOfInput);
       timing[unique + 'Box'] = setTimeout(() => {
         clearTimeout(timing[unique + 'Box']);
         timing[unique + 'Box'] = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.32-beta.5",
+  "version": "1.3.32-beta.6",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",