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

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

@@ -47,7 +47,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 {
@@ -88,6 +88,7 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
     onInput,
     onKeyDown,
     onLoadMore,
+    oneLiner,
     placeholder: placeholderProp,
     readOnly,
     renderItem,
@@ -157,9 +158,13 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
     valueTemp = convertData(valueTemp, valueExpr);
   }
   const [valueMulti, setValueMulti] = useState(valueTemp);
+  const [valueMultiDisplay, setValueMultiDisplay] = useState([]);
+  const [valueMultiOverflow, setValueMultiOverflow] = useState([]);
+  const [openMultipleOverflow, setOpenMultipleOverflow] = useState(false);
   const _isMobile = isMobile.any();
   const _InputCSS = InputCSS(multiple, typeof renderSelectedItem === 'function');
   const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, disabled, readOnly, multilineSelectedItem, theme);
+  const _OverFlowPopoverCSS = OverFlowPopoverCSS(theme);
   const _IconCSS = IconCSS(viewType, theme);
   const _DropdownFormCSS = viewType === 'outlined' ? DropdownFormOutlinedCSS(disabled, readOnly, placeholder, theme) : DropdownFormCSS(viewType, multiple, disabled, readOnly, placeholder, _DropdownInputCSS.name, theme);
   const _DropdownListCSS = DropdownListCSS(loadingState, theme);
@@ -923,6 +928,14 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
     }
     if (multiple && valueProp) {
       setValueMulti(convertData(valueProp, valueExpr));
+      if (oneLiner) {
+        const valueArray = sortMultiple(valueProp);
+        setValueMultiDisplay(valueArray === null || valueArray === void 0 ? void 0 : valueArray.display);
+        setValueMultiOverflow(valueArray === null || valueArray === void 0 ? void 0 : valueArray.overflow);
+        if ((valueArray === null || valueArray === void 0 ? void 0 : valueArray.overflow.length) === 0 && openMultipleOverflow) {
+          setOpenMultipleOverflow(false);
+        }
+      }
     }
     // Close dropdown treeview by children when select item
     if (children && (closeAfterSelect === true || closeAfterSelect === undefined && !multiple)) {
@@ -932,6 +945,14 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
   useEffect(() => {
     if (valueProp !== undefined && (!dropdownListRef.current || children || JSON.stringify(valueProp) !== JSON.stringify(currentValue[unique]))) {
       setValueIntoInput(valueProp);
+      if (oneLiner && multiple) {
+        const valueArray = sortMultiple(valueProp);
+        setValueMultiDisplay(valueArray === null || valueArray === void 0 ? void 0 : valueArray.display);
+        setValueMultiOverflow(valueArray === null || valueArray === void 0 ? void 0 : valueArray.overflow);
+        if ((valueArray === null || valueArray === void 0 ? void 0 : valueArray.overflow.length) === 0 && openMultipleOverflow) {
+          setOpenMultipleOverflow(false);
+        }
+      }
     }
   }, [valueProp, dataSourceState, vlObjDefaultState]);
   useEffect(() => {
@@ -1029,16 +1050,168 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
     dataFilter = uniqBy([...vlObjDefaultState, ...dataFilter], data => data === null || data === void 0 ? void 0 : data[valueExpr]);
     return dataFilter;
   };
+  const getTextWidth = text => {
+    // re-use canvas object for better performance
+    const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas'));
+    const context = canvas.getContext('2d');
+    context.font = getCanvasFont();
+    const metrics = context.measureText(text);
+    // chip width = text width + 42 (padding and X button inside chip)
+    return metrics.width + 42;
+  };
+  const getCanvasFont = () => {
+    const fontWeight = 'normal';
+    const fontSize = '14px';
+    const fontFamily = 'SF Pro Display';
+    return `${fontWeight} ${fontSize} ${fontFamily}`;
+  };
+  const sortMultiple = value => {
+    let totalWidth = 0;
+    let displayArray = [];
+    const overflowArray = [];
+    const inputElement = document.getElementById(unique);
+    // Độ rộng của input
+    const inputWidth = inputElement === null || inputElement === void 0 ? void 0 : inputElement.clientWidth;
+    const items = [];
+    if ((valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length) > 0) {
+      value.map((vl, index) => {
+        const dataFilter = getData();
+        const data = dataFilter.find(v => v[valueExpr] === vl || v === vl);
+        if (data) {
+          const displayText = displayValue(data);
+          let item;
+          if (typeof renderSelectedItem === 'function') {
+            item = renderSelectedItem({
+              data,
+              index
+            });
+          } else {
+            item = jsx(Chip, {
+              css: [parseWidth('100%'), parseMaxWidth('max-content')],
+              key: index,
+              startIcon: getIconFromData(data, true),
+              label: displayText,
+              size: 'medium',
+              disabled: disabled,
+              clearAble: !readOnly && !disabled,
+              onRemove: e => onRemove(e, vl)
+            });
+          }
+          items.push(item);
+        }
+      });
+    }
+    for (var i = 0; i < items.length; i++) {
+      // calculate chip width before render
+      let chipWidth = getTextWidth(items[i].props.label);
+      const overflowChipWidth = getTextWidth(overflowArray.length);
+      if (getIconFromData(value[i], true)) {
+        // chip width with icon inside
+        chipWidth += 24;
+      }
+
+      // if chip width is larger than remaining, push the item into overflow array
+      if (inputWidth - totalWidth - chipWidth < overflowChipWidth) {
+        overflowArray.push(value[i]);
+      } else {
+        displayArray.push(value[i]);
+        // add chip width and 2px of gap between 2 chips
+        totalWidth += chipWidth + 2;
+      }
+    }
+    const multipleObjArray = {
+      display: displayArray,
+      overflow: overflowArray
+    };
+    return multipleObjArray;
+  };
+  const renderMultipleItem = value => {
+    const items = [];
+    if ((valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length) > 0) {
+      value.map((vl, index) => {
+        const dataFilter = getData();
+        const data = dataFilter.find(v => v[valueExpr] === vl || v === vl);
+        if (data) {
+          const displayText = displayValue(data);
+          let item;
+          if (typeof renderSelectedItem === 'function') {
+            item = renderSelectedItem({
+              data,
+              index
+            });
+          } else {
+            item = jsx(Chip, {
+              css: [parseWidth('100%'), parseMaxWidth('max-content')],
+              key: index,
+              startIcon: getIconFromData(data, true),
+              label: displayText,
+              size: 'medium',
+              disabled: disabled,
+              clearAble: !readOnly && !disabled,
+              onRemove: e => onRemove(e, vl)
+            });
+          }
+          items.push(item);
+        }
+      });
+    }
+    return items;
+  };
+  const onOpenOverflowPopover = () => {
+    setOpenMultipleOverflow(true);
+  };
+  const onCloseOverflowPopover = () => {
+    setOpenMultipleOverflow(false);
+  };
+  const renderMultipleOverflow = value => {
+    return value.length > 0 ? jsx(Chip, {
+      css: [parseWidth('100%'), parseMaxWidth('max-content')],
+      label: `+${value.length}`,
+      size: 'medium',
+      disabled: disabled,
+      onClick: onOpenOverflowPopover,
+      viewType: "filled",
+      color: "system/rest"
+    }) : null;
+  };
+  const renderOverflowPopover = value => {
+    const items = [];
+    if ((valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length) > 0) {
+      value.map((vl, index) => {
+        const dataFilter = getData();
+        const data = dataFilter.find(v => v[valueExpr] === vl || v === vl);
+        if (data) {
+          const displayText = displayValue(data);
+          let item = jsx(Chip, {
+            css: [parseWidth('100%'), parseMaxWidth('max-content')],
+            key: index,
+            startIcon: getIconFromData(data, true),
+            label: displayText,
+            size: 'medium',
+            disabled: disabled,
+            clearAble: !readOnly && !disabled,
+            onRemove: e => onRemove(e, vl)
+          });
+          items.push(item);
+        }
+      });
+    }
+    return items;
+  };
   const InputView = jsx("div", {
     css: _DropdownFormCSS,
     ref: formRef,
     className: classNames('DGN-UI-Dropdown-Form', openState && 'dropdown-showing')
   }, jsx("div", {
+    id: unique,
     css: _InputCSS,
     className: 'DGN-UI-Dropdown-Form-Input'
   }, multiple && valueMulti !== null && valueMulti !== void 0 && valueMulti.length ? jsx("div", {
     ...inputProps,
-    style: inputStyle,
+    style: {
+      width: 'fit-content',
+      ...inputStyle
+    },
     ref: inputRef,
     css: [_DropdownInputCSS],
     className: classNames('dgn-dropdown-multiple', inputProps.className),
@@ -1046,34 +1219,21 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
       e.preventDefault();
       return false;
     }
-  }, valueMulti.map((vl, index) => {
-    const dataFilter = getData();
-    const data = dataFilter.find(v => v[valueExpr] === vl || v === vl);
-    if (data) {
-      const displayText = displayValue(data);
-      let item;
-      if (typeof renderSelectedItem === 'function') {
-        item = renderSelectedItem({
-          data,
-          index
-        });
-      } else {
-        item = jsx(Chip, {
-          css: [parseWidth('100%'), parseMaxWidth('max-content')],
-          key: index,
-          startIcon: getIconFromData(data, true),
-          label: displayText,
-          size: 'medium',
-          disabled: disabled,
-          clearAble: !readOnly && !disabled,
-          onRemove: e => onRemove(e, vl)
-        });
-      }
-      return item;
-    }
-  })) : typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' ? jsx("div", {
+  }, renderMultipleItem(oneLiner ? valueMultiDisplay : valueMulti), oneLiner && jsx(Popover, {
+    css: [_OverFlowPopoverCSS],
+    width: 400,
+    style: {
+      padding: '8px 2px 8px 8px'
+    },
+    open: openMultipleOverflow,
+    anchor: renderMultipleOverflow(valueMultiOverflow),
+    onClose: onCloseOverflowPopover
+  }, renderOverflowPopover(valueMultiOverflow))) : typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' ? jsx("div", {
     ...inputProps,
-    style: inputStyle,
+    style: {
+      width: 'fit-content',
+      ...inputStyle
+    },
     ref: inputRef,
     css: _DropdownInputCSS,
     className: classNames('dgn-dropdown-multiple', inputProps.className),
@@ -1217,6 +1377,11 @@ const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly, m
         ${disabled && textColor(getProp(colors, 'system/disabled'))};
     }
 `;
+const OverFlowPopoverCSS = ({
+  spacing
+}) => css`
+    gap: ${spacing([1])};
+`;
 const IconCSS = (viewType, {
   spacing
 }) => css`
@@ -1561,6 +1726,8 @@ Dropdown.propTypes = {
   onKeyDown: PropTypes.func,
   /** Callback function fired when scrolling near the end of the dropdown. */
   onLoadMore: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+  /** If `true`, the Dropdown selected items when `multiple` is `true` is displayed on one line. */
+  oneLiner: PropTypes.bool,
   /** The short hint displayed in the input before the user selects a value. */
   placeholder: PropTypes.string,
   /** If `true`, the component is read-only. */

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

@@ -72,7 +72,7 @@ const num2WordsEn = n => {
   if (n === '0') return 'zero';
   return comp(chunk(3))(reverse)(arr(n)).map(makeGroup).map(thousand).filter(comp(not)(isEmpty)).reverse().join(' ');
 };
-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/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,

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();