diginet-core-ui 1.3.86 → 1.3.87-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, Notify, Popover, 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 notifyRef = useRef(null);
   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
@@ -109,29 +89,22 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const reader = new FileReader();
     if (!checkFileType(file.type, matchType)) {
       input.target.value = '';
-      popupRef.current.instance.show({
-        description: wrongTypeError
-      });
+      notifyRef.current.instance.show(wrongTypeError);
       return;
     }
     if (+maxSize && file.size > maxSize * 1024 ** 2) {
       input.target.value = '';
-      popupRef.current.instance.show({
-        description: maxSizeError
-      });
+      notifyRef.current.instance.show(maxSizeError);
       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 +125,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 +148,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 +166,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 +181,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 +204,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 +214,55 @@ 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, {
-      ref: popupRef,
-      type: 'danger'
+    }, typeof data === 'function' ? data() : renderData())) : null, jsx(Notify, {
+      ref: notifyRef,
+      progressing: true,
+      autoDisappear: true,
+      color: 'danger'
     }));
-  }, [actionIconHeight, actionIconWidth, allowEdit, clearAble, data, defaultSrc, direction, disabled, height, hoverAble, lazyLoading, matchType, maxSize, maxSizeError, outlined, readOnly, width, isInView, onLoaded, srcState, viewAvatar, viewMoreInfo]);
+  }, [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 +275,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

@@ -1301,7 +1301,8 @@ Attachment.defaultProps = {
     maxSize: getGlobal(['errorDefault', 'maxSize']),
     fileType: getGlobal(['errorDefault', 'fileType']),
     existingFile: getGlobal(['errorDefault', 'existingFile'])
-  }
+  },
+  viewType: 'detail'
 };
 Attachment.propTypes = {
   /** File types that can be accepted. */

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;
+      inputRef.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 = inputRef.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 || !inputRef.current) return;
+    if (!canvas || !styleInputBase.current || !inputRef.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`;
+    inputRef.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/form-control/number-input/index2.js

@@ -1,16 +1,12 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { HelperText, InputBase, Label } from "../..";
 import locale from "../../../locale";
-import { cursorNotAllowed, displayBlock, positionRelative } from "../../../styles/general";
-import { useTheme } from "../../../theme";
+import PropTypes from 'prop-types';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { cursorNotAllowed, displayBlock, mgb, positionRelative } from "../../../styles/general";
 import { classNames, onValidate, refType as ref } from "../../../utils";
-const {
-  spacing
-} = useTheme();
 const regexValidNumber = /[^0-9.,-]/g;
 const regexNumber = /[^0-9]/g;
 const regexThousandNumber = /(\d)(?=(\d{3})+\b)/g;
@@ -33,7 +29,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   fixedDecimalDigit,
   helperTextProps,
   inputProps,
-  inputRef,
+  inputRef: inputRefProp,
   inputStyle,
   label,
   labelProps,
@@ -58,10 +54,12 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   value: valueProps,
   viewType
 }, reference) => {
-  inputRef = inputRef || useRef(null);
+  if (!reference) reference = useRef(null);
+  if (!inputRefProp) inputRefProp = useRef(null);
   const pos = useRef(null);
   const ref = useRef(null);
   const globalRef = useRef({});
+  const inputRef = useRef(null);
   const [value, setValue] = useState(defaultValue);
   const isError = !!error;
 
@@ -77,7 +75,6 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   } else {
     thousandSymbol = '';
   }
-  const validateResult = validates && onValidate(value, validates, true);
   if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
 
   /**
@@ -238,6 +235,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     }
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
   };
+  const validateResult = validates && onValidate(Number(convertMoneyToNumber(value) || 0), validates, true);
   useEffect(() => {
     inputRef.current.value = value !== null && value !== void 0 ? value : null;
 
@@ -270,12 +268,16 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     css: NumberInputRoot,
     className: classNames('DGN-UI-NumberInput', className, disabled && 'disabled'),
     style: style
-  }, !!label && jsx(Label, {
+  }, label ? jsx(Label, {
     required: required,
     disabled: disabled,
     ...labelProps
-  }, label), jsx(InputBase, {
-    inputRef: inputRef,
+  }, label) : null, jsx(InputBase, {
+    inputRef: refs => {
+      if (!refs) return;
+      inputRef.current = refs;
+      typeof inputRefProp === 'function' ? inputRefProp(refs) : inputRefProp.current = refs;
+    },
     viewType: viewType,
     defaultValue: defaultValue,
     value: value,
@@ -306,18 +308,18 @@ const NumberInput = /*#__PURE__*/forwardRef(({
         target
       });
     }
-  }), isError && jsx(HelperText, {
+  }), isError ? jsx(HelperText, {
     ...helperTextProps,
     disabled: disabled
-  }, error), !isError && validateResult && jsx(HelperText, {
+  }, error) : null, !isError && validateResult ? jsx(HelperText, {
     ...helperTextProps,
     disabled: disabled
-  }, validateResult));
+  }, validateResult) : null);
 });
 const NumberInputRoot = css`
     ${displayBlock};
     ${positionRelative};
-    margin-bottom: ${spacing([5])};
+    ${mgb([5])};
     &.disabled {
         ${cursorNotAllowed};
     }

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;