diginet-core-ui 1.4.56-beta.1 → 1.4.56-beta.3

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

@@ -48,7 +48,7 @@ const uniqBy = (arr, iteratee) => {
     return true;
   });
 };
-const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {
@@ -299,10 +299,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     });
   };
 
-  /**
-   * So sánh text đầu vào cáo map với txtSearch
-   * @param text
-   * @return {boolean}
+  /**
+   * So sánh text đầu vào cáo map với txtSearch
+   * @param text
+   * @return {boolean}
    */
   const handleRenderBySearch = (text = '') => {
     if (text === null || text === undefined) text = '';
@@ -315,10 +315,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     } else return text.toLowerCase().includes(txtSearch.toLowerCase());
   };
 
-  /**
-   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
-   * @param data {object} rowData of dataSource
-   * @return {string}
+  /**
+   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
+   * @param data {object} rowData of dataSource
+   * @return {string}
    */
   const displayValue = data => {
     let text = '';
@@ -425,7 +425,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
         data,
         index
       }) : jsx(Typography, {
-        lineClamp: 1,
         type: 'p1'
       }, displayText);
       if (multiple && selectBox) {
@@ -1802,9 +1801,9 @@ Dropdown.propTypes = {
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-  /** The field name used for displaying text in the dropdown list.<br/>
-   * Examples: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: Do not use 'id - name', as it will return undefined.
+  /** The field name used for displaying text in the dropdown list.<br/>
+   * Examples: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: Do not use 'id - name', as it will return undefined.
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /**  Inline style for dropdown items. */
@@ -1813,14 +1812,14 @@ Dropdown.propTypes = {
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   /** Props applied to the [HelperText](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) element. */
   helperTextProps: PropTypes.object,
-  /** The field name used for displaying icons.<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** The field name used for displaying icons.<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1854,8 +1853,8 @@ Dropdown.propTypes = {
   onChange: PropTypes.func,
   /** Callback function fired when the dropdown is closed. */
   onClosed: PropTypes.func,
-  /** Callback function fired when the input value changes.<br/>
-   * If undefined, the filter function will run (default behavior).
+  /** Callback function fired when the input value changes.<br/>
+   * If undefined, the filter function will run (default behavior).
    */
   onInput: PropTypes.func,
   /** Callback function fired when a key is pressed down in the input. */
@@ -1868,21 +1867,21 @@ Dropdown.propTypes = {
   placeholder: PropTypes.string,
   /** If `true`, the component is read-only. */
   readOnly: PropTypes.bool,
-  /** Function used for custom rendering of items.<br/>
-   * Example: `(data, index) => data.name + ' - ' + data.role`<br/>
-   * This can be used as an alternative to `displayExpr`
+  /** Function used for custom rendering of items.<br/>
+   * Example: `(data, index) => data.name + ' - ' + data.role`<br/>
+   * This can be used as an alternative to `displayExpr`
    */
   renderItem: PropTypes.func,
-  /** Function or field name used to display selected items.<br/>
-   * Example: `(data, index) => index + ' - ' + data.name`<br/>
+  /** Function or field name used to display selected items.<br/>
+   * Example: `(data, index) => index + ' - ' + data.name`<br/>
    */
   renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /** If `true`, the label will indicate that the input is required. */
   required: PropTypes.bool,
-  /**
-   * Duration to wait after entering search content before triggering a search.<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If `true`, the default delayOnInput will be used.
+  /**
+   * Duration to wait after entering search content before triggering a search.<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   * If `true`, the default delayOnInput will be used.
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   /** Specifies the field name or expression used to compare values with the search string. */
@@ -1913,19 +1912,19 @@ Dropdown.propTypes = {
   valueObjectDefault: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   /** The variant to use. */
   viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * showDropdown(): Show dropdown
-   * * closeDropdown(): Close dropdown
-   * * onClear(): Clear selected value
-   * * setPreviousValue(): Set value to previous value
-   * * setValue(value): Set value of dropdown
-   *  * @param {value} - string || number || array
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * showDropdown(): Show dropdown
+   * * closeDropdown(): Close dropdown
+   * * onClear(): Clear selected value
+   * * setPreviousValue(): Set value to previous value
+   * * setValue(value): Set value of dropdown
+   *  * @param {value} - string || number || array
    */
 };
 export default Dropdown;

package/components/form-control/dropdown-box/index.js

@@ -10,7 +10,7 @@ import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../../utils";
 const regexBetween = /[^{}]+(?=})/g;
 const regexInclude = /{|}/g;
-const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const DropdownBox = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

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

@@ -4,7 +4,7 @@ import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { Children, forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';
 import { useTheme } from "../../../theme";
-const FormGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const FormGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   fullWidth,
   oneHelperText,
   marginRight,

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

@@ -9,7 +9,7 @@ import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../../utils";
 const colorMap = new Map([['default', 'semantic/danger'], ['success', 'semantic/success'], ['warning', 'semantic/warning'], ['danger', 'semantic/danger'], ['info', 'semantic/info']]);
-const HelperText = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const HelperText = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

package/components/form-control/input-base/UncontrolledInputBase.js

@@ -9,7 +9,7 @@ import { bgColor, border, borderBottom, borderBottomColor, borderColor, borderNo
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, refType as ref, getProp } from "../../../utils";
-const UncontrolledInputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const UncontrolledInputBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

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

@@ -9,7 +9,7 @@ import { bgColor, bgTransparent, border, borderBottom, borderBottomColor, border
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, refType as ref, useInput, getProp } from "../../../utils";
-const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const InputBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

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

@@ -9,7 +9,7 @@ import { flexRow, parseMinHeight, typographyTypes } from "../../../styles/genera
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../../utils";
-const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Label = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

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

@@ -128,7 +128,7 @@ const converters = {
   en: num2WordsEn,
   zh: num2WordsZh
 };
-const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const MoneyInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
 
   // props priority: `inProps` > `themeDefaultProps`

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

@@ -98,13 +98,13 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
 
   // if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
 
-  /**
-   * Convert number to format money
-   * @param vl {number} - value
-   * @type {function}
-   * @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}
+   * @return {string}
+   * @example 1200300.123 => 1,200,300.123
+   * @example 1200300,123 => 1.200.300,123
    */
   const parseNumberToMoney = useCallback((vl, isNumber) => {
     var _number, _number2, _number$, _number3;
@@ -152,13 +152,13 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     return number;
   }, [decimalSymbol, max, value, decimalDigit, fixedDecimalDigit]);
 
-  /**
-   * Convert money to format number
-   * @param vl {string} - value
-   * @type {function}
-   * @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}
+   * @return {number}
+   * @example 1,200,300.123 => 1200300.123
+   * @example 1.200.300,123 => 1200300.123
    */
   const convertMoneyToNumber = useCallback((vl, isNumber) => {
     var _number4, _number4$toString, _number4$toString$rep, _number4$toString$rep2, _number4$toString$rep3;
@@ -169,11 +169,13 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     return number;
   }, [decimalSymbol]);
   const _onInput = useCallback((e, flag) => {
-    var _e$target$value;
+    var _e$target$value, _limitValueT$toString, _limitValueT$toString2, _limitValueT$toString3, _limitValueT$toString4, _limitValueT$toString5, _limitValueT$toString6;
     let valueT = (_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : e.value;
-    if (disabledNegative && eval(valueT || 0) <= 0 || valueT.includes('-')) valueT = 0;
-    if ((min || min === 0) && eval(valueT) <= min || min === 0 && valueT.includes('-')) valueT = min;
-    if ((max || max === 0) && eval(valueT) >= max) valueT = max;
+    // xóa các số "0" đứng trước giá trị ví dụ: 0100, 0200 để tránh lỗi Octal literals are not allowed in strict mode
+    let limitValueT = valueT.split(/([+\-*/])/).map(a => parseFloat(a) || a).join('');
+    if (disabledNegative && eval(((_limitValueT$toString = (_limitValueT$toString2 = limitValueT.toString().replaceAll(thousandSymbol, '')).replaceAll) === null || _limitValueT$toString === void 0 ? void 0 : _limitValueT$toString.call(_limitValueT$toString2, decimalSymbol, '.')) || 0) <= 0 || limitValueT.includes('-')) valueT = 0;
+    if ((min || min === 0) && eval((_limitValueT$toString3 = (_limitValueT$toString4 = limitValueT.toString().replaceAll(thousandSymbol, '')).replaceAll) === null || _limitValueT$toString3 === void 0 ? void 0 : _limitValueT$toString3.call(_limitValueT$toString4, decimalSymbol, '.')) <= min || min === 0 && limitValueT.includes('-')) valueT = min;
+    if ((max || max === 0) && eval((_limitValueT$toString5 = (_limitValueT$toString6 = limitValueT.toString().replaceAll(thousandSymbol, '')).replaceAll) === null || _limitValueT$toString5 === void 0 ? void 0 : _limitValueT$toString5.call(_limitValueT$toString6, decimalSymbol, '.')) >= max) valueT = max;
     valueT = parseNumberToMoney(valueT);
     const returnValue = convertMoneyToNumber(valueT);
     e.value = globalRef.current.value = !isNaN(parseFloat(returnValue)) ? parseFloat(returnValue) : null;
@@ -496,10 +498,10 @@ NumberInput.propTypes = {
   style: PropTypes.object,
   /** Thousand separator character. */
   thousandSeparator: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['.', ','])]),
-  /** 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]),
   /** The value of the input element, required for a controlled component. */

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

@@ -8,7 +8,7 @@ import { cursorNotAllowed, displayBlock, positionRelative } from "../../../style
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, onValidate, refType as ref } from "../../../utils";
-const PasswordInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const PasswordInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
 

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

@@ -17,7 +17,7 @@ const ensigns = {
     mark: '____ _______'
   }
 };
-const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const PhoneInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   viewType,
   ensign,
   required,

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

@@ -8,7 +8,7 @@ import { boxBorder, cursorNoDrop, cursorPointer, displayBlock, displayNone, posi
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp, randomString } from "../../../utils";
-const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Radio = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

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

@@ -8,7 +8,7 @@ import { cursorNotAllowed, displayBlock, positionRelative } from "../../../style
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, onValidate, refType as ref } from "../../../utils";
-const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
 

package/components/form-control/time-picker/index.js

@@ -73,7 +73,7 @@ const getValue = value => {
   }
   return new Date();
 };
-const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const TimePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   activeHeight,
   activeWidth,
   allowSeconds,

package/components/form-control/time-picker/v2/index.js

@@ -9,7 +9,7 @@ import { bgColor, border, borderColor, borderNone, borderRadius4px, displayFlex,
 import { useTheme } from "../../../../theme";
 import useThemeProps from "../../../../theme/utils/useThemeProps";
 import { classNames, date, getProp, hexToRGBA } from "../../../../utils";
-const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const TimePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
 
   // props priority: `inProps` > `themeDefaultProps`

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

@@ -8,7 +8,7 @@ import { borderRadius, cursorNoDrop, cursorPointer, displayBlock, flexRow, items
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../../utils";
-const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Toggle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
 

package/components/form-view/input.js

@@ -6,7 +6,7 @@ import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
 import { border, borderBottom, borderRadius, bottom, boxBorder, displayFlex, inset, insetX, itemsCenter, parseHeight, pointerEventsNone, positionAbsolute, positionRelative, scale } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { formatDate, getProp } from "../../utils";
-const InputView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const InputView = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   inputProps,
   inputStyleProps,
   value,

package/components/grid/index.js

@@ -10,7 +10,7 @@ import { breakpointKeys } from "../../theme/createBreakpoints";
 import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames, handleBreakpoints } from "../../utils";
 import GridContext from "./context";
-const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Grid = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

package/components/image/index.js

@@ -15,7 +15,7 @@ const blurKeyframe = keyframes`
     75% { -webkit-filter: blur(1px);}
     100% { -webkit-filter: blur(0px);}
 `;
-const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Image = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
 
   // props priority: `inProps` > `themeDefaultProps`

package/components/list/list-item-action.js

@@ -7,7 +7,7 @@ import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { bgColor, boxBorder, displayFlex, itemsCenter, order, parseMaxHeight, positionRelative, textColor, z } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { classNames, getProp } from "../../utils";
-const ListItemAction = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const ListItemAction = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   children,
   name,
   className,

package/components/list/list-item-icon.js

@@ -7,7 +7,7 @@ import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { bgColor, boxBorder, displayFlex, itemsCenter, order, parseMinWidth, positionRelative, textColor, z } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { classNames, getProp } from "../../utils";
-const ListItemIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const ListItemIcon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   className,
   children,
   name,

package/components/list/list-item-text.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { bgColor, boxBorder, displayFlex, itemsCenter, order, positionRelative } from "../../styles/general";
 import { classNames } from "../../utils";
-const ListItemText = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const ListItemText = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   className,
   children,
   style,

package/components/list/list-item.js

@@ -7,7 +7,7 @@ import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } fro
 import { bgColor, boxBorder, cursorPointer, displayFlex, flexRow, itemsCenter, overflowHidden, parseMaxWidth, parseMinHeight, parseWidthHeight, positionRelative, textColor, userSelectNone } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { classNames, getProp } from "../../utils";
-const ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const ListItem = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   children,
   className,
   style,

package/components/list/list.js

@@ -7,7 +7,7 @@ import { bgColor, borderRadius, boxBorder, displayBlock, parseMaxHeight, parseMa
 import { useTheme } from "../../theme";
 import { classNames, getProp } from "../../utils";
 const levels = [0, 1, 'second', 'third', 'fourth', 'fifth'];
-const List = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const List = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   className,
   width,
   maxWidth,

package/components/list/sub-header.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { bgColor, boxBorder, displayBlock, parseWidthHeight, positionSticky, textLeft, top, userSelectNone, z } from "../../styles/general";
 import { useTheme } from "../../theme";
-const ListSubHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const ListSubHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   children,
   style,
   ...props

package/components/modal/body.js

@@ -9,7 +9,7 @@ import sx from "../../styles/sx";
 import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames } from "../../utils";
 import { sxResponsivePadding } from "./header";
-const ModalBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const ModalBody = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
 
   // props priority: `inProps` > `themeDefaultProps`

package/components/modal/footer.js

@@ -9,7 +9,7 @@ import sx from "../../styles/sx";
 import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames } from "../../utils";
 import { sxResponsivePadding } from "./header";
-const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const ModalFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
 
   // props priority: `inProps` > `themeDefaultProps`

package/components/modal/header.js

@@ -17,7 +17,7 @@ export const sxResponsivePadding = {
     md: [4, 6]
   }
 };
-const ModalHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const ModalHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

package/components/modal/index.js

@@ -5,7 +5,7 @@ import Body from "./body";
 import Footer from "./footer";
 import Header from "./header";
 import Modal from "./modal";
-const ModalSample = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const ModalSample = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   action = {},
   bodyStyle,
   children,

package/components/modal/modal.js

@@ -13,7 +13,7 @@ import { classNames, getProp, hexToRGBA, useDelayUnmount } from "../../utils";
 import ModalContext from "./context";
 const fadeInDown = animations.fadeInDown;
 const fadeOutUp = animations.fadeOutUp;
-const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {

package/components/others/option-wrapper/index.js

@@ -4,7 +4,7 @@ import { jsx } from '@emotion/core';
 import { forwardRef, memo, useEffect, useState } from 'react';
 import sx from "../../../styles/sx";
 const OptionWrapper = Component => {
-  const WrappedComponent = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
+  const WrappedComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((props, ref) => {
     const [options, setOptions] = useState({});
     const option = (option, optionValue) => {
       if (typeof option === 'undefined') {

package/components/paging/page-info.js

@@ -17,7 +17,7 @@ const getLastPage = (totalItems, itemsPerPage) => {
   }
   return _lastPage + 1;
 };
-const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const PagingInfo = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   action = {},
   bgColor: bgColorProp,
   className,
@@ -533,22 +533,22 @@ PagingInfo.propTypes = {
   onChangePage: PropTypes.func,
   /** Callback fired when quantity on per page changed. */
   onChangePerPage: PropTypes.func,
-  /**
-   * Callback fired when page number is changing.
-   *
-   * * prevPage: Page before changed
-   * * newPage: Page after changed
-   * * cancel(value): Function cancel change page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when page number is changing.
+   *
+   * * prevPage: Page before changed
+   * * newPage: Page after changed
+   * * cancel(value): Function cancel change page
+   *  * @param {value} - bool
    */
   onChangingPage: PropTypes.func,
-  /**
-   * Callback fired when quantity on item per page is changing.
-   *
-   * * prevPerPage: Items per page before changed
-   * * newPerPage: Items per page after changed
-   * * cancel(value): Function cancel change items per page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when quantity on item per page is changing.
+   *
+   * * prevPerPage: Items per page before changed
+   * * newPerPage: Items per page after changed
+   * * cancel(value): Function cancel change items per page
+   *  * @param {value} - bool
    */
   onChangingPerPage: PropTypes.func,
   /** Style inline of component. */
@@ -557,26 +557,26 @@ PagingInfo.propTypes = {
   totalItems: PropTypes.number,
   /** Compact type for mobile. */
   typeShort: PropTypes.bool
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * onChangePage(page): Change page number
-   *  * @param {page} - number
-   * * onChangePerPage(per): Change quantity on per page
-   *  * @param {per} - number
-   * * setTotalItems(items): Set total items
-   *  * @param {items} - number
-   *
-   * * 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 (ref.current.instance.*method*)
+   *
+   * * onChangePage(page): Change page number
+   *  * @param {page} - number
+   * * onChangePerPage(per): Change quantity on per page
+   *  * @param {per} - number
+   * * setTotalItems(items): Set total items
+   *  * @param {items} - number
+   *
+   * * 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
    */
 };
 export { PagingInfo };