diginet-core-ui 1.4.55 → 1.4.56-beta.2

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

@@ -1,14 +1,16 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { ButtonIcon, InputBase, Label, Popover, PopoverBody } from "../..";
+import { ButtonIcon, InputBase, Label, Popover, PopoverBody, HelperText } from "../..";
 import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useMemo } from 'react';
 import { animation, borderColor, displayBlock, overflowHidden, parseHeight, parseMinWidth, positionRelative, scaleX } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../../utils";
-const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const regexBetween = /[^{}]+(?=})/g;
+const regexInclude = /{|}/g;
+const DropdownBox = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
   const {
@@ -22,10 +24,14 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
   });
   const {
     action = {},
+    allowInput,
     bgColor: bgColorProp,
     children,
     className,
     delayOnInput,
+    disabled,
+    displayExpr: displayExprProp,
+    error,
     endIcon,
     inputProps,
     inputRef,
@@ -39,10 +45,19 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
     placeholder,
     startIcon,
     style,
-    value,
-    viewType
+    value: valueProps,
+    valueExpr,
+    viewType,
+    helperTextProps
   } = props;
+  let displayExpr = displayExprProp;
   const bgColor = typeof bgColorProp === 'string' ? getProp(colors, bgColorProp, bgColorProp) : bgColorProp;
+  const ErrorView = useMemo(() => {
+    return error ? jsx(HelperText, {
+      ...helperTextProps,
+      disabled: disabled
+    }, error) : null;
+  }, [disabled, error, helperTextProps]);
   const ref = useRef(null);
   const dropdownBoxRef = useRef(null);
   const timer = useRef(null);
@@ -85,6 +100,28 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
       onClosed === null || onClosed === void 0 ? void 0 : onClosed();
     }
   };
+
+  /**
+   * 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 = '';
+    if (data || data === 0) {
+      displayExpr = displayExpr || valueExpr;
+      let mask = data === null || data === void 0 ? void 0 : data[displayExpr];
+      // convert {id} - {name} to {<data[id]>} - {<data[name]>}
+      if (!mask && regexBetween.test(displayExpr)) {
+        var _displayExpr;
+        mask = (_displayExpr = displayExpr) === null || _displayExpr === void 0 ? void 0 : _displayExpr.replace(regexBetween, _ => (data === null || data === void 0 ? void 0 : data[_]) || '');
+      } else if (!mask) {
+        mask = typeof data !== 'object' ? data : '';
+      }
+      text = mask.toString().replace(regexInclude, '');
+    }
+    return text;
+  };
   useLayoutEffect(() => {
     if (ref.current) {
       const {
@@ -130,15 +167,17 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
       onClick: openOnClickAt === 'icon' ? onTriggerDropdown : null
     }) : null;
   };
+  const value = displayValue(valueProps);
   return jsx(Fragment, null, jsx("div", {
     ref: ref,
     css: _DropdownBoxRootCSS,
-    className: classNames('DGN-UI-Dropdown-Box', className),
+    className: classNames('DGN-UI-Dropdown-Box', className, error && 'error'),
     style: style
   }, label ? jsx(Label, {
     ...labelProps
   }, label) : null, jsx(InputBase, {
     ...inputProps,
+    readOnly: !allowInput,
     style: inputStyle,
     viewType: viewType,
     inputRef: inputRef,
@@ -157,7 +196,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
     anchor: ref.current,
     width: popoverWidth,
     onClose: closeDropdownBox
-  }, jsx(PopoverBody, null, children)));
+  }, jsx(PopoverBody, null, children)), ErrorView);
 }));
 const DropdownBoxRootCSS = (bgColorProp, {
   colors
@@ -166,6 +205,17 @@ const DropdownBoxRootCSS = (bgColorProp, {
     ${positionRelative};
     ${parseMinWidth(150)};
     ${parseHeight('max-content')};
+    &.error {
+        .DGN-UI-InputBase {
+            ${borderColor(getProp(colors, 'semantic/danger'))};
+            &::before {
+                ${borderColor(getProp(colors, 'semantic/danger'))};
+            }
+            &::after {
+                ${borderColor(getProp(colors, 'semantic/danger'))};
+            }
+        }
+    }
     .DGN-UI-InputBase {
         background: ${bgColorProp ? bgColorProp === true ? getProp(colors, 'fill/disabled') : bgColorProp : 'inherit'} !important;
         ${openState && css`
@@ -183,20 +233,6 @@ const DropdownBoxCSS = ({
     margin-top: ${spacing([1])};
     ${overflowHidden};
 `;
-
-// DropdownBox.defaultProps = {
-//     className: '',
-//     label: '',
-//     placeholder: '',
-//     startIcon: 'Search',
-//     endIcon: 'ArrowDown',
-//     openOnClickAt: 'icon',
-//     viewType: 'underlined',
-//     inputProps: {},
-//     delayOnInput: 700,
-//     zIndex: zIndexCORE(1),
-// };
-
 DropdownBox.propTypes = {
   /** class for dropdown */
   className: PropTypes.string,
@@ -233,6 +269,12 @@ DropdownBox.propTypes = {
   /** the function will run after open */
   onOpened: PropTypes.func,
   /** the function will run after close */
-  onClosed: PropTypes.func
+  onClosed: PropTypes.func,
+  /** Error message displayed below the input. */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  /** If `true`, the component is disabled. */
+  disabled: PropTypes.bool,
+  /** If `true`, the input is enable. */
+  allowInput: PropTypes.bool
 };
 export default DropdownBox;

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

@@ -49,7 +49,7 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     labelProps,
     max: maxProp,
     maxDigit,
-    min,
+    min: minProp,
     nonStyle,
     onBlur,
     onChange,
@@ -69,9 +69,12 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     viewType
   } = props;
   let max = maxProp;
+  let min = minProp;
   let thousandSymbol = thousandSeparator;
   let decimalSymbol = decimalSymbolProp;
   let valueProps = valueProp;
+  if (!min && min !== 0) min = -Infinity;
+  if (!max && max !== 0) max = Infinity;
   const pos = useRef(null);
   const ref = useRef(null);
   const globalRef = useRef({});
@@ -166,18 +169,21 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     return number;
   }, [decimalSymbol]);
   const _onInput = useCallback((e, flag) => {
-    var _e$target$value;
+    var _e$target$value, _valueT$toString$repl, _valueT$toString$repl2, _valueT$toString$repl3, _valueT$toString$repl4, _valueT$toString$repl5, _valueT$toString$repl6;
     let valueT = (_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : e.value;
-    if (disabledNegative && Number(valueT || 0) < 0) return;
+    if (disabledNegative && eval(((_valueT$toString$repl = (_valueT$toString$repl2 = valueT.toString().replaceAll(thousandSymbol, '')).replaceAll) === null || _valueT$toString$repl === void 0 ? void 0 : _valueT$toString$repl.call(_valueT$toString$repl2, decimalSymbol, '.')) || 0) <= 0 || valueT.includes('-')) valueT = 0;
+    if ((min || min === 0) && eval((_valueT$toString$repl3 = (_valueT$toString$repl4 = valueT.toString().replaceAll(thousandSymbol, '')).replaceAll) === null || _valueT$toString$repl3 === void 0 ? void 0 : _valueT$toString$repl3.call(_valueT$toString$repl4, decimalSymbol, '.')) <= min || min === 0 && valueT.includes('-')) valueT = min;
+    if ((max || max === 0) && eval((_valueT$toString$repl5 = (_valueT$toString$repl6 = valueT.toString().replaceAll(thousandSymbol, '')).replaceAll) === null || _valueT$toString$repl5 === void 0 ? void 0 : _valueT$toString$repl5.call(_valueT$toString$repl6, decimalSymbol, '.')) >= max) valueT = max;
     valueT = parseNumberToMoney(valueT);
     const returnValue = convertMoneyToNumber(valueT);
     e.value = globalRef.current.value = !isNaN(parseFloat(returnValue)) ? parseFloat(returnValue) : null;
     // e.target.value = globalRef.current.valueString = valueT || '';
     // globalRef.current.returnValue = returnValue || '';
     e.target.value = globalRef.current.valueString = valueT || '';
+    e.value = valueT;
     globalRef.current.returnValue = returnValue || '';
     onInput === null || onInput === void 0 ? void 0 : onInput(e);
-    setValue(valueT);
+    setValue(eval(valueT));
     if (flag) _onChange(e);
   }, [min, max, decimalDigit]);
   const _onBlur = useCallback(e => {

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 };

package/components/paging/page-selector.js

@@ -17,7 +17,7 @@ const getLastPage = (totalItems, itemsPerPage) => {
   }
   return _lastPage + 1;
 };
-const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const PagingSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   action = {},
   className,
   currentPage,

package/components/paper/index.js

@@ -5,7 +5,7 @@ import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } fro
 import { bgColor, border, borderRadius, parseMaxHeight, parseWidth, parseWidthHeight, shadowSmall } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { classNames, getProp, renderHTML } from "../../utils";
-const Paper = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const Paper = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   width,
   height,
   mapping,

package/components/popover/body.js

@@ -8,7 +8,7 @@ import { bgColor, border, borderRadius, displayFlex, flexCol, order, overflowAut
 import { useTheme } from "../../theme";
 import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../utils";
-const PopoverBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const PopoverBody = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
 

package/components/popover/footer.js

@@ -8,7 +8,7 @@ import { bgColor, borderRadius, boxBorder, displayFlex, flexRow, itemsCenter, ju
 import { useTheme } from "../../theme";
 import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../utils";
-const PopoverFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const PopoverFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();