diginet-core-ui 1.3.98 → 1.3.99-beta.2

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

@@ -478,15 +478,18 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const checkExistingFile = newFile => {
-    const files = allNewAttached.getAll('files');
-    if (files && files.length) {
-      const length = files.length;
-      for (let i = 0; i < length; i++) {
-        if (parseStringify(newFile) === parseStringify(files[i])) return true;
-      }
-    }
-    return false;
+    const files = [...dataState, ...newDataState];
+    return files.some(file => ((file === null || file === void 0 ? void 0 : file.FileName) || (file === null || file === void 0 ? void 0 : file.name)) === ((newFile === null || newFile === void 0 ? void 0 : newFile.FileName) || (newFile === null || newFile === void 0 ? void 0 : newFile.name)) && ((file === null || file === void 0 ? void 0 : file.FileSize) || (file === null || file === void 0 ? void 0 : file.size)) === ((newFile === null || newFile === void 0 ? void 0 : newFile.FileSize) || (newFile === null || newFile === void 0 ? void 0 : newFile.size)));
+    // const files = allNewAttached.getAll('files');
+    // if (files && files.length) {
+    //     const length = files.length;
+    //     for (let i = 0; i < length; i++) {
+    //         if (parseStringify(newFile) === parseStringify(files[i])) return true;
+    //     }
+    // }
+    // return false;
   };
+
   const checkAcceptFileType = newFile => {
     if (!accept || !accept.length) return true;
     const type = typeof accept === 'string' ? accept : accept.join('-');
@@ -682,14 +685,17 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     document.removeEventListener('keydown', onKeyDown);
     document.removeEventListener('click', clickOutOfItem);
   };
-  const parseStringify = fileInfo => JSON.stringify({
-    lastModified: fileInfo.lastModified,
-    lastModifiedDate: fileInfo.lastModifiedDate,
-    name: fileInfo.name,
-    size: fileInfo.size,
-    type: fileInfo.type,
-    webkitRelativePath: fileInfo.webkitRelativePath
-  });
+
+  // const parseStringify = fileInfo =>
+  //     JSON.stringify({
+  //         lastModified: fileInfo.lastModified,
+  //         lastModifiedDate: fileInfo.lastModifiedDate,
+  //         name: fileInfo.name,
+  //         size: fileInfo.size,
+  //         type: fileInfo.type,
+  //         webkitRelativePath: fileInfo.webkitRelativePath,
+  //     });
+
   const mountDomain = item => {
     if (!item) return item;
     const cloneItem = JSON.parse(JSON.stringify(item));
@@ -777,6 +783,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     };
   }, [data]);
+  useEffect(() => {
+    setNewDataState([]);
+  }, [dataState]);
   useEffect(() => {
     if (inputProps && Object.keys(inputProps).length) {
       Object.keys(inputProps).forEach(name => {
@@ -1299,6 +1308,7 @@ Attachment.defaultProps = {
     fileType: getGlobal(['errorDefault', 'fileType']),
     existingFile: getGlobal(['errorDefault', 'existingFile'])
   },
+  viewType: 'detail',
   ...getGlobal(['components', 'attachment', 'defaultProps'])
 };
 Attachment.propTypes = {

package/components/form-control/date-picker/index.js

@@ -543,6 +543,7 @@ DatePicker.defaultProps = {
   disabled: false,
   displayAnotherMonth: true,
   displayFormat: locale.get() === 'vi' ? 'DD/MM/YYYY' : 'MM/DD/YYYY',
+  placeholder: getGlobal('inputPlaceholder'),
   pressESCToClose: true,
   readOnly: false,
   required: false,

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

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { Avatar, ButtonIcon, Checkbox, Chip, CircularProgress, HelperText, InputBase, Label, TreeView, Typography } from "../..";
+import { Avatar, ButtonIcon, Checkbox, Chip, CircularProgress, HelperText, InputBase, Label, Popup, TreeView, Typography } from "../..";
 import Popover from "../../popover";
 import { getGlobal } from "../../../global";
 import PropTypes from 'prop-types';
@@ -33,6 +33,16 @@ const convertData = (dt, valueExpr) => {
   valueTemp = valueTemp.map(i => i[valueExpr] || i);
   return valueTemp;
 };
+const convertSearchDelayTime = searchDelayTime => {
+  var _searchDelayTime$matc, _searchDelayTime$matc2;
+  if (searchDelayTime === true) return getGlobal('delayOnInput');
+  const units = {
+    m: 60000,
+    s: 1000,
+    ms: 1
+  };
+  return typeof searchDelayTime === 'number' ? searchDelayTime : (((_searchDelayTime$matc = searchDelayTime.match(/[^a-z]+/i)) === null || _searchDelayTime$matc === void 0 ? void 0 : _searchDelayTime$matc[0]) || 1) * units[((_searchDelayTime$matc2 = searchDelayTime.match(/ms|s|m/i)) === null || _searchDelayTime$matc2 === void 0 ? void 0 : _searchDelayTime$matc2[0]) || 's'];
+};
 const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   allowSearch,
@@ -73,6 +83,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   searchExpr,
   searchMode,
   selectBox,
+  skip,
   style,
   subText,
   total,
@@ -86,6 +97,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!reference) reference = useRef(null);
   if (multiple && selectBox === undefined) selectBox = true;
   if (typeof searchExpr === 'string') searchExpr = [searchExpr];
+  searchDelayTime = convertSearchDelayTime(searchDelayTime);
   const ref = useRef(null);
   const dropdownRef = useRef(null);
   const timer = useRef(null);
@@ -96,9 +108,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const dropdownListRef = useRef(null);
   const searchRef = useRef(null);
   // const lastSearchRef = useRef(null);
-  const timeout = useRef(null);
+  // const timeout = useRef(null);
   const loadMoreTimer = useRef(null);
   const dataChosen = useRef([]);
+  const popupRef = useRef(null);
+  const filter = useRef({
+    skip: skip || 0,
+    limit: limit || 50
+  });
   const [unique] = useState(randomString(6, {
     allowNumber: false,
     allowSymbol: false
@@ -108,6 +125,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [textValue, setTextValue] = useState('');
   const [txtSearch, setTxtSearch] = useState('');
   const [popoverWidth, setPopoverWidth] = useState(0);
+  const [loadingState, setLoadingState] = useState(loading);
+  const [totalState, setTotalState] = useState(total);
+  const [dataSourceState, setDataSourceState] = useState(dataSource);
+  const [popupDataState, setPopupDataState] = useState({
+    title: '',
+    substitle: '',
+    description: ''
+  });
   let valueTemp = valueProp || defaultValue || [];
 
   // only mode multi
@@ -120,7 +145,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, disabled, readOnly, multilineSelectedItem);
   const _IconCSS = IconCSS(viewType);
   const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, disabled, placeholder, _DropdownInputCSS.name);
-  const _DropdownListCSS = DropdownListCSS(loading);
+  const _DropdownListCSS = DropdownListCSS(loadingState);
   const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
   const _DropdownRootCSS = DropdownRootCSS(_DropdownFormCSS.name, _DropdownInputCSS.name);
 
@@ -137,7 +162,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     !!blur && inputRef.current.blur();
   };
   const onClickInput = e => {
-    if (disabled || readOnly || loading) return;
+    if (disabled || readOnly || loadingState) return;
     if (!dropdownListRef.current) {
       if (!multiple || !Array.from(inputRef.current.querySelectorAll('.DGN-UI-Chip')).some(item => item.contains(e === null || e === void 0 ? void 0 : e.target))) {
         setOpenState(true);
@@ -170,7 +195,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'DGN-Dropdown-List',
       onKeyDown: moveOnItem,
       tabIndex: -1
-    }, dataSource !== null && dataSource !== void 0 && dataSource.length ? children : EmptyDataText) : itemMode === 'normal' ? mapDropdown() : mapTreeView();
+    }, dataSourceState !== null && dataSourceState !== void 0 && dataSourceState.length ? children : EmptyDataText) : itemMode === 'normal' ? mapDropdown() : mapTreeView();
     // const { innerHeight } = window;
     // const { top, left, height, width } = formRef.current.getBoundingClientRect();
 
@@ -209,12 +234,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         marginBottom: 1
       },
       onKeyDown: pressESCHandler,
+      readOnly: loadingState,
       autoFocus: true
     })) : null, multiple && maximumSelectionLength ? jsx(Typography, {
       css: pd([2, 4])
     }, getGlobal('selected'), " ", (valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length) || 0, "/", maximumSelectionLength) : null, jsx("div", {
       className: 'DGN-Dropdown-Box'
-    }, dropdown), loading ? jsx("div", {
+    }, dropdown), loadingState ? jsx("div", {
       css: LoadingProgressCSS,
       className: 'DGN-Dropdown-Loading-Progress'
     }, jsx(CircularProgress, {
@@ -228,7 +254,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       window.addEventListener('resize', customizeWidthDropdown);
       // document.addEventListener('wheel', onWheelHandler);
       // document.addEventListener('mousedown', onClickOutsideOfInput);
-      if (onLoadMore && dataSource.length < total) {
+      if (onLoadMore && dataSourceState.length < totalState) {
         dropdownListRef.current && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
       }
     }, 10);
@@ -344,7 +370,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const mapDropdown = () => {
     var _dataSourceUsable, _currentObjectDefault;
     const items = [];
-    let dataSourceUsable = [...dataSource];
+    let dataSourceUsable = [...dataSourceState];
 
     // search dataSource dựa trên txtSearch
     dataSourceUsable = (_dataSourceUsable = dataSourceUsable) === null || _dataSourceUsable === void 0 ? void 0 : _dataSourceUsable.filter(i => {
@@ -382,12 +408,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       //     if (handleRenderBySearch(data, pattern)) continue;
       // } else if (pattern && !new RegExp(pattern).test(displayText.normalize())) continue;
 
-      if (renderItem && typeof renderItem === 'function') {
-        displayText = renderItem({
-          data,
-          index
-        });
-      } else if (subText) {
+      if (subText) {
         displayText = jsx(Fragment, null, jsx(Typography, {
           className: 'DGN-UI-Dropdown-PrimaryText',
           type: 'p1'
@@ -403,7 +424,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const value = typeof data === 'object' ? data[valueExpr] : data;
       let itemDisabled = typeof data === 'object' ? data['disabled'] : false;
       const icon = getIconFromData(data);
-      const text = jsx(Typography, {
+      const text = renderItem && typeof renderItem === 'function' ? renderItem({
+        data,
+        index
+      }) : jsx(Typography, {
         type: 'p1'
       }, displayText);
       if (multiple && selectBox) {
@@ -468,8 +492,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'DGN-Dropdown-List',
       onKeyDown: moveOnItem,
       tabIndex: -1
-    }, dataSource !== null && dataSource !== void 0 && dataSource.length ? jsx(TreeView, {
-      dataSource: dataSource,
+    }, dataSourceState !== null && dataSourceState !== void 0 && dataSourceState.length ? jsx(TreeView, {
+      dataSource: dataSourceState,
       displayExpr: displayExpr,
       valueExpr: valueExpr,
       multiple: multiple,
@@ -491,7 +515,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   // remove item  cũ và append child item mới khi load more
   const loadMoreItemsDropdown = (i = 0, pattern) => {
     var _currentObjectDefault2, _displayExpr2;
-    const dataSourceUsable = [...dataSource];
+    const dataSourceUsable = [...dataSourceState];
     // Nếu có load more thì đẩy đội tượng mặc định lên đầu
     let notExistItem = 0;
     if (onLoadMore && (_currentObjectDefault2 = currentObjectDefault[unique]) !== null && _currentObjectDefault2 !== void 0 && _currentObjectDefault2.length) {
@@ -639,6 +663,65 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   //         : updatePosition(formRef.current, dropdownRef.current, closeDropdown);
   // };
 
+  const handleActionLoadData = isReset => {
+    const {
+      skip,
+      limit,
+      strSearch: search
+    } = filter.current;
+    const params = onLoadMore ? {
+      skip,
+      limit,
+      search
+    } : {
+      search
+    };
+    const callbackSave = (error, data) => {
+      setLoadingState(false);
+      if (error) {
+        let _data = {};
+        if (error.originalError) {
+          const {
+            message,
+            originalError,
+            customMessage,
+            code: codeError
+          } = error;
+          const _customMessage = customMessage && typeof customMessage === 'object' ? customMessage[codeError] : customMessage;
+          let messageError = '';
+          Object.keys(originalError).forEach(key => {
+            messageError += `${key}: ${JSON.stringify(originalError[key], null, 8)}\n`;
+          });
+          _data = {
+            title: getGlobal('error') + (codeError ? `: ${codeError}` : ''),
+            subtitle: _customMessage || message || getGlobal('unknownError'),
+            description: messageError
+          };
+        } else {
+          var _data$data;
+          const message = (data === null || data === void 0 ? void 0 : data.message) || (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.Message) || data;
+          _data = {
+            description: message || getGlobal('unknownError')
+          };
+        }
+        setPopupDataState(_data);
+        popupRef.current.instance.show();
+        return false;
+      } else if (data) {
+        let rows = [];
+        if (Array.isArray(data)) {
+          rows = data;
+        } else {
+          rows = data && data.rows ? data.rows : dataSourceState;
+          const total = data && data.total ? data.total : data.length;
+          setTotalState(total);
+        }
+        setDataSourceState(isReset ? rows : dataSourceState.concat(rows));
+      }
+    };
+    setLoadingState(true);
+    action.loadData(params, callbackSave);
+  };
   const onLoadMoreHandler = e => {
     if (loadMoreTimer.current) {
       clearTimeout(loadMoreTimer.current);
@@ -653,12 +736,16 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         var _dropdownListRef$curr, _currentObjectDefault3;
         const length = ((_dropdownListRef$curr = dropdownListRef.current.children) === null || _dropdownListRef$curr === void 0 ? void 0 : _dropdownListRef$curr.length) - (((_currentObjectDefault3 = currentObjectDefault[unique]) === null || _currentObjectDefault3 === void 0 ? void 0 : _currentObjectDefault3.length) || 0);
         dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
-        !!onLoadMore && onLoadMore({
+        if (!!onLoadMore && typeof onLoadMore === 'boolean' && action !== null && action !== void 0 && action.loadData) {
+          filter.current.skip = length;
+          filter.current.limit = limit;
+          handleActionLoadData();
+        } else !!onLoadMore && onLoadMore({
           skip: length,
           limit: limit
         });
       }
-    });
+    }, 300);
   };
   const onPreventKeyDownHandler = e => {
     e.preventDefault();
@@ -691,6 +778,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       // }
       // return;
     }
+
+    if (action !== null && action !== void 0 && action.loadData && !!onLoadMore) {
+      filter.current.strSearch = e.target.value;
+      handleActionLoadData(true);
+    }
     // const value = e.target.value || e.target.textContent;
     // if (
     //     typeof renderSelectedItem === 'function' &&
@@ -712,7 +804,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (valueProp === undefined) {
         setValueMulti(value);
         setValueIntoInput(value);
-        setShowClear(clearAble && checkHasValue(value) && !disabled && !readOnly && !loading);
+        setShowClear(clearAble && checkHasValue(value) && !disabled && !readOnly && !loadingState);
       }
       !!onChange && onChange({
         value
@@ -831,7 +923,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     });
   };
   const onClear = e => {
-    if (disabled || readOnly || loading || !clearAble) return;
+    if (disabled || readOnly || loadingState || !clearAble) return;
     currentValue[unique] = multiple ? [] : '';
     if (multiple) {
       setValueMulti([]);
@@ -850,7 +942,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onInput === null || onInput === void 0 ? void 0 : onInput({
       ...(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current),
       target: {
-        value: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.value
+        value: ''
       }
     });
     !!onChange && onChange({
@@ -877,7 +969,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
       return;
     }
-    const length = dataSource.length;
+    const length = dataSourceState.length;
     const displayKey = typeof renderSelectedItem === 'string' ? renderSelectedItem : displayExpr;
     if (displayKey && Array.isArray(displayKey)) {
       displayExpr = displayExpr.join(' - ');
@@ -894,8 +986,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       valueArr.forEach(v => {
         var _currentObjectDefault4;
         for (let i = 0; i < length; i++) {
-          if (typeof dataSource[i] === 'object' && dataSource[i][valueExpr] === v || dataSource[i] === v) {
-            setMultipleValueHandler(dataSource[i], v, keyArr, i);
+          if (typeof dataSourceState[i] === 'object' && dataSourceState[i][valueExpr] === v || dataSourceState[i] === v) {
+            setMultipleValueHandler(dataSourceState[i], v, keyArr, i);
             return;
           }
         }
@@ -910,8 +1002,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       var _currentObjectDefault5;
       currentValue[unique] = source;
       for (let i = 0; i < length; i++) {
-        if (dataSource[i][valueExpr] === source || dataSource[i] === source) {
-          setSingleValueHandler(dataSource[i], keyArr);
+        if (dataSourceState[i][valueExpr] === source || dataSourceState[i] === source) {
+          setSingleValueHandler(dataSourceState[i], keyArr);
           return;
         }
       }
@@ -961,11 +1053,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, content);
     if (typeof renderSelectedItem === 'function') {
       inputRef.current.innerHTML = '';
-      const item = renderContent(renderSelectedItem({
+      const item = renderSelectedItem({
         data
-      }));
+      });
       const el = document.createElement('div');
       el.style.display = 'flex';
+      el.style.width = '100%';
       el.style.minHeight = '24px';
       if (!multilineSelectedItem) el.style.maxHeight = '24px';
       ReactDOM.render(item, inputRef.current.appendChild(el));
@@ -1017,8 +1110,17 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
   useEffect(() => {
-    setShowClear(clearAble && checkHasValue(valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) && !disabled && !readOnly && !loading);
-  }, [clearAble, valueProp, defaultValue, disabled, readOnly, loading]);
+    setLoadingState(loading);
+  }, [loading]);
+  useEffect(() => {
+    setTotalState(total);
+  }, [total]);
+  useEffect(() => {
+    setDataSourceState(dataSource);
+  }, [dataSource]);
+  useEffect(() => {
+    setShowClear(clearAble && checkHasValue(valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) && !disabled && !readOnly && !loadingState);
+  }, [clearAble, valueProp, defaultValue, disabled, readOnly, loadingState]);
   useEffect(() => {
     if (valueObjectDefault) {
       if (Array.isArray(valueObjectDefault)) {
@@ -1037,28 +1139,34 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allValue[unique] = [];
     if (defaultValue !== undefined && JSON.stringify(defaultValue) !== '[]') {
       setValueIntoInput(defaultValue);
-      setShowClear(clearAble && checkHasValue(defaultValue) && !disabled && !readOnly && !loading);
+      setShowClear(clearAble && checkHasValue(defaultValue) && !disabled && !readOnly && !loadingState);
     }
+    if (action !== null && action !== void 0 && action.loadData) handleActionLoadData();
     return () => {
       allValue[unique] = null;
       closeDropdown();
     };
   }, []);
-  useEffect(() => {
-    if (searchDelayTime) {
-      var _searchDelayTime$matc, _searchDelayTime$matc2;
-      if (searchDelayTime === true) searchDelayTime = getGlobal('delayOnInput');
-      const units = {
-        m: 60000,
-        s: 1000,
-        ms: 1
-      };
-      timeout.current = typeof searchDelayTime === 'number' ? searchDelayTime : (((_searchDelayTime$matc = searchDelayTime.match(/[^a-z]+/i)) === null || _searchDelayTime$matc === void 0 ? void 0 : _searchDelayTime$matc[0]) || 1) * units[((_searchDelayTime$matc2 = searchDelayTime.match(/ms|s|m/i)) === null || _searchDelayTime$matc2 === void 0 ? void 0 : _searchDelayTime$matc2[0]) || 's'];
-      return () => {
-        timeout.current = null;
-      };
-    }
-  }, [searchDelayTime]);
+
+  // useEffect(() => {
+  //     if (searchDelayTime) {
+  //         if (searchDelayTime === true) searchDelayTime = getGlobal('delayOnInput');
+  //         const units = {
+  //             m: 60000,
+  //             s: 1000,
+  //             ms: 1,
+  //         };
+  //         timeout.current =
+  //             typeof searchDelayTime === 'number'
+  //                 ? searchDelayTime
+  //                 : (searchDelayTime.match(/[^a-z]+/i)?.[0] || 1) *
+  //                   units[searchDelayTime.match(/ms|s|m/i)?.[0] || 's'];
+  //         return () => {
+  //             timeout.current = null;
+  //         };
+  //     }
+  // }, [searchDelayTime]);
+
   useEffect(() => {
     if (allValue[unique][allValue[unique].length - 1] !== valueProp) {
       allValue[unique].push(valueProp);
@@ -1072,10 +1180,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, [valueProp]);
   useEffect(() => {
-    if (valueProp !== undefined && (!dropdownListRef.current || children || JSON.stringify(valueProp) !== JSON.stringify(currentValue[unique]))) {
+    if (
+    // valueProp !== undefined &&
+    !dropdownListRef.current || children || JSON.stringify(valueProp) !== JSON.stringify(currentValue[unique])) {
       setValueIntoInput(valueProp);
     }
-  }, [valueProp, dataSource]);
+  }, [valueProp, dataSourceState]);
   useEffect(() => {
     inputRef.current.readOnly = readOnly || inputProps.readOnly;
     if (!readOnly && !disabled) {
@@ -1118,9 +1228,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         inputRef.current.addEventListener('input', onChangeInput);
       }
       const length = (_dropdownListRef$curr2 = dropdownListRef.current) === null || _dropdownListRef$curr2 === void 0 ? void 0 : (_dropdownListRef$curr3 = _dropdownListRef$curr2.children) === null || _dropdownListRef$curr3 === void 0 ? void 0 : _dropdownListRef$curr3.length;
-      if (length < dataSource.length + ((_currentObjectDefault6 = currentObjectDefault[unique]) === null || _currentObjectDefault6 === void 0 ? void 0 : _currentObjectDefault6.length) && !isSearch[unique]) {
+      if (length < dataSourceState.length + ((_currentObjectDefault6 = currentObjectDefault[unique]) === null || _currentObjectDefault6 === void 0 ? void 0 : _currentObjectDefault6.length) && !isSearch[unique]) {
         loadMoreItemsDropdown(length);
-        !!onLoadMore && dataSource.length < total && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
+        !!onLoadMore && dataSourceState.length < totalState && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
       } else {
         isSearch[unique] = false;
       }
@@ -1136,7 +1246,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
       !!dropdownListRef.current && dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
     };
-  }, [dataSource]);
+  }, [dataSourceState]);
   useLayoutEffect(() => {
     if (ref.current) {
       const {
@@ -1158,7 +1268,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...labelProps
   }, label) : null, [label, required, disabled, labelProps]);
   const getData = () => {
-    let dataFilter = JSON.parse(JSON.stringify(dataSource));
+    let dataFilter = JSON.parse(JSON.stringify(dataSourceState));
     if (Array.isArray(valueObjectDefault)) {
       dataFilter = [...dataFilter, ...dataChosen.current, ...valueObjectDefault];
     } else if (typeof valueObjectDefault === 'object') {
@@ -1254,14 +1364,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: iconRef,
       css: _IconCSS,
       className: 'DGN-UI-Dropdown-Icon'
-    }, loading ? jsx(CircularProgress, {
+    }, loadingState ? jsx(CircularProgress, {
       size: 24
     }) : null, showClear ? jsx(ButtonIcon, {
       css: mgr([1]),
       viewType: 'ghost',
       name: 'Close',
       onClick: onClear
-    }) : null, !loading ? jsx(ButtonIcon, {
+    }) : null, !loadingState ? jsx(ButtonIcon, {
       key: openState,
       css: animation,
       viewType: 'ghost',
@@ -1269,7 +1379,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: setShowDropdown,
       disabled: disabled || readOnly
     }) : null));
-  }, [openState, showClear, textValue, valueMulti, clearAble, dataSource, disabled, displayExpr, inputProps, inputStyle, loading, multilineSelectedItem, multiple, onChange, placeholder, readOnly, renderSelectedItem, valueExpr, valueObjectDefault, viewType]);
+  }, [openState, showClear, textValue, valueMulti, loadingState, dataSourceState, clearAble, dataSource, disabled, displayExpr, inputProps, inputStyle, multilineSelectedItem, multiple, onChange, placeholder, readOnly, renderSelectedItem, valueExpr, valueObjectDefault, viewType]);
   const ErrorView = useMemo(() => {
     return error ? jsx(HelperText, {
       ...helperTextProps,
@@ -1286,15 +1396,19 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClose: closeDropdown
     }, showDropdown());
     // return openState ? createPortal(showDropdown(), document.body) : null;
-  }, [openState, popoverWidth, valueMulti, dataSource, loading, maximumSelectionLength, multilineSelectedItem, multiple, selectBox, txtSearch]);
+  }, [openState, popoverWidth, valueMulti, loadingState, dataSourceState, dataSource, maximumSelectionLength, multilineSelectedItem, multiple, selectBox, txtSearch]);
   /* End component */
 
   return jsx(Fragment, null, jsx("div", {
     ref: ref,
     css: _DropdownRootCSS,
     style: style,
-    className: classNames('DGN-UI-Dropdown', className, error && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly')
-  }, LabelView, InputView, ErrorView), DropdownView);
+    className: classNames('DGN-UI-Dropdown', className, error && 'error', loadingState && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly')
+  }, LabelView, InputView, ErrorView), DropdownView, jsx(Popup, {
+    ref: popupRef,
+    type: 'danger',
+    ...popupDataState
+  }));
 }));
 
 /* Start styled */
@@ -1618,6 +1732,9 @@ Dropdown.defaultProps = {
   viewType: 'underlined'
 };
 Dropdown.propTypes = {
+  action: PropTypes.shape({
+    loadData: PropTypes.func
+  }),
   /** If `true`, display input box search. */
   allowSearch: PropTypes.bool,
   /** The contents in Dropdown box (Exp: TreeView). */
@@ -1693,7 +1810,7 @@ Dropdown.propTypes = {
   /** Callback fired when key down input */
   onKeyDown: PropTypes.func,
   /** Callback fired when scroll near the end. */
-  onLoadMore: PropTypes.func,
+  onLoadMore: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   /** The short hint displayed in the input before the user select a value. */
   placeholder: PropTypes.string,
   /** If `true`, the component is read-only. */