diginet-core-ui 1.3.70 → 1.3.71

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

@@ -3,7 +3,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import React, { forwardRef, memo, useState, useRef, useEffect, useMemo } from 'react';
+import { forwardRef, memo, useState, useRef, useEffect, useMemo, Fragment } from 'react';
 import theme from '../../../theme/settings';
 import { randomString } from '../../../utils';
 import Typography from './../../typography';
@@ -98,7 +98,7 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       color: disabled ? clDisabled : '',
       type: 'p1',
       ...labelProps
-    }, jsx(React.Fragment, null, label !== null && label !== void 0 ? label : value, required && jsx("span", {
+    }, jsx(Fragment, null, label !== null && label !== void 0 ? label : value, required && jsx("span", {
       style: {
         color: disabled ? clDisabled : clDanger
       }

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

@@ -5,69 +5,49 @@ import { memo, useEffect, useRef, forwardRef, useState, useImperativeHandle } fr
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { ButtonIcon, CircularProgress as Circular, HelperText, InputBase, Label } from '../../';
-import { renderIcon, onValidate } from '../../../utils';
+import { renderIcon, onValidate, refType as ref } from '../../../utils';
 import { cursorNotAllowed, displayBlock, flexRow, positionRelative } from '../../../styles/general';
-const icons = {
-  default: `<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path fillRule="evenodd" clipRule="evenodd" d="M15.5616 19.0007C15.4036 19.0007 15.2446 18.9637 15.0986 18.8877L9.99962 16.2237L4.90162 18.8877C4.56362 19.0627 4.15562 19.0327 3.84962 18.8087C3.54162 18.5847 3.38862 18.2057 3.45362 17.8307L4.42462 12.2027L0.304623 8.21765C0.030623 7.95265 -0.068377 7.55465 0.048623 7.19065C0.165623 6.82865 0.478623 6.56365 0.856623 6.50965L6.55662 5.68165L9.10462 0.555654C9.44262 -0.124346 10.5576 -0.124346 10.8956 0.555654L13.4436 5.68165L19.1436 6.50965C19.5216 6.56365 19.8346 6.82865 19.9516 7.19065C20.0686 7.55465 19.9696 7.95265 19.6956 8.21765L15.5756 12.2027L16.5466 17.8307C16.6116 18.2057 16.4576 18.5847 16.1506 18.8087C15.9766 18.9367 15.7696 19.0007 15.5616 19.0007Z" fill="#7F828E"/>
-    </svg>`,
-  success: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path fillRule="evenodd" clipRule="evenodd" d="M18.997 8.974H19C19.551 8.974 19.999 9.42 20 9.971C20.008 12.642 18.975 15.157 17.091 17.051C15.208 18.945 12.7 19.992 10.029 20H10C7.33905 20 4.83605 18.968 2.94905 17.091C1.05505 15.208 0.00804612 12.7 4.61203e-05 10.029C-0.00795388 7.357 1.02505 4.843 2.90905 2.949C4.79205 1.055 7.30005 0.008 9.97105 0C10.766 0.012 11.576 0.092 12.352 0.278C12.888 0.408 13.219 0.948 13.089 1.485C12.96 2.021 12.417 2.351 11.883 2.223C11.262 2.073 10.603 2.01 9.97705 2C7.84005 2.006 5.83305 2.844 4.32705 4.359C2.82005 5.874 1.99405 7.886 2.00005 10.023C2.00605 12.16 2.84405 14.166 4.35905 15.673C5.86905 17.174 7.87105 18 10 18H10.023C12.16 17.994 14.167 17.156 15.673 15.641C17.18 14.125 18.006 12.114 18 9.977C17.999 9.425 18.445 8.975 18.997 8.974ZM6.29305 9.2929C6.68405 8.9019 7.31605 8.9019 7.70705 9.2929L9.95105 11.5369L16.248 4.3409C16.612 3.9279 17.243 3.8839 17.659 4.2479C18.074 4.6109 18.116 5.2429 17.752 5.6589L10.752 13.6589C10.57 13.8669 10.31 13.9899 10.033 13.9999H10C9.73505 13.9999 9.48105 13.8949 9.29305 13.7069L6.29305 10.7069C5.90205 10.3159 5.90205 9.6839 6.29305 9.2929Z" fill="#00C875"/>
-    </svg>`,
-  warning: `<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path fillRule="evenodd" clipRule="evenodd" d="M14.7736 2.56003C14.4236 3.00003 14.5036 3.63003 14.9336 3.97003C16.6136 5.29003 17.6836 7.18003 17.9336 9.31003C18.1936 11.43 17.6036 13.53 16.2836 15.21L16.2736 15.23C14.9536 16.9 13.0636 17.96 10.9536 18.21C8.83361 18.46 6.73361 17.88 5.05361 16.56C3.37361 15.24 2.30361 13.34 2.05361 11.22C1.79361 9.09003 2.38361 7.00003 3.70361 5.32003C4.10361 4.84003 4.55361 4.36003 5.06361 3.96003C5.49361 3.62003 5.57361 2.99003 5.23361 2.56003C4.89361 2.13003 4.26361 2.05003 3.83361 2.39003C3.19361 2.88003 2.63361 3.47003 2.13361 4.08003C0.48361 6.18003 -0.246391 8.80003 0.0736095 11.45C0.393609 14.1 1.72361 16.47 3.82361 18.12C5.92361 19.77 8.54361 20.5 11.1936 20.18C13.8336 19.86 16.1936 18.54 17.8436 16.45L17.8636 16.43C19.5136 14.33 20.2436 11.71 19.9236 9.06003C19.6036 6.41003 18.2736 4.04003 16.1736 2.39003C15.7436 2.05003 15.1136 2.13003 14.7736 2.56003Z" fill="#FFAA00"/>
-        <path d="M12.0835 15.01C12.0535 16.17 11.0935 17.08 9.9335 17.05C8.8235 17.02 7.9235 16.13 7.8935 15.01V14.96C7.9235 13.8 8.8835 12.89 10.0435 12.92C11.1535 12.95 12.0535 13.84 12.0835 14.96V15.01ZM12.1335 1.23L11.0935 10.27C11.0935 10.88 10.6035 11.37 9.9935 11.37C9.3835 11.37 8.8935 10.88 8.8935 10.27L7.8535 1.23C7.7235 0.69 8.0535 0.16 8.5935 0.03C8.6735 0.01 8.7435 0 8.8135 0H11.1635C11.7235 0.01 12.1635 0.47 12.1535 1.02C12.1635 1.09 12.1535 1.16 12.1335 1.23Z" fill="#FFAA00"/>
-    </svg>`,
-  none: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path fillRule="evenodd" clipRule="evenodd" d="M2 10C2 8.154 2.635 6.458 3.688 5.103L14.897 16.312C13.542 17.366 11.846 18 10 18C5.589 18 2 14.411 2 10ZM18 10C18 11.846 17.365 13.542 16.312 14.897L5.103 3.688C6.458 2.634 8.154 2 10 2C14.411 2 18 5.589 18 10ZM10 0C4.486 0 0 4.486 0 10C0 15.514 4.486 20 10 20C15.514 20 20 15.514 20 10C20 4.486 15.514 0 10 0Z" fill="#FF3D71"/>
-    </svg>`,
-  danger: `<svg width="16" height="22" style="max-height:20px" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path fillRule="evenodd" clipRule="evenodd" d="M7.11087 22.0002C6.99687 22.0002 6.88187 21.9802 6.76887 21.9392C6.33687 21.7822 6.06687 21.3502 6.11687 20.8932L6.88487 13.8002H0.999871C0.630871 13.8002 0.291871 13.5972 0.117871 13.2712C-0.056129 12.9452 -0.036129 12.5512 0.168871 12.2442L8.05687 0.444182C8.31287 0.0611818 8.79687 -0.0978183 9.22987 0.0611817C9.66287 0.218182 9.93187 0.650182 9.88187 1.10718L9.11387 8.20018H14.9999C15.3689 8.20018 15.7079 8.40318 15.8819 8.72918C16.0549 9.05518 16.0359 9.44918 15.8309 9.75618L7.94187 21.5562C7.75287 21.8402 7.43687 22.0002 7.11087 22.0002Z" fill="#FF3D71"/>
-    </svg>`
-};
 const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  type,
-  viewType,
-  required,
-  loading,
-  autoIncreaseBot,
+  autoComplete,
+  autoFocus,
+  autoWidth,
   className,
-  label,
   defaultValue,
-  value: valueProp,
-  placeholder,
-  startIcon,
+  disabled,
   endIcon,
-  startIconProps,
   endIconProps,
-  status,
+  error,
+  helperTextProps,
   icon,
-  autoComplete,
-  autoFocus,
-  disabled,
-  readOnly,
-  multiline,
-  onConfirm,
-  refs,
-  rows,
-  maxRows,
-  style,
   iconStyle,
-  inputRef,
   inputProps,
+  inputRef,
   inputStyle,
+  label,
   labelProps,
-  error,
-  onChange,
+  loading,
+  maxRows,
+  multiline,
   onBlur,
+  onChange,
+  onConfirm,
   onFocus,
   onInput,
   onKeyDown,
   onKeyUp,
   onPaste,
+  placeholder,
+  readOnly,
+  required,
+  rows,
+  startIcon,
+  startIconProps,
+  status,
+  style,
+  type,
   validates,
-  autoWidth,
-  helperTextProps,
+  value: valueProp,
+  viewType,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -80,39 +60,9 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   let currentValue = '';
   const [value, setValue] = useState(valueProp || defaultValue);
   const isError = !!error;
-  /* Start styled */
-
-  const TextInputRoot = css`
-                ${displayBlock};
-                ${positionRelative};
-                margin-bottom: 20px;
-                &.disabled {
-                    ${cursorNotAllowed};
-                }
-            `;
-  const TextInputIcon = css`
-                ${flexRow};
-                color: inherit;
-                .edit-icon-pen {
-                    ${flexRow};
-                }
-                .edit-icon-confirm {
-                    display: none;
-                }
-                .edit-icon-clear {
-                    display: none;
-                    margin-left: 12px;
-                }
-                .circular {
-                    display: none;
-                }
-            `;
-  /* End styled */
-
   /* Start handler */
 
   const onMouseDownHandler = () => {
-    // ref.current.querySelector(`.css-${TextInputBox.name}`).style.backgroundColor = 'transparent';
     inputRef.current.style.backgroundColor = 'transparent';
   };
 
@@ -185,7 +135,6 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setValue(valueProp);
   }, [valueProp]);
   useEffect(() => {
-    !!refs && refs(ref);
     currentValue = defaultValue || '';
   }, []);
   useEffect(() => {
@@ -207,49 +156,6 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     };
   }, [type, multiline]);
-  useEffect(() => {
-    if (/inform/i.test(type) && !multiline) {
-      const regexp = /(success)|(warning)|(danger)/gi;
-      const existedClass = ref.current.classList.value.match(regexp);
-
-      if (existedClass) {
-        ref.current.classList.remove(existedClass[0]);
-      }
-
-      ref.current.classList.add(status);
-
-      if (!icon) {
-        iconRef.current.innerHTML = icons[status];
-      }
-    }
-  }, [status]);
-  useEffect(() => {
-    if (error && !value && value !== 0) {
-      ref.current.classList.add('danger');
-
-      if (autoIncreaseBot) {
-        const helperTextNode = ref.current.querySelector('.DGN-UI-HelperText');
-
-        if (helperTextNode) {
-          if (helperTextNode.offsetHeight > 20) {
-            ref.current.style.marginBottom = helperTextNode.offsetHeight + 4 + 'px';
-          }
-        }
-      }
-
-      return () => {
-        if (ref.current) {
-          ref.current.classList.remove('danger');
-          ref.current.style.marginBottom = null;
-        }
-      };
-    }
-  }, [error, value]);
-  useEffect(() => {
-    if (placeholder !== undefined && inputRef.current) {
-      inputRef.current.placeholder = placeholder;
-    }
-  }, [placeholder]);
   useEffect(() => {
     if (!inputRef.current) return;
     inputRef.current.readOnly = !!readOnly;
@@ -290,7 +196,10 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [loading]);
   /* End handler */
 
-  useImperativeHandle(reference, () => ref.current);
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   const validateResult = validates && onValidate(value, validates, true);
   const startIconCustom = icon && type !== 'inform' ? icon : startIcon;
   const endIconCustom = /^inform$/i.test(type) ? jsx("div", {
@@ -353,7 +262,7 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     autoWidth: autoWidth,
     rows: rows,
     maxRows: maxRows,
-    status: isError || validateResult ? 'danger' : 'default',
+    status: isError || validateResult ? 'danger' : status,
     inputProps: inputProps,
     inputStyle: inputStyle,
     startIcon: startIconCustom,
@@ -375,145 +284,163 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     disabled: disabled
   }, validateResult));
 }));
+const TextInputRoot = css`
+    ${displayBlock};
+    ${positionRelative};
+    margin-bottom: 20px;
+    &.disabled {
+        ${cursorNotAllowed};
+    }
+`;
+const TextInputIcon = css`
+    ${flexRow};
+    color: inherit;
+    .edit-icon-pen {
+        ${flexRow};
+    }
+    .edit-icon-confirm {
+        display: none;
+    }
+    .edit-icon-clear {
+        display: none;
+        margin-left: 12px;
+    }
+    .circular {
+        display: none;
+    }
+`;
 TextInput.defaultProps = {
-  type: 'text',
-  viewType: 'underlined',
-  label: '',
+  autoComplete: 'off',
+  autoFocus: false,
+  autoWidth: false,
   className: '',
   defaultValue: '',
-  status: 'default',
+  disabled: false,
   error: '',
-  autoComplete: 'off',
-  required: false,
+  iconStyle: {},
+  label: '',
   loading: false,
-  autoFocus: false,
-  autoIncreaseBot: false,
-  disabled: false,
-  readOnly: false,
   multiline: false,
-  iconStyle: {},
-  autoWidth: false
+  readOnly: false,
+  required: false,
+  status: 'default',
+  type: 'text',
+  viewType: 'underlined'
 };
 TextInput.propTypes = {
-  /** type of input */
-  type: PropTypes.oneOf(['inform', 'edit', 'quickEdit', 'text', 'number', 'password']),
+  /** This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). */
+  autoComplete: PropTypes.string,
 
-  /** the type of border you want to display */
-  viewType: PropTypes.oneOf(['underlined', 'outlined']),
+  /** If `true`, the input element is focused during the first mount. */
+  autoFocus: PropTypes.bool,
 
-  /** label for input */
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** If `true`, the width of the component will automatically be set according to the contents inside the input, don't run with multiline = true */
+  autoWidth: PropTypes.bool,
 
-  /** class for input */
+  /** Class for component. */
   className: PropTypes.string,
 
-  /** default value is displayed for first render */
+  /** The default value. Use when the component is not controlled. */
   defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-  /** the displayed value for each change */
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /** If `true`, the component is disabled.*/
+  disabled: PropTypes.bool,
 
-  /** hints for input */
-  placeholder: PropTypes.string,
+  /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the right of input. */
+  endIcon: PropTypes.any,
 
-  /** status type to display color for input (only available for type is inform) */
-  status: PropTypes.oneOf(['default', 'warning', 'success', 'danger']),
+  /** Props of end icon in InputBase component. */
+  endIconProps: PropTypes.object,
 
-  /** error for input */
+  /** Error displayed below input. */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 
-  /** the number of rows of textarea */
-  rows: PropTypes.number,
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
+  helperTextProps: PropTypes.object,
 
-  /** the maximum of rows of textarea */
-  maxRows: PropTypes.number,
+  /** Icon element display in the end of input (only use for type is inform, if not, use startIcon instead). */
+  icon: PropTypes.any,
 
-  /** type auto complete of input (like new-password) */
-  autoComplete: PropTypes.string,
+  /** Style inline of icon. */
+  iconStyle: PropTypes.object,
 
-  /** prevent all event if true, hide all icon */
-  disabled: PropTypes.bool,
+  /** [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) applied to the input element. */
+  inputProps: PropTypes.object,
 
-  /** prevent all event if true */
-  readOnly: PropTypes.bool,
+  /** Pass a ref to the input element. */
+  inputRef: ref,
 
-  /** auto focus after first render */
-  autoFocus: PropTypes.bool,
+  /** Style inline of input element. */
+  inputStyle: PropTypes.object,
 
-  /** auto increase margin-bottom if error too long */
-  autoIncreaseBot: PropTypes.bool,
+  /** The label of the component. */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** At least one character is required */
-  required: PropTypes.bool,
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label--simple) of label. */
+  labelProps: PropTypes.object,
 
-  /** icon element display in the right of input (only use for type is inform, if not, use startIcon instead) */
-  icon: PropTypes.any,
+  /** Maximum number of rows to display when multiline option is set to true. */
+  maxRows: PropTypes.number,
 
-  /** icon element display in the left of input */
-  startIcon: PropTypes.any,
+  /** If `true`, a textarea element is rendered. */
+  multiline: PropTypes.bool,
 
-  /** icon element display in the right of input */
-  endIcon: PropTypes.any,
+  /** Callback fired when the input is blurred. */
+  onBlur: PropTypes.func,
 
-  /** props of start icon in InputBase component */
-  startIconProps: PropTypes.object,
+  /** Callback fired when the value is changed. */
+  onChange: PropTypes.func,
 
-  /** props of end icon in InputBase component */
-  endIconProps: PropTypes.object,
+  /** Callback fired when the input is focused. */
+  onFocus: PropTypes.func,
 
-  /** style inline for icon */
-  iconStyle: PropTypes.object,
+  /** Callback fired when input. */
+  onInput: PropTypes.func,
 
-  /** style inline for dropdown */
-  style: PropTypes.object,
+  /** Callback fired when pressing a key. */
+  onKeyDown: PropTypes.func,
 
-  /** props of input in TextInput component */
-  inputProps: PropTypes.object,
+  /** Callback fired when releases a key. */
+  onKeyUp: PropTypes.func,
 
-  /** style inline of input in TextInput component */
-  inputStyle: PropTypes.object,
+  /** The short hint displayed in the input before the user enters a value. */
+  placeholder: PropTypes.string,
 
-  /** any props of label in TextInput component */
-  labelProps: PropTypes.object,
+  /** If `true`, the component is readOnly. */
+  readOnly: PropTypes.bool,
 
-  /** The function to get ref of Dropdown component */
-  refs: PropTypes.func,
+  /** If `true`, the input element is required. */
+  required: PropTypes.bool,
 
-  /** on key down function */
-  onKeyDown: PropTypes.func,
+  /** Number of rows to display when multiline option is set to true. */
+  rows: PropTypes.number,
 
-  /** on key up function */
-  onKeyUp: PropTypes.func,
+  /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the left of input. */
+  startIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** on input function */
-  onInput: PropTypes.func,
+  /** Props of start icon in InputBase component. */
+  startIconProps: PropTypes.object,
 
-  /** on change function */
-  onChange: PropTypes.func,
+  /** Status type to display color for input. */
+  status: PropTypes.oneOf(['default', 'warning', 'success', 'danger']),
 
-  /** on blur function */
-  onBlur: PropTypes.func,
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** on focus function */
-  onFocus: PropTypes.func,
+  /** Type of the input element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). */
+  type: PropTypes.oneOf(['inform', 'edit', 'quickEdit', 'text', 'number', 'password']),
 
-  /** 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]),
 
-  /** inputRef of TextInput component */
-  inputRef: PropTypes.any,
-
-  /** autoWidth of TextInput component, don't run with multiline = true */
-  autoWidth: PropTypes.bool,
-
-  /** If `true`, a textarea element is rendered. */
-  multiline: PropTypes.bool,
+  /** The value of the input element, required for a controlled component. */
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-  /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
-  helperTextProps: PropTypes.object
+  /** The variant to use. */
+  viewType: PropTypes.oneOf(['underlined', 'outlined'])
 };
 export default TextInput;

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

@@ -3,7 +3,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import React, { forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
+import { forwardRef, memo, useEffect, useMemo, useRef, useState, Fragment } from 'react';
 import theme from '../../../theme/settings';
 import generateRandom from '../../../utils/randomString';
 import Typography from '../../typography';
@@ -184,7 +184,7 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     hoverTooltip: hoverTooltip,
     lineClamp: lineClamp || null,
     mapping: 'label'
-  }, jsx(React.Fragment, null, label, required && jsx("span", {
+  }, jsx(Fragment, null, label, required && jsx("span", {
     style: {
       color: disabled ? clDisabled : clDanger
     }

package/components/grid/index.js

@@ -38,8 +38,8 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const rowSpacing = rowSpacingProp || spacing;
   const columnSpacing = columnSpacingProp || spacing;
   const columns = container ? columnsProp : columnsContext;
-  const topSpacing = topSpacingProp || rowSpacing;
-  const leftSpacing = leftSpacingProp || columnSpacing;
+  const topSpacing = topSpacingProp !== null && topSpacingProp !== void 0 ? topSpacingProp : rowSpacing;
+  const leftSpacing = leftSpacingProp !== null && leftSpacingProp !== void 0 ? leftSpacingProp : columnSpacing;
   const ref = useRef(null);
 
   const _GridCSS = GridCSS(direction, zeroMinWidth, container, item, wrap);

package/components/others/import/index.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Button, Typography, Notify as AlertNotify } from '../..';
+import PropTypes from 'prop-types';
+
+const ImportComp = ({
+  components,
+  from = 'components',
+  importDefault = false
+}) => {
+  let text = Array.isArray(components) ? components.join(', ') : components;
+
+  if (!importDefault) {
+    text = `{ ${text} }`;
+  }
+
+  const importText = `import ${text} from 'diginet-core-ui/${from}';`;
+  let Notify = null;
+
+  const onCopyImport = () => {
+    if (!components) {
+      Notify(`Không có components để copy`, {
+        color: 'warning'
+      });
+      return;
+    }
+
+    const el = document.createElement('input');
+    el.value = importText;
+    document.body.appendChild(el);
+    el.select();
+    document.execCommand('copy');
+    document.body.removeChild(el);
+    Notify(`Đã copy ${text} from ${from}`);
+  };
+
+  return components ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      position: 'sticky',
+      justifyContent: 'flex-end',
+      alignItems: 'center',
+      top: 0,
+      textAlign: 'right'
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    type: 'h3',
+    color: 'primary',
+    style: {
+      fontSize: 14
+    }
+  }, importText), /*#__PURE__*/React.createElement(Button, {
+    onClick: onCopyImport,
+    text: 'Copy',
+    viewType: 'filled',
+    color: 'info',
+    size: 'tiny'
+  }), /*#__PURE__*/React.createElement(AlertNotify, {
+    getAddNotify: func => Notify = func,
+    progressing: true,
+    autoDisappear: true,
+    maxWidth: '500px',
+    color: 'success'
+  })) : /*#__PURE__*/React.createElement(Typography, {
+    type: 'h1',
+    color: 'danger',
+    center: true
+  }, "DEVELOPING", ' ', /*#__PURE__*/React.createElement(Typography, {
+    type: 'h3',
+    color: 'warning'
+  }, "(Khoan h\u1EB5n d\xF9ng)"));
+};
+
+ImportComp.propTypes = {
+  components: PropTypes.string,
+  from: PropTypes.string,
+  importDefault: PropTypes.bool
+};
+export default ImportComp;

package/components/tooltip/index.js

@@ -57,6 +57,7 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   backgroundColor,
   children,
   color,
+  disableInteractive,
   direction,
   distance,
   size,
@@ -462,7 +463,8 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const renderTooltip = useMemo(() => {
     if (open && title) {
       const node = jsx("div", {
-        className: 'DGN-UI-Portal DGN-Tooltip'
+        className: 'DGN-UI-Portal DGN-Tooltip',
+        onMouseEnter: () => disableInteractive ? onHideTooltip() : null
       }, jsx("span", {
         className: IDs.arrow,
         css: ArrowCSS,
@@ -480,7 +482,7 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     return null;
-  }, [open, title, backgroundColor, color, size, padding, textAlign]);
+  }, [open, title, backgroundColor, color, size, padding, textAlign, disableInteractive]);
   return jsx(TagCreatedName, {
     ref: ref,
     css: ContainerCSS,
@@ -533,6 +535,7 @@ Tooltip.defaultProps = {
   arrowSize: 6,
   backgroundColor: fillTooltip,
   color: white,
+  disableInteractive: false,
   direction: 'down',
   size: 'medium',
   forceDirection: false,
@@ -573,6 +576,9 @@ Tooltip.propTypes = {
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
 
+  /** If `true`, makes a tooltip not interactive, i.e. it will close when the user hovers over the tooltip. */
+  disableInteractive: PropTypes.bool,
+
   /** Distance between the tooltip and the children. */
   distance: PropTypes.number,