diginet-core-ui 1.3.99-beta.3 → 1.4.0

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

@@ -1308,7 +1308,6 @@ Attachment.defaultProps = {
     fileType: getGlobal(['errorDefault', 'fileType']),
     existingFile: getGlobal(['errorDefault', 'existingFile'])
   },
-  viewType: 'detail',
   ...getGlobal(['components', 'attachment', 'defaultProps'])
 };
 Attachment.propTypes = {

package/components/form-control/calendar/function.js

@@ -5,7 +5,7 @@ import { Button, ButtonIcon, Typography } from "../..";
 import { getGlobal } from "../../../global";
 import locale from "../../../locale";
 import { render } from 'react-dom';
-import { bgColor, border, borderRadius, boxBorder, cursorDefault, cursorPointer, displayFlex, flexCol, flexRow, gap, inset, itemsCenter, justifyBetween, mg, mgt, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, parseWidthHeight, pd, pointerEventsNone, positionAbsolute, positionRelative, textCenter, textColor, userSelectNone } from "../../../styles/general";
+import { bgColor, border, borderRadius, boxBorder, cursorDefault, cursorPointer, displayFlex, flexCol, flexRow, inset, itemsCenter, justifyBetween, mg, mgt, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, parseWidthHeight, pd, pointerEventsNone, positionAbsolute, positionRelative, textCenter, textColor, userSelectNone } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { date as moment } from "../../../utils";
 const {
@@ -41,33 +41,23 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
         ${itemsCenter};
         ${parseMaxWidth(400)};
         ${mg([4, 4, 0])};
-        ${gap(8)};
         .${unique.navigator.around} {
             ${displayFlex};
             ${flexRow};
         }
         .${unique.navigator.center} {
-            ${displayFlex};
             ${parseWidth('100%')};
-            button {
-                &:hover {
-                    ${borderRadius(20)};
-                    ${bgColor('fill/hover')};
-                }
-                &:active {
-                    ${bgColor('fill/pressed')};
-                }
-            }
         }
     }
     .${unique.table.container} {
         ${displayFlex};
         ${flexRow};
-        ${mg([2, 0, 4])};
+        ${mg([2, 0])};
     }
     .${unique.table.table} {
         ${mg([0, 4])};
-        ${parseWidth('100%')};
+        ${pd(0)};
+        ${parseWidth('calc(100% - 32px)')};
         border-collapse: separate;
         table-layout: fixed;
         .${unique.table.data} {
@@ -78,15 +68,15 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
                 ${userSelectNone};
                 ${textColor('text/main')};
                 &:nth-of-type(7n - 1) {
-                    ${textColor('semantic/info')};
+                    ${textColor('info8')};
                 }
                 &:nth-of-type(7n) {
-                    ${textColor('semantic/danger')};
+                    ${textColor('danger8')};
                 }
                 &.next_month,
                 &.previous_month,
                 &.${unique.day.limit} {
-                    ${textColor('system/disabled')};
+                    opacity: 0.25;
                 }
                 &.${unique.day.limit} {
                     ${pointerEventsNone};
@@ -152,10 +142,10 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
             ${parseHeight(24)};
             ${textColor('text/normal_label')};
             &:nth-of-type(6) {
-                ${textColor('semantic/info')};
+                ${textColor('info8')};
             }
             &:nth-of-type(7) {
-                ${textColor('semantic/danger')};
+                ${textColor('danger8')};
             }
         }
     }
@@ -217,7 +207,7 @@ const typographyProps = className => {
       transition: 'background-color 150ms linear',
       width: 24
     },
-    type: 'p2'
+    type: 'h6'
   };
 };
 /**
@@ -230,7 +220,26 @@ const buttonIconProps = className => {
   return {
     className,
     circular: true,
-    viewType: 'ghost'
+    viewType: 'text',
+    size: 'small'
+  };
+};
+/**
+ *
+ * @description return props of the button icon.
+ * @param {Function} fn
+ * @returns {Object} props of the button text
+ */
+const buttonTextProps = fn => {
+  return {
+    onClick: fn,
+    color: 'primary',
+    size: 'small',
+    style: {
+      borderRadius: 20,
+      textTransform: 'initial',
+      width: '100%'
+    }
   };
 };
 
@@ -455,7 +464,7 @@ const renderHeader = className => {
       className: className.table.header
     }, jsx(Typography, {
       color: 'inherit',
-      type: 'p2'
+      type: 'h6'
     }, weekdays[i])));
   }
   return jsx("thead", null, jsx("tr", {
@@ -490,15 +499,11 @@ const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn,
 })), jsx("div", {
   className: className.navigator.center
 }, jsx(Button, {
-  css: [borderRadius(20), parseWidth('100%'), pd(0)],
-  colorHover: 'fill/hover',
-  size: 'tiny',
-  onClick: fn
+  ...buttonTextProps(fn)
 }, jsx(Typography, {
   color: 'primary',
   type: 'h3',
-  ref: refs.content,
-  format: ['lowercase']
+  ref: refs.content
 }))), jsx("div", {
   className: className.navigator.around
 }, jsx(ButtonIcon, {

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

@@ -1,10 +1,11 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
+
 import { jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { date as moment } from "../../../utils";
-import { generateCalendarCSS, isAfterLimit, isBeforeLimit, isValidDate, onUpdateCalendar, renderHeader, renderNavigator } from "./function";
+import { isAfterLimit, isBeforeLimit, onUpdateCalendar, renderHeader, renderNavigator, isValidDate, generateCalendarCSS } from "./function";
 const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   actions,
   className,
@@ -16,7 +17,6 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   value,
   ...props
 }, reference) => {
-  if (!reference) reference = useRef(null);
   // const [id] = useState(randomString(6, { allowSymbol: false }));
   const unique = {
     container: 'DGN-UI-Calendar',
@@ -49,6 +49,7 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const tableRef = useRef(null);
   const activeValue = useRef(null);
   const navigatorValue = useRef(null);
+  useImperativeHandle(reference, () => ref.current);
   const [, setActiveValue] = useState(Date.now());
   const [, setNavigatorValue] = useState(Date.now());
   const navigatorRefs = {
@@ -60,14 +61,6 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const firstDayOfMax = new Date(new Date(max).setDate(1)).setHours(0, 0, 0, 0);
   const firstDayOfMin = new Date(new Date(min).setDate(1)).setHours(0, 0, 0, 0);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {}; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
   /**
    * END REFERENCE
    */

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

@@ -515,7 +515,7 @@ const PickerCSS = {
         ${borderRadius4px};
         ${bgColor('system.white')};
         ${parseWidthHeight(width, 'max-content')};
-        ${parseMinWidth(window.innerWidth <= 599 ? 280 : 400)};
+        ${parseMinWidth(window.innerWidth <= 599 ? 280 : 314)};
         ${parseMaxWidth(400)};
         ${scale(0)};
         ${left(positionLeft)};
@@ -543,7 +543,6 @@ 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/date-range-picker/index.js

@@ -332,10 +332,12 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const updateFromTo = (times = [new Date(), new Date()]) => {
     const timeFr = new Date(times[0]);
     const timeTo = new Date(times[1]);
-    const isSameMonth = timeFr.getMonth() === timeTo.getMonth();
     const from = new Date(timeFr.getFullYear(), timeFr.getMonth());
-    // const to = new Date(timeTo.getFullYear(), timeTo.getMonth());
-    const to = isSameMonth ? new Date(timeTo.getFullYear(), +moment(timeTo).diff(timeFr, 'months') === 0 ? timeTo.getMonth() + 1 : timeTo.getMonth()) : new Date(timeTo.getFullYear(), timeTo.getMonth());
+    const to = new Date(timeTo.getFullYear(), timeTo.getMonth());
+    // const to = new Date(
+    //     timeTo.getFullYear(),
+    //     +moment(timeTo).diff(timeFr, 'months') === 0 ? timeTo.getMonth() + 1 : timeTo.getMonth()
+    // );
     updateValueFr(from);
     updateValueTo(to);
   };

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, Popup, TreeView, Typography } from "../..";
+import { Avatar, ButtonIcon, Checkbox, Chip, CircularProgress, HelperText, InputBase, Label, TreeView, Typography } from "../..";
 import Popover from "../../popover";
 import { getGlobal } from "../../../global";
 import PropTypes from 'prop-types';
@@ -83,7 +83,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   searchExpr,
   searchMode,
   selectBox,
-  skip,
   style,
   subText,
   total,
@@ -111,11 +110,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   // 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
@@ -125,14 +119,6 @@ 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
@@ -145,7 +131,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(loadingState);
+  const _DropdownListCSS = DropdownListCSS(loading);
   const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
   const _DropdownRootCSS = DropdownRootCSS(_DropdownFormCSS.name, _DropdownInputCSS.name);
 
@@ -162,7 +148,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     !!blur && inputRef.current.blur();
   };
   const onClickInput = e => {
-    if (disabled || readOnly || loadingState) return;
+    if (disabled || readOnly || loading) 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);
@@ -195,7 +181,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'DGN-Dropdown-List',
       onKeyDown: moveOnItem,
       tabIndex: -1
-    }, dataSourceState !== null && dataSourceState !== void 0 && dataSourceState.length ? children : EmptyDataText) : itemMode === 'normal' ? mapDropdown() : mapTreeView();
+    }, dataSource !== null && dataSource !== void 0 && dataSource.length ? children : EmptyDataText) : itemMode === 'normal' ? mapDropdown() : mapTreeView();
     // const { innerHeight } = window;
     // const { top, left, height, width } = formRef.current.getBoundingClientRect();
 
@@ -234,13 +220,12 @@ 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), loadingState ? jsx("div", {
+    }, dropdown), loading ? jsx("div", {
       css: LoadingProgressCSS,
       className: 'DGN-Dropdown-Loading-Progress'
     }, jsx(CircularProgress, {
@@ -254,7 +239,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       window.addEventListener('resize', customizeWidthDropdown);
       // document.addEventListener('wheel', onWheelHandler);
       // document.addEventListener('mousedown', onClickOutsideOfInput);
-      if (onLoadMore && dataSourceState.length < totalState) {
+      if (onLoadMore && dataSource.length < total) {
         dropdownListRef.current && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
       }
     }, 10);
@@ -370,7 +355,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const mapDropdown = () => {
     var _dataSourceUsable, _currentObjectDefault;
     const items = [];
-    let dataSourceUsable = [...dataSourceState];
+    let dataSourceUsable = [...dataSource];
 
     // search dataSource dựa trên txtSearch
     dataSourceUsable = (_dataSourceUsable = dataSourceUsable) === null || _dataSourceUsable === void 0 ? void 0 : _dataSourceUsable.filter(i => {
@@ -492,8 +477,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'DGN-Dropdown-List',
       onKeyDown: moveOnItem,
       tabIndex: -1
-    }, dataSourceState !== null && dataSourceState !== void 0 && dataSourceState.length ? jsx(TreeView, {
-      dataSource: dataSourceState,
+    }, dataSource !== null && dataSource !== void 0 && dataSource.length ? jsx(TreeView, {
+      dataSource: dataSource,
       displayExpr: displayExpr,
       valueExpr: valueExpr,
       multiple: multiple,
@@ -515,7 +500,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 = [...dataSourceState];
+    const dataSourceUsable = [...dataSource];
     // 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) {
@@ -663,65 +648,6 @@ 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);
@@ -736,16 +662,12 @@ 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);
-        if (!!onLoadMore && typeof onLoadMore === 'boolean' && action !== null && action !== void 0 && action.loadData) {
-          filter.current.skip = length;
-          filter.current.limit = limit;
-          handleActionLoadData();
-        } else !!onLoadMore && onLoadMore({
+        !!onLoadMore && onLoadMore({
           skip: length,
           limit: limit
         });
       }
-    }, 300);
+    });
   };
   const onPreventKeyDownHandler = e => {
     e.preventDefault();
@@ -778,11 +700,6 @@ 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' &&
@@ -804,7 +721,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (valueProp === undefined) {
         setValueMulti(value);
         setValueIntoInput(value);
-        setShowClear(clearAble && checkHasValue(value) && !disabled && !readOnly && !loadingState);
+        setShowClear(clearAble && checkHasValue(value) && !disabled && !readOnly && !loading);
       }
       !!onChange && onChange({
         value
@@ -923,7 +840,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     });
   };
   const onClear = e => {
-    if (disabled || readOnly || loadingState || !clearAble) return;
+    if (disabled || readOnly || loading || !clearAble) return;
     currentValue[unique] = multiple ? [] : '';
     if (multiple) {
       setValueMulti([]);
@@ -969,7 +886,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
       return;
     }
-    const length = dataSourceState.length;
+    const length = dataSource.length;
     const displayKey = typeof renderSelectedItem === 'string' ? renderSelectedItem : displayExpr;
     if (displayKey && Array.isArray(displayKey)) {
       displayExpr = displayExpr.join(' - ');
@@ -986,8 +903,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       valueArr.forEach(v => {
         var _currentObjectDefault4;
         for (let i = 0; i < length; i++) {
-          if (typeof dataSourceState[i] === 'object' && dataSourceState[i][valueExpr] === v || dataSourceState[i] === v) {
-            setMultipleValueHandler(dataSourceState[i], v, keyArr, i);
+          if (typeof dataSource[i] === 'object' && dataSource[i][valueExpr] === v || dataSource[i] === v) {
+            setMultipleValueHandler(dataSource[i], v, keyArr, i);
             return;
           }
         }
@@ -1002,8 +919,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       var _currentObjectDefault5;
       currentValue[unique] = source;
       for (let i = 0; i < length; i++) {
-        if (dataSourceState[i][valueExpr] === source || dataSourceState[i] === source) {
-          setSingleValueHandler(dataSourceState[i], keyArr);
+        if (dataSource[i][valueExpr] === source || dataSource[i] === source) {
+          setSingleValueHandler(dataSource[i], keyArr);
           return;
         }
       }
@@ -1110,17 +1027,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
   useEffect(() => {
-    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]);
+    setShowClear(clearAble && checkHasValue(valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) && !disabled && !readOnly && !loading);
+  }, [clearAble, valueProp, defaultValue, disabled, readOnly, loading]);
   useEffect(() => {
     if (valueObjectDefault) {
       if (Array.isArray(valueObjectDefault)) {
@@ -1139,9 +1047,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allValue[unique] = [];
     if (defaultValue !== undefined && JSON.stringify(defaultValue) !== '[]') {
       setValueIntoInput(defaultValue);
-      setShowClear(clearAble && checkHasValue(defaultValue) && !disabled && !readOnly && !loadingState);
+      setShowClear(clearAble && checkHasValue(defaultValue) && !disabled && !readOnly && !loading);
     }
-    if (action !== null && action !== void 0 && action.loadData) handleActionLoadData();
     return () => {
       allValue[unique] = null;
       closeDropdown();
@@ -1180,12 +1087,10 @@ 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, dataSourceState]);
+  }, [valueProp, dataSource]);
   useEffect(() => {
     inputRef.current.readOnly = readOnly || inputProps.readOnly;
     if (!readOnly && !disabled) {
@@ -1228,9 +1133,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 < dataSourceState.length + ((_currentObjectDefault6 = currentObjectDefault[unique]) === null || _currentObjectDefault6 === void 0 ? void 0 : _currentObjectDefault6.length) && !isSearch[unique]) {
+      if (length < dataSource.length + ((_currentObjectDefault6 = currentObjectDefault[unique]) === null || _currentObjectDefault6 === void 0 ? void 0 : _currentObjectDefault6.length) && !isSearch[unique]) {
         loadMoreItemsDropdown(length);
-        !!onLoadMore && dataSourceState.length < totalState && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
+        !!onLoadMore && dataSource.length < total && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
       } else {
         isSearch[unique] = false;
       }
@@ -1246,7 +1151,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
       !!dropdownListRef.current && dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
     };
-  }, [dataSourceState]);
+  }, [dataSource]);
   useLayoutEffect(() => {
     if (ref.current) {
       const {
@@ -1268,7 +1173,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...labelProps
   }, label) : null, [label, required, disabled, labelProps]);
   const getData = () => {
-    let dataFilter = JSON.parse(JSON.stringify(dataSourceState));
+    let dataFilter = JSON.parse(JSON.stringify(dataSource));
     if (Array.isArray(valueObjectDefault)) {
       dataFilter = [...dataFilter, ...dataChosen.current, ...valueObjectDefault];
     } else if (typeof valueObjectDefault === 'object') {
@@ -1364,14 +1269,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: iconRef,
       css: _IconCSS,
       className: 'DGN-UI-Dropdown-Icon'
-    }, loadingState ? jsx(CircularProgress, {
+    }, loading ? jsx(CircularProgress, {
       size: 24
     }) : null, showClear ? jsx(ButtonIcon, {
       css: mgr([1]),
       viewType: 'ghost',
       name: 'Close',
       onClick: onClear
-    }) : null, !loadingState ? jsx(ButtonIcon, {
+    }) : null, !loading ? jsx(ButtonIcon, {
       key: openState,
       css: animation,
       viewType: 'ghost',
@@ -1379,7 +1284,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: setShowDropdown,
       disabled: disabled || readOnly
     }) : null));
-  }, [openState, showClear, textValue, valueMulti, loadingState, dataSourceState, clearAble, dataSource, disabled, displayExpr, inputProps, inputStyle, multilineSelectedItem, multiple, onChange, placeholder, readOnly, renderSelectedItem, valueExpr, valueObjectDefault, viewType]);
+  }, [openState, showClear, textValue, valueMulti, clearAble, dataSource, disabled, displayExpr, inputProps, inputStyle, loading, multilineSelectedItem, multiple, onChange, placeholder, readOnly, renderSelectedItem, valueExpr, valueObjectDefault, viewType]);
   const ErrorView = useMemo(() => {
     return error ? jsx(HelperText, {
       ...helperTextProps,
@@ -1396,19 +1301,15 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClose: closeDropdown
     }, showDropdown());
     // return openState ? createPortal(showDropdown(), document.body) : null;
-  }, [openState, popoverWidth, valueMulti, loadingState, dataSourceState, dataSource, maximumSelectionLength, multilineSelectedItem, multiple, selectBox, txtSearch]);
+  }, [openState, popoverWidth, valueMulti, dataSource, loading, 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', loadingState && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly')
-  }, LabelView, InputView, ErrorView), DropdownView, jsx(Popup, {
-    ref: popupRef,
-    type: 'danger',
-    ...popupDataState
-  }));
+    className: classNames('DGN-UI-Dropdown', className, error && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly')
+  }, LabelView, InputView, ErrorView), DropdownView);
 }));
 
 /* Start styled */
@@ -1732,9 +1633,6 @@ 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). */
@@ -1810,7 +1708,7 @@ Dropdown.propTypes = {
   /** Callback fired when key down input */
   onKeyDown: PropTypes.func,
   /** Callback fired when scroll near the end. */
-  onLoadMore: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+  onLoadMore: PropTypes.func,
   /** The short hint displayed in the input before the user select a value. */
   placeholder: PropTypes.string,
   /** If `true`, the component is read-only. */