diginet-core-ui 1.3.70 → 1.3.71

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

@@ -6,14 +6,13 @@ 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';
-import AvatarDefault from '../../../assets/avatar/default.svg';
 import { InputBase, Chip, CircularProgress, Checkbox, TreeView, HelperText, Label, ButtonIcon, Typography } from '../../';
 import { mapParent, randomString, updatePosition } from '../../../utils';
 import { getGlobal } from '../../../global';
-import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, breakWord, cursorPointer, displayBlock, flexColReverse, flexRow, flexWrap, inlineFlex, justifyCenter, justifyStart, outlineNone, overflowAuto, overflowHidden, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, userSelectNone } from '../../../styles/general';
+import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, breakWord, cursorPointer, displayBlock, flexColReverse, flexRow, flexWrap, justifyCenter, justifyStart, outlineNone, overflowAuto, overflowHidden, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, userSelectNone } from '../../../styles/general';
 import isMobile from '../../../utils/isMobile';
 import theme from '../../../theme/settings';
+import Avatar from '../../avatar';
 const {
   colors: {
     system: {
@@ -50,6 +49,8 @@ const timing = {},
       isSearch = {},
       allValue = {};
 const separatorPattern = /\{\w+\}/g;
+const regexBetween = /(?<=\{)(.*?)(?=\})/g;
+const regexInclude = /{|}/g;
 
 const checkHasValue = value => {
   return Array.isArray(value) ? value.length > 0 : value === 0 || !!value;
@@ -58,7 +59,6 @@ const checkHasValue = value => {
 const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
   itemMode,
-  itemMultipleSize,
   required,
   className,
   label,
@@ -103,7 +103,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   dropdownItemStyle,
   searchExpr,
-  searchMode
+  searchMode,
+  maximumSelectionLength
 }, reference) => {
   if (multiple && selectBox === undefined) selectBox = true;
   if (typeof searchExpr === 'string') searchExpr = [searchExpr];
@@ -119,6 +120,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const lastSearchRef = useRef(null);
   const timeout = useRef(null);
   const loadMoreTimer = useRef(null);
+  const dataChoosen = useRef([]);
   const [unique] = useState(randomString(6, {
     allowNumber: false,
     allowSymbol: false
@@ -126,12 +128,19 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [openState, setOpenState] = useState(false);
   const [showClear, setShowClear] = useState(false);
   const [textValue, setTextValue] = useState('');
+  let valueTemp = valueProp || defaultValue || [];
+
+  if (multiple && valueTemp && !Array.isArray(valueTemp)) {
+    valueTemp = [valueTemp];
+  }
+
+  const [valueMulti, setValueMulti] = useState(valueTemp);
 
   const _isMobile = isMobile.any();
 
   const _InputCSS = InputCSS(multiple, typeof renderSelectedItem === 'function');
 
-  const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, typeof renderSelectedItem === 'function', disabled);
+  const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, typeof renderSelectedItem === 'function', disabled);
 
   const _IconCSS = IconCSS(viewType, loading, showClear);
 
@@ -265,7 +274,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       },
       onKeyDown: pressESCHandler,
       autoFocus: true
-    })), jsx("div", {
+    })), multiple && maximumSelectionLength && jsx(Typography, {
+      style: {
+        padding: spacing([2, 4])
+      }
+    }, getGlobal('selected'), " ", (valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length) || 0, "/", maximumSelectionLength), jsx("div", {
       className: 'DGN-Dropdown-Box'
     }, dropdown), loading && jsx("div", {
       css: LoadingProgressCSS,
@@ -471,11 +484,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
 
       const value = typeof data === 'object' ? data[valueExpr] : data;
-      const itemDisabled = typeof data === 'object' ? data['disabled'] : false;
+      let itemDisabled = typeof data === 'object' ? data['disabled'] : false;
       const icon = getIconFromData(data);
 
       if (multiple && selectBox) {
-        const checked = Array.isArray(currentValue[unique]) ? currentValue[unique].includes(value) : [currentValue[unique]].includes(value);
+        const checked = Array.isArray(valueMulti) ? valueMulti.includes(value) : valueMulti.includes(value);
+        const isMaximumSelection = maximumSelectionLength === (valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length);
+        itemDisabled = itemDisabled || isMaximumSelection && !checked;
         items.push(jsx("div", {
           key: index,
           css: !itemDisabled ? _DropdownItemCSS : [DisabledCSS, _DropdownItemCSS],
@@ -501,9 +516,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           value: value,
           disabled: itemDisabled,
           onChange: () => onChangeValue(displayText, value, icon, data, index)
-        }, icon && jsx("div", {
-          css: DropdownIconCSS
-        }, icon), jsx("div", {
+        }, icon && icon, jsx("div", {
           css: DropdownTextCSS
         }, displayText))));
       } else {
@@ -521,9 +534,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           },
           tabIndex: -1,
           style: dropdownItemStyle
-        }, icon && jsx("div", {
-          css: DropdownIconCSS
-        }, icon), jsx("div", {
+        }, icon && icon, jsx("div", {
           css: DropdownTextCSS
         }, displayText)));
       } // if (items?.length === limit) {
@@ -644,15 +655,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             height: '100%',
             padding: '0 16px'
           }
-        }, icon && jsx("div", {
-          css: DropdownIconCSS
-        }, icon), jsx("div", {
+        }, icon && icon, jsx("div", {
           css: DropdownTextCSS
         }, displayText));
       } else {
-        item = jsx(Fragment, null, icon && jsx("div", {
-          css: DropdownIconCSS
-        }, icon), jsx("div", {
+        item = jsx(Fragment, null, icon && icon, jsx("div", {
           css: DropdownTextCSS
         }, displayText));
       }
@@ -685,50 +692,31 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return str + separatorArr[i];
   };
 
-  const getIconFromData = data => {
+  const getIconFromData = (data, insideChip = false) => {
     if (!iconExpr || iconExpr === 'none') return null;
+    let _src = iconDefault;
+    if (typeof iconExpr === 'string') _src = data[iconExpr];else {
+      let prefix = iconExpr.prefix || '';
+      const suffix = iconExpr.suffix || '';
+      const url = data[iconExpr.key];
+
+      if (prefix && /^http/i.test(prefix) && /^http/i.test(url)) {
+        prefix = '';
+      }
 
-    if (typeof iconExpr === 'string') {
-      return data[iconExpr] ? jsx("img", {
-        src: data[iconExpr],
-        alt: data[valueExpr]
-      }) : iconDefault ? jsx("img", {
-        src: iconDefault,
-        alt: data[valueExpr],
-        style: iconExpr.style
-      }) : jsx(Account, {
-        width: 32,
-        height: 32
-      });
-    }
-
-    let prefix = iconExpr.prefix || '';
-    const suffix = iconExpr.suffix || '';
-    const url = data[iconExpr.key];
-
-    if (prefix && /^http/i.test(prefix) && /^http/i.test(url)) {
-      prefix = '';
+      _src = prefix + url + suffix;
     }
-
-    return url ? jsx("img", {
-      src: prefix + url + suffix,
-      alt: data[valueExpr],
-      style: iconExpr.style,
-      onError: onErrorRenderIcon
-    }) : iconDefault ? jsx("img", {
-      src: iconDefault,
-      alt: data[valueExpr],
-      style: iconExpr.style
-    }) : jsx(Account, {
-      width: 32,
-      height: 32
+    return jsx(Avatar, {
+      disabled: true,
+      src: _src,
+      width: insideChip ? 20 : 24,
+      height: insideChip ? 20 : 24,
+      style: { ...iconExpr.style,
+        marginRight: spacing([insideChip ? 0 : 2])
+      }
     });
   };
 
-  const onErrorRenderIcon = e => {
-    e.target.src = iconDefault ? iconDefault : AvatarDefault;
-  };
-
   const customizeWidthDropdown = () => {
     if (dropdownListRef.current && _isMobile) dropdownListRef.current.style.maxHeight = `${Math.min(280, window.innerHeight) - (allowSearch ? 40 : 0)}px`;
 
@@ -789,6 +777,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const onChangeInput = e => {
     if (searchRef.current) lastSearchRef.current = searchRef.current.value;
+    const dataFilter = getData();
+    dataChoosen.current = [...dataFilter].filter(i => [...valueMulti].includes(i === null || i === void 0 ? void 0 : i[valueExpr]));
 
     if (onInput) {
       isSearch[unique] = true; // const valueInput = e.target.value;
@@ -831,9 +821,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, timeout.current || searchDelayTime);
   };
 
-  const onChangeValue = (displayText, value, icon, data, index) => {
+  const onChangeValue = (displayText, value, icon, data) => {
     if (itemMode === 'treeview') {
       if (valueProp === undefined) {
+        setValueMulti(value);
         setValueIntoInput(value);
         setShowClear(clearAble && checkHasValue(value) && !disabled && !readOnly && !loading);
       }
@@ -847,60 +838,46 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else if (multiple) {
       if (!Array.isArray(currentValue[unique])) currentValue[unique] = [];
       const newValueArr = [...currentValue[unique]];
+      const newValueArrState = [...valueMulti];
 
       if (!currentValue[unique].some(v => JSON.stringify(v) === JSON.stringify(value))) {
         newValueArr.push(value);
-
-        if (valueProp === undefined) {
-          let item = null;
-
-          if (typeof renderSelectedItem === 'function') {
-            item = renderSelectedItem({
-              data,
-              index
-            });
-          } else {
-            item = jsx(Chip, {
-              startIcon: icon,
-              label: displayText,
-              size: itemMultipleSize,
-              disabled: disabled,
-              clearAble: true,
-              onRemove: e => onRemove(e, value),
-              style: {
-                margin: '3px 0',
-                width: '100%'
-              }
-            });
-          }
-
-          const el = document.createElement('div');
-          el.className = 'dropdown-item';
-          el.style.display = 'flex';
-          ReactDOM.render(item, inputRef.current.appendChild(el));
-        }
-
-        !!onChange && onChange({
-          value: newValueArr,
-          data
-        });
+        newValueArrState.push(value); // if (valueProp === undefined) {
+        //     let item = null;
+        //     if (typeof renderSelectedItem === 'function') {
+        //         item = renderSelextedItem({ data, index });
+        //     } else {
+        //         item = (
+        //             <Chip
+        //                 startIcon={icon}
+        //                 label={displayText}
+        //                 size={itemMultipleSize}
+        //                 disabled={disabled}
+        //                 clearAble
+        //                 onRemove={e => onRemove(e, value)}
+        //                 style={{ margin: '3px 0', width: '100%' }}
+        //             />
+        //         );
+        //     }
+        //     const el = document.createElement('div');
+        //     el.className = 'dropdown-item';
+        //     el.style.display = 'flex';
+        //     ReactDOM.render(item, inputRef.current.appendChild(el));
+        // }
       } else {
         const index = newValueArr.indexOf(value);
         newValueArr.splice(index, 1);
-
-        if (valueProp === undefined) {
-          var _nodes$index;
-
-          const nodes = inputRef.current.querySelectorAll('.dropdown-item');
-          (_nodes$index = nodes[index]) === null || _nodes$index === void 0 ? void 0 : _nodes$index.remove();
-        }
-
-        !!onChange && onChange({
-          value: newValueArr,
-          data
-        });
+        newValueArrState.splice(index, 1); // if (valueProp === undefined) {
+        //     const nodes = inputRef.current.querySelectorAll('.dropdown-item');
+        //     nodes[index]?.remove();
+        // }
       }
 
+      setValueMulti(newValueArrState);
+      !!onChange && onChange({
+        value: newValueArrState,
+        data
+      });
       setTimeout(() => {
         updatePositionDropdown();
       }, 0);
@@ -933,46 +910,50 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
 
   const onRemove = (e, value) => {
+    var _ref;
+
     const index = currentValue[unique].findIndex(v => JSON.stringify(v) === JSON.stringify(value));
 
     if (index !== -1) {
-      currentValue[unique].splice(index, 1);
-      setTimeout(() => {
-        var _e$parentNode;
-
-        if (dropdownListRef.current && multiple && selectBox && !children) {
-          const input = dropdownListRef.current.querySelector(`input[value="${value}"]`);
-
-          if (input) {
-            input.checked = false;
-          }
-        }
-
-        e === null || e === void 0 ? void 0 : (_e$parentNode = e.parentNode) === null || _e$parentNode === void 0 ? void 0 : _e$parentNode.remove();
-      }, 0);
-      !!onChange && onChange({
-        value: currentValue[unique],
-        removed: value
-      });
-    }
+      currentValue[unique].splice(index, 1); // setTimeout(() => {
+      //     if (dropdownListRef.current && multiple && selectBox && !children) {
+      //         const input = dropdownListRef.current.querySelector(`input[value="${value}"]`);
+      //         if (input) {
+      //             input.checked = false;
+      //         }
+      //     }
+      // e?.parentNode?.remove();
+      // }, 0);
+      // }, 0);
+      // }, 0);
+      // setValueMulti([...valueMulti]?.filter(i=>i!==value) || []);
+      // !!onChange && onChange({ value: currentValue[unique], removed: value });
+    } // logic mới
+
+
+    const newValueArrState = ((_ref = [...valueMulti]) === null || _ref === void 0 ? void 0 : _ref.filter(i => i !== value)) || [];
+    setValueMulti(newValueArrState);
+    !!onChange && onChange({
+      value: newValueArrState,
+      removed: value
+    });
   };
 
   const onClear = e => {
     if (disabled || readOnly || loading || !clearAble) return;
     currentValue[unique] = multiple ? [] : '';
 
-    if (inputRef.current.tagName.toLowerCase() === 'div') {
-      inputRef.current.innerHTML = '';
-
-      if (dropdownListRef.current) {
-        dropdownListRef.current.querySelectorAll('input').forEach(input => input.checked = false);
-      }
+    if (inputRef.current.tagName.toLowerCase() === 'div') {// inputRef.current.innerHTML = '';
+      // if (dropdownListRef.current) {
+      //     dropdownListRef.current.querySelectorAll('input').forEach(input => (input.checked = false));
+      // }
     } else {
       inputRef.current.value = '';
       setTextValue('');
     } // onChangeValue('', '');
 
 
+    setValueMulti([]);
     setShowClear(false);
     e && e.target && e.target.blur();
     updatePositionDropdown();
@@ -994,7 +975,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const setValueIntoInput = source => {
     if (!source && source !== 0) {
       if (multiple) {
-        inputRef.current.innerHTML = '';
+        // inputRef.current.innerHTML = '';
         currentValue[unique] = [];
       } else {
         if (typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' && !isSearch[unique]) {
@@ -1027,8 +1008,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
 
       valueArr = [...new Set(valueArr)];
-      currentValue[unique] = [];
-      inputRef.current.innerHTML = '';
+      currentValue[unique] = []; // inputRef.current.innerHTML = '';
+
       valueArr.forEach(v => {
         var _currentObjectDefault4;
 
@@ -1074,35 +1055,29 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  const setMultipleValueHandler = (data, value, keyArr, index) => {
-    let item = null;
-
-    if (typeof renderSelectedItem === 'function') {
-      item = renderSelectedItem({
-        data,
-        index
-      });
-    } else {
-      const icon = getIconFromData(data);
-      const text = keyArr ? renderData(data, keyArr) : data[renderSelectedItem || displayExpr];
-      item = jsx(Chip, {
-        startIcon: icon,
-        label: text,
-        size: itemMultipleSize,
-        disabled: disabled,
-        clearAble: true,
-        onRemove: e => onRemove(e, value),
-        style: {
-          margin: '3px 0',
-          width: '100%'
-        }
-      });
-    }
-
-    const el = document.createElement('div');
-    el.className = 'dropdown-item';
-    el.style.display = 'flex';
-    ReactDOM.render(item, inputRef.current.appendChild(el));
+  const setMultipleValueHandler = (data, value) => {
+    // let item = null;
+    // if (typeof renderSelectedItem === 'function') {
+    //     item = renderSelectedItem({ data, index });
+    // } else {
+    //     const icon = getIconFromData(data);
+    //     const text = keyArr ? renderData(data, keyArr) : data[renderSelectedItem || displayExpr];
+    //     item = (
+    //         <Chip
+    //             startIcon={icon}
+    //             label={text}
+    //             size={itemMultipleSize}
+    //             disabled={disabled}
+    //             clearAble
+    //             onRemove={e => onRemove(e, value)}
+    //             style={{ margin: '3px 0', width: '100%' }}
+    //         />
+    //     );
+    // }
+    // const el = document.createElement('div');
+    // el.className = 'dropdown-item';
+    // el.style.display = 'flex';
+    // ReactDOM.render(item, inputRef.current.appendChild(el));
     currentValue[unique].push(value);
   };
 
@@ -1121,9 +1096,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else if (iconExpr && iconExpr !== 'none') {
       inputRef.current.innerHTML = '';
       const icon = getIconFromData(data);
-      const valueWithIcon = jsx(Fragment, null, icon && jsx("div", {
-        css: DropdownIconCSS
-      }, icon), jsx(Typography, {
+      const valueWithIcon = jsx(Fragment, null, icon && icon, jsx(Typography, {
         type: 'p1',
         lineClamp: 1,
         hoverTooltip: !_isMobile
@@ -1230,6 +1203,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (allValue[unique][allValue[unique].length - 1] !== valueProp) {
       allValue[unique].push(valueProp);
     }
+
+    if (multiple && valueProp) {
+      setValueMulti(!Array.isArray(valueProp) ? [valueProp] : valueProp);
+    }
   }, [valueProp]);
   useEffect(() => {
     if (valueProp !== undefined && (!dropdownListRef.current || children || JSON.stringify(valueProp) !== JSON.stringify(currentValue[unique]))) {
@@ -1333,6 +1310,20 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     disabled: disabled,
     ...labelProps
   }, label) : null, [label, required, disabled, labelProps]);
+
+  const getData = () => {
+    let dataFilter = JSON.parse(JSON.stringify(dataSource));
+
+    if (Array.isArray(valueObjectDefault)) {
+      dataFilter = [...dataFilter, ...dataChoosen.current, ...valueObjectDefault];
+    } else if (typeof valueObjectDefault === 'object') {
+      dataFilter = [...dataFilter, ...dataChoosen.current, { ...valueObjectDefault
+      }];
+    }
+
+    return dataFilter;
+  };
+
   const InputView = useMemo(() => {
     return jsx("div", {
       css: _DropdownFormCSS,
@@ -1342,9 +1333,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx("div", {
       css: _InputCSS,
       className: 'DGN-UI-Dropdown-Form-Input'
-    }, multiple ? jsx("div", { ...inputProps,
+    }, multiple && valueMulti !== null && valueMulti !== void 0 && valueMulti.length ? jsx("div", { ...inputProps,
       style: {
         cursor: 'text',
+        gap: spacing(0.5),
         ...inputStyle
       },
       ref: inputRef,
@@ -1354,7 +1346,39 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         e.preventDefault();
         return false;
       }
-    }) : typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' ? jsx("div", { ...inputProps,
+    }, valueMulti.map((vl, index) => {
+      let dataFilter = getData();
+      const data = dataFilter.find(v => v[valueExpr] === vl);
+      let text = '';
+
+      if (data) {
+        var _displayExpr4;
+
+        const mask = (_displayExpr4 = displayExpr) === null || _displayExpr4 === void 0 ? void 0 : _displayExpr4.replace(regexBetween, _ => data[_]);
+        text = mask === null || mask === void 0 ? void 0 : mask.replace(regexInclude, '');
+      }
+
+      let item = null;
+
+      if (typeof renderSelectedItem === 'function') {
+        item = renderSelectedItem({
+          data,
+          index
+        });
+      } else {
+        item = jsx(Chip, {
+          key: index,
+          startIcon: getIconFromData(data, true),
+          label: text,
+          size: 'medium',
+          disabled: disabled,
+          clearAble: true,
+          onRemove: e => onRemove(e, vl)
+        });
+      }
+
+      return item;
+    })) : typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' ? jsx("div", { ...inputProps,
       contentEditable: !disabled && !allowSearch,
       style: inputStyle,
       ref: inputRef,
@@ -1409,7 +1433,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       },
       disabled: disabled || readOnly
     })));
-  }, [viewType, inputProps, inputStyle, multiple, clearAble, onChange, disabled, readOnly, loading, renderSelectedItem, placeholder, itemMultipleSize, openState, showClear, textValue]);
+  }, [viewType, inputProps, inputStyle, multiple, clearAble, onChange, disabled, readOnly, loading, renderSelectedItem, placeholder, dataSource, valueObjectDefault, valueExpr, displayExpr, openState, showClear, textValue, valueMulti]);
   const ErrorView = useMemo(() => error && jsx(HelperText, {
     disabled: disabled,
     style: {
@@ -1421,7 +1445,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, error), [error, disabled, errorStyle]);
   const DropdownView = useMemo(() => {
     return openState ? /*#__PURE__*/createPortal(showDropdown(), document.body) : null;
-  }, [openState, dataSource, loading, multiple, selectBox]);
+  }, [openState, valueMulti, dataSource, loading, multiple, selectBox, maximumSelectionLength]);
   /* End component */
 
   return jsx(Fragment, null, jsx("div", {
@@ -1440,25 +1464,7 @@ const InputCSS = (multiple, renderSelectedItem) => css`
     ${!multiple && renderSelectedItem ? `width: calc(100% - 34px)` : ''}
 `;
 
-const DropdownIconCSS = css`
-    ${inlineFlex};
-    ${alignCenter};
-    ${positionRelative};
-    ${overflowHidden};
-    ${parseWidthHeight(32)};
-    margin-right: ${spacing([2])};
-    min-height: 32px;
-    min-width: 32px;
-    border-radius: 16px;
-    img {
-        ${parseWidthHeight(32)};
-        min-height: 32px;
-        min-width: 32px;
-        object-fit: cover;
-    }
-`;
-
-const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, disabled) => css`
+const DropdownInputCSS = (viewType, multiple, placeholder, renderSelectedItem, disabled) => css`
     ${flexRow};
     ${alignCenter};
     ${outlineNone};
@@ -1497,7 +1503,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
         }
         svg {
             ${borderBox};
-            padding: ${itemMultipleSize === 'medium' ? 2 : 1}px;
+            padding: 2px;
         }
     }
     .DGN-UI-Typography {
@@ -1505,30 +1511,6 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
             color: ${systemDisabled}
         `}
     }
-    .css-${DropdownIconCSS.name} {
-        ${disabled && `
-            svg {
-                path {
-                    fill: ${systemDisabled};
-                }
-            }
-        `}
-        ${renderSelectedItem ? `
-            min-height: 24px;
-            min-width: 24px;
-            ` : `
-            height: 24px;
-            min-height: 24px;
-            width: 24px;
-            min-width: 24px;
-            img {
-                height: 24px;
-                min-height: 24px;
-                width: 24px;
-                min-width: 24px;
-            }
-            `}
-    }
 `;
 
 const IconCSS = (viewType, loading, showClear) => css`
@@ -1789,7 +1771,6 @@ const DisabledCSS = css`
 Dropdown.defaultProps = {
   viewType: 'underlined',
   itemMode: 'normal',
-  itemMultipleSize: 'medium',
   className: '',
   label: '',
   placeholder: getGlobal('dropdownPlaceholder'),
@@ -1821,9 +1802,6 @@ Dropdown.propTypes = {
   /** The mode of item when rendering. */
   itemMode: PropTypes.oneOf(['normal', 'table', 'treeview']),
 
-  /** Use for [Chip](https://core.diginet.com.vn/ui/?path=/story/chip) component, default selected item when `multiple`. */
-  itemMultipleSize: PropTypes.oneOf(['small', 'medium']),
-
   /** Class for component. */
   className: PropTypes.string,
 
@@ -1989,6 +1967,9 @@ Dropdown.propTypes = {
   /** Specifies a comparison operation used to search items. */
   searchMode: PropTypes.oneOf(['contains', 'startswith', 'equals']),
 
+  /** Set restrictions regarding the maximum number of options that can be selected. (Use with prop `multiple`) */
+  maximumSelectionLength: PropTypes.number,
+
   /**
    * ref methods
    *