diginet-core-ui 1.3.85-beta.5 → 1.3.86-beta.1

package/components/avatar/index.js

@@ -1,20 +1,19 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx, css, keyframes } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import AvatarDefault from "../../assets/avatar/default.svg";
-import { ButtonIcon, ModalSample, Popover, Popup, Typography } from "./..";
+import { ButtonIcon, Image, ModalSample, Popover, Popup, Typography } from "./..";
+import OptionWrapper from "../others/option-wrapper";
 import { getGlobal } from "../../global";
 import PropTypes from 'prop-types';
 import { forwardRef, Fragment, isValidElement, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { itemsCenter, borderNone, displayBlock, displayNone, flexCol, displayInlineFlex, overflowHidden, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from "../../styles/general";
+import { borderNone, borderRadius, boxContent, cursorInherit, cursorPointer, displayBlock, displayFlex, displayInlineFlex, displayNone, flexCol, itemsCenter, overflowHidden, parseMinWidth, parseWidthHeight, pd, positionAbsolute, positionRelative, userSelectNone, z } from "../../styles/general";
 import { useTheme } from "../../theme";
-import { classNames, isMobile, randomString } from "../../utils";
-import { useIntersection } from "../../utils/intersectionObserver";
-import OptionWrapper from "../others/option-wrapper";
+import { classNames, isMobile } from "../../utils";
 const {
   colors: {
     system: {
-      white
+      white: systemWhite
     },
     fill: {
       tooltip: fillTooltip
@@ -22,19 +21,8 @@ const {
     text: {
       tooltip: textTooltip
     }
-  },
-  spacing,
-  zIndex: zIndexCORE
+  }
 } = useTheme();
-const existed = {},
-  urlAvatar = {};
-const blurKeyframe = keyframes`
-    0% { -webkit-filter: blur(4px);}
-    25% { -webkit-filter: blur(3px);}
-    50% { -webkit-filter: blur(2px);}
-    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);
@@ -73,30 +61,22 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width,
   wrongTypeError
 }, reference) => {
+  if (!reference) reference = useRef(null);
   if (!defaultSrc) defaultSrc = AvatarDefault;
   const ref = useRef(null);
   const inputRef = useRef(null);
   const avatarRef = useRef(null);
   const popupRef = useRef(null);
-  const [unique] = useState(randomString(6, {
-    allowNumber: false,
-    allowSymbol: false
-  }));
   const [viewAvatar, setViewAvatar] = useState(false);
   const [viewMoreInfo, setViewMoreInfo] = useState(false);
   const [srcState, setSrcState] = useState(src);
-  const [isInView, setIsInView] = useState(false);
-  const [onLoaded, setOnLoaded] = useState(false);
-  useIntersection(ref, () => {
-    setIsInView(true);
-  });
   const _ActionIconCSS = ActionIconCSS(actionIconWidth);
-  const _AvatarPreviewCSS = AvatarPreviewCSS(readOnly);
-  const _AvatarContainerCSS = AvatarContainerCSS(_AvatarPreviewCSS.name, _ActionIconCSS.name);
+  const _AvatarPreviewCSS = AvatarPreviewCSS(readOnly || disabled);
+  const _AvatarContainerCSS = AvatarContainerCSS(_ActionIconCSS.name);
   const _AvatarRootCSS = AvatarRootCSS(width, height, outlined);
   const _isMobile = isMobile.any();
   const triggerInput = e => {
-    if (e || !existed[unique]) {
+    if (e || !srcState) {
       inputRef.current.click();
     } else {
       // on View
@@ -122,16 +102,13 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       return;
     }
     reader.onload = e => {
-      urlAvatar[unique] = e.target.result;
-      setSrcState(urlAvatar[unique]);
-      existed[unique] = true;
+      setSrcState(e.target.result);
     };
     reader.readAsDataURL(file);
     !!onChange && onChange(input);
   };
   const onRemoveAvatar = () => {
     setSrcState(null);
-    existed[unique] = false;
     inputRef.current.value = '';
     !!onRemove && onRemove();
   };
@@ -152,32 +129,6 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       type: 'p1'
     }, getGlobal('noDataText'));
   };
-  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 ? _image : jsx("img", {
-        src: defaultSrc,
-        alt: '',
-        style: {
-          objectFit: 'cover'
-        }
-      });
-    } else return _image;
-  };
   const showMoreInfo = () => {
     if (hoverAble) setViewMoreInfo(true);
   };
@@ -201,22 +152,11 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   useEffect(() => {
     if (src) {
-      if (isInView || !lazyLoading) {
-        inputRef.current.value = '';
-        const img = document.createElement('img');
-        urlAvatar[unique] = src;
-        img.src = src;
-        img.alt = '';
-        img.onerror = () => {
-          setSrcState(defaultSrc);
-          existed[unique] = false;
-        };
-        img.onload = () => {
-          setSrcState(src);
-          existed[unique] = true;
-        };
-      }
+      setSrcState(src);
     }
+    return () => {
+      setSrcState(defaultSrc);
+    };
   }, [src]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -230,11 +170,9 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return useMemo(() => {
     return jsx(Fragment, null, jsx("div", {
-      css: _AvatarContainerCSS,
-      ref: ref,
-      id: unique,
-      className: classNames(disabled && 'disabled')
+      css: _AvatarContainerCSS
     }, jsx("div", {
+      ref: ref,
       css: _AvatarRootCSS,
       className: classNames('DGN-UI-Avatar', className),
       style: style,
@@ -247,14 +185,21 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onChange: onChangeAvatar,
       disabled: disabled
     }), jsx("div", {
+      ref: avatarRef,
       css: _AvatarPreviewCSS,
       onClick: _onClick,
-      ref: avatarRef,
       onMouseEnter: _onMouseEnter,
       onMouseLeave: _onMouseLeave,
       tabIndex: "-1",
       onBlur: closeMoreInfo
-    }, renderImage())), allowEdit && !readOnly && !disabled && jsx("span", {
+    }, jsx(Image, {
+      circular: true,
+      defaultSrc: defaultSrc,
+      src: srcState,
+      width: '100%',
+      height: '100%',
+      lazyLoading: lazyLoading
+    }))), allowEdit && !readOnly && !disabled ? jsx("span", {
       css: _ActionIconCSS
     }, jsx(ButtonIcon, {
       viewType: 'ghost',
@@ -263,7 +208,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       height: actionIconHeight,
       className: 'icon-edit',
       onClick: triggerInput
-    }), clearAble && srcState && jsx(ButtonIcon, {
+    }), clearAble && srcState ? jsx(ButtonIcon, {
       viewType: 'ghost',
       name: 'Delete',
       width: actionIconWidth,
@@ -273,68 +218,53 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: {
         marginTop: '8px'
       }
-    }))), jsx(ModalSample, {
+    }) : null) : null), 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, {
+    }, jsx(Image, {
+      defaultSrc: defaultSrc,
+      src: srcState,
+      width: '100%',
+      height: '100%'
+    })), 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, {
+    }, typeof data === 'function' ? data() : renderData())) : null, !disabled && !readOnly ? jsx(Popup, {
       ref: popupRef,
       type: 'danger'
-    }));
-  }, [actionIconHeight, actionIconWidth, allowEdit, clearAble, data, defaultSrc, direction, disabled, height, hoverAble, lazyLoading, matchType, maxSize, maxSizeError, outlined, readOnly, width, isInView, onLoaded, srcState, viewAvatar, viewMoreInfo]);
+    }) : null);
+  }, [actionIconHeight, actionIconWidth, allowEdit, clearAble, data, defaultSrc, direction, disabled, height, hoverAble, lazyLoading, matchType, maxSize, maxSizeError, outlined, readOnly, width, srcState, viewAvatar, viewMoreInfo]);
 }));
 const ActionIconCSS = actionIconWidth => css`
+    ${displayFlex};
     ${flexCol};
     ${positionAbsolute};
+    ${parseMinWidth(actionIconWidth)};
     right: ${-actionIconWidth}px;
-    min-width: ${actionIconWidth}px;
     transition: opacity 0.5s;
     opacity: 0;
-    z-index: ${zIndexCORE(2)};
+    ${z(2)};
 `;
-const AvatarPreviewCSS = readOnly => css`
+const AvatarPreviewCSS = isDisabled => css`
     ${displayBlock};
     ${positionRelative};
     ${overflowHidden};
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    cursor: ${readOnly ? 'initial' : 'pointer'};
+    ${parseWidthHeight('100%')};
+    ${borderRadius('50%')};
+    ${isDisabled ? cursorInherit : cursorPointer};
 `;
-const AvatarContainerCSS = (AvatarPreviewCSSName, ActionIconCSSName) => css`
+const AvatarContainerCSS = ActionIconCSSName => css`
     ${displayInlineFlex};
     ${positionRelative};
     ${itemsCenter};
-    &.disabled {
-        .css-${AvatarPreviewCSSName} {
-            ${pointerEventsNone}
-            cursor: inherit;
-        }
-        .css-${ActionIconCSSName} {
-            display: none !important;
-        }
-    }
     &:hover {
         .css-${ActionIconCSSName} {
             opacity: 1;
@@ -347,25 +277,18 @@ const AvatarRootCSS = (width, height, outlined) => css`
     ${overflowHidden};
     ${userSelectNone};
     ${borderNone};
+    ${boxContent};
     ${parseWidthHeight(width, height)};
-    border: ${typeof outlined === 'boolean' && outlined ? `1px solid ${white}` : outlined};
-    border-radius: 50%;
-    box-sizing: content-box;
+    ${borderRadius('50%')};
+    border: ${typeof outlined === 'boolean' && outlined ? `1px solid ${systemWhite}` : outlined};
     input {
         ${displayNone};
     }
-    img {
-        width: 100%;
-        height: 100%;
-    }
 `;
 const MoreInfoCSS = css`
     ${displayBlock};
     ${positionRelative};
-    padding: ${spacing([2])};
-`;
-const blurAnimationCSS = css`
-    animation: ${blurKeyframe} 1s ease;
+    ${pd([2])};
 `;
 Avatar.defaultProps = {
   actionIconHeight: 24,

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

@@ -1311,17 +1311,17 @@ Attachment.propTypes = {
   allowSort: PropTypes.bool,
   /** Class for component. */
   className: PropTypes.string,
-  /** List attachment:<br />
-   * [{<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
-   * }, ...]
+  /** List attachment:<br />
+   * [{<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
+   * }, ...]
    */
   data: PropTypes.array,
   /** The message to display when deleting files. */
@@ -1350,16 +1350,16 @@ Attachment.propTypes = {
   onChange: PropTypes.func,
   /** Download attached event, if not it will use default. */
   onDownload: PropTypes.func,
-  /**
-   * event when removed file(s)
-   *
-   * return data: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
-   * }
+  /**
+   * event when removed file(s)
+   *
+   * return data: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
+   * }
    */
   onRemove: PropTypes.func,
   /** View attached event, if not it will use default. */

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

@@ -51,7 +51,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   hoverTooltip,
   iconStyle,
   inputProps,
-  inputRef: inputBaseRef,
+  inputRef: inputRefProp,
   inputStyle,
   maxRows,
   multiline,
@@ -84,7 +84,8 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     bind,
     value
   } = useInput(defaultValue, valueProp, _onChange, onInput, delayOnChange);
-  if (!inputBaseRef) inputBaseRef = useRef(null);
+  if (!inputRefProp) inputRefProp = useRef(null);
+  const inputRef = useRef(null);
   const ref = useRef(null);
   const valueArray = useRef([]);
   const canvas = document.createElement('canvas');
@@ -115,28 +116,28 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   useEffect(() => {
     if (defaultValue !== undefined && defaultValue !== '') {
-      if (multiline && !/\d+/.test(rows)) {
-        inputBaseRef.current.style.height = 0;
-        inputBaseRef.current.style.height = Math.max(24, inputBaseRef.current.scrollHeight) + 'px';
+      if (multiline && !/\d+/.test(rows) && inputRef.current) {
+        inputRef.current.style.height = 0;
+        inputRef.current.style.height = Math.max(24, inputRef.current.scrollHeight) + 'px';
       }
     }
   }, []);
   useEffect(() => {
-    if (multiline && !/\d+/.test(rows) && !(inputBaseRef.current.value || inputBaseRef.current.value === 0)) {
-      inputBaseRef.current.style.height = '24px';
+    if (multiline && !/\d+/.test(rows) && inputRef.current && !(inputRef.current.value || inputRef.current.value === 0)) {
+      inputRef.current.style.height = '24px';
     }
     if (autoFocus) {
-      inputBaseRef.current.focus();
+      inputRef.current.focus();
     }
   }, [multiline]);
   useEffect(() => {
     const defaultHeight = 24;
     if (valueProp !== undefined) {
       valueArray.current.push(valueProp);
-      inputBaseRef.current.value = valueProp;
+      inputRefProp.current.value = valueProp;
       if (multiline && !/\d+/.test(rows)) {
-        inputBaseRef.current.style.height = 0;
-        inputBaseRef.current.style.height = Math.max(defaultHeight, inputBaseRef.current.scrollHeight) + 'px';
+        inputRef.current.style.height = 0;
+        inputRef.current.style.height = Math.max(defaultHeight, inputRef.current.scrollHeight) + 'px';
       } else {
         dynamicWidth({
           target: {
@@ -146,15 +147,15 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
     return () => {
-      if (valueProp !== undefined && multiline && !/\d+/.test(rows) && inputBaseRef.current) {
-        inputBaseRef.current.style.height = defaultHeight + 'px';
+      if (valueProp !== undefined && multiline && !/\d+/.test(rows) && inputRef.current) {
+        inputRef.current.style.height = defaultHeight + 'px';
       }
     };
   }, [valueProp]);
   /* End handler */
 
   useImperativeHandle(reference, () => {
-    const currentRef = inputBaseRef.current || {};
+    const currentRef = inputRefProp.current || {};
     const _instance = {
       ...action
     }; // methods
@@ -169,14 +170,14 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     styleInputBase.current = style;
   };
   const dynamicWidth = e => {
-    if (!autoWidth || !inputBaseRef.current) return;
-    if (!canvas || !styleInputBase.current || !inputBaseRef.current) return;
+    if (!autoWidth || !inputRefProp.current) return;
+    if (!canvas || !styleInputBase.current || !inputRefProp.current) return;
     const context = canvas.getContext('2d');
     context.font = styleInputBase.current.font;
     const {
       width
     } = context.measureText(e.target.value);
-    inputBaseRef.current.style.width = `${Math.max(width, widthInit.current)}px`;
+    inputRefProp.current.style.width = `${Math.max(width, widthInit.current)}px`;
   };
 
   /* Start component */
@@ -224,7 +225,11 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     readOnly: readOnly,
     style: inputStyle || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.style),
     className: classNames('DGN-UI-InputBase-Textarea', inputProps.className),
-    ref: inputBaseRef,
+    ref: refs => {
+      if (!refs) return;
+      inputRef.current = refs;
+      typeof inputRefProp === 'function' ? inputRefProp(refs) : inputRefProp.current = refs;
+    },
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
     onInput: onInputTextArea,
@@ -249,7 +254,8 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: classNames('DGN-UI-InputBase-Input', newClass, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className),
     ref: refs => {
       if (!refs) return;
-      inputBaseRef.current = refs;
+      inputRef.current = refs;
+      typeof inputRefProp === 'function' ? inputRefProp(refs) : inputRefProp.current = refs;
       saveInitInfo(refs);
     },
     css: _InputCSS,

package/components/image/index.js

@@ -1,13 +1,12 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css, keyframes } from '@emotion/core';
-import OptionWrapper from "../others/option-wrapper";
-import { useIntersection } from "../../utils/intersectionObserver";
-import { classNames } from "../../utils";
+import { css, jsx, keyframes } from '@emotion/core';
 import AvatarDefault from "../../assets/avatar/default.svg";
-import { itemsCenter, displayInlineFlex, overflowHidden, parseWidthHeight, positionRelative } from "../../styles/general";
+import OptionWrapper from "../others/option-wrapper";
+import PropTypes from 'prop-types';
+import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { borderRadius, displayInlineFlex, itemsCenter, objectCover, overflowHidden, parseWidthHeight, positionRelative } from "../../styles/general";
+import { classNames, useIntersection } from "../../utils";
 const blurKeyframe = keyframes`
     0% { -webkit-filter: blur(4px);}
     25% { -webkit-filter: blur(3px);}
@@ -29,6 +28,7 @@ const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   style,
   width
 }, reference) => {
+  if (!reference) reference = useRef(null);
   if (!defaultSrc) defaultSrc = AvatarDefault;
   const ref = useRef(null);
   const [srcState, setSrcState] = useState(src);
@@ -53,6 +53,9 @@ const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         };
       }
     }
+    return () => {
+      setSrcState(defaultSrc);
+    };
   }, [src]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -66,21 +69,16 @@ const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   const renderImage = () => {
     const defaultImage = jsx("img", {
+      css: objectCover,
       src: defaultSrc,
       alt: '',
-      style: {
-        objectFit: 'cover'
-      },
       width: width,
       height: height
     });
     const image = jsx(Fragment, null, !onLoaded && defaultImage, jsx("img", {
-      css: blurAnimationCSS,
+      css: [blurAnimationCSS, objectCover],
       src: srcState,
       alt: alt || srcState,
-      style: {
-        objectFit: 'cover'
-      },
       onLoad: () => setOnLoaded(true),
       width: width,
       height: height
@@ -105,7 +103,7 @@ const ImageCSS = (width, height, circular) => css`
     ${itemsCenter};
     ${overflowHidden};
     ${parseWidthHeight(width, height)};
-    ${circular && `border-radius: 50%`};
+    ${circular && borderRadius('50%')};
 `;
 const blurAnimationCSS = css`
     animation: ${blurKeyframe} 1s ease;

package/icons/basic.js

@@ -4056,6 +4056,34 @@ export const Update = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const Upload = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15 10V16H9V10H5L12 3L19 10H15ZM19 20V18H5V20H19Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 14,
+    height: height || 17,
+    viewBox: "0 0 14 17",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 7V13H4V7H0L7 0L14 7H10ZM14 17V15H0V17H14Z",
+    fill: colors[color] || color
+  }));
+});
 export const Palette = /*#__PURE__*/memo(({
   width,
   height,
@@ -6077,6 +6105,54 @@ export const Website = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const Workflow = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 5L5 8L5 6H2V4H5L5 2L8 5Z",
+    fill: colors[color] || color
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M22 19L19 22L19 20H16V18H19L19 16L22 19Z",
+    fill: colors[color] || color
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.8293 6C14.4175 7.16519 13.3062 8 12 8C10.3431 8 9 6.65685 9 5C9 3.34315 10.3431 2 12 2C13.3062 2 14.4175 2.83481 14.8293 4L18 4L20 4V6V9.17071C21.1652 9.58254 22 10.6938 22 12C22 13.6569 20.6569 15 19 15C17.6938 15 16.5825 14.1652 16.1707 13H7.82929C7.52801 13.8524 6.85241 14.528 6 14.8293L6 18H9.17071C9.58254 16.8348 10.6938 16 12 16C13.6569 16 15 17.3431 15 19C15 20.6569 13.6569 22 12 22C10.6938 22 9.58254 21.1652 9.17071 20H6H4V18L4 14.8293C2.83481 14.4175 2 13.3062 2 12C2 10.3431 3.34315 9 5 9C6.30622 9 7.41746 9.83481 7.82929 11H16.1707C16.472 10.1476 17.1476 9.47199 18 9.17071V6H14.8293Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 20,
+    height: height || 20,
+    viewBox: "0 0 20 20",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6 3L3 6L3 4H0V2H3L3 0L6 3Z",
+    fill: colors[color] || color
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M20 17L17 20L17 18H14V16H17L17 14L20 17Z",
+    fill: colors[color] || color
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12.8293 4C12.4175 5.16519 11.3062 6 10 6C8.34315 6 7 4.65685 7 3C7 1.34315 8.34315 0 10 0C11.3062 0 12.4175 0.834808 12.8293 2L16 2L18 2V4V7.17071C19.1652 7.58254 20 8.69378 20 10C20 11.6569 18.6569 13 17 13C15.6938 13 14.5825 12.1652 14.1707 11H5.82929C5.52801 11.8524 4.85241 12.528 4 12.8293L4 16H7.17071C7.58254 14.8348 8.69378 14 10 14C11.6569 14 13 15.3431 13 17C13 18.6569 11.6569 20 10 20C8.69378 20 7.58254 19.1652 7.17071 18H4H2V16L2 12.8293C0.834808 12.4175 0 11.3062 0 10C0 8.34315 1.34315 7 3 7C4.30622 7 5.41746 7.83481 5.82929 9H14.1707C14.472 8.14759 15.1476 7.47199 16 7.17071V4H12.8293Z",
+    fill: colors[color] || color
+  }));
+});
 export const Write = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.85-beta.5",
+  "version": "1.3.86-beta.1",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/readme.md

@@ -38,6 +38,12 @@ npm test
 ```
 
 ## Changelog
+## 1.3.86
+- \[Changed\]: Icon – Optimize code
+- \[Fixed\]: Dropdown – Fix bug cannot select multiple after search
+- \[Fixed\]: InputBase – Fix endIconProps not work when endIcon is string
+- \[Fixed\]: Attachment – Fix not show Button Attachment when disabled, readOnly; Update design
+
 ## 1.3.85
 - \[Fixed\]: Attachment – Fix not fire onChange when select same file
 - \[Fixed\]: PagingInfo – Fix responsive auto hide element wrong

package/utils/index.js

@@ -19,6 +19,7 @@ export { default as SbTemplate } from "./sb-template";
 export { default as updatePosition } from "./updatePosition";
 export { default as useDelayUnmount } from "./useDelayUnmount";
 export { default as useInput } from "./useInput";
+export { default as useIntersection } from "./intersectionObserver";
 export { default as useMediaQuery } from "./useMediaQuery";
 export { default as useOnClickOutside } from "./useOnClickOutside";
 export { default as usePortal } from "./usePortal";

package/utils/intersectionObserver.js

@@ -22,7 +22,7 @@ const getIntersectionObserver = () => {
   }
   return observer;
 };
-export const useIntersection = (elem, callback) => {
+const useIntersection = (elem, callback) => {
   useEffect(() => {
     let target = elem.current;
     let observer = getIntersectionObserver();
@@ -33,4 +33,5 @@ export const useIntersection = (elem, callback) => {
       observer.unobserve(target);
     };
   }, []);
-};
+};
+export default useIntersection;