diginet-core-ui 1.3.69-beta.5 → 1.3.69-beta.7

package/components/avatar/index.js

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

package/components/badge/index.js

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

package/components/button/icon.js

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

package/components/button/index.js

@@ -99,6 +99,7 @@ const alphaArr = {
 };
 const alphaLoading = 0.2;
 const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
   className,
   color,
@@ -130,10 +131,17 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _ButtonRoot = ButtonRoot(viewType, size, paddingSize, minHeightSize, minHeightSizeLink, outlinedPaddingSize, endIcon, label, iconMarginSize, startIcon, iconSize, color);
 
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   const StartIcon = useMemo(() => {
     let node = startIcon;
 

package/components/card/body.js

@@ -6,6 +6,7 @@ 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,
@@ -13,10 +14,17 @@ const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   title
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     return jsx("div", {
       id: id,

package/components/card/extra.js

@@ -6,6 +6,7 @@ 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,
@@ -13,10 +14,17 @@ const CardExtra = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   title
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     return jsx("div", {
       id: id,

package/components/card/footer.js

@@ -6,6 +6,7 @@ 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,
@@ -13,10 +14,17 @@ const CardFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   title
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     return jsx("div", {
       id: id,

package/components/card/header.js

@@ -7,6 +7,7 @@ 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,
@@ -14,10 +15,17 @@ const CardHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   title
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     return jsx("div", {
       id: id,

package/components/card/index.js

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

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

@@ -22,6 +22,7 @@ const {
   }
 } = theme;
 const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   disabled,
   readOnly,
   required,
@@ -35,10 +36,17 @@ const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ...props
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => jsx("div", {
     css: LabelContainerCSS,
     className: 'DGN-UI-Label-Container'

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

@@ -124,6 +124,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   prefix,
   suffix,
   labelProps,
+  helperTextProps,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -446,9 +447,11 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onKeyUp: onKeyUp,
     onPaste: onPasteHandler
   }), isError && jsx(HelperText, {
-    disabled: disabled
+    disabled: disabled,
+    ...helperTextProps
   }, error), !isError && validateResult && jsx(HelperText, {
-    disabled: disabled
+    disabled: disabled,
+    ...helperTextProps
   }, validateResult));
 }));
 const MoneyInputRoot = css`
@@ -585,6 +588,9 @@ MoneyInput.propTypes = {
   inputRef: PropTypes.any,
 
   /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
-  labelProps: PropTypes.object
+  labelProps: PropTypes.object,
+
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
+  helperTextProps: PropTypes.object
 };
 export default MoneyInput;

package/components/form-control/number-input/index2.js

@@ -79,13 +79,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
 
   if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
-  /**
-   * Convert number to format money
-   * @param vl {number} - value
-   * @type {function(*): number}
-   * @return {string}
-   * @example 1200300.123 => 1,200,300.123
-   * @example 1200300,123 => 1.200.300,123
+  /**
+   * Convert number to format money
+   * @param vl {number} - value
+   * @type {function(*): number}
+   * @return {string}
+   * @example 1200300.123 => 1,200,300.123
+   * @example 1200300,123 => 1.200.300,123
    */
 
   const parseNumberToMoney = useCallback((vl, isNumber) => {
@@ -119,13 +119,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
 
     return number;
   }, [decimalSymbol, max, value]);
-  /**
-   * Convert money to format number
-   * @param vl {string} - value
-   * @type {function(*): number}
-   * @return {number}
-   * @example 1,200,300.123 => 1200300.123
-   * @example 1.200.300,123 => 1200300.123
+  /**
+   * Convert money to format number
+   * @param vl {string} - value
+   * @type {function(*): number}
+   * @return {number}
+   * @example 1,200,300.123 => 1200300.123
+   * @example 1.200.300,123 => 1200300.123
    */
 
   const convertMoneyToNumber = useCallback((vl, isNumber) => {
@@ -397,10 +397,10 @@ NumberInput.propTypes = {
   /** style inline of input in NumberInput component */
   inputStyle: PropTypes.object,
 
-  /** validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
 

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

@@ -397,13 +397,13 @@ PhoneInput.propTypes = {
   /** on input function */
   onInput: PropTypes.func,
 
-  /**
-   * on change function. Return a object, example:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;target: {value: "(+84) 123 456 789", ...}<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: 0123456789<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;countryCode: 84<br/>
-   * }
+  /**
+   * on change function. Return a object, example:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;target: {value: "(+84) 123 456 789", ...}<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: 0123456789<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;countryCode: 84<br/>
+   * }
    */
   onChange: PropTypes.func,