diginet-core-ui 1.3.69-beta.9 → 1.3.70

package/components/avatar/index.js

@@ -51,7 +51,6 @@ const checkFileType = (type, matchType) => {
 };
 
 const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
   src,
   defaultSrc,
   outlined,
@@ -242,17 +241,10 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   }, [src]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = { ...action
-    }; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   return useMemo(() => {
     return jsx(Fragment, null, jsx("div", {
       css: _AvatarContainerCSS,

package/components/badge/index.js

@@ -72,7 +72,6 @@ const calDotPos = (anchorOrigin, contentDirection, dotSize, hasContent, size) =>
 };
 
 const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
   anchorOrigin,
   contentDirection,
   content,
@@ -99,17 +98,10 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _BadgeRootCSS = BadgeRootCSS(children, name, dotPos, _BadgeNumberCSS);
 
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = { ...action
-    }; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   return useMemo(() => {
     let node = children;
 

package/components/button/icon.js

@@ -71,7 +71,6 @@ const renderIconLoading = iconSize => {
 };
 
 const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
   viewType,
   color,
   size,
@@ -105,17 +104,10 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _ButtonRootCSS = ButtonRootCSS(circular, size, width, _width, height, _height, buttonSize, iconSize, colorHover, color, _color, name);
 
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = { ...action
-    }; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
 
   const _onClick = event => {
     event.persist();

package/components/button/index.js

@@ -12,7 +12,6 @@ import Ripple from './ripple-effect';
 import CircularProgress from '../progress/circular';
 import Icon from '../../icons';
 import { flexRow, alignCenter, justifyCenter, positionRelative, borderRadius4px, borderBox, noPadding, noBorder, cursorPointer, overflowHidden, pointerEventsNone, outlineNone, userSelectNone, backgroundTransparent, inlineFlex, noMargin } from '../../styles/general';
-import { classNames } from '../../utils';
 import theme from '../../theme/settings';
 const {
   colors: {
@@ -34,8 +33,7 @@ const {
   },
   typography: {
     uppercase
-  },
-  spacing
+  }
 } = theme;
 export const getRippleColor = (color, viewType, colors) => {
   if (!isColor(color) && !isColorName(color)) {
@@ -85,13 +83,12 @@ export const getClassNameFromColor = color => {
   return !isColor(color) && !isColorName(color) ? color : 'custom-color';
 };
 const colorMap = new Map([['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
-const iconSizeMap = new Map([['tiny', spacing([4])], ['small', spacing([5])], ['medium', spacing([6])], ['large', spacing([8])], ['giant', spacing([10])]]);
-const paddingSizeMap = new Map([['tiny', spacing([1, 2])], ['small', spacing([1.5, 3])], ['medium', spacing([2, 4])], ['large', spacing([2, 5])], ['giant', spacing([2, 6])]]);
-const outlinedPaddingSizeMap = new Map([['tiny', spacing([0.75, 1.75])], ['small', spacing([1.25, 2.75])], ['medium', spacing([1.75, 3.75])], ['large', spacing([1.75, 4.75])], ['giant', spacing([1.75, 5.75])]]);
+const iconSizeMap = new Map([['tiny', '16px'], ['small', '20px'], ['medium', '24px'], ['large', '32px'], ['giant', '40px']]);
+const paddingSizeMap = new Map([['tiny', '4px 8px'], ['small', '6px 12px'], ['medium', '8px 16px'], ['large', '8px 20px'], ['giant', '8px 24px']]);
+const outlinedPaddingSizeMap = new Map([['tiny', '3px 7px'], ['small', '5px 11px'], ['medium', '7px 15px'], ['large', '7px 19px'], ['giant', '7px 23px']]);
 const iconMarginSizeMap = new Map([['tiny', '4px'], ['small', '4px'], ['medium', '4px'], ['large', '6px'], ['giant', '8px']]);
 const typographySizeMap = new Map([['tiny', 'heading5'], ['small', 'heading5'], ['medium', 'heading4'], ['large', 'heading2'], ['giant', 'heading1']]);
 const minHeightSizeMap = new Map([['tiny', '24px'], ['small', '32px'], ['medium', '40px'], ['large', '48px'], ['giant', '56px']]);
-const minHeightSizeLinkMap = new Map([['tiny', '16px'], ['small', '20px'], ['medium', '24px'], ['large', '32px'], ['giant', '40px']]);
 const alphaArr = {
   hover: 0.1,
   focus: 0.2,
@@ -99,7 +96,6 @@ const alphaArr = {
 };
 const alphaLoading = 0.2;
 const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
   children,
   className,
   color,
@@ -125,23 +121,15 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const typographySize = typographySizeMap.get(size);
   const iconMarginSize = iconMarginSizeMap.get(size);
   const minHeightSize = minHeightSizeMap.get(size);
-  const minHeightSizeLink = minHeightSizeLinkMap.get(size);
 
   const _ButtonText = ButtonText(loading, iconMarginSize);
 
-  const _ButtonRoot = ButtonRoot(viewType, size, paddingSize, minHeightSize, minHeightSizeLink, outlinedPaddingSize, endIcon, label, iconMarginSize, startIcon, iconSize, color);
-
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = { ...action
-    }; // methods
-
-    _instance.__proto__ = {}; // hidden methods
+  const _ButtonRoot = ButtonRoot(viewType, size, paddingSize, minHeightSize, outlinedPaddingSize, endIcon, label, iconMarginSize, startIcon, iconSize, color);
 
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   const StartIcon = useMemo(() => {
     let node = startIcon;
 
@@ -231,7 +219,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: _onClick,
       id: id,
       type: type,
-      className: classNames('DGN-UI-Button', viewType, getClassNameFromColor(color), size, loading && 'button--loading', disabled && 'button--disabled', className),
+      className: ['DGN-UI-Button', viewType, getClassNameFromColor(color), size, loading && 'button--loading', disabled && 'button--disabled', className].join(' ').trim().replace(/\s+/g, ' '),
       ...props
     }, start, jsx(Typography, {
       css: _ButtonText,
@@ -240,7 +228,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, children || label), end && end, !disabled && !loading && viewType !== 'link' && jsx(Ripple, {
       color: getRippleColor(color, viewType, allColors)
     }));
-  }, [children, className, color, disabled, endIcon, id, label, loading, onClick, size, startIcon, type, viewType]);
+  }, [size, viewType, color, disabled, onClick, loading, startIcon, endIcon, label, type, className, children, id]);
 }));
 const ButtonIcon = css`
     ${flexRow};
@@ -256,7 +244,7 @@ const ButtonText = (loading, iconMarginSize) => css`
     margin: 0 ${loading ? iconMarginSize : 0};
 `;
 
-const ButtonRoot = (viewType, size, paddingSize, minHeightSize, minHeightSizeLink, outlinedPaddingSize, endIcon, label, iconMarginSize, startIcon, iconSize, color) => css`
+const ButtonRoot = (viewType, size, paddingSize, minHeightSize, outlinedPaddingSize, endIcon, label, iconMarginSize, startIcon, iconSize, color) => css`
     ${inlineFlex};
     ${alignCenter};
     ${justifyCenter};
@@ -425,7 +413,6 @@ const ButtonRoot = (viewType, size, paddingSize, minHeightSize, minHeightSizeLin
         }
     }
     &.link {
-        min-height: ${minHeightSizeLink};
         ${backgroundTransparent};
         ${noBorder};
         ${noPadding};

package/components/card/body.js

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
   children,
   className,
   id,
@@ -14,17 +13,10 @@ const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   title
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = { ...action
-    }; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   return useMemo(() => {
     return jsx("div", {
       id: id,

package/components/card/extra.js

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 const CardExtra = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
   children,
   className,
   id,
@@ -14,17 +13,10 @@ const CardExtra = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   title
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = { ...action
-    }; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   return useMemo(() => {
     return jsx("div", {
       id: id,

package/components/card/footer.js

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 const CardFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
   children,
   className,
   id,
@@ -14,17 +13,10 @@ const CardFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   title
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = { ...action
-    }; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   return useMemo(() => {
     return jsx("div", {
       id: id,

package/components/card/header.js

@@ -7,7 +7,6 @@ import { jsx } from '@emotion/core';
 import OptionWrapper from '../others/option-wrapper';
 import Typography from '../typography';
 const CardHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
   children,
   className,
   id,
@@ -15,17 +14,10 @@ const CardHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   title
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = { ...action
-    }; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   return useMemo(() => {
     return jsx("div", {
       id: id,

package/components/card/index.js

@@ -23,7 +23,6 @@ const {
   spacing
 } = theme;
 const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
   body: bodyProp,
   bodyStyle,
   children,
@@ -45,17 +44,10 @@ const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _CardCSS = CardCSS(width, height, headerDivider, footerDivider, dividerColor);
 
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = { ...action
-    }; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   const head = header || title ? jsx(CardHeader, {
     className: (className === null || className === void 0 ? void 0 : className.header) || '',
     style: headerStyle,