diginet-core-ui 1.4.9 → 1.4.10

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

@@ -18,7 +18,7 @@ const {
 const
   // timing = {},
   currentValue = {},
-  currentObjectDefault = {},
+  // currentObjectDefault = {},
   isSearch = {},
   allValue = {};
 const separatorPattern = /\{\w+\}/g;
@@ -43,6 +43,17 @@ const convertSearchDelayTime = searchDelayTime => {
   };
   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 uniqBy = (arr, iteratee) => {
+  const seen = new Set();
+  return arr.filter(item => {
+    const val = iteratee(item);
+    if (seen.has(val)) {
+      return false;
+    }
+    seen.add(val);
+    return true;
+  });
+};
 const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   allowSearch,
@@ -133,6 +144,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     substitle: '',
     description: ''
   });
+  const [vlObjDefaultState, setVlObjDefaultState] = useState([]);
   let valueTemp = valueProp || defaultValue || [];
 
   // only mode multi
@@ -144,7 +156,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const _InputCSS = InputCSS(multiple, typeof renderSelectedItem === 'function');
   const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, disabled, readOnly, multilineSelectedItem);
   const _IconCSS = IconCSS(viewType);
-  const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, disabled, placeholder, _DropdownInputCSS.name);
+  const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, disabled, readOnly, placeholder, _DropdownInputCSS.name);
   const _DropdownListCSS = DropdownListCSS(loadingState);
   const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
   const _DropdownRootCSS = DropdownRootCSS(_DropdownFormCSS.name, _DropdownInputCSS.name);
@@ -310,7 +322,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
     // document.documentElement.style.overflow = 'auto';
-    setTxtSearch('');
+    // setTxtSearch('');
     onClosed === null || onClosed === void 0 ? void 0 : onClosed();
   };
 
@@ -360,7 +372,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       // convert {id} - {name} to {<data[id]>} - {<data[name]>}
       if (!mask && regexBetween.test(displayExpr)) {
         var _displayExpr;
-        mask = (_displayExpr = displayExpr) === null || _displayExpr === void 0 ? void 0 : _displayExpr.replace(regexBetween, _ => data[_]);
+        mask = (_displayExpr = displayExpr) === null || _displayExpr === void 0 ? void 0 : _displayExpr.replace(regexBetween, _ => (data === null || data === void 0 ? void 0 : data[_]) || '');
       } else if (!mask) {
         mask = typeof data !== 'object' ? data : '';
       }
@@ -369,7 +381,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return text;
   };
   const mapDropdown = () => {
-    var _currentObjectDefault;
+    var _dataSourceUsable2;
     const items = [];
     let dataSourceUsable = [...dataSourceState];
 
@@ -386,22 +398,23 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       });
     }
-    if (currentObjectDefault[unique] && (_currentObjectDefault = currentObjectDefault[unique]) !== null && _currentObjectDefault !== void 0 && _currentObjectDefault.length) {
-      const length = currentObjectDefault[unique].length;
+    if (vlObjDefaultState && vlObjDefaultState !== null && vlObjDefaultState !== void 0 && vlObjDefaultState.length) {
+      const length = vlObjDefaultState === null || vlObjDefaultState === void 0 ? void 0 : vlObjDefaultState.length;
       let existItemQuantity = 0;
       for (let index = length - 1; index >= 0; index--) {
-        if ((currentObjectDefault[unique][index][valueExpr] || currentObjectDefault[unique][index][valueExpr] === 0) && !dataSourceUsable.some(data => data[valueExpr] === currentObjectDefault[unique][index][valueExpr])) {
-          dataSourceUsable.unshift(currentObjectDefault[unique][index]);
+        if ((vlObjDefaultState[index][valueExpr] || vlObjDefaultState[index][valueExpr] === 0) && !dataSourceUsable.some(data => data[valueExpr] === vlObjDefaultState[index][valueExpr])) {
+          dataSourceUsable.unshift(vlObjDefaultState[index]);
         } else {
           // Nếu số lượng phần tử của valueObjectDefault tồn tại trong dataSource nhiều hơn hoặc bằng limit thì không remove nữa
           if (++existItemQuantity > limit) {
             continue;
           }
-          currentObjectDefault[unique].splice(index, 1);
+          // currentObjectDefault[unique].splice(index, 1);
         }
       }
     }
-    const length = dataSourceUsable.length;
+
+    const length = (_dataSourceUsable2 = dataSourceUsable) === null || _dataSourceUsable2 === void 0 ? void 0 : _dataSourceUsable2.length;
     for (let index = 0; index < length; index++) {
       const data = dataSourceUsable[index];
       if (!data) continue;
@@ -519,20 +532,20 @@ 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;
+    var _displayExpr2;
     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) {
-      const length = currentObjectDefault[unique].length;
+    if (onLoadMore && vlObjDefaultState !== null && vlObjDefaultState !== void 0 && vlObjDefaultState.length) {
+      const length = vlObjDefaultState.length;
       for (let index = length - 1; index >= 0; index--) {
-        if (!dataSourceUsable.some(data => data[valueExpr] === currentObjectDefault[unique][index][valueExpr])) {
+        if (!dataSourceUsable.some(data => data[valueExpr] === vlObjDefaultState[index][valueExpr])) {
           notExistItem++;
-          dataSourceUsable.unshift(currentObjectDefault[unique][index]);
+          dataSourceUsable.unshift(vlObjDefaultState[index]);
         }
       }
     }
-    const length = dataSourceUsable.length;
+    const length = dataSourceUsable === null || dataSourceUsable === void 0 ? void 0 : dataSourceUsable.length;
     let num = 0;
     if (displayExpr && Array.isArray(displayExpr)) {
       displayExpr = displayExpr.join(' - ');
@@ -543,8 +556,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         ...dataSourceUsable[i]
       };
       // Nếu đối tượng đã được hiển thị ở trên rồi thì không hiển thị ra nữa
-      if (onLoadMore && i > notExistItem && currentObjectDefault[unique].some(valueObject => valueObject[valueExpr] === data[valueExpr])) continue;
-      let displayText = typeof data === 'object' ? keyArr ? renderData(data, keyArr) : data[displayExpr] || data[valueExpr] : data;
+      if (onLoadMore && i > notExistItem && vlObjDefaultState.some(valueObject => valueObject[valueExpr] === data[valueExpr])) continue;
+      let displayText = typeof data === 'object' ? keyArr ? displayValue(data) : data[displayExpr] || data[valueExpr] : data;
       if (pattern && !new RegExp(pattern).test(displayText.normalize())) continue;
       const value = typeof data === 'object' ? data[valueExpr] : data;
       const icon = getIconFromData(data);
@@ -599,18 +612,24 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   };
-  const renderData = (data, keyArr) => {
-    const pattern = keyArr.join('|').replace(/([{}])/g, '\\$1');
-    const separatorArr = displayExpr.split(new RegExp(pattern));
-    let str = '';
-    let i = 0;
-    for (i; i < keyArr.length; i++) {
-      str += separatorArr[i] + (data[keyArr[i].replace(/\W/g, '')] !== undefined ? data[keyArr[i].replace(/\W/g, '')] : keyArr[i]);
-    }
-    return str + separatorArr[i];
-  };
+
+  // const renderData = (data, keyArr) => {
+  //     const pattern = keyArr.join('|').replace(/([{}])/g, '\\$1');
+  //     const separatorArr = displayExpr.split(new RegExp(pattern));
+  //     let str = '';
+  //     let i = 0;
+  //     for (i; i < keyArr.length; i++) {
+  //         str +=
+  //             separatorArr[i] +
+  //             (data[keyArr[i].replace(/\W/g, '')] !== undefined
+  //                 ? data[keyArr[i].replace(/\W/g, '')]
+  //                 : keyArr[i]);
+  //     }
+  //     return str + separatorArr[i];
+  // };
+
   const getIconFromData = (data, insideChip = false) => {
-    if (!iconExpr || iconExpr === 'none') return null;
+    if (!data || !iconExpr || iconExpr === 'none') return null;
     let _src;
     if (typeof iconExpr === 'string') _src = data[iconExpr];else {
       let prefix = iconExpr.prefix || '';
@@ -718,7 +737,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           rows = data;
         } else {
           rows = data && data.rows ? data.rows : dataSourceState;
-          const total = data && data.total ? data.total : data.length;
+          const total = data && data.total ? data.total : data === null || data === void 0 ? void 0 : data.length;
           setTotalState(total);
         }
         setDataSourceState(isReset ? rows : dataSourceState.concat(rows));
@@ -738,8 +757,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         offsetHeight
       } = e.target;
       if (scrollHeight === Math.ceil(scrollTop) + offsetHeight && dropdownListRef.current) {
-        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);
+        var _dropdownListRef$curr;
+        const length = ((_dropdownListRef$curr = dropdownListRef.current.children) === null || _dropdownListRef$curr === void 0 ? void 0 : _dropdownListRef$curr.length) - ((vlObjDefaultState === null || vlObjDefaultState === void 0 ? void 0 : vlObjDefaultState.length) || 0);
         dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
         if (!!onLoadMore && typeof onLoadMore === 'boolean' && action !== null && action !== void 0 && action.loadData) {
           filter.current.skip = length;
@@ -955,8 +974,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     });
   };
   const setPreviousValue = () => {
+    var _allValue$unique;
     allValue[unique].pop();
-    setValueIntoInput(allValue[unique][allValue[unique].length - 1]);
+    setValueIntoInput(allValue[unique][((_allValue$unique = allValue[unique]) === null || _allValue$unique === void 0 ? void 0 : _allValue$unique.length) - 1]);
   };
   const setValueIntoInput = source => {
     if (!source && source !== 0) {
@@ -973,10 +993,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         //     inputRef.current.value = '';
         // }
         currentValue[unique] = '';
+        setValueSingle('');
       }
       return;
     }
-    const length = dataSourceState.length;
+    const length = dataSourceState === null || dataSourceState === void 0 ? void 0 : dataSourceState.length;
     const displayKey = typeof renderSelectedItem === 'string' ? renderSelectedItem : displayExpr;
     if (displayKey && Array.isArray(displayKey)) {
       displayExpr = displayExpr.join(' - ');
@@ -991,7 +1012,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       currentValue[unique] = [];
       // inputRef.current.innerHTML = '';
       valueArr.forEach(v => {
-        var _currentObjectDefault4;
         for (let i = 0; i < length; i++) {
           if (!dataSourceState[i]) continue;
           if (typeof dataSourceState[i] === 'object' && dataSourceState[i][valueExpr] === v || dataSourceState[i] === v) {
@@ -999,15 +1019,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             return;
           }
         }
-        if ((_currentObjectDefault4 = currentObjectDefault[unique]) !== null && _currentObjectDefault4 !== void 0 && _currentObjectDefault4.length) {
-          const itemOfValue = currentObjectDefault[unique].find(valueObject => valueObject[valueExpr] === v || valueObject === v);
+        if (vlObjDefaultState !== null && vlObjDefaultState !== void 0 && vlObjDefaultState.length) {
+          const itemOfValue = vlObjDefaultState.find(valueObject => valueObject[valueExpr] === v || valueObject === v);
           if (itemOfValue) {
             setMultipleValueHandler(itemOfValue, v, keyArr);
           }
         }
       });
     } else {
-      var _currentObjectDefault5;
       currentValue[unique] = source;
       for (let i = 0; i < length; i++) {
         if (!dataSourceState[i]) continue;
@@ -1016,8 +1035,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           return;
         }
       }
-      if ((_currentObjectDefault5 = currentObjectDefault[unique]) !== null && _currentObjectDefault5 !== void 0 && _currentObjectDefault5.length) {
-        const itemOfValue = currentObjectDefault[unique].find(valueObject => valueObject[valueExpr] === source || valueObject === source);
+      if (vlObjDefaultState !== null && vlObjDefaultState !== void 0 && vlObjDefaultState.length) {
+        const itemOfValue = vlObjDefaultState.find(valueObject => valueObject[valueExpr] === source || valueObject === source);
         if (itemOfValue) {
           setSingleValueHandler(itemOfValue, keyArr);
           return;
@@ -1054,7 +1073,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentValue[unique].push(value);
   };
   const setSingleValueHandler = (data, keyArr) => {
-    const text = keyArr ? renderData(data, keyArr) : typeof renderSelectedItem === 'string' ? data[renderSelectedItem] : data[displayExpr] || data[valueExpr] || data;
+    const text = keyArr ? displayValue(data) : typeof renderSelectedItem === 'string' ? data[renderSelectedItem] : data[displayExpr] || data[valueExpr] || data;
     const renderContent = content => jsx(Typography, {
       type: 'p1',
       lineClamp: multilineSelectedItem ? undefined : 1,
@@ -1104,7 +1123,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClear,
       setPreviousValue,
       setValue: value => {
-        if (allValue[unique][allValue[unique].length - 1] !== value) {
+        var _allValue$unique2;
+        if (allValue[unique][((_allValue$unique2 = allValue[unique]) === null || _allValue$unique2 === void 0 ? void 0 : _allValue$unique2.length) - 1] !== value) {
           allValue[unique].push(value);
         }
         setValueIntoInput(value);
@@ -1118,7 +1138,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.onClear = onClear;
     currentRef.setPreviousValue = setPreviousValue;
     currentRef.setValue = value => {
-      if (allValue[unique][allValue[unique].length - 1] !== value) {
+      var _allValue$unique3;
+      if (allValue[unique][((_allValue$unique3 = allValue[unique]) === null || _allValue$unique3 === void 0 ? void 0 : _allValue$unique3.length) - 1] !== value) {
         allValue[unique].push(value);
       }
       setValueIntoInput(value);
@@ -1139,19 +1160,27 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setShowClear(clearAble && checkHasValue(valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) && !disabled && !readOnly && !loadingState);
   }, [clearAble, valueProp, defaultValue, disabled, readOnly, loadingState]);
   useEffect(() => {
+    if (multiple) {
+      if (valueMulti !== null && valueMulti !== void 0 && valueMulti.length) {
+        const dataFilter = getData();
+        dataChosen.current = [...dataFilter].filter(i => [...valueMulti].includes(i === null || i === void 0 ? void 0 : i[valueExpr]));
+      } else dataChosen.current = [];
+    }
     if (valueObjectDefault) {
       if (Array.isArray(valueObjectDefault)) {
-        currentObjectDefault[unique] = [...valueObjectDefault];
+        // currentObjectDefault[unique] = [...valueObjectDefault];
+        setVlObjDefaultState([...dataChosen.current, ...valueObjectDefault]);
       } else if (typeof valueObjectDefault === 'object') {
-        currentObjectDefault[unique] = Object.keys(valueObjectDefault).length !== 0 ? [valueObjectDefault] : [];
+        var _Object$keys;
+        // currentObjectDefault[unique] =
+        //     Object.keys(valueObjectDefault).length !== 0 ? [valueObjectDefault] : [];
+        setVlObjDefaultState(((_Object$keys = Object.keys(valueObjectDefault)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) !== 0 ? [...dataChosen.current, valueObjectDefault] : [...dataChosen.current]);
       }
     } else {
-      currentObjectDefault[unique] = [];
+      // currentObjectDefault[unique] = [];
+      setVlObjDefaultState([...dataChosen.current]);
     }
-    return () => {
-      currentObjectDefault[unique] = null;
-    };
-  }, [valueObjectDefault]);
+  }, [valueObjectDefault, valueMulti]);
   useEffect(() => {
     allValue[unique] = [];
     if (defaultValue !== undefined && JSON.stringify(defaultValue) !== '[]') {
@@ -1185,7 +1214,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   // }, [searchDelayTime]);
 
   useEffect(() => {
-    if (allValue[unique][allValue[unique].length - 1] !== valueProp) {
+    var _allValue$unique4;
+    if (allValue[unique][((_allValue$unique4 = allValue[unique]) === null || _allValue$unique4 === void 0 ? void 0 : _allValue$unique4.length) - 1] !== valueProp) {
       allValue[unique].push(valueProp);
     }
     if (multiple && valueProp) {
@@ -1200,7 +1230,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (valueProp !== undefined && (!dropdownListRef.current || children || JSON.stringify(valueProp) !== JSON.stringify(currentValue[unique]))) {
       setValueIntoInput(valueProp);
     }
-  }, [valueProp, dataSourceState]);
+  }, [valueProp, dataSourceState, vlObjDefaultState]);
   useEffect(() => {
     inputRef.current.readOnly = readOnly || inputProps.readOnly;
     if (!readOnly && !disabled) {
@@ -1238,12 +1268,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       inputRef.current.addEventListener('click', onClickInput);
     }
     if (dropdownListRef.current) {
-      var _dropdownListRef$curr2, _dropdownListRef$curr3, _currentObjectDefault6;
+      var _dropdownListRef$curr2, _dropdownListRef$curr3;
       if (!disabled && !readOnly) {
         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 < (dataSourceState === null || dataSourceState === void 0 ? void 0 : dataSourceState.length) + (vlObjDefaultState === null || vlObjDefaultState === void 0 ? void 0 : vlObjDefaultState.length) && !isSearch[unique]) {
         loadMoreItemsDropdown(length);
         !!onLoadMore && dataSourceState.length < totalState && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
       } else {
@@ -1262,6 +1292,15 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       !!dropdownListRef.current && dropdownListRef.current.removeEventListener('scroll', onLoadMoreHandler);
     };
   }, [dataSourceState]);
+  useEffect(() => {
+    if (!openState && txtSearch) {
+      setTxtSearch('');
+      if (action !== null && action !== void 0 && action.loadData && !!onLoadMore) {
+        filter.current.strSearch = '';
+        handleActionLoadData(true);
+      }
+    }
+  }, [openState]);
   useLayoutEffect(() => {
     if (ref.current) {
       const {
@@ -1284,13 +1323,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, label) : null, [label, required, disabled, labelProps]);
   const getData = () => {
     let dataFilter = JSON.parse(JSON.stringify(dataSourceState));
-    if (Array.isArray(valueObjectDefault)) {
-      dataFilter = [...dataFilter, ...dataChosen.current, ...valueObjectDefault];
-    } else if (typeof valueObjectDefault === 'object') {
-      dataFilter = [...dataFilter, ...dataChosen.current, {
-        ...valueObjectDefault
-      }];
-    }
+    // dataFilter = [...dataFilter, ...dataChosen.current];
+    // if (Array.isArray(valueObjectDefault)) {
+    //     dataFilter = [...dataFilter, ...vlObjDefaultState];
+    // } else if (typeof valueObjectDefault === 'object') {
+    //     dataFilter = [...dataFilter, { ...vlObjDefaultState }];
+    // }
+    dataFilter = uniqBy([...vlObjDefaultState, ...dataFilter], data => data === null || data === void 0 ? void 0 : data[valueExpr]);
     return dataFilter;
   };
   const InputView = useMemo(() => {
@@ -1312,45 +1351,30 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         return false;
       }
     }, valueMulti.map((vl, index) => {
-      let dataFilter = getData();
+      const dataFilter = getData();
       const data = dataFilter.find(v => v[valueExpr] === vl || v === vl);
-      let text = '';
-      if (data || data === 0) {
-        displayExpr = displayExpr || valueExpr;
-        // displayExpr =
-        //     typeof renderSelectedItem === 'string'
-        //         ? renderSelectedItem
-        //         : displayExpr || valueExpr;
-        let mask = data === null || data === void 0 ? void 0 : data[displayExpr];
-
-        // convert {id} - {name} to {<data[id]>} - {<data[name]>}
-        if (!mask && regexBetween.test(displayExpr)) {
-          var _displayExpr3;
-          mask = (_displayExpr3 = displayExpr) === null || _displayExpr3 === void 0 ? void 0 : _displayExpr3.replace(regexBetween, _ => data[_]);
-        } else if (!mask) {
-          mask = typeof data !== 'object' ? data : '';
+      if (data) {
+        const displayText = displayValue(data);
+        let item;
+        if (typeof renderSelectedItem === 'function') {
+          item = renderSelectedItem({
+            data,
+            index
+          });
+        } else {
+          item = jsx(Chip, {
+            css: [parseWidth('100%'), parseMaxWidth('max-content')],
+            key: index,
+            startIcon: getIconFromData(data, true),
+            label: displayText,
+            size: 'medium',
+            disabled: disabled,
+            clearAble: !readOnly && !disabled,
+            onRemove: e => onRemove(e, vl)
+          });
         }
-        text = mask.toString().replace(regexInclude, '');
-      }
-      let item;
-      if (typeof renderSelectedItem === 'function') {
-        item = renderSelectedItem({
-          data,
-          index
-        });
-      } else {
-        item = jsx(Chip, {
-          css: [parseWidth('100%'), parseMaxWidth('max-content')],
-          key: index,
-          startIcon: getIconFromData(data, true),
-          label: text,
-          size: 'medium',
-          disabled: disabled,
-          clearAble: !readOnly && !disabled,
-          onRemove: e => onRemove(e, vl)
-        });
+        return item;
       }
-      return item;
     })) : typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' ? jsx("div", {
       ...inputProps,
       style: inputStyle,
@@ -1394,7 +1418,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: setShowDropdown,
       disabled: disabled || readOnly
     }) : null));
-  }, [openState, showClear, valueSingle, valueMulti, loadingState, dataSourceState, clearAble, dataSource, disabled, displayExpr, inputProps, inputStyle, multilineSelectedItem, multiple, onChange, placeholder, readOnly, renderSelectedItem, valueExpr, valueObjectDefault, viewType]);
+  }, [openState, showClear, valueSingle, valueMulti, loadingState, dataSourceState, vlObjDefaultState, clearAble, dataSource, disabled, displayExpr, inputProps, inputStyle, multilineSelectedItem, multiple, onChange, placeholder, readOnly, renderSelectedItem, valueExpr, valueObjectDefault, viewType]);
   const ErrorView = useMemo(() => {
     return error ? jsx(HelperText, {
       ...helperTextProps,
@@ -1491,7 +1515,7 @@ const IconCSS = viewType => css`
     ${mgl([2])};
     ${mgr([viewType !== 'outlined' ? 0 : 4])};
 `;
-const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInputCSSName) => viewType !== 'outlined' ? css`
+const DropdownFormCSS = (viewType, multiple, disabled, readOnly, placeholder, DropdownInputCSSName) => viewType !== 'outlined' ? css`
               ${displayFlex};
               ${flexRow};
               ${itemsCenter};
@@ -1499,7 +1523,7 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
               ${boxBorder};
               ${parseWidth('100%')};
               ${pdy([multiple ? 0.25 : 1])};
-              ${!disabled && css`
+              ${!disabled && !readOnly && css`
                   &:not(:focus-within):hover {
                       &::before {
                           ${borderBottomColor('system/active')};
@@ -1559,7 +1583,7 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
               ${parseWidth('100%')};
               ${parseMinHeight(40)};
               ${mgt([0.5])};
-              ${!disabled && css`
+              ${!disabled && !readOnly && css`
                   &:not(:focus-within):hover {
                       ${bgColor('fill/hover')};
                       ${borderColor('system/active')};
@@ -1736,7 +1760,6 @@ Dropdown.defaultProps = {
   multilineSelectedItem: false,
   multiple: false,
   noDataText: getGlobal('noDataText'),
-  onInput: null,
   placeholder: getGlobal('dropdownPlaceholder'),
   readOnly: false,
   required: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.4.9",
+  "version": "1.4.10",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,12 @@ npm test
 ```
 
 ## Changelog
+## 1.4.10
+- \[Fixed\]: Dropdown – Fix display text when data invalid
+- \[Fixed\]: Dropdown – Fix bug crash when get icon from invalid data
+- \[Fixed\]: Dropdown – Fix not reset data when close dropdown after search
+- \[Fixed\]: Dropdown – Fix not clear display value when set value null
+
 ## 1.4.9
 - \[Changed\]: IconMenu – Add 16 icon menu of HR Mobile App
 - \[Fixed\]: Chip – Fix width of TabHeader