diginet-core-ui 1.3.51 → 1.3.52-beta.3

package/components/accordion/index.js

@@ -82,7 +82,7 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         display: 'none'
       }
     })));
-  }, [id, disabled, className, boxShadow, onClick, children, expanded, onExpand, onCollapse, expandState]);
+  }, [id, disabled, className, style, boxShadow, onClick, children, expanded, onExpand, onCollapse, expandState]);
 }));
 const AccordionRootCSS = css`
     ${displayBlock};

package/components/accordion/summary.js

@@ -35,26 +35,25 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const _SummaryRootCSS = SummaryRootCSS(background);
 
   const _onClick = e => {
-    if (!disabled) {
-      const target = e.target;
+    if (disabled) return;
+    const target = e.target;
 
-      if (onClickAccordion) {
-        onClickAccordion();
-        return;
-      }
+    if (onClickAccordion) {
+      onClickAccordion();
+      return;
+    }
 
-      if (onClick && (!expandIconRef.current || !expandIconRef.current.contains(target))) {
-        onClick(e);
-        return;
-      }
+    if (onClick && (!expandIconRef.current || !expandIconRef.current.contains(target))) {
+      onClick(e);
+      return;
+    }
 
-      if (expandState) {
-        if (expanded === undefined) setExpandState(false);
-        !!onCollapse && onCollapse(e);
-      } else if (!expandState) {
-        if (expanded === undefined) setExpandState(true);
-        !!onExpand && onExpand(e);
-      }
+    if (expandState) {
+      if (expanded === undefined) setExpandState(false);
+      !!onCollapse && onCollapse(e);
+    } else if (!expandState) {
+      if (expanded === undefined) setExpandState(true);
+      !!onExpand && onExpand(e);
     }
   };
 
@@ -137,7 +136,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }) : jsx("span", {
       className: 'Accordion-Collapse-Icon effect'
     }, collapseIcon)))));
-  }, [id, expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, expandState]);
+  }, [id, expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, style, expandState, disabled]);
 }));
 AccordionSummary.defaultProps = {
   expandIconAt: 'start',

package/components/alert/index.js

@@ -10,8 +10,8 @@ import ButtonIcon from '../button/icon';
 import Icon from '../../icons';
 import { hexToRGBA } from '../../styles/color-helper';
 import { typography } from '../../styles/typography';
-import { alignCenter, border, borderBox, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from '../../styles/general';
 import { useTheme } from '../../theme';
+import { alignCenter, border, borderBox, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from '../../styles/general';
 const {
   heading3,
   heading4,

package/components/avatar/index.js

@@ -12,18 +12,22 @@ import { getGlobal } from '../../global';
 import AvatarDefault from '../../assets/avatar/default.svg';
 import { alignCenter, borderNone, displayBlock, displayNone, flexCol, inlineFlex, overflowHidden, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
 import isMobile from '../../utils/isMobile';
-import { color as colors } from '../../styles/colors';
+import theme from '../../theme/settings';
 const {
-  system: {
-    white
-  },
-  fill: {
-    tooltip: fillTooltip
+  colors: {
+    system: {
+      white
+    },
+    fill: {
+      tooltip: fillTooltip
+    },
+    text: {
+      tooltip: textTooltip
+    }
   },
-  text: {
-    tooltip: textTooltip
-  }
-} = colors;
+  spacing,
+  zIndex: zIndexCORE
+} = theme;
 const existed = {},
       urlAvatar = {},
       popupHandler = {};
@@ -34,6 +38,18 @@ const blurKeyframe = keyframes`
     75% { -webkit-filter: blur(1px);}
     100% { -webkit-filter: blur(0px);}
 `;
+
+const checkFileType = (type, matchType) => {
+  if (typeof matchType === 'object' && matchType instanceof RegExp) {
+    return matchType.test(type);
+  } else if (typeof matchType === 'object' && Array.isArray(matchType)) {
+    const pattern = new RegExp('^image/(' + matchType.join('|') + ')', 'i');
+    return pattern.test(type);
+  } else {
+    return new RegExp(matchType).test(type);
+  }
+};
+
 const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   src,
   defaultSrc,
@@ -56,7 +72,9 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   readOnly,
   disabled,
   lazyLoading,
-  id
+  id,
+  allowEdit,
+  onClick
 }, reference) => {
   if (!defaultSrc) defaultSrc = AvatarDefault;
   const ref = useRef(null);
@@ -94,23 +112,12 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  const checkFileType = type => {
-    if (typeof matchType === 'object' && matchType instanceof RegExp) {
-      return matchType.test(type);
-    } else if (typeof matchType === 'object' && Array.isArray(matchType)) {
-      const pattern = new RegExp('^image/(' + matchType.join('|') + ')', 'i');
-      return pattern.test(type);
-    } else {
-      return new RegExp(matchType).test(type);
-    }
-  };
-
   const onChangeAvatar = input => {
     const [file] = input.target.files;
     if (!file) return;
     const reader = new FileReader();
 
-    if (!checkFileType(file.type)) {
+    if (!checkFileType(file.type, matchType)) {
       input.target.value = '';
       popupHandler[unique].show(wrongTypeError);
       return;
@@ -194,12 +201,15 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (hoverAble) setViewMoreInfo(false);
   };
 
-  const _onClick = () => {
+  const _onClick = event => {
+    onClick && event.stopPropagation();
     if (disabled) return;
 
     if (readOnly) {
       if (_isMobile) showMoreInfo();
-    } else triggerInput();
+    } else {
+      allowEdit ? triggerInput() : onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
   };
 
   const _onMouseEnter = () => {
@@ -264,7 +274,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onMouseLeave: _onMouseLeave,
       tabIndex: "-1",
       onBlur: closeMoreInfo
-    }, renderImage())), !readOnly && !disabled && jsx("span", {
+    }, renderImage())), allowEdit && !readOnly && !disabled && jsx("span", {
       css: _ActionIconCSS
     }, jsx(ButtonIcon, {
       viewType: 'ghost',
@@ -315,7 +325,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       icon: 'danger',
       fullScreen: true
     }));
-  }, [width, height, readOnly, disabled, clearAble, maxSize, matchType, hoverAble, outlined, actionIconWidth, actionIconHeight, lazyLoading, defaultSrc, direction, data, maxSizeError, srcState, isInView, onLoaded, viewAvatar, viewMoreInfo]);
+  }, [width, height, readOnly, disabled, clearAble, maxSize, matchType, hoverAble, outlined, actionIconWidth, actionIconHeight, lazyLoading, defaultSrc, direction, data, maxSizeError, allowEdit, srcState, isInView, onLoaded, viewAvatar, viewMoreInfo]);
 }));
 
 const ActionIconCSS = actionIconWidth => css`
@@ -325,7 +335,7 @@ const ActionIconCSS = actionIconWidth => css`
     min-width: ${actionIconWidth}px;
     transition: opacity 0.5s;
     opacity: 0;
-    z-index: 9002;
+    z-index: ${zIndexCORE(2)};
 `;
 
 const AvatarPreviewCSS = readOnly => css`
@@ -380,12 +390,13 @@ const AvatarRootCSS = (width, height, outlined) => css`
 const MoreInfoCSS = css`
     ${displayBlock};
     ${positionRelative};
-    padding: 8px;
+    padding: ${spacing([2])};
 `;
 const blurAnimationCSS = css`
     animation: ${blurKeyframe} 1s ease;
 `;
 Avatar.defaultProps = {
+  allowEdit: false,
   disabled: false,
   readOnly: false,
   clearAble: true,
@@ -404,6 +415,9 @@ Avatar.defaultProps = {
   lazyLoading: false
 };
 Avatar.propTypes = {
+  /** If `true`, allow to edit avatar. */
+  allowEdit: PropTypes.bool,
+
   /** prevent all events, only view */
   disabled: PropTypes.bool,
 
@@ -470,12 +484,12 @@ Avatar.propTypes = {
   /** will run after change avatar */
   onChange: PropTypes.func,
 
+  /** Callback fired when the component is clicked. */
+  onClick: PropTypes.func,
+
   /** lazy loading */
   lazyLoading: PropTypes.bool,
 
-  /** any props else */
-  props: PropTypes.any,
-
   /**
    * ref methods
    *

package/components/chip/index.js

@@ -114,8 +114,7 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: size
     }, jsx(Typography, {
       type: size === 'small' ? 'p2' : 'p1',
-      color: 'inherit',
-      lineClamp: 1
+      color: 'inherit'
     }, renderLabel()));
   }, [label, size, startIcon, endIcon, clearAble]);
   const endIconView = useMemo(() => {

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

@@ -41,8 +41,8 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   inputProps,
   forTreeView,
-  width,
   labelProps,
+  width,
   ...props
 }, reference) => {
   if (!inputRef) {

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

@@ -70,7 +70,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   total,
   placeholder,
   error,
-  keyExpr,
   displayExpr,
   subText,
   valueExpr,
@@ -156,10 +155,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const onClickInput = e => {
     if (!boxRef.current) {
       if (!multiple || !Array.from(inputRef.current.querySelectorAll('.DGN-UI-Chip')).some(item => item.contains(e.target))) {
-        if ((renderSelectedItem || iconExpr && iconExpr !== 'none') && !multiple) {
+        if ((typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none') && !multiple) {
+          var _inputRef$current$chi;
+
           inputRef.current.innerHTML = inputRef.current.textContent.trim();
           inputRef.current.contentEditable = 'plaintext-only';
-          const caret = inputRef.current.childNodes.length ? 1 : 0;
+          const caret = (_inputRef$current$chi = inputRef.current.childNodes) !== null && _inputRef$current$chi !== void 0 && _inputRef$current$chi.length ? 1 : 0;
           const range = document.createRange();
           range.setStart(inputRef.current, caret);
           range.setEnd(inputRef.current, caret);
@@ -281,7 +282,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       window.addEventListener('resize', customizeWidthDropdown);
       document.addEventListener('wheel', onWheelHandler);
       document.addEventListener('mousedown', onClickOutsideOfInput);
-      document.addEventListener('keydown', preventScroll);
       boxRef.current && boxRef.current.addEventListener('keydown', moveOnItem);
 
       if (onLoadMore && dataSource.length < total) {
@@ -306,15 +306,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  const preventScroll = e => {
-    if (/Arrow(Up|Down)/.test(e.key)) {
-      e.preventDefault();
-      return false;
-    }
-
-    return true;
-  };
-
   const pressESCHandler = event => {
     if (event.key === 'Escape' || event.key === 'Tab') {
       closeDropdown();
@@ -339,11 +330,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const closeDropdown = () => {
-    const node = document.querySelector(`.DGN-Dropdown-${unique}`);
-
-    if ((renderSelectedItem || iconExpr && iconExpr !== 'none') && !multiple && inputRef.current) {
-      inputRef.current.contentEditable = true;
-    }
+    const node = document.querySelector(`.DGN-Dropdown-${unique}`); // if ((renderSelectedItem || (iconExpr && iconExpr !== 'none')) && !multiple && inputRef.current && !disabled) {
+    //     inputRef.current.contentEditable = true;
+    // }
 
     if (node) {
       node.style.pointerEvents = `none`;
@@ -359,7 +348,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       document.removeEventListener('mousedown', onClickOutsideOfInput);
       window.removeEventListener('resize', customizeWidthDropdown);
       document.removeEventListener('wheel', onWheelHandler);
-      document.removeEventListener('keydown', preventScroll);
 
       if (onLoadMore && boxRef.current) {
         boxRef.current.removeEventListener('scroll', onLoadMoreHandler);
@@ -400,12 +388,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const mapDropdown = (pattern, keyArr) => {
+    var _currentObjectDefault;
+
     const items = [];
     const dataSourceUsable = [...dataSource];
 
     const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
 
-    if (currentObjectDefault[unique] && currentObjectDefault[unique].length) {
+    if (currentObjectDefault[unique] && (_currentObjectDefault = currentObjectDefault[unique]) !== null && _currentObjectDefault !== void 0 && _currentObjectDefault.length) {
       const length = currentObjectDefault[unique].length;
       let existItemQuantity = 0;
 
@@ -503,7 +493,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }, displayText)));
       }
 
-      if (items.length === limit) {
+      if ((items === null || items === void 0 ? void 0 : items.length) === limit) {
         timerRef.current = setTimeout(() => {
           loadMoreItemsDropdown(index + 1, pattern);
         }, 1000);
@@ -514,7 +504,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return jsx("div", {
       css: DropdownBoxCSS,
       ref: boxRef
-    }, items.length ? items : jsx("div", {
+    }, items !== null && items !== void 0 && items.length ? items : jsx("div", {
       css: _DropdownItemCSS,
       className: 'no-data'
     }, ' ', noDataText, ' '));
@@ -547,13 +537,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const loadMoreItemsDropdown = (i = 0, pattern) => {
-    var _displayExpr3;
+    var _currentObjectDefault2, _displayExpr3;
 
     const dataSourceUsable = [...dataSource]; // Nếu có load more thì đẩy đội tượng mặc định lên đầu
 
     let notExistItem = 0;
 
-    if (onLoadMore && currentObjectDefault[unique].length) {
+    if (onLoadMore && (_currentObjectDefault2 = currentObjectDefault[unique]) !== null && _currentObjectDefault2 !== void 0 && _currentObjectDefault2.length) {
       const length = currentObjectDefault[unique].length;
 
       for (let index = length - 1; index >= 0; index--) {
@@ -744,7 +734,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
 
     if (scrollHeight === Math.ceil(scrollTop) + offsetHeight && boxRef.current) {
-      const length = boxRef.current.querySelectorAll(`.css-${_DropdownItemCSS.name}`).length;
+      var _boxRef$current$query;
+
+      const length = (_boxRef$current$query = boxRef.current.querySelectorAll(`.css-${_DropdownItemCSS.name}`)) === null || _boxRef$current$query === void 0 ? void 0 : _boxRef$current$query.length;
       boxRef.current.removeEventListener('scroll', onLoadMoreHandler);
       !!onLoadMore && onLoadMore({
         skip: length,
@@ -784,7 +776,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     const value = e.target.value || e.target.textContent;
 
-    if (renderSelectedItem && e.target.childNodes && Array.from(e.target.childNodes).some(node => node.toString() !== '[object Text]')) {
+    if (typeof renderSelectedItem === 'function' && e.target.childNodes && Array.from(e.target.childNodes).some(node => node.toString() !== '[object Text]')) {
       const cursor = document.getSelection().anchorOffset;
       e.target.innerHTML = value;
       document.getSelection().collapse(e.target, cursor);
@@ -824,7 +816,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         if (valueProp === undefined) {
           let item = null;
 
-          if (renderSelectedItem && typeof renderSelectedItem === 'function') {
+          if (typeof renderSelectedItem === 'function') {
             item = renderSelectedItem({
               data,
               index
@@ -926,7 +918,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onClear = e => {
-    if (disabled || readOnly || loading) return;
+    if (disabled || readOnly || loading || !clearAble) return;
     currentValue[unique] = multiple ? [] : '';
 
     if (inputRef.current.tagName.toLowerCase() === 'div') {
@@ -940,6 +932,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } // onChangeValue('', '');
 
 
+    setShowClear(false);
     e && e.target && e.target.blur();
     updatePositionDropdown();
     onInput === null || onInput === void 0 ? void 0 : onInput({ ...(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current),
@@ -963,7 +956,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         inputRef.current.innerHTML = '';
         currentValue[unique] = [];
       } else {
-        if (renderSelectedItem || iconExpr && iconExpr !== 'none' && !isSearch[unique]) {
+        if (typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' && !isSearch[unique]) {
           inputRef.current.innerHTML = '';
         } else if (!isSearch[unique]) {
           inputRef.current.value = '';
@@ -976,7 +969,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     const length = dataSource.length;
-    const displayKey = keyExpr || displayExpr;
+    const displayKey = typeof renderSelectedItem === 'string' ? renderSelectedItem : displayExpr;
 
     if (displayKey && Array.isArray(displayKey)) {
       displayExpr = displayExpr.join(' - ');
@@ -995,6 +988,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       currentValue[unique] = [];
       inputRef.current.innerHTML = '';
       valueArr.forEach(v => {
+        var _currentObjectDefault3;
+
         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);
@@ -1002,7 +997,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           }
         }
 
-        if (currentObjectDefault[unique].length) {
+        if ((_currentObjectDefault3 = currentObjectDefault[unique]) !== null && _currentObjectDefault3 !== void 0 && _currentObjectDefault3.length) {
           const itemOfValue = currentObjectDefault[unique].find(valueObject => valueObject[valueExpr] === v || valueObject === v);
 
           if (itemOfValue) {
@@ -1011,6 +1006,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       });
     } else {
+      var _currentObjectDefault4;
+
       currentValue[unique] = source;
 
       for (let i = 0; i < length; i++) {
@@ -1020,7 +1017,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
 
-      if (currentObjectDefault[unique].length) {
+      if ((_currentObjectDefault4 = currentObjectDefault[unique]) !== null && _currentObjectDefault4 !== void 0 && _currentObjectDefault4.length) {
         const itemOfValue = currentObjectDefault[unique].find(valueObject => valueObject[valueExpr] === source || valueObject === source);
 
         if (itemOfValue) {
@@ -1038,14 +1035,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const setMultipleValueHandler = (data, value, keyArr, index) => {
     let item = null;
 
-    if (renderSelectedItem && typeof renderSelectedItem === 'function') {
+    if (typeof renderSelectedItem === 'function') {
       item = renderSelectedItem({
         data,
         index
       });
     } else {
       const icon = getIconFromData(data);
-      const text = keyArr ? renderData(data, keyArr) : data[keyExpr || displayExpr];
+      const text = keyArr ? renderData(data, keyArr) : data[renderSelectedItem || displayExpr];
       item = jsx(Chip, {
         startIcon: icon,
         label: text,
@@ -1068,9 +1065,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const setSingleValueHandler = (data, keyArr) => {
-    const text = keyArr ? renderData(data, keyArr) : data[keyExpr || displayExpr] || data[valueExpr] || data;
+    const text = keyArr ? renderData(data, keyArr) : typeof renderSelectedItem === 'string' ? data[renderSelectedItem] : data[displayExpr || valueExpr] || data;
 
-    if (renderSelectedItem && typeof renderSelectedItem === 'function') {
+    if (typeof renderSelectedItem === 'function') {
       inputRef.current.innerHTML = '';
       const item = renderSelectedItem({
         data
@@ -1286,15 +1283,17 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     if (boxRef.current) {
+      var _boxRef$current$query2, _currentObjectDefault5;
+
       if (!disabled && !readOnly) {
         inputRef.current.addEventListener('input', onChangeInput);
       }
 
       const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
 
-      const length = boxRef.current.querySelectorAll(`.css-${_DropdownItemCSS.name}`).length;
+      const length = (_boxRef$current$query2 = boxRef.current.querySelectorAll(`.css-${_DropdownItemCSS.name}`)) === null || _boxRef$current$query2 === void 0 ? void 0 : _boxRef$current$query2.length;
 
-      if (length < dataSource.length + currentObjectDefault[unique].length && !isSearch[unique]) {
+      if (length < dataSource.length + ((_currentObjectDefault5 = currentObjectDefault[unique]) === null || _currentObjectDefault5 === void 0 ? void 0 : _currentObjectDefault5.length) && !isSearch[unique]) {
         loadMoreItemsDropdown(length);
         !!onLoadMore && dataSource.length < total && boxRef.current.addEventListener('scroll', onLoadMoreHandler);
       } else {
@@ -1325,11 +1324,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...labelProps
   }, label) : null, [label, required, disabled, labelProps]);
   const inputComp = useMemo(() => {
-    const _InputCSS = InputCSS(multiple, renderSelectedItem);
+    const _InputCSS = InputCSS(multiple, typeof renderSelectedItem === 'function');
 
-    const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, disabled);
+    const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, typeof renderSelectedItem === 'function', disabled);
 
-    const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem);
+    const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, typeof renderSelectedItem === 'function', disabled);
 
     return jsx("div", {
       css: _DropdownFormCSS,
@@ -1352,8 +1351,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         e.preventDefault();
         return false;
       }
-    }) : renderSelectedItem || iconExpr && iconExpr !== 'none' ? jsx("div", { ...inputProps,
-      contentEditable: true,
+    }) : typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' ? jsx("div", { ...inputProps,
+      contentEditable: !disabled,
       style: inputStyle,
       ref: inputRef,
       css: _DropdownInputCSS,
@@ -1413,7 +1412,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   return jsx(Fragment, null, jsx("div", {
     ref: dropdownRef,
-    css: DropdownRootCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, loading, showClear),
+    css: DropdownRootCSS(viewType, multiple, placeholder, itemMultipleSize, typeof renderSelectedItem === 'function', loading, showClear),
     className: ['DGN-UI-Dropdown', className, error && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly'].join(' ').trim().replace(/\s+/g, ' '),
     style: style
   }, labelComp, inputComp, errorComp), dropdownComp);
@@ -1447,7 +1446,7 @@ const DropdownIconCSS = css`
     }
 `;
 
-const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem) => css`
+const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, disabled) => css`
     ${flexRow};
     ${alignCenter};
     ${outlineNone};
@@ -1455,7 +1454,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
     ${borderNone};
     ${paragraph1};
     width: 100%;
-    color: ${main};
+    color: ${disabled ? systemDisabled : main};
     padding-top: 0;
     padding-bottom: ${viewType !== 'outlined' ? 0 : 'inherit'};
     padding-left: ${viewType !== 'outlined' ? 0 : '16px'};
@@ -1489,7 +1488,19 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
             padding: ${itemMultipleSize === 'medium' ? 2 : 1}px;
         }
     }
+    .DGN-UI-Typography {
+        ${disabled && `
+            color: ${systemDisabled}
+        `}
+    }
     .css-${DropdownIconCSS.name} {
+        ${disabled && `
+            svg {
+                path {
+                    fill: ${systemDisabled};
+                }
+            }
+        `}
         ${renderSelectedItem ? `
             min-height: 24px;
             min-width: 24px;
@@ -1538,10 +1549,9 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
                         }
                         .css-${DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
                             color: ${active};
+                        }
                     }
-              }
               `}
-
               &:focus-within {
                   border-bottom-color: ${focus};
                   &::after {
@@ -1566,7 +1576,7 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
                   left: 0;
                   right: 0;
                   bottom: 0;
-                  border-bottom: 1px solid ${rest};
+                  border-bottom: 1px solid ${disabled ? systemDisabled : rest};
               }
               &::after {
                   ${positionAbsolute};
@@ -1585,7 +1595,7 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
               ${positionRelative};
               ${borderRadius4px};
               ${borderBox};
-              ${border(1, rest)};
+              ${border(1, disabled ? systemDisabled : rest)};
               width: 100%;
               min-height: 40px;
               ${!disabled && `
@@ -1821,9 +1831,6 @@ Dropdown.propTypes = {
   /** the displayed value for each change */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
-  /** field name used for text display in input */
-  keyExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
-
   /** field name used for text display<br/>
    * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
    * Note: don't use 'id - name', return undefined
@@ -1915,7 +1922,7 @@ Dropdown.propTypes = {
   /** function displays selected items by custom, example:<br/>
    * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
-  renderSelectedItem: PropTypes.func,
+  renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
   /** the function will run when entering input<br/>
    * if undefined: the filter function will run (default)

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

@@ -45,7 +45,7 @@ const FormGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     margin-bottom: 0 !important;
                 }
             }
-            .DGN-UI-TextInput {
+            &.DGN-UI-TextInput {
                 display: flex;
                 flex-direction: column;
                 justify-content: space-between;

package/components/form-control/input-base/index.js

@@ -53,6 +53,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     defaultValue,
     valueProp,
     onChange,
+    onInput,
     delayOnChange
   });
   if (!inputBaseRef) inputBaseRef = useRef(null);