diginet-core-ui 1.3.45 → 1.3.46

package/assets/images/menu/dhr/MHRM09N1025.svg

@@ -0,0 +1,12 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.7901 28.13C30.7901 27.5 30.2701 26.99 29.6401 26.99H19.2301C18.5901 26.99 18.0801 27.5 18.0801 28.13C18.0801 28.76 18.6001 29.27 19.2301 29.27H29.6401C30.2701 29.27 30.7901 28.76 30.7901 28.13Z" fill="#FF8C00"/>
+<path d="M29.6401 22.41H19.2301C18.5901 22.41 18.0801 22.92 18.0801 23.55C18.0801 24.18 18.6001 24.69 19.2301 24.69H29.6401C30.2801 24.69 30.7901 24.18 30.7901 23.55C30.7901 22.92 30.2701 22.41 29.6401 22.41Z" fill="#FF8C00"/>
+<path d="M19.2301 31.56C18.5901 31.56 18.0801 32.07 18.0801 32.7C18.0801 33.33 18.6001 33.84 19.2301 33.84H25.0201C25.6601 33.84 26.1701 33.33 26.1701 32.7C26.1701 32.07 25.6501 31.56 25.0201 31.56H19.2301Z" fill="#FF8C00"/>
+<path d="M10.0601 25.8101H11.2001V23.5701H10.2401V22.8501C10.8601 22.7501 11.1701 22.6401 11.5201 22.4301H12.3901V25.8201H13.3301V26.7601H10.0601V25.8101Z" fill="#FF8C00"/>
+<path d="M14.8801 25.9401C14.8801 25.4501 15.2401 25.0501 15.7801 25.0501C16.3201 25.0501 16.6801 25.4501 16.6801 25.9401C16.6801 26.4301 16.3201 26.8301 15.7801 26.8301C15.2401 26.8301 14.8801 26.4301 14.8801 25.9401Z" fill="#FF8C00"/>
+<path d="M9.92011 33.17C11.0901 32.23 11.9401 31.5 11.9401 30.91C11.9401 30.52 11.6901 30.34 11.3001 30.34C10.9801 30.34 10.7201 30.55 10.4901 30.75L9.86011 30.12C10.3401 29.64 10.7801 29.42 11.4701 29.42C12.4101 29.42 13.0601 29.98 13.0601 30.84C13.0601 31.54 12.3301 32.3 11.6101 32.9C11.8501 32.87 12.1801 32.85 12.4001 32.85H13.2801V33.83H9.92011V33.17Z" fill="#FF8C00"/>
+<path d="M14.8801 33.03C14.8801 32.54 15.2401 32.14 15.7801 32.14C16.3201 32.14 16.6801 32.54 16.6801 33.03C16.6801 33.52 16.3201 33.92 15.7801 33.92C15.2401 33.92 14.8801 33.53 14.8801 33.03Z" fill="#FF8C00"/>
+<path d="M34.74 9.52L25.35 0.26C25.17 0.1 24.93 0 24.7 0H8.26C6.47 0 5 1.45 5 3.22V35.78C5 37.55 6.47 39 8.26 39H31.73C33.53 39 34.99 37.55 34.99 35.78V10.16C35 9.93 34.9 9.69 34.74 9.52ZM25.61 3.09L26.05 3.52L31.42 8.82L31.86 9.26H27.03C26.25 9.26 25.6 8.63 25.6 7.85V3.09H25.61ZM33.16 35.78C33.16 36.56 32.52 37.19 31.73 37.19H8.26C7.48 37.19 6.83 36.56 6.83 35.78V3.22C6.83 2.44 7.47 1.81 8.26 1.81H23.77V7.85C23.77 9.62 25.24 11.07 27.03 11.07H31.22L32.9 11.06H33.16V35.78Z" fill="#2680EB"/>
+<path d="M13.6299 9.34994C13.1999 8.87994 13.2199 8.14994 13.6899 7.71994L15.6799 5.85994C15.7899 5.75994 15.9199 5.67994 16.0599 5.61994C16.4999 5.44994 16.9899 5.56994 17.3099 5.90994L17.6599 6.28994C17.8699 6.50994 17.9099 6.82994 17.7999 7.08994L14.7799 9.91994C14.4999 10.0199 14.1899 9.93994 13.9899 9.72994L13.6299 9.34994ZM20.5499 10.0499C20.5399 10.0399 20.5499 10.0399 20.5499 10.0499L17.5299 12.8599C17.5299 12.8599 17.5299 12.8599 17.5399 12.8699C17.4299 13.1299 17.4699 13.4499 17.6799 13.6699L18.0299 14.0499C18.3499 14.3899 18.8399 14.5099 19.2799 14.3399C19.4199 14.2899 19.5499 14.2099 19.6599 14.0999L21.6499 12.2399C22.1099 11.8099 22.1399 11.0799 21.6999 10.6199L21.3499 10.2399C21.1299 10.0199 20.8299 9.94994 20.5499 10.0499ZM16.3199 12.6799C16.3799 12.6599 16.4299 12.6199 16.4799 12.5799L16.5799 12.4899C16.7199 12.5999 16.8999 12.6299 17.0699 12.5699C17.0999 12.5599 17.1199 12.5499 17.1499 12.5299L20.2399 9.64994C20.2999 9.56994 20.3399 9.46994 20.3399 9.36994C20.3399 9.23994 20.2999 9.10994 20.2099 9.01994L18.8099 7.51994C18.6399 7.33994 18.3699 7.31994 18.1799 7.44994L15.1299 10.2899C15.0599 10.3699 15.0099 10.4799 15.0099 10.5899C15.0099 10.6999 15.0399 10.7999 15.0999 10.8899L14.9999 10.9799C14.8999 11.0699 14.8499 11.1899 14.8399 11.3199C14.8399 11.4099 14.8599 11.4899 14.8999 11.5699L13.4399 12.9399C13.3899 12.9199 13.3399 12.9099 13.2899 12.9099C13.1599 12.9099 13.0299 12.9499 12.9399 13.0399L9.15988 16.5699C8.95988 16.7499 8.94988 17.0699 9.13988 17.2599L9.81988 17.9999C9.90988 18.0899 10.0299 18.1499 10.1599 18.1599C10.2299 18.1599 10.2899 18.1499 10.3499 18.1299C10.4099 18.1099 10.4599 18.0699 10.5099 18.0299L14.2899 14.4999C14.4299 14.3699 14.4799 14.1799 14.4299 13.9999L15.8899 12.6299C15.9599 12.6799 16.0499 12.6999 16.1399 12.7099C16.1899 12.7099 16.2599 12.6999 16.3199 12.6799Z" fill="#FF4444"/>
+<path d="M21.4599 16.6599H15.0699C14.7699 16.6599 14.5299 16.8999 14.5299 17.1999V18.0199C14.5299 18.3199 14.7699 18.5599 15.0699 18.5599H21.4599C21.7599 18.5599 21.9999 18.3199 21.9999 18.0199V17.1999C21.9999 16.8999 21.7599 16.6599 21.4599 16.6599Z" fill="#FF4444"/>
+</svg>

package/components/avatar/index.js

@@ -27,59 +27,6 @@ const {
 const existed = {},
       urlAvatar = {},
       popupHandler = {};
-
-const getDirection = direction => {
-  switch (direction) {
-    case 'top':
-      return {
-        anchorOrigin: {
-          vertical: 'top',
-          horizontal: 'center'
-        },
-        transformOrigin: {
-          vertical: 'bottom',
-          horizontal: 'center'
-        }
-      };
-
-    case 'left':
-      return {
-        anchorOrigin: {
-          vertical: 'center',
-          horizontal: 'left'
-        },
-        transformOrigin: {
-          vertical: 'center',
-          horizontal: 'right'
-        }
-      };
-
-    case 'right':
-      return {
-        anchorOrigin: {
-          vertical: 'center',
-          horizontal: 'right'
-        },
-        transformOrigin: {
-          vertical: 'center',
-          horizontal: 'left'
-        }
-      };
-
-    default:
-      return {
-        anchorOrigin: {
-          vertical: 'bottom',
-          horizontal: 'center'
-        },
-        transformOrigin: {
-          vertical: 'top',
-          horizontal: 'center'
-        }
-      };
-  }
-};
-
 const blurKeyframe = keyframes`
     0% { -webkit-filter: blur(4px);}
     25% { -webkit-filter: blur(3px);}
@@ -109,7 +56,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   readOnly,
   disabled,
   lazyLoading,
-  ...props
+  id
 }, reference) => {
   if (!defaultSrc) defaultSrc = AvatarDefault;
   const ref = useRef(null);
@@ -128,6 +75,14 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setIsInView(true);
   });
 
+  const _ActionIconCSS = ActionIconCSS(actionIconWidth);
+
+  const _AvatarPreviewCSS = AvatarPreviewCSS(readOnly);
+
+  const _AvatarContainerCSS = AvatarContainerCSS(_AvatarPreviewCSS.name, _ActionIconCSS.name);
+
+  const _AvatarRootCSS = AvatarRootCSS(width, height, outlined);
+
   const _isMobile = isMobile.any();
 
   const triggerInput = e => {
@@ -204,36 +159,31 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const renderImage = () => {
+    const _image = jsx(Fragment, null, !onLoaded && jsx("img", {
+      src: defaultSrc,
+      alt: '',
+      style: {
+        objectFit: 'cover'
+      }
+    }), jsx("img", {
+      css: blurAnimationCSS,
+      src: srcState,
+      alt: srcState,
+      style: {
+        objectFit: 'cover'
+      },
+      onLoad: () => setOnLoaded(true)
+    }));
+
     if (lazyLoading) {
-      return isInView ? jsx(Fragment, null, !onLoaded && jsx("img", {
-        src: AvatarDefault,
-        alt: '',
-        style: {
-          objectFit: 'cover'
-        }
-      }), jsx("img", {
-        css: blurAnimation,
-        src: srcState || defaultSrc,
-        alt: srcState || defaultSrc,
-        style: {
-          objectFit: 'cover'
-        },
-        onLoad: () => setOnLoaded(true)
-      })) : jsx("img", {
-        src: AvatarDefault,
+      return isInView ? _image : jsx("img", {
+        src: defaultSrc,
         alt: '',
         style: {
           objectFit: 'cover'
         }
       });
-    } else return jsx("img", {
-      css: blurAnimation,
-      src: srcState || defaultSrc,
-      alt: srcState || defaultSrc,
-      style: {
-        objectFit: 'cover'
-      }
-    });
+    } else return _image;
   };
 
   const showMoreInfo = () => {
@@ -268,16 +218,19 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         urlAvatar[unique] = src;
         img.src = src;
         img.alt = '';
-        setSrcState(src);
-        existed[unique] = true;
 
         img.onerror = () => {
           setSrcState(null);
           existed[unique] = false;
         };
+
+        img.onload = () => {
+          setSrcState(src);
+          existed[unique] = true;
+        };
       }
     }
-  }, [src, lazyLoading, isInView]);
+  }, [src]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
@@ -287,89 +240,87 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
-  const AvatarView = useMemo(() => jsx("div", {
-    css: AvatarContainer(readOnly, actionIconWidth),
-    ref: ref,
-    id: unique,
-    className: disabled ? 'disabled' : ''
-  }, jsx("div", {
-    css: AvatarRoot(width, height, outlined),
-    className: ['DGN-UI-Avatar', className].join(' ').trim().replace(/\s+/g, ' '),
-    ...props
-  }, jsx("input", {
-    ref: inputRef,
-    type: "file",
-    title: '',
-    accept: 'image/*',
-    onChange: onChangeAvatar
-  }), jsx("div", {
-    css: AvatarPreview(readOnly),
-    onClick: _onClick,
-    ref: avatarRef,
-    onMouseEnter: _onMouseEnter,
-    onMouseLeave: _onMouseLeave,
-    tabIndex: "-1",
-    onBlur: closeMoreInfo
-  }, renderImage())), !readOnly && !disabled && jsx("span", {
-    css: ActionIcon(actionIconWidth)
-  }, jsx(ButtonIcon, {
-    viewType: 'ghost',
-    name: 'Edit',
-    width: actionIconWidth,
-    height: actionIconHeight,
-    className: 'icon-edit',
-    onClick: triggerInput
-  }), clearAble && srcState && jsx(ButtonIcon, {
-    viewType: 'ghost',
-    name: 'Delete',
-    width: actionIconWidth,
-    height: actionIconHeight,
-    className: 'icon-delete',
-    onClick: onRemoveAvatar,
-    style: {
-      marginTop: '8px'
-    }
-  }))), [width, height, readOnly, disabled, clearAble, maxSize, matchType, hoverAble, outlined, actionIconWidth, actionIconHeight, lazyLoading, srcState, isInView, onLoaded]);
-  const ModalView = useMemo(() => jsx(ModalSample, {
-    open: viewAvatar,
-    onClose: () => setViewAvatar(false),
-    width: 'max-content'
-  }, jsx("img", {
-    src: urlAvatar[unique],
-    alt: "",
-    style: {
-      objectFit: 'cover',
-      maxHeight: '100%',
-      maxWidth: '100%',
-      margin: 'auto',
-      display: 'block'
-    }
-  })), [viewAvatar]);
-  const MoreInfoView = useMemo(() => jsx(Popover, {
-    arrow: true,
-    open: viewMoreInfo,
-    pressESCToClose: false,
-    bgColor: fillTooltip,
-    anchor: avatarRef,
-    fullScreen: false,
-    width: 'max-content',
-    ...getDirection(direction)
-  }, jsx("div", {
-    css: MoreInfo
-  }, typeof data === 'function' ? data() : renderData())), [viewMoreInfo, direction, data]);
-  const PopupView = useMemo(() => jsx(Popup, {
-    getPopup: func => popupHandler[unique] = func,
-    type: 'info',
-    title: maxSizeError,
-    icon: 'danger',
-    fullScreen: true
-  }), [maxSizeError]);
-  return jsx(Fragment, null, AvatarView, ModalView, hoverAble && MoreInfoView, !disabled && !readOnly && PopupView);
+  return useMemo(() => {
+    return jsx(Fragment, null, jsx("div", {
+      css: _AvatarContainerCSS,
+      ref: ref,
+      id: unique,
+      className: disabled ? 'disabled' : ''
+    }, jsx("div", {
+      css: _AvatarRootCSS,
+      className: ['DGN-UI-Avatar', className].join(' ').trim().replace(/\s+/g, ' '),
+      id: id
+    }, jsx("input", {
+      ref: inputRef,
+      type: "file",
+      title: '',
+      accept: 'image/*',
+      onChange: onChangeAvatar
+    }), jsx("div", {
+      css: _AvatarPreviewCSS,
+      onClick: _onClick,
+      ref: avatarRef,
+      onMouseEnter: _onMouseEnter,
+      onMouseLeave: _onMouseLeave,
+      tabIndex: "-1",
+      onBlur: closeMoreInfo
+    }, renderImage())), !readOnly && !disabled && jsx("span", {
+      css: _ActionIconCSS
+    }, jsx(ButtonIcon, {
+      viewType: 'ghost',
+      name: 'Edit',
+      width: actionIconWidth,
+      height: actionIconHeight,
+      className: 'icon-edit',
+      onClick: triggerInput
+    }), clearAble && srcState && jsx(ButtonIcon, {
+      viewType: 'ghost',
+      name: 'Delete',
+      width: actionIconWidth,
+      height: actionIconHeight,
+      className: 'icon-delete',
+      onClick: onRemoveAvatar,
+      style: {
+        marginTop: '8px'
+      }
+    }))), jsx(ModalSample, {
+      open: viewAvatar,
+      onClose: () => setViewAvatar(false),
+      width: 'max-content'
+    }, jsx("img", {
+      src: urlAvatar[unique],
+      alt: "",
+      style: {
+        objectFit: 'cover',
+        maxHeight: '100%',
+        maxWidth: '100%',
+        margin: 'auto',
+        display: 'block'
+      }
+    })), hoverAble && jsx(Popover, {
+      arrow: true,
+      open: viewMoreInfo,
+      pressESCToClose: false,
+      bgColor: fillTooltip,
+      anchor: avatarRef,
+      fullScreen: false,
+      width: 'max-content',
+      direction: direction
+    }, jsx("div", {
+      css: MoreInfoCSS
+    }, typeof data === 'function' ? data() : renderData())), !disabled && !readOnly && jsx(Popup, {
+      getPopup: func => popupHandler[unique] = func,
+      type: 'info',
+      title: maxSizeError,
+      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]);
 }));
 
-const ActionIcon = actionIconWidth => css`
-    ${flexCol}
-    ${positionAbsolute}
+const ActionIconCSS = actionIconWidth => css`
+    ${flexCol};
+    ${positionAbsolute};
     right: ${-actionIconWidth}px;
     min-width: ${actionIconWidth}px;
     transition: opacity 0.5s;
@@ -377,48 +328,48 @@ const ActionIcon = actionIconWidth => css`
     z-index: 9002;
 `;
 
-const AvatarPreview = readOnly => css`
-    ${displayBlock}
-    ${positionRelative}
-    ${overflowHidden}
+const AvatarPreviewCSS = readOnly => css`
+    ${displayBlock};
+    ${positionRelative};
+    ${overflowHidden};
     width: 100%;
     height: 100%;
     border-radius: 50%;
     cursor: ${readOnly ? 'initial' : 'pointer'};
 `;
 
-const AvatarContainer = (readOnly, actionIconWidth) => css`
-    ${inlineFlex}
-    ${positionRelative}
-    ${alignCenter}
+const AvatarContainerCSS = (AvatarPreviewCSSName, ActionIconCSSName) => css`
+    ${inlineFlex};
+    ${positionRelative};
+    ${alignCenter};
     &.disabled {
-        .css-${AvatarPreview(readOnly).name} {
+        .css-${AvatarPreviewCSSName} {
             ${pointerEventsNone}
             cursor: inherit;
         }
-        .css-${ActionIcon(actionIconWidth).name} {
+        .css-${ActionIconCSSName} {
             display: none !important;
         }
     }
     &:hover {
-        .css-${ActionIcon(actionIconWidth).name} {
+        .css-${ActionIconCSSName} {
             opacity: 1;
         }
     }
 `;
 
-const AvatarRoot = (width, height, outlined) => css`
-    ${displayBlock}
-    ${positionRelative}
-    ${overflowHidden}
-    ${userSelectNone}
-    ${borderNone}
-    ${parseWidthHeight(width, height)}
+const AvatarRootCSS = (width, height, outlined) => css`
+    ${displayBlock};
+    ${positionRelative};
+    ${overflowHidden};
+    ${userSelectNone};
+    ${borderNone};
+    ${parseWidthHeight(width, height)};
     border: ${typeof outlined === 'boolean' && outlined ? `1px solid ${white}` : outlined};
     border-radius: 50%;
     box-sizing: content-box;
     input {
-        ${displayNone}
+        ${displayNone};
     }
     img {
         width: 100%;
@@ -426,12 +377,12 @@ const AvatarRoot = (width, height, outlined) => css`
     }
 `;
 
-const MoreInfo = css`
-    ${displayBlock}
-    ${positionRelative}
+const MoreInfoCSS = css`
+    ${displayBlock};
+    ${positionRelative};
     padding: 8px;
 `;
-const blurAnimation = css`
+const blurAnimationCSS = css`
     animation: ${blurKeyframe} 1s ease;
 `;
 Avatar.defaultProps = {
@@ -445,7 +396,7 @@ Avatar.defaultProps = {
   actionIconWidth: 24,
   actionIconHeight: 24,
   className: '',
-  direction: 'down',
+  direction: 'bottom',
   maxSizeError: `File ${getGlobal(['errorDefault', 'maxSize'])}`,
   wrongTypeError: `File ${getGlobal(['errorDefault', 'fileType'])}`,
   matchType: /^image\/(gif|jpe?g|tiff?|png|webp|bmp|svg(\+xml)?)$/i,
@@ -505,7 +456,7 @@ Avatar.propTypes = {
   defaultSrc: PropTypes.string,
 
   /** the direction to display more info */
-  direction: PropTypes.oneOf(['top', 'down', 'left', 'right']),
+  direction: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
 
   /**
    * data to display when hoverAble is true<br />

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

@@ -105,6 +105,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   dropdownItemStyle
 }, reference) => {
+  if (multiple && selectBox === undefined) selectBox = true;
   const dropdownRef = useRef(null);
   const timerRef = useRef(null);
   const formRef = useRef(null);
@@ -169,14 +170,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
 
         setOpenState(true);
-        setTimeout(() => {
-          showDropdown();
-          setTimeout(() => {
-            if (children && boxRef.current && boxRef.current.querySelector('input')) {
-              boxRef.current.querySelector('input').focus();
-            }
-          }, 10);
-        }, timing[unique + 'Box'] ? 200 : 0);
       }
     } else if (multiple || itemMode === 'treeview') {
       if (searchRef.current) {
@@ -607,7 +600,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
 
       const dropdownItem = document.createElement('div');
-      dropdownItem.className = `css-${_DropdownItemCSS.name}`;
+      dropdownItem.className = `DGN-UI-Dropdown-Item css-${_DropdownItemCSS.name}`;
       dropdownItem.tabIndex = -1;
       dropdownItem.addEventListener('click', () => onChangeValue(displayText, value, icon, data, i));
       dropdownItem.addEventListener('keypress', e => {
@@ -952,6 +945,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     e && e.target && e.target.blur();
     updatePositionDropdown();
+    onInput === null || onInput === void 0 ? void 0 : onInput({ ...(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current),
+      target: {
+        value: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.value
+      }
+    });
     !!onChange && onChange({
       value: currentValue[unique]
     });
@@ -1035,7 +1033,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
 
       if (!isSearch[unique]) {
-        inputRef.current.value = '';
+        inputRef.current.value = source;
       }
     }
   };
@@ -1130,13 +1128,18 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     currentRef.showDropdown = () => showDropdown();
 
-    currentRef.onClear = onClear, currentRef.setPreviousValue = setPreviousValue, currentRef.setValue = value => {
+    currentRef.onClear = onClear;
+    currentRef.setPreviousValue = setPreviousValue;
+
+    currentRef.setValue = value => {
       if (allValue[unique][allValue[unique].length - 1] !== value) {
         allValue[unique].push(value);
       }
 
       setValueIntoInput(value);
-    }, currentRef.DOM = dropdownRef.current;
+    };
+
+    currentRef.DOM = dropdownRef.current;
     return currentRef;
   });
   useEffect(() => {
@@ -1298,7 +1301,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         !!onLoadMore && dataSource.length < total && boxRef.current.addEventListener('scroll', onLoadMoreHandler);
       } else {
         isSearch[unique] = false;
-        renderDropdown();
       }
     } else {
       if (!multiple && !disabled && !readOnly) {
@@ -1406,6 +1408,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ...errorStyle
     }
   }, error), [error, disabled, errorStyle]);
+  const dropdownComp = useMemo(() => {
+    return openState ? /*#__PURE__*/createPortal(showDropdown(), document.body) : null;
+  }, [openState, dataSource]);
   /* End component */
 
   return jsx(Fragment, null, jsx("div", {
@@ -1413,7 +1418,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: DropdownRootCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, 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), openState ? /*#__PURE__*/createPortal(showDropdown(), document.body) : null);
+  }, labelComp, inputComp, errorComp), dropdownComp);
 }));
 /* Start styled */
 
@@ -1756,7 +1761,7 @@ Dropdown.defaultProps = {
   required: false,
   multiple: false,
   allowSearch: false,
-  selectBox: false,
+  closeAfterSelect: true,
   inputProps: {},
   formStyle: {},
   dataSource: [],
@@ -1796,14 +1801,14 @@ Dropdown.propTypes = {
   /** display this icon if not found the icon follow iconExpr */
   iconDefault: PropTypes.string,
 
-  /** field name used for icon display<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** field name used for icon display<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1821,9 +1826,9 @@ Dropdown.propTypes = {
   /** 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
+  /** field name used for text display<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
@@ -1833,9 +1838,9 @@ Dropdown.propTypes = {
   /** the field name used for the returned result */
   valueExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   * duration wait enter search content on search<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+  /**
+   * duration wait enter search content on search<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
@@ -1902,19 +1907,19 @@ Dropdown.propTypes = {
   /** The array of elements that appear in the dropdown */
   dataSource: PropTypes.array,
 
-  /** function displays items by custom<br/>
-   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
-   * --> such as: displayExpr={'name - role'}
+  /** function displays items by custom<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
 
-  /** function displays selected items by custom, example:<br/>
-   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** function displays selected items by custom, example:<br/>
+   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.func,
 
-  /** the function will run when entering input<br/>
-   * if undefined: the filter function will run (default)
+  /** the function will run when entering input<br/>
+   * if undefined: the filter function will run (default)
    */
   onInput: PropTypes.func,
 
@@ -1933,19 +1938,19 @@ Dropdown.propTypes = {
   /** the contents in Dropdown box (Exp: TreeView) */
   children: PropTypes.node,
 
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * showDropdown(): Show dropdown
-   * * closeDropdown(): Close dropdown
-   * * onClear(): Clear selected value
-   * * setPreviousValue(): Set value to previous value
-   * * setValue(value): Set value of dropdown
-   *  * @param {value} - string || number || array
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * showDropdown(): Show dropdown
+   * * closeDropdown(): Close dropdown
+   * * onClear(): Clear selected value
+   * * setPreviousValue(): Set value to previous value
+   * * setValue(value): Set value of dropdown
+   *  * @param {value} - string || number || array
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

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

@@ -3,11 +3,11 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useState, useRef } from 'react';
+import { forwardRef, memo, useState, useRef, useEffect, useMemo } from 'react';
 import theme from '../../../theme/settings';
 import { randomString } from '../../../utils';
 import Typography from './../../typography';
-import { cursorPointer, borderBox, positionAbsolute, positionRelative, displayNone, displayBlock, pointerEventsNone, cursorNotAllowed } from '../../../styles/general';
+import { cursorPointer, borderBox, positionAbsolute, positionRelative, displayNone, displayBlock, cursorNoDrop } from '../../../styles/general';
 const {
   spacing,
   colors: {
@@ -24,6 +24,7 @@ const {
 const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   disabled,
+  readOnly,
   name,
   defaultChecked,
   checked,
@@ -34,8 +35,7 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onChange,
   inputRef,
   inputProps,
-  lineClamp,
-  hoverTooltip,
+  labelProps,
   ...props
 }, ref) => {
   if (!inputRef) {
@@ -46,127 +46,140 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allowNumber: false,
     allowSymbol: false
   }));
-  const formCheck = css`
-                ${positionRelative};
-                ${displayBlock};
-                &.disabled {
-                    ${pointerEventsNone};
-                }
-            `;
-  const formCheckInput = css`
-                ${positionAbsolute};
-                ${borderBox};
-                ${displayNone};
-                &:hover ~ label::before {
-                    box-shadow: 0 0 0 2px ${clFillHover};
-                    background: ${clFillHover};
-                }
-                &:checked ~ label:after {
-                    ${borderBox};
-                    ${positionAbsolute};
-                    width: ${width / 2}px;
-                    height: ${width / 2}px;
-                    left: ${width / 4}px;
-                    background: ${clSystemActive};
-                    border-radius: 50%;
-                    top: 50%;
-                    transform: translateY(-50%);
-                    content: '';
-                    transition: 0.28s ease;
-                }
-                &:checked ~ label:before {
-                    border-color: ${clSystemActive};
-                }
-                &:disabled + label {
-                    ${pointerEventsNone};
-                    ${cursorNotAllowed};
-                    color: ${clDisabled};
-                    &::after {
-                        background: ${clDisabled};
-                    }
-                    &::before {
-                        border-color: ${clDisabled};
-                    }
-                }
-            `;
-  const formCheckLabel = css`
-                ${displayBlock};
-                ${positionRelative};
-                ${cursorPointer};
-                padding-left: ${width + spacing(1.5)}px;
-                min-height: ${width}px;
-                margin: 2px;
-                &:before {
-                    ${positionAbsolute};
-                    ${borderBox};
-                    width: ${width}px;
-                    height: ${width}px;
-                    border-radius: 50%;
-                    top: 50%;
-                    transform: translateY(-50%);
-                    left: 0;
-                    content: '';
-                    border: 2px solid ${clSystemRest};
-                    transition: 0.28s ease;
-                }
-            `;
+  const [checkedState, setCheckedState] = useState(Boolean(checked !== undefined ? checked : defaultChecked));
+
+  const _formCheckInputCSS = formCheckInputCSS(width);
+
+  const _formCheckLabelCSS = formCheckLabelCSS(width);
 
   const handleChange = e => {
-    const el = { ...e
+    if (disabled || readOnly) return;
+    if (checked === undefined) setCheckedState(true);
+    e = {
+      value: value,
+      target: { ...inputRef.current,
+        checked: true
+      }
     };
-    el.value = value !== null && value !== void 0 ? value : label;
-    onChange && onChange(el);
+    if (onChange) onChange(e);
   };
 
-  return jsx("div", {
-    id: 'DGN-Core-Radio-' + (id || unique),
-    css: formCheck,
-    className: ['DGN-UI-Radio', disabled ? 'disabled' : '', className].join(' ').trim(),
-    ref: ref,
-    ...props
-  }, jsx("input", { ...inputProps,
-    disabled: disabled,
-    ref: inputRef,
-    name: name,
-    hidden: true,
-    checked: checked,
-    type: "radio",
-    defaultChecked: defaultChecked,
-    css: formCheckInput,
-    id: id || unique,
-    onChange: handleChange
-  }), jsx("label", {
-    css: formCheckLabel,
-    htmlFor: id || unique
-  }, jsx(Typography, {
-    color: disabled ? clDisabled : '',
-    type: 'p1',
-    lineClamp: lineClamp,
-    hoverTooltip: hoverTooltip
-  }, label !== null && label !== void 0 ? label : value)));
+  useEffect(() => {
+    if (checked !== undefined) setCheckedState(Boolean(checked));
+  }, [checked]);
+  return useMemo(() => {
+    return jsx("div", {
+      id: 'DGN-Core-Radio-' + (id || unique),
+      css: formCheckCSS,
+      className: ['DGN-UI-Radio', className].join(' ').trim().replace(/\s+/g, ' '),
+      ref: ref,
+      ...props
+    }, jsx("input", { ...inputProps,
+      disabled: disabled,
+      ref: inputRef,
+      name: name,
+      hidden: true,
+      checked: checkedState,
+      type: "radio",
+      css: _formCheckInputCSS,
+      id: id || unique,
+      onChange: handleChange
+    }), jsx("label", {
+      css: _formCheckLabelCSS,
+      className: `${disabled ? 'disabled' : ''} ${readOnly ? 'read-only' : ''}`,
+      htmlFor: id || unique,
+      onClick: handleChange
+    }, jsx(Typography, {
+      color: disabled ? clDisabled : '',
+      type: 'p1',
+      ...labelProps
+    }, label !== null && label !== void 0 ? label : value)));
+  }, [disabled, onChange, readOnly, checkedState]);
 }));
+const formCheckCSS = css`
+    ${displayBlock};
+    padding: ${spacing(0.5)}px;
+`;
+
+const formCheckInputCSS = width => css`
+    ${positionAbsolute};
+    ${borderBox};
+    ${displayNone};
+    &:checked ~ label:after {
+        ${borderBox};
+        ${positionAbsolute};
+        width: ${width / 2}px;
+        height: ${width / 2}px;
+        left: ${width / 4}px;
+        background: ${clSystemActive};
+        border-radius: 50%;
+        top: 50%;
+        transform: translateY(-50%);
+        content: '';
+        transition: 0.28s ease;
+    }
+    &:checked ~ label:before {
+        border-color: ${clSystemActive};
+    }
+`;
+
+const formCheckLabelCSS = width => css`
+    ${displayBlock};
+    ${positionRelative};
+    ${cursorPointer};
+    margin-bottom: 0 !important;
+    padding-left: ${width + spacing(1.5)}px;
+    min-height: ${width}px;
+    &:hover:not(.disabled):not(.read-only)::before {
+        box-shadow: 0 0 0 2px ${clFillHover};
+        background: ${clFillHover};
+    }
+    &.disabled,
+    &.read-only {
+        ${cursorNoDrop};
+    }
+    &.disabled {
+        color: ${clDisabled};
+        &:after {
+            background: ${clDisabled} !important;
+        }
+        &:before {
+            border-color: ${clDisabled} !important;
+        }
+    }
+    &:before {
+        ${positionAbsolute};
+        ${borderBox};
+        width: ${width}px;
+        height: ${width}px;
+        border-radius: 50%;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 0;
+        content: '';
+        border: 2px solid ${clSystemRest};
+        transition: 0.28s ease;
+    }
+`;
+
 Radio.defaultProps = {
   disabled: false,
+  readOnly: false,
   defaultChecked: false,
   label: '',
   value: '',
   className: '',
-  width: 20
+  width: 20,
+  labelProps: {}
 };
 Radio.propTypes = {
-  /**
-   * If `true`, the component is disabled.
-   */
+  /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
 
-  /**
-   * If `true`, the component is checked.
-   */
+  /** If `true`, the component is checked. */
   checked: PropTypes.bool,
 
-  /**
-   * If `true`, the component is defaultChecked.
-   */
+  /** If `true`, the component is defaultChecked. */
   defaultChecked: PropTypes.bool,
 
   /** Id is randomized randomly to avoid duplication. */
@@ -176,7 +189,7 @@ Radio.propTypes = {
   name: PropTypes.string,
 
   /** The value of the component. The DOM API casts this to a string. */
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /** The name of the Radio is displayed on the interface */
   label: PropTypes.string,
@@ -184,7 +197,7 @@ Radio.propTypes = {
   /** The class for Radio component */
   className: PropTypes.string,
 
-  /** props for input */
+  /** Props for input. */
   inputProps: PropTypes.object,
 
   /** Callback fired when the state is changed.
@@ -195,10 +208,10 @@ Radio.propTypes = {
    *  */
   onChange: PropTypes.func,
 
-  /** The line-clamp property truncates text at a specific number of lines. */
-  lineClamp: PropTypes.number,
+  /** Prevent all event if true. */
+  readOnly: PropTypes.bool,
 
-  /** If true, hover will show tooltip when text clamped. */
-  hoverTooltip: PropTypes.bool
+  /** Props for Typography of label. */
+  labelProps: PropTypes.object
 };
 export default Radio;

package/components/typography/index.js

@@ -26,79 +26,18 @@ const {
 } = typography;
 const {
   system: {
-    active,
     rest
   },
-  semantic: {
-    success,
-    warning,
-    danger,
-    info
-  },
   text: {
-    main
+    main,
+    tooltip: textTooltip
   },
   fill: {
     tooltip: fillTooltip
-  },
-  text: {
-    tooltip: textTooltip
   }
 } = colors;
 const typographyMap = new Map([['t1', title1], ['t2', title2], ['t3', title3], ['t4', title4], ['h1', heading1], ['h2', heading2], ['h3', heading3], ['h4', heading4], ['h5', heading5], ['h6', heading6], ['p1', paragraph1], ['p2', paragraph2], ['p3', paragraph3]]);
-const colorMap = new Map([['default', main], ['primary', active], ['secondary', rest], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
-
-const getDirectionPopover = direction => {
-  switch (direction) {
-    case 'top':
-      return {
-        anchorOrigin: {
-          vertical: 'top',
-          horizontal: 'center'
-        },
-        transformOrigin: {
-          vertical: 'bottom',
-          horizontal: 'center'
-        }
-      };
-
-    case 'left':
-      return {
-        anchorOrigin: {
-          vertical: 'center',
-          horizontal: 'left'
-        },
-        transformOrigin: {
-          vertical: 'center',
-          horizontal: 'right'
-        }
-      };
-
-    case 'right':
-      return {
-        anchorOrigin: {
-          vertical: 'center',
-          horizontal: 'right'
-        },
-        transformOrigin: {
-          vertical: 'center',
-          horizontal: 'left'
-        }
-      };
-
-    default:
-      return {
-        anchorOrigin: {
-          vertical: 'bottom',
-          horizontal: 'center'
-        },
-        transformOrigin: {
-          vertical: 'top',
-          horizontal: 'center'
-        }
-      };
-  }
-};
+const colorMap = new Map([['default', main], ['secondary', rest]]);
 
 const isTextClamped = elm => (elm === null || elm === void 0 ? void 0 : elm.scrollHeight) > (elm === null || elm === void 0 ? void 0 : elm.clientHeight);
 
@@ -119,6 +58,9 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, reference) => {
   const ref = useRef(null);
   const [openTooltip, setOpenTooltip] = useState(false);
+
+  const _TextRootCSS = TextRootCSS(color, type, lineClamp);
+
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
@@ -131,7 +73,9 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const classNames = inTooltip => ['DGN-UI-Typography', center && 'DGN-Typography-center', fullWidth && 'DGN-Typography-fullWidth', `DGN-Typography-${type}`, uppercase && `DGN-Typography-Uppercase`, capitalize && 'DGN-Typography-Capitalize', !inTooltip && lineClamp && 'DGN-Typography-Clamp', className].join(' ').trim().replace(/\s+/g, ' ');
 
-  const setHoverTooltip = open => {
+  const setHoverTooltip = (open, isTooltip) => {
+    !isTooltip && setOpenTooltip(false);
+
     if (hoverTooltip && isTextClamped(ref.current)) {
       setOpenTooltip(open);
     }
@@ -151,11 +95,11 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     style: {
       color: textTooltip
     },
-    onMouseEnter: () => setHoverTooltip(true),
-    onMouseLeave: () => setHoverTooltip(false),
-    ...getDirectionPopover(tooltipDirection)
+    onMouseEnter: () => setHoverTooltip(true, true),
+    onMouseLeave: () => setHoverTooltip(false, true),
+    direction: tooltipDirection
   }, renderHTML(renderChildren(), mapping, {
-    css: TextRoot(color, type, lineClamp),
+    css: _TextRootCSS,
     className: classNames(true),
     style: {
       color: textTooltip,
@@ -164,7 +108,7 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   })), [openTooltip, tooltipDirection, children, mapping, color, type, lineClamp]);
   return jsx(Fragment, null, renderHTML(renderChildren(), mapping, {
     ref: ref,
-    css: TextRoot(color, type, lineClamp),
+    css: _TextRootCSS,
     className: classNames(false),
     onMouseEnter: () => setHoverTooltip(true),
     onMouseLeave: () => setHoverTooltip(false),
@@ -172,7 +116,7 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }), hoverTooltip && renderTooltip);
 }));
 
-const TextRoot = (color, type, lineClamp) => css`
+const TextRootCSS = (color, type, lineClamp) => css`
     ${displayInlineBlock};
     ${positionRelative};
     ${breakWord};
@@ -213,7 +157,7 @@ Typography.defaultProps = {
   mapping: 'span',
   className: '',
   hoverTooltip: false,
-  tooltipDirection: 'down'
+  tooltipDirection: 'bottom'
 };
 /** type of text<br/>
  * h1: Title <br/>
@@ -246,7 +190,7 @@ Typography.propTypes = {
   /** text-transform is uppercase if true */
   uppercase: PropTypes.bool,
 
-  /** text-transform is capitalize if true (and uppercase is false) */
+  /** text-transform is capitalized if true (and uppercase is false) */
   capitalize: PropTypes.bool,
 
   /** The line-clamp property truncates text at a specific number of lines. */
@@ -256,7 +200,7 @@ Typography.propTypes = {
   hoverTooltip: PropTypes.bool,
 
   /** Tooltip direction */
-  tooltipDirection: PropTypes.oneOf(['top', 'down', 'left', 'right']),
+  tooltipDirection: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
 
   /** allows maximum screen width if true */
   fullWidth: PropTypes.bool,

package/package.json

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

package/readme.md

@@ -38,6 +38,16 @@ npm test
 ```
 
 ## Changelog
+## 1.3.46
+- \[Added\]: MenuIcon – MHRM09N1025
+- \[Changed\]: Dropdown – Ref set value not in dataSource
+- \[Changed\]: Dropdown – Add logic if multiple then selectBox is true
+- \[Fixed\]: Typography – Fix bug tooltip show wrong when hover
+- \[Fixed\]: Avatar – Fix bug flickering
+- \[Fixed\]: Radio – Fix cursor pointer:none when readonly - Fix event onchange - Fix warning
+- \[Fixed\]: Dropdown – Bug not reload dataSource when onClear
+- \[Fixed\]: Dropdown – Fix bug scroll to top after load more
+
 ## 1.3.45
 - \[Added\]: MenuIcon – MHRM00N0005, MHRM09N1015, MHRM09N1400, MHRP25L0101, MHRP25L0501, MHRM09N1020
 - \[Changed\]: LineChart – Allow pointsColor, pathColor use CORE colors; Add prop className, style, pointHoverAlignment