diginet-core-ui 1.3.70-beta.3 → 1.3.70-beta.5

package/components/avatar/index.js

@@ -7,7 +7,7 @@ import { jsx, css, keyframes } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 import { useIntersection } from '../../utils/intersectionObserver';
 import { ButtonIcon, ModalSample, Popover, Popup, Typography } from '../';
-import { randomString } from '../../utils';
+import { classNames, randomString } from '../../utils';
 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';
@@ -75,7 +75,8 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   lazyLoading,
   id,
   allowEdit,
-  onClick
+  onClick,
+  style
 }, reference) => {
   if (!defaultSrc) defaultSrc = AvatarDefault;
   const ref = useRef(null);
@@ -258,17 +259,19 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: _AvatarContainerCSS,
       ref: ref,
       id: unique,
-      className: disabled ? 'disabled' : ''
+      className: classNames(disabled && 'disabled')
     }, jsx("div", {
       css: _AvatarRootCSS,
-      className: ['DGN-UI-Avatar', className].join(' ').trim().replace(/\s+/g, ' '),
+      className: classNames('DGN-UI-Avatar', className),
+      style: style,
       id: id
     }, jsx("input", {
       ref: inputRef,
       type: "file",
       title: '',
       accept: 'image/*',
-      onChange: onChangeAvatar
+      onChange: onChangeAvatar,
+      disabled: disabled
     }), jsx("div", {
       css: _AvatarPreviewCSS,
       onClick: _onClick,
@@ -415,7 +418,8 @@ Avatar.defaultProps = {
   wrongTypeError: `File ${getGlobal(['errorDefault', 'fileType'])}`,
   matchType: /^image\/(gif|jpe?g|tiff?|png|webp|bmp|svg(\+xml)?)$/i,
   data: {},
-  lazyLoading: false
+  lazyLoading: false,
+  style: {}
 };
 Avatar.propTypes = {
   /** If `true`, allow to edit avatar. */
@@ -493,6 +497,9 @@ Avatar.propTypes = {
   /** lazy loading */
   lazyLoading: PropTypes.bool,
 
+  /** Style inline of component. */
+  style: PropTypes.object,
+
   /**
    * ref methods
    *

package/components/chip/index.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { ButtonIcon, Typography } from '../';
 import Icon from '../../icons';
-import { alignCenter, border, borderBox, flexRow, inlineFlex, justifyCenter, positionRelative, userSelectNone, whiteSpaceNoWrap, cursorNotAllowed, positionAbsolute } from '../../styles/general';
+import { alignCenter, border, borderBox, flexRow, inlineFlex, justifyCenter, positionRelative, userSelectNone, whiteSpaceNoWrap, cursorNotAllowed, positionAbsolute, overflowHidden } from '../../styles/general';
 import { hexToRGBA } from '../../styles/color-helper';
 import { useTheme } from '../../theme';
 const {
@@ -78,9 +78,6 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const onRemoveHandler = () => {
     if (onRemove || disabled) onRemove(ref.current);
-    setTimeout(() => {
-      ref.current && ref.current.remove();
-    }, 0);
   };
 
   const _onClick = event => {
@@ -105,7 +102,7 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         color: 'currentColor'
       });
     } else return jsx("div", {
-      css: ChipIconCSS(info)
+      css: ChipIconCSS(infoChip)
     }, startIcon);
   }, [startIcon, size]); // Label
 
@@ -144,11 +141,11 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       viewBox: true,
       onClick: onRemoveHandler
     }) : node && jsx("div", {
-      css: ChipIconCSS(size),
+      css: ChipIconCSS(infoChip),
       className: 'end-icon ' + size,
       ref: IconRef
     }, node);
-  }, [clearAble, viewType, color, endIcon, size, disabled]);
+  }, [clearAble, viewType, color, endIcon, size, disabled, onRemove]);
   return jsx("div", {
     css: ChipRootCSS(onClick, onDbClick, colorProps, infoChip),
     ref: ref,
@@ -235,10 +232,13 @@ const ChipIconCSS = info => css`
     ${alignCenter};
     ${positionRelative};
     ${borderBox};
+    ${overflowHidden};
     width: ${info === null || info === void 0 ? void 0 : info.iconSize};
     min-width: ${info === null || info === void 0 ? void 0 : info.iconSize};
+    max-width: ${info === null || info === void 0 ? void 0 : info.iconSize};
     height: ${info === null || info === void 0 ? void 0 : info.iconSize};
     min-height: ${info === null || info === void 0 ? void 0 : info.iconSize};
+    max-height: ${info === null || info === void 0 ? void 0 : info.iconSize};
 `;
 
 Chip.defaultProps = {

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

@@ -3,7 +3,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import React, { forwardRef, memo, useEffect, useRef, useState, useImperativeHandle } from 'react';
+import { forwardRef, memo, useEffect, useRef, useState, useImperativeHandle, Fragment } from 'react';
 import { Typography } from '../..';
 import { alignCenter, alignStart, borderBox, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative, cursorNoDrop, parseWidthHeight } from '../../../styles/general';
 import { randomString } from '../../../utils';
@@ -154,7 +154,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     },
     color: disabled ? clDisabled : '',
     ...labelProps
-  }, jsx(React.Fragment, null, children || label, required && jsx("span", {
+  }, jsx(Fragment, null, children || label, required && jsx("span", {
     style: {
       color: disabled ? clDisabled : clDanger
     }

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];
@@ -126,12 +127,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 +273,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 +483,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 +515,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 +533,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 +654,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 +691,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`;
 
@@ -831,9 +818,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);
       }
@@ -849,36 +837,28 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const newValueArr = [...currentValue[unique]];
 
       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));
-        }
+        newValueArr.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));
+        // }
 
         !!onChange && onChange({
           value: newValueArr,
@@ -886,14 +866,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         });
       } 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();
-        }
+        newValueArr.splice(index, 1); // if (valueProp === undefined) {
+        //     const nodes = inputRef.current.querySelectorAll('.dropdown-item');
+        //     nodes[index]?.remove();
+        // }
 
         !!onChange && onChange({
           value: newValueArr,
@@ -901,6 +877,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         });
       }
 
+      setValueMulti(newValueArr);
       setTimeout(() => {
         updatePositionDropdown();
       }, 0);
@@ -936,20 +913,17 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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);
+      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);
+
+      setValueMulti([...currentValue[unique]]);
       !!onChange && onChange({
         value: currentValue[unique],
         removed: value
@@ -961,18 +935,17 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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 +967,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 +1000,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 +1047,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 +1088,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 +1195,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]))) {
@@ -1342,9 +1311,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 +1324,46 @@ 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 = [...dataSource];
+
+      if (Array.isArray(valueObjectDefault)) {
+        dataFilter = [...dataFilter, ...valueObjectDefault];
+      } else if (typeof valueObjectDefault === 'object') {
+        dataFilter = [...dataFilter, valueObjectDefault];
+      }
+
+      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 +1418,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 +1430,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 +1449,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 +1488,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
         }
         svg {
             ${borderBox};
-            padding: ${itemMultipleSize === 'medium' ? 2 : 1}px;
+            padding: 2px;
         }
     }
     .DGN-UI-Typography {
@@ -1505,30 +1496,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 +1756,6 @@ const DisabledCSS = css`
 Dropdown.defaultProps = {
   viewType: 'underlined',
   itemMode: 'normal',
-  itemMultipleSize: 'medium',
   className: '',
   label: '',
   placeholder: getGlobal('dropdownPlaceholder'),
@@ -1821,9 +1787,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 +1952,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
    *

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

@@ -3,7 +3,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import React, { forwardRef, memo, useState, useRef, useEffect, useMemo } from 'react';
+import { forwardRef, memo, useState, useRef, useEffect, useMemo, Fragment } from 'react';
 import theme from '../../../theme/settings';
 import { randomString } from '../../../utils';
 import Typography from './../../typography';
@@ -98,7 +98,7 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       color: disabled ? clDisabled : '',
       type: 'p1',
       ...labelProps
-    }, jsx(React.Fragment, null, label !== null && label !== void 0 ? label : value, required && jsx("span", {
+    }, jsx(Fragment, null, label !== null && label !== void 0 ? label : value, required && jsx("span", {
       style: {
         color: disabled ? clDisabled : clDanger
       }

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

@@ -3,7 +3,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import React, { forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
+import { forwardRef, memo, useEffect, useMemo, useRef, useState, Fragment } from 'react';
 import theme from '../../../theme/settings';
 import generateRandom from '../../../utils/randomString';
 import Typography from '../../typography';
@@ -184,7 +184,7 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     hoverTooltip: hoverTooltip,
     lineClamp: lineClamp || null,
     mapping: 'label'
-  }, jsx(React.Fragment, null, label, required && jsx("span", {
+  }, jsx(Fragment, null, label, required && jsx("span", {
     style: {
       color: disabled ? clDisabled : clDanger
     }

package/global/index.js

@@ -31,7 +31,7 @@ const globalObject = {
     // Transfer
     choices: 'lựa chọn',
     chosen: 'được chọn',
-    selected: 'được chọn',
+    selected: 'Đã chọn',
     // Date Picker
     helperInvalid: 'Sai định dạng',
     helperValid: 'Phù hợp',
@@ -64,8 +64,8 @@ const globalObject = {
       min: 'Chưa đạt giá trị tối thiểu cho phép',
       required: 'Trường này bắt buộc nhập'
     },
-    inputPlaceholder: "Nhập",
-    dropdownPlaceholder: "Chọn"
+    inputPlaceholder: 'Nhập',
+    dropdownPlaceholder: 'Chọn'
   },
   en: {
     agree: 'Agree',
@@ -130,8 +130,8 @@ const globalObject = {
       min: 'The minimum allowed value has not been reached',
       required: 'This field is required'
     },
-    inputPlaceholder: "Type something",
-    dropdownPlaceholder: "Select"
+    inputPlaceholder: 'Type something',
+    dropdownPlaceholder: 'Select'
   },
   delayOnInput: 500
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.70-beta.3",
+  "version": "1.3.70-beta.5",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",
@@ -59,6 +59,7 @@
     "jest": "^27.5.1",
     "lint-staged": "^12.1.2",
     "mkdirp": "^1.0.4",
+    "npm-run-all": "^4.1.5",
     "onchange": "^7.1.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "react": "^17.0.1",

package/utils/sb-teamplate.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, js } from '@emotion/core';
+import { css } from '@emotion/core';
 import { Col, Row, Tooltip, Typography } from '../components/index';
 import { useTheme } from '../theme';
 import { flexWrap, flexRow, alignCenter } from '../styles/general';
@@ -15,7 +15,7 @@ export const Template = ({
   disabledTooltip,
   component: Component,
   horizontal
-} = props) => {
+}) => {
   return /*#__PURE__*/React.createElement(Row, {
     style: {
       padding: spacing(2)
@@ -57,7 +57,7 @@ const StoryBookTemplate = ({
   propsCustom,
   listItem,
   componentName
-} = props) => {
+}) => {
   return /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
     xs: 12
   }, /*#__PURE__*/React.createElement(ImportComp, {