diginet-core-ui 1.3.59-beta.1 → 1.3.59-beta.2

package/components/button/index.js

@@ -483,19 +483,19 @@ Button.propTypes = {
   /** status loading of button */
   loading: PropTypes.bool,
 
-  /**
-   * ref methods
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/chart/Pie-v2/Sector.js

@@ -94,8 +94,8 @@ Sector.propTypes = {
   onTouchEnd: PropTypes.func,
   onTouchStart: PropTypes.func,
 
-  /** function displays selected items by custom, example:<br/>
-   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** function displays selected items by custom, example:<br/>
+   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.func,
   path: PropTypes.string.isRequired,

package/components/chip/attach.js

@@ -156,11 +156,11 @@ const AttachChip = /*#__PURE__*/memo(({
   }))), attachView);
 });
 AttachChip.propTypes = {
-  /** the file info, such as:<br/>
-   * {<br/>
-   *  URL: https://url.com/pathname,<br/>
-   *  FileName: file.name,<br/>
-   * }
+  /** the file info, such as:<br/>
+   * {<br/>
+   *  URL: https://url.com/pathname,<br/>
+   *  FileName: file.name,<br/>
+   * }
    */
   file: PropTypes.shape({
     URL: PropTypes.string.isRequired,

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

@@ -41,8 +41,8 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       limit: 'DGN-UI-Calendar-Day-limit'
     }
   };
-  /**
-   * START REFERENCE
+  /**
+   * START REFERENCE
    */
 
   const ref = useRef(null);
@@ -61,12 +61,12 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const firstDayOfMax = new Date(new Date(max).setDate(1)).setHours(0, 0, 0, 0);
   const firstDayOfMin = new Date(new Date(min).setDate(1)).setHours(0, 0, 0, 0);
-  /**
-   * END REFERENCE
+  /**
+   * END REFERENCE
    */
 
-  /**
-   * START FUNCTION
+  /**
+   * START FUNCTION
    */
 
   const onUpdateNavigatorValue = useCallback(value => {
@@ -152,12 +152,12 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
     }
   };
-  /**
-   * END FUNCTION
+  /**
+   * END FUNCTION
    */
 
-  /**
-   * START EFFECT
+  /**
+   * START EFFECT
    */
 
 
@@ -198,12 +198,12 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onUpdate(activeValue.current);
     }
   }, [onClick, min, max]);
-  /**
-   * END FUNCTION
+  /**
+   * END FUNCTION
    */
 
-  /**
-   * START COMPONENT
+  /**
+   * START COMPONENT
    */
 
   const tableMemo = jsx("div", {
@@ -212,8 +212,8 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: unique.table.table,
     ref: tableRef
   }, renderHeader(unique), jsx("tbody", null)));
-  /**
-   * END COMPONENT
+  /**
+   * END COMPONENT
    */
 
   return jsx("div", { ...props,

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

@@ -578,23 +578,23 @@ NumberInput.propTypes = {
   /** style inline of input in NumberInput component */
   inputStyle: PropTypes.object,
 
-  /**
-   * the format to display value<br/>
-   * * function: value => function(value)<br/>
-   * * string: Example: '#.###', '# ###', '#.### 2%', '#.### %%'<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;#: integer part digit<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;. / '_': separator symbol<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;%: decimal digit, '2%' === '%%'
+  /**
+   * the format to display value<br/>
+   * * function: value => function(value)<br/>
+   * * string: Example: '#.###', '# ###', '#.### 2%', '#.### %%'<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;#: integer part digit<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;. / '_': separator symbol<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;%: decimal digit, '2%' === '%%'
    */
   format: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 
   /** The function to get ref of NumberInput component */
   refs: PropTypes.func,
 
-  /** 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/number-input/index2.js

@@ -15,6 +15,7 @@ const NumberInputRoot = css`
     margin-bottom: 20px;
 `;
 const regexValidNumber = /[^0-9.,-]/g;
+const regexNumber = /[^0-9]/g;
 const regexThousandNumber = /(\d)(?=(\d{3})+\b)/g;
 const NumberInput = /*#__PURE__*/forwardRef(({
   viewType,
@@ -43,12 +44,14 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   onChange,
   onFocus,
   onInput,
+  onBlur,
   onKeyDown,
   onKeyUp,
   validates,
   delayOnChange,
   fixedDecimalDigit,
-  className
+  className,
+  maxDigit
 }, reference) => {
   inputRef = inputRef || useRef(null);
   const pos = useRef(null);
@@ -164,6 +167,8 @@ const NumberInput = /*#__PURE__*/forwardRef(({
         });
       }
     }
+
+    onBlur && onBlur(e);
   };
 
   const _onKeyDown = e => {
@@ -184,11 +189,8 @@ const NumberInput = /*#__PURE__*/forwardRef(({
 
     const isNumber = keyCode >= 48 && keyCode <= 57 && shiftKey === false || keyCode >= 96 && keyCode <= 105 || keyCode === 231 && key >= '0' && key <= '9'; // character input type="number"
 
-    const allowKeyTypeNumber = isNumber || keyCode === 8 || // key backspace
-    keyCode > 34 && keyCode < 40 || keyCode === 190 || keyCode === 110 || // .
-    keyCode === 231 && key === '.' || // .
-    keyCode === 188 || // ,
-    (ctrlKey || metaKey) && (keyCode === 65 || keyCode === 67 || keyCode === 86) || // ctrl + A, ctrl + C, ctrl + V
+    let allowKeyTypeNumber = isNumber || keyCode === 8 || // key backspace
+    keyCode > 34 && keyCode < 40 || key === thousandSymbol || key === decimalSymbol || (ctrlKey || metaKey) && (keyCode === 65 || keyCode === 67 || keyCode === 86) || // ctrl + A, ctrl + C, ctrl + V
     keyCode === 46 || // key delete
     keyCode === 189 || keyCode === 109 || // -
     keyCode === 9; // tab
@@ -197,13 +199,10 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     const removeDot = keyCode === 8 && selectionEnd - selectionStart <= 1 && value.charAt(selectionEnd - 1) === thousandSymbol; // Decimal
     // Do not allow the character decimal if decimalDigit is undefined
 
-    const isDecimalSymbol = decimalSymbol === '.' && (keyCode === 190 || keyCode === 110) || decimalSymbol === ',' && keyCode === 188;
+    const isDecimalSymbol = decimalSymbol === key;
     const disabledDecimalSymbol = isDecimalSymbol && !decimalDigit; // Accepts only one decimal separator
 
-    const decimalExists = value.includes(decimalSymbol) && isDecimalSymbol; // Do not allow the character thousand
-
-    const isThousandSymbol = (!thousandSymbol || thousandSymbol === '.') && (keyCode === 190 || keyCode === 110) || thousandSymbol === ',' && keyCode === 188;
-    const disabledThousandSymbol = isThousandSymbol; // Disabled typing input when decimal digit to limit and focus is last
+    const decimalExists = value.includes(decimalSymbol) && isDecimalSymbol; // Disabled typing input when decimal digit to limit and focus is last
 
     const disabledTypingDecimal = ((_value$split = value.split(decimalSymbol)) === null || _value$split === void 0 ? void 0 : (_value$split$ = _value$split[1]) === null || _value$split$ === void 0 ? void 0 : _value$split$.length) >= decimalDigit && // total number after decimal symbol > {decimalDigit}
     selectionStart === value.length; // the focus is at the end of the string
@@ -229,9 +228,11 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     } // disabled negative
 
 
-    const disabled180 = (keyCode === 189 || keyCode === 109) && (disabledNegative || value.includes('-')); // Block event if include conditions
+    const disabled180 = (keyCode === 189 || keyCode === 109) && (disabledNegative || value.includes('-')); // disabled max digit
+
+    const isMaxDigit = maxDigit && (value === null || value === void 0 ? void 0 : value.replace(regexNumber, '').length) === maxDigit && (isNumber || key === thousandSymbol || key === decimalSymbol) && selectionStart === selectionEnd; // Block event if include conditions
 
-    if (decimalExists || disabledThousandSymbol || removeDot || isNumber && disabledTypingDecimal || disabledDecimalSymbol || !allowKeyTypeNumber || disabled180) {
+    if (decimalExists || removeDot || isNumber && disabledTypingDecimal || disabledDecimalSymbol || !allowKeyTypeNumber || disabled180 || isMaxDigit) {
       e.preventDefault();
     }
 
@@ -415,6 +416,9 @@ NumberInput.propTypes = {
   /** on focus function */
   onFocus: PropTypes.func,
 
+  /** on blur function */
+  onBlur: PropTypes.func,
+
   /** inputRef of NumberInput component */
   inputRef: PropTypes.any,
 
@@ -428,6 +432,9 @@ NumberInput.propTypes = {
   thousandSeparator: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['.', ','])]),
 
   /** className of component */
-  className: PropTypes.string
+  className: PropTypes.string,
+
+  /** max character is number of NumberInput component */
+  maxDigit: PropTypes.number
 };
 export default NumberInput;

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

@@ -396,13 +396,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,
 

package/components/progress/circular.js

@@ -65,8 +65,8 @@ const getDimension = size => {
     strokeWidth
   };
 };
-/**
- * Determinate circular progress
+/**
+ * Determinate circular progress
  */
 
 
@@ -115,8 +115,8 @@ const Determinate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     return angle;
   };
-  /**
-   * style
+  /**
+   * style
    */
 
 
@@ -218,8 +218,8 @@ Determinate.propTypes = {
   width: PropTypes.number
 };
 export const DeterminateCircularProgress = Determinate;
-/**
- * Indeterminate circular progress
+/**
+ * Indeterminate circular progress
  */
 
 const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -256,8 +256,8 @@ const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             stroke-dashoffset: -${r * 124 / 200};
         }
     `;
-  /**
-   * style
+  /**
+   * style
    */
 
 
@@ -288,8 +288,8 @@ const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             stroke-linecap: round;
             stroke-width: ${circleStrokeW};
         `;
-  /**
-   * component
+  /**
+   * component
    */
 
   const CircleBackgroundMemo = useMemo(() => jsx("circle", {
@@ -332,8 +332,8 @@ Indeterminate.propTypes = {
   width: PropTypes.number
 };
 export const IndeterminateCircularProgress = Indeterminate;
-/**
- * Circular progress
+/**
+ * Circular progress
  */
 
 const CircularProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({

package/components/transfer/index.js

@@ -456,9 +456,9 @@ Transfer.propTypes = {
   /** field name used for icon display */
   iconExpr: string,
 
-  /** field name used for text display<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** field name used for text display<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: oneOfType([string, array]),
 

package/icons/effect.js

@@ -94,8 +94,8 @@ Icon.propTypes = {
   /** name of icon in icons store */
   name: PropTypes.string.isRequired,
 
-  /** color of icon<br />
-   * default: #7F828E
+  /** color of icon<br />
+   * default: #7F828E
    */
   color: PropTypes.string,
 
@@ -117,19 +117,19 @@ Icon.propTypes = {
   /** have view box if true */
   onClick: PropTypes.func,
 
-  /**
-   * ref methods
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/package.json

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

package/styles/color-helper.js

@@ -1,12 +1,12 @@
 /* eslint-disable no-undef */
 
-/**
- * Returns a number whose value is limited to the given range.
- *
- * @param {number} value The value to be clamped
- * @param {number} min The lower boundary of the output range
- * @param {number} max The upper boundary of the output range
- * @returns {number} A number in the range [min, max]
+/**
+ * Returns a number whose value is limited to the given range.
+ *
+ * @param {number} value The value to be clamped
+ * @param {number} min The lower boundary of the output range
+ * @param {number} max The upper boundary of the output range
+ * @returns {number} A number in the range [min, max]
  */
 const clamp = (value, min = 0, max = 1) => {
   if (process.env.NODE_ENV !== 'production') {
@@ -17,11 +17,11 @@ const clamp = (value, min = 0, max = 1) => {
 
   return Math.min(Math.max(min, value), max);
 };
-/**
- * Converts a color from CSS hex format to CSS rgb format.
- *
- * @param {string} color - Hex color, i.e. #nnn or #nnnnnn
- * @returns {string} A CSS rgb color string
+/**
+ * Converts a color from CSS hex format to CSS rgb format.
+ *
+ * @param {string} color - Hex color, i.e. #nnn or #nnnnnn
+ * @returns {string} A CSS rgb color string
  */
 
 
@@ -43,11 +43,11 @@ const intToHex = int => {
   const hex = int.toString(16);
   return hex.length === 1 ? `0${hex}` : hex;
 };
-/**
- * Converts a color from CSS rgb format to CSS hex format.
- *
- * @param {string} color - RGB color, i.e. rgb(n, n, n)
- * @returns {string} A CSS rgb color string, i.e. #nnnnnn
+/**
+ * Converts a color from CSS rgb format to CSS hex format.
+ *
+ * @param {string} color - RGB color, i.e. rgb(n, n, n)
+ * @returns {string} A CSS rgb color string, i.e. #nnnnnn
  */
 
 
@@ -61,11 +61,11 @@ export const rgbToHex = color => {
   } = decomposeColor(color);
   return `#${values.map(n => intToHex(n)).join('')}`;
 };
-/**
- * Converts a color from CSS rgb format to CSS hex format.
- *
- * @param {string} color - RGBA color, i.e. rgba(n, n, n, f)
- * @returns {string} A CSS rgb A color string, i.e. #nnnnnnnn
+/**
+ * Converts a color from CSS rgb format to CSS hex format.
+ *
+ * @param {string} color - RGBA color, i.e. rgba(n, n, n, f)
+ * @returns {string} A CSS rgb A color string, i.e. #nnnnnnnn
  */
 
 export const rgbaToHexA = color => {
@@ -98,11 +98,11 @@ export const rgbaToHexA = color => {
   if (a.length == 1) a = '0' + a;
   return '#' + r + g + b + a;
 };
-/**
- * Converts a color from hsl format to rgb format.
- *
- * @param {string} color - HSL color values
- * @returns {string} rgb color values
+/**
+ * Converts a color from hsl format to rgb format.
+ *
+ * @param {string} color - HSL color values
+ * @returns {string} rgb color values
  */
 
 export const hslToRgb = color => {
@@ -130,13 +130,13 @@ export const hslToRgb = color => {
     values: rgb
   });
 };
-/**
- * Returns an object with the type and values of a color.
- *
- * Note: Does not support rgb % values.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {object} - A  color object: {type: string, values: number[]}
+/**
+ * Returns an object with the type and values of a color.
+ *
+ * Note: Does not support rgb % values.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @returns {object} - A  color object: {type: string, values: number[]}
  */
 
 export const decomposeColor = color => {
@@ -162,13 +162,13 @@ export const decomposeColor = color => {
     values
   };
 };
-/**
- * Converts a color object with type and values to a string.
- *
- * @param {object} color - Decomposed color
- * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
- * @param {array} color.values - [n,n,n] or [n,n,n,n]
- * @returns {string} A CSS color string
+/**
+ * Converts a color object with type and values to a string.
+ *
+ * @param {object} color - Decomposed color
+ * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
+ * @param {array} color.values - [n,n,n] or [n,n,n,n]
+ * @returns {string} A CSS color string
  */
 
 export const recomposeColor = color => {
@@ -189,14 +189,14 @@ export const recomposeColor = color => {
 
   return `${type}(${values.join(', ')})`;
 };
-/**
- * Calculates the contrast ratio between two colors.
- *
- * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- *
- * @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {number} A contrast ratio value in the range 0 - 21.
+/**
+ * Calculates the contrast ratio between two colors.
+ *
+ * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+ *
+ * @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @returns {number} A contrast ratio value in the range 0 - 21.
  */
 
 export const getContrastRatio = (foreground, background) => {
@@ -204,14 +204,14 @@ export const getContrastRatio = (foreground, background) => {
   const lumB = getLuminance(background);
   return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
 };
-/**
- * The relative brightness of any point in a color space,
- * normalized to 0 for darkest black and 1 for lightest white.
- *
- * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {number} The relative brightness of the color in the range 0 - 1
+/**
+ * The relative brightness of any point in a color space,
+ * normalized to 0 for darkest black and 1 for lightest white.
+ *
+ * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @returns {number} The relative brightness of the color in the range 0 - 1
  */
 
 export const getLuminance = color => {
@@ -225,25 +225,25 @@ export const getLuminance = color => {
 
   return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
 };
-/**
- * Darken or lighten a color, depending on its luminance.
- * Light colors are darkened, dark colors are lightened.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
+/**
+ * Darken or lighten a color, depending on its luminance.
+ * Light colors are darkened, dark colors are lightened.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
 
 export const emphasize = (color, coefficient = 0.15) => {
   return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
 };
-/**
- * Set the absolute transparency of a color.
- * Any existing alpha values are overwritten.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @param {number} value - value to set the alpha channel to in the range 0 -1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
+/**
+ * Set the absolute transparency of a color.
+ * Any existing alpha values are overwritten.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {number} value - value to set the alpha channel to in the range 0 -1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
 
 export const fade = (color, value) => {
@@ -257,12 +257,12 @@ export const fade = (color, value) => {
   color.values[3] = value;
   return recomposeColor(color);
 };
-/**
- * Darkens a color.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @param {number} coefficient - multiplier in the range 0 - 1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
+/**
+ * Darkens a color.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {number} coefficient - multiplier in the range 0 - 1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
 
 export const darken = (color, coefficient) => {
@@ -281,12 +281,12 @@ export const darken = (color, coefficient) => {
 
   return recomposeColor(color);
 };
-/**
- * Lightens a color.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @param {number} coefficient - multiplier in the range 0 - 1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
+/**
+ * Lightens a color.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {number} coefficient - multiplier in the range 0 - 1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
 
 export const lighten = (color, coefficient) => {
@@ -305,22 +305,22 @@ export const lighten = (color, coefficient) => {
 
   return recomposeColor(color);
 };
-/**
- * Validate a color string.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {boolean} is a color
+/**
+ * Validate a color string.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @returns {boolean} is a color
  */
 
 export const isColor = color => {
   const regex = /(^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$|^(rgb|hsl)a\((\d{1,3}%?,\s?){3}(1|0|0?\.\d+)\)$|^(rgb|hsl)\(\d{1,3}%?(,\s?\d{1,3}%?){2}\)$)/gim;
   return regex.test(color);
 };
-/**
- * Detect a color string type.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {string | false} color type, string or false
+/**
+ * Detect a color string type.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @returns {string | false} color type, string or false
  */
 
 export const detectColor = color => {
@@ -335,11 +335,11 @@ export const detectColor = color => {
 
   return null;
 };
-/**
- * Validate a color name.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {boolean} is a color
+/**
+ * Validate a color name.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @returns {boolean} is a color
  */
 
 export const isColorName = color => {
@@ -347,11 +347,11 @@ export const isColorName = color => {
   ctx.fillStyle = color;
   return ctx.fillStyle === '#000000' ? false : ctx.fillStyle;
 };
-/**
- * Convert from #ffffff to rgba()
- * @param hex color - #ffffff
- * @param {number} alpha - 0.5
- * @returns {string} color - rgba()
+/**
+ * Convert from #ffffff to rgba()
+ * @param hex color - #ffffff
+ * @param {number} alpha - 0.5
+ * @returns {string} color - rgba()
  */
 
 export const hexToRGBA = (hex, alpha) => {

package/utils/error/error.js

@@ -1,8 +1,8 @@
 import { extend } from '../object/extend';
 import { logger } from '../console';
 import { format } from '../string/string';
-/**
- * future
+/**
+ * future
  */
 
 const ERROR_URL = 'http://core.diginet.com.vn/ui/error/';

package/utils/renderIcon.js

@@ -5,11 +5,11 @@ import { jsx } from '@emotion/core';
 import { ButtonIcon } from '../components';
 import * as Icons from '../icons';
 import { parseTextToHTML, capitalize } from './';
-/**
- * render icon form source (dynamic type)
- * @param {String|jsx} source data of icon, maybe svg text | image link | name of icon in icons store or a jsx element
- * @param {String} type text to parse text to HTML, img link to use img tag, name to use icon form icons store
- * @param {Object} options properties of Icon component if us type is name {width, height, color, viewBox, ...}
+/**
+ * render icon form source (dynamic type)
+ * @param {String|jsx} source data of icon, maybe svg text | image link | name of icon in icons store or a jsx element
+ * @param {String} type text to parse text to HTML, img link to use img tag, name to use icon form icons store
+ * @param {Object} options properties of Icon component if us type is name {width, height, color, viewBox, ...}
  */
 
 const renderIcon = (source, type, options = {}) => {