diginet-core-ui 1.3.52 → 1.3.53-beta.1

package/components/accordion/index.js

@@ -82,7 +82,7 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         display: 'none'
       }
     })));
-  }, [id, disabled, className, boxShadow, onClick, children, expanded, onExpand, onCollapse, expandState]);
+  }, [id, disabled, className, style, boxShadow, onClick, children, expanded, onExpand, onCollapse, expandState]);
 }));
 const AccordionRootCSS = css`
     ${displayBlock};

package/components/accordion/summary.js

@@ -35,26 +35,25 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const _SummaryRootCSS = SummaryRootCSS(background);
 
   const _onClick = e => {
-    if (!disabled) {
-      const target = e.target;
+    if (disabled) return;
+    const target = e.target;
 
-      if (onClickAccordion) {
-        onClickAccordion();
-        return;
-      }
+    if (onClickAccordion) {
+      onClickAccordion();
+      return;
+    }
 
-      if (onClick && (!expandIconRef.current || !expandIconRef.current.contains(target))) {
-        onClick(e);
-        return;
-      }
+    if (onClick && (!expandIconRef.current || !expandIconRef.current.contains(target))) {
+      onClick(e);
+      return;
+    }
 
-      if (expandState) {
-        if (expanded === undefined) setExpandState(false);
-        !!onCollapse && onCollapse(e);
-      } else if (!expandState) {
-        if (expanded === undefined) setExpandState(true);
-        !!onExpand && onExpand(e);
-      }
+    if (expandState) {
+      if (expanded === undefined) setExpandState(false);
+      !!onCollapse && onCollapse(e);
+    } else if (!expandState) {
+      if (expanded === undefined) setExpandState(true);
+      !!onExpand && onExpand(e);
     }
   };
 
@@ -137,7 +136,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }) : jsx("span", {
       className: 'Accordion-Collapse-Icon effect'
     }, collapseIcon)))));
-  }, [id, expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, expandState]);
+  }, [id, expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, style, expandState, disabled]);
 }));
 AccordionSummary.defaultProps = {
   expandIconAt: 'start',

package/components/alert/index.js

@@ -10,8 +10,8 @@ import ButtonIcon from '../button/icon';
 import Icon from '../../icons';
 import { hexToRGBA } from '../../styles/color-helper';
 import { typography } from '../../styles/typography';
-import { alignCenter, border, borderBox, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from '../../styles/general';
 import { useTheme } from '../../theme';
+import { alignCenter, border, borderBox, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from '../../styles/general';
 const {
   heading3,
   heading4,

package/components/chip/index.js

@@ -114,8 +114,7 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: size
     }, jsx(Typography, {
       type: size === 'small' ? 'p2' : 'p1',
-      color: 'inherit',
-      lineClamp: 1
+      color: 'inherit'
     }, renderLabel()));
   }, [label, size, startIcon, endIcon, clearAble]);
   const endIconView = useMemo(() => {

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

@@ -41,8 +41,8 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   inputProps,
   forTreeView,
-  width,
   labelProps,
+  width,
   ...props
 }, reference) => {
   if (!inputRef) {

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

@@ -70,7 +70,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   total,
   placeholder,
   error,
-  keyExpr,
   displayExpr,
   subText,
   valueExpr,
@@ -155,11 +154,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const onClickInput = e => {
     if (!boxRef.current) {
-      if (!multiple || !Array.from(inputRef.current.querySelectorAll('.DGN-UI-Chip')).some(item => item.contains(e.target))) {
-        if ((renderSelectedItem || iconExpr && iconExpr !== 'none') && !multiple) {
+      if (!multiple || !Array.from(inputRef.current.querySelectorAll('.DGN-UI-Chip')).some(item => item.contains(e === null || e === void 0 ? void 0 : e.target))) {
+        if ((typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none') && !multiple) {
+          var _inputRef$current$chi;
+
           inputRef.current.innerHTML = inputRef.current.textContent.trim();
           inputRef.current.contentEditable = 'plaintext-only';
-          const caret = inputRef.current.childNodes.length ? 1 : 0;
+          const caret = (_inputRef$current$chi = inputRef.current.childNodes) !== null && _inputRef$current$chi !== void 0 && _inputRef$current$chi.length ? 1 : 0;
           const range = document.createRange();
           range.setStart(inputRef.current, caret);
           range.setEnd(inputRef.current, caret);
@@ -281,7 +282,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       window.addEventListener('resize', customizeWidthDropdown);
       document.addEventListener('wheel', onWheelHandler);
       document.addEventListener('mousedown', onClickOutsideOfInput);
-      document.addEventListener('keydown', preventScroll);
       boxRef.current && boxRef.current.addEventListener('keydown', moveOnItem);
 
       if (onLoadMore && dataSource.length < total) {
@@ -306,15 +306,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  const preventScroll = e => {
-    if (/Arrow(Up|Down)/.test(e.key)) {
-      e.preventDefault();
-      return false;
-    }
-
-    return true;
-  };
-
   const pressESCHandler = event => {
     if (event.key === 'Escape' || event.key === 'Tab') {
       closeDropdown();
@@ -339,11 +330,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const closeDropdown = () => {
-    const node = document.querySelector(`.DGN-Dropdown-${unique}`);
-
-    if ((renderSelectedItem || iconExpr && iconExpr !== 'none') && !multiple && inputRef.current) {
-      inputRef.current.contentEditable = true;
-    }
+    const node = document.querySelector(`.DGN-Dropdown-${unique}`); // if ((renderSelectedItem || (iconExpr && iconExpr !== 'none')) && !multiple && inputRef.current && !disabled) {
+    //     inputRef.current.contentEditable = true;
+    // }
 
     if (node) {
       node.style.pointerEvents = `none`;
@@ -359,7 +348,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       document.removeEventListener('mousedown', onClickOutsideOfInput);
       window.removeEventListener('resize', customizeWidthDropdown);
       document.removeEventListener('wheel', onWheelHandler);
-      document.removeEventListener('keydown', preventScroll);
 
       if (onLoadMore && boxRef.current) {
         boxRef.current.removeEventListener('scroll', onLoadMoreHandler);
@@ -400,12 +388,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const mapDropdown = (pattern, keyArr) => {
+    var _currentObjectDefault;
+
     const items = [];
     const dataSourceUsable = [...dataSource];
 
     const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
 
-    if (currentObjectDefault[unique] && currentObjectDefault[unique].length) {
+    if (currentObjectDefault[unique] && (_currentObjectDefault = currentObjectDefault[unique]) !== null && _currentObjectDefault !== void 0 && _currentObjectDefault.length) {
       const length = currentObjectDefault[unique].length;
       let existItemQuantity = 0;
 
@@ -503,7 +493,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }, displayText)));
       }
 
-      if (items.length === limit) {
+      if ((items === null || items === void 0 ? void 0 : items.length) === limit) {
         timerRef.current = setTimeout(() => {
           loadMoreItemsDropdown(index + 1, pattern);
         }, 1000);
@@ -514,7 +504,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return jsx("div", {
       css: DropdownBoxCSS,
       ref: boxRef
-    }, items.length ? items : jsx("div", {
+    }, items !== null && items !== void 0 && items.length ? items : jsx("div", {
       css: _DropdownItemCSS,
       className: 'no-data'
     }, ' ', noDataText, ' '));
@@ -547,13 +537,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const loadMoreItemsDropdown = (i = 0, pattern) => {
-    var _displayExpr3;
+    var _currentObjectDefault2, _displayExpr3;
 
     const dataSourceUsable = [...dataSource]; // Nếu có load more thì đẩy đội tượng mặc định lên đầu
 
     let notExistItem = 0;
 
-    if (onLoadMore && currentObjectDefault[unique].length) {
+    if (onLoadMore && (_currentObjectDefault2 = currentObjectDefault[unique]) !== null && _currentObjectDefault2 !== void 0 && _currentObjectDefault2.length) {
       const length = currentObjectDefault[unique].length;
 
       for (let index = length - 1; index >= 0; index--) {
@@ -744,7 +734,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
 
     if (scrollHeight === Math.ceil(scrollTop) + offsetHeight && boxRef.current) {
-      const length = boxRef.current.querySelectorAll(`.css-${_DropdownItemCSS.name}`).length;
+      var _boxRef$current$query;
+
+      const length = (_boxRef$current$query = boxRef.current.querySelectorAll(`.css-${_DropdownItemCSS.name}`)) === null || _boxRef$current$query === void 0 ? void 0 : _boxRef$current$query.length;
       boxRef.current.removeEventListener('scroll', onLoadMoreHandler);
       !!onLoadMore && onLoadMore({
         skip: length,
@@ -784,7 +776,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     const value = e.target.value || e.target.textContent;
 
-    if (renderSelectedItem && e.target.childNodes && Array.from(e.target.childNodes).some(node => node.toString() !== '[object Text]')) {
+    if (typeof renderSelectedItem === 'function' && e.target.childNodes && Array.from(e.target.childNodes).some(node => node.toString() !== '[object Text]')) {
       const cursor = document.getSelection().anchorOffset;
       e.target.innerHTML = value;
       document.getSelection().collapse(e.target, cursor);
@@ -824,7 +816,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         if (valueProp === undefined) {
           let item = null;
 
-          if (renderSelectedItem && typeof renderSelectedItem === 'function') {
+          if (typeof renderSelectedItem === 'function') {
             item = renderSelectedItem({
               data,
               index
@@ -926,7 +918,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onClear = e => {
-    if (disabled || readOnly || loading) return;
+    if (disabled || readOnly || loading || !clearAble) return;
     currentValue[unique] = multiple ? [] : '';
 
     if (inputRef.current.tagName.toLowerCase() === 'div') {
@@ -940,6 +932,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } // onChangeValue('', '');
 
 
+    setShowClear(false);
     e && e.target && e.target.blur();
     updatePositionDropdown();
     onInput === null || onInput === void 0 ? void 0 : onInput({ ...(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current),
@@ -963,7 +956,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         inputRef.current.innerHTML = '';
         currentValue[unique] = [];
       } else {
-        if (renderSelectedItem || iconExpr && iconExpr !== 'none' && !isSearch[unique]) {
+        if (typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' && !isSearch[unique]) {
           inputRef.current.innerHTML = '';
         } else if (!isSearch[unique]) {
           inputRef.current.value = '';
@@ -976,7 +969,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     const length = dataSource.length;
-    const displayKey = keyExpr || displayExpr;
+    const displayKey = typeof renderSelectedItem === 'string' ? renderSelectedItem : displayExpr;
 
     if (displayKey && Array.isArray(displayKey)) {
       displayExpr = displayExpr.join(' - ');
@@ -995,6 +988,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       currentValue[unique] = [];
       inputRef.current.innerHTML = '';
       valueArr.forEach(v => {
+        var _currentObjectDefault3;
+
         for (let i = 0; i < length; i++) {
           if (typeof dataSource[i] === 'object' && dataSource[i][valueExpr] === v || dataSource[i] === v) {
             setMultipleValueHandler(dataSource[i], v, keyArr, i);
@@ -1002,7 +997,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           }
         }
 
-        if (currentObjectDefault[unique].length) {
+        if ((_currentObjectDefault3 = currentObjectDefault[unique]) !== null && _currentObjectDefault3 !== void 0 && _currentObjectDefault3.length) {
           const itemOfValue = currentObjectDefault[unique].find(valueObject => valueObject[valueExpr] === v || valueObject === v);
 
           if (itemOfValue) {
@@ -1011,6 +1006,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       });
     } else {
+      var _currentObjectDefault4;
+
       currentValue[unique] = source;
 
       for (let i = 0; i < length; i++) {
@@ -1020,7 +1017,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
 
-      if (currentObjectDefault[unique].length) {
+      if ((_currentObjectDefault4 = currentObjectDefault[unique]) !== null && _currentObjectDefault4 !== void 0 && _currentObjectDefault4.length) {
         const itemOfValue = currentObjectDefault[unique].find(valueObject => valueObject[valueExpr] === source || valueObject === source);
 
         if (itemOfValue) {
@@ -1038,14 +1035,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const setMultipleValueHandler = (data, value, keyArr, index) => {
     let item = null;
 
-    if (renderSelectedItem && typeof renderSelectedItem === 'function') {
+    if (typeof renderSelectedItem === 'function') {
       item = renderSelectedItem({
         data,
         index
       });
     } else {
       const icon = getIconFromData(data);
-      const text = keyArr ? renderData(data, keyArr) : data[keyExpr || displayExpr];
+      const text = keyArr ? renderData(data, keyArr) : data[renderSelectedItem || displayExpr];
       item = jsx(Chip, {
         startIcon: icon,
         label: text,
@@ -1068,9 +1065,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const setSingleValueHandler = (data, keyArr) => {
-    const text = keyArr ? renderData(data, keyArr) : data[keyExpr || displayExpr] || data[valueExpr] || data;
+    const text = keyArr ? renderData(data, keyArr) : typeof renderSelectedItem === 'string' ? data[renderSelectedItem] : data[displayExpr || valueExpr] || data;
 
-    if (renderSelectedItem && typeof renderSelectedItem === 'function') {
+    if (typeof renderSelectedItem === 'function') {
       inputRef.current.innerHTML = '';
       const item = renderSelectedItem({
         data
@@ -1286,15 +1283,17 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     if (boxRef.current) {
+      var _boxRef$current$query2, _currentObjectDefault5;
+
       if (!disabled && !readOnly) {
         inputRef.current.addEventListener('input', onChangeInput);
       }
 
       const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox);
 
-      const length = boxRef.current.querySelectorAll(`.css-${_DropdownItemCSS.name}`).length;
+      const length = (_boxRef$current$query2 = boxRef.current.querySelectorAll(`.css-${_DropdownItemCSS.name}`)) === null || _boxRef$current$query2 === void 0 ? void 0 : _boxRef$current$query2.length;
 
-      if (length < dataSource.length + currentObjectDefault[unique].length && !isSearch[unique]) {
+      if (length < dataSource.length + ((_currentObjectDefault5 = currentObjectDefault[unique]) === null || _currentObjectDefault5 === void 0 ? void 0 : _currentObjectDefault5.length) && !isSearch[unique]) {
         loadMoreItemsDropdown(length);
         !!onLoadMore && dataSource.length < total && boxRef.current.addEventListener('scroll', onLoadMoreHandler);
       } else {
@@ -1325,11 +1324,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...labelProps
   }, label) : null, [label, required, disabled, labelProps]);
   const inputComp = useMemo(() => {
-    const _InputCSS = InputCSS(multiple, renderSelectedItem);
+    const _InputCSS = InputCSS(multiple, typeof renderSelectedItem === 'function');
 
-    const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, disabled);
+    const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, typeof renderSelectedItem === 'function', disabled);
 
-    const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem);
+    const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, typeof renderSelectedItem === 'function', disabled);
 
     return jsx("div", {
       css: _DropdownFormCSS,
@@ -1352,8 +1351,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         e.preventDefault();
         return false;
       }
-    }) : renderSelectedItem || iconExpr && iconExpr !== 'none' ? jsx("div", { ...inputProps,
-      contentEditable: true,
+    }) : typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' ? jsx("div", { ...inputProps,
+      contentEditable: !disabled,
       style: inputStyle,
       ref: inputRef,
       css: _DropdownInputCSS,
@@ -1413,7 +1412,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   return jsx(Fragment, null, jsx("div", {
     ref: dropdownRef,
-    css: DropdownRootCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, loading, showClear),
+    css: DropdownRootCSS(viewType, multiple, placeholder, itemMultipleSize, typeof renderSelectedItem === 'function', loading, showClear),
     className: ['DGN-UI-Dropdown', className, error && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly'].join(' ').trim().replace(/\s+/g, ' '),
     style: style
   }, labelComp, inputComp, errorComp), dropdownComp);
@@ -1447,7 +1446,7 @@ const DropdownIconCSS = css`
     }
 `;
 
-const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem) => css`
+const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, disabled) => css`
     ${flexRow};
     ${alignCenter};
     ${outlineNone};
@@ -1455,7 +1454,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
     ${borderNone};
     ${paragraph1};
     width: 100%;
-    color: ${main};
+    color: ${disabled ? systemDisabled : main};
     padding-top: 0;
     padding-bottom: ${viewType !== 'outlined' ? 0 : 'inherit'};
     padding-left: ${viewType !== 'outlined' ? 0 : '16px'};
@@ -1489,7 +1488,19 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
             padding: ${itemMultipleSize === 'medium' ? 2 : 1}px;
         }
     }
+    .DGN-UI-Typography {
+        ${disabled && `
+            color: ${systemDisabled}
+        `}
+    }
     .css-${DropdownIconCSS.name} {
+        ${disabled && `
+            svg {
+                path {
+                    fill: ${systemDisabled};
+                }
+            }
+        `}
         ${renderSelectedItem ? `
             min-height: 24px;
             min-width: 24px;
@@ -1538,10 +1549,9 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
                         }
                         .css-${DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
                             color: ${active};
+                        }
                     }
-              }
               `}
-
               &:focus-within {
                   border-bottom-color: ${focus};
                   &::after {
@@ -1566,7 +1576,7 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
                   left: 0;
                   right: 0;
                   bottom: 0;
-                  border-bottom: 1px solid ${rest};
+                  border-bottom: 1px solid ${disabled ? systemDisabled : rest};
               }
               &::after {
                   ${positionAbsolute};
@@ -1585,7 +1595,7 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
               ${positionRelative};
               ${borderRadius4px};
               ${borderBox};
-              ${border(1, rest)};
+              ${border(1, disabled ? systemDisabled : rest)};
               width: 100%;
               min-height: 40px;
               ${!disabled && `
@@ -1821,9 +1831,6 @@ Dropdown.propTypes = {
   /** the displayed value for each change */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
-  /** field name used for text display in input */
-  keyExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
-
   /** field name used for text display<br/>
    * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
    * Note: don't use 'id - name', return undefined
@@ -1915,7 +1922,7 @@ Dropdown.propTypes = {
   /** function displays selected items by custom, example:<br/>
    * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
-  renderSelectedItem: PropTypes.func,
+  renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
   /** the function will run when entering input<br/>
    * if undefined: the filter function will run (default)

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

@@ -45,7 +45,7 @@ const FormGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     margin-bottom: 0 !important;
                 }
             }
-            .DGN-UI-TextInput {
+            &.DGN-UI-TextInput {
                 display: flex;
                 flex-direction: column;
                 justify-content: space-between;

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

@@ -53,6 +53,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     defaultValue,
     valueProp,
     onChange,
+    onInput,
     delayOnChange
   });
   if (!inputBaseRef) inputBaseRef = useRef(null);

package/components/grid/Col.js

@@ -4,9 +4,37 @@
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import Grid from '.';
+import { makeStyles } from '../../theme';
+const useStyles = makeStyles({
+  customCol: {
+    '& .DGN-UI-Control': {
+      marginBottom: 0
+    },
+    '& .DGN-UI-TextInput': {
+      marginBottom: 0
+    },
+    '& .DGN-UI-Dropdown': {
+      marginBottom: 0
+    },
+    '& .DGN-UI-FormGroup': {
+      marginBottom: 0
+    },
+    '& .DGN-UI-Money-Input': {
+      marginBottom: 0
+    },
+    '& .DGN-UI-NumberInput': {
+      marginBottom: 0
+    }
+  }
+});
+const classes = useStyles();
 
 const Col = props => {
+  const {
+    className
+  } = props;
   return jsx(Grid, { ...props,
+    className: [`DGN-UI-Col ${classes.customCol}`, className].join(' ').trim().replace(/\s+/g, ' '),
     item: true
   });
 };
@@ -19,7 +47,7 @@ Col.defaultProps = {
   md: false,
   sm: false,
   xl: false,
-  xs: false,
+  xs: true,
   zeroMinWidth: false,
   wrap: 'wrap'
 };

package/components/grid/Row.js

@@ -5,10 +5,25 @@ import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import Grid from '.';
 
+const checkChildren = children => {
+  if (!children) return false;
+
+  if (Array.isArray(children)) {
+    return !children.every(v => v === false);
+  }
+
+  return true;
+};
+
 const Row = props => {
-  return jsx(Grid, { ...props,
+  const {
+    className,
+    children
+  } = props;
+  return checkChildren(children) ? jsx(Grid, { ...props,
+    className: ['DGN-UI-Row', className].join(' ').trim().replace(/\s+/g, ' '),
     container: true
-  });
+  }) : null;
 };
 
 Row.defaultProps = {
@@ -24,8 +39,20 @@ Row.defaultProps = {
   spacing: 0,
   direction: 'row',
   wrap: 'wrap',
-  columnSpacing: 4,
-  rowSpacing: 4
+  columnSpacing: {
+    xs: 4,
+    sm: 4,
+    md: 4,
+    lg: 4,
+    xl: 6
+  },
+  rowSpacing: {
+    xs: 4,
+    sm: 4,
+    md: 4,
+    lg: 4,
+    xl: 6
+  }
 };
 Row.propTypes = {
   /** The content of the component. */

package/components/modal/modal.js

@@ -8,6 +8,10 @@ import { jsx, css } from '@emotion/core';
 import ModalContext from './context';
 import { animations } from '../../styles/animation';
 import { typography } from '../../styles/typography';
+import { useTheme } from '../../theme';
+const {
+  zIndex: zIndexCORE
+} = useTheme();
 import { borderBox, borderRadius4px, flexCol, flexRow, justifyCenter, parseWidth, positionFixed, positionRelative } from '../../styles/general';
 import { color as colors } from '../../styles/colors';
 const {
@@ -19,10 +23,6 @@ const {
   }
 } = colors;
 const fadeInDown = animations.fadeInDown;
-import { useTheme } from '../../theme';
-const {
-  zIndex: zIndexCORE
-} = useTheme();
 const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   open,
   moveable,

package/components/paging/page-info.js

@@ -40,7 +40,6 @@ const getLastPage = (totalItems, itemsPerPage) => {
   return _lastPage + 1;
 };
 
-let timeout = null;
 const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   typeShort,
@@ -52,11 +51,14 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   currentPage,
   listPerPage,
   onChangePage,
-  onChangePerPage
+  onChangePerPage,
+  onChangingPage,
+  onChangingPerPage
 }, reference) => {
   var _currentPageState$toS;
 
   const ref = useRef(null);
+  const timer = useRef(null);
   const [totalItemsState, setTotalItemsState] = useState(totalItems);
   const [itemsPerPageState, setItemsPerPageState] = useState(itemsPerPage || listPerPage[0] || 10);
   const [currentPageState, setCurrentPageState] = useState(currentPage);
@@ -68,7 +70,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _dynamicWidthCSS = dynamicWidthCSS(((_currentPageState$toS = currentPageState.toString()) === null || _currentPageState$toS === void 0 ? void 0 : _currentPageState$toS.length) || 3);
 
-  const _onChangePage = (page, isInit = false) => {
+  const _onChangePage = async (page, isInit = false, e) => {
     const lastPage = getLastPage(totalItemsState, itemsPerPageState);
     let disablePrev = false;
     let disableNext = false; // If last page = 1. Disable all
@@ -88,13 +90,28 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       disablePrev = true;
     }
 
+    if (onChangingPage && !isInit) {
+      const event = { ...e,
+        cancel: false,
+        prevPage: currentPageState,
+        newPage: page
+      };
+      await onChangingPage(event);
+
+      if (event.cancel) {
+        if (e !== null && e !== void 0 && e.reset) e.reset();
+        setCurrentPageState(currentPageState);
+        return;
+      }
+    }
+
     setCurrentPageState(page);
     setDisablePrevState(disablePrev);
     setDisableNextState(disableNext);
     if (onChangePage && !isInit) onChangePage(page);
   };
 
-  const _onChangePerPage = per => {
+  const _onChangePerPage = async per => {
     const lastPage = getLastPage(totalItemsState, per);
     per = parseInt(per, 10);
     let disableNext = false; // If last page = 1. Disable all
@@ -103,6 +120,19 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       disableNext = true;
     }
 
+    if (onChangingPerPage) {
+      const event = {
+        cancel: false,
+        prevPerPage: itemsPerPageState,
+        newPerPage: per
+      };
+      await onChangingPerPage(event);
+
+      if (event.cancel) {
+        return;
+      }
+    }
+
     setItemsPerPageState(per);
     setCurrentPageState(0);
     setDisablePrevState(true);
@@ -110,13 +140,19 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (onChangePerPage) onChangePerPage(per);
   };
 
-  const onTypePaging = (value, isInit = false) => {
-    clearTimeout(timeout);
+  const onTypePaging = (e, isInit = false) => {
+    var _e$value;
+
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+
+    const value = (_e$value = e === null || e === void 0 ? void 0 : e.value) !== null && _e$value !== void 0 ? _e$value : e;
     const lastPage = getLastPage(totalItemsState, itemsPerPageState);
     const page = !value || parseInt(value) < 0 ? 1 : parseInt(value) > lastPage ? lastPage : parseInt(value);
     currentPage = page - 1;
-    timeout = setTimeout(() => {
-      _onChangePage(page - 1, isInit);
+    timer.current = setTimeout(() => {
+      _onChangePage(page - 1, isInit, e);
     }, 500);
   };
 
@@ -130,8 +166,12 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setTotalItemsState(totalItems);
   }, [totalItems]);
   useEffect(() => {
-    timeout = setTimeout(() => {
-      _onChangePage(0, true);
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+
+    timer.current = setTimeout(() => {
+      _onChangePage(currentPageState !== null && currentPageState !== void 0 ? currentPageState : 0, true);
     }, 500);
   }, [totalItemsState, itemsPerPageState]);
   useEffect(() => {
@@ -188,14 +228,14 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       size: 'small',
       name: 'ArrowDoubleLeft',
       disabled: disablePrevState,
-      onClick: () => _onChangePage(0)
+      onClick: e => _onChangePage(0, false, e)
     }), jsx(ButtonIcon, {
       circular: true,
       viewType: 'text',
       size: 'small',
       name: 'ArrowLeft',
       disabled: disablePrevState,
-      onClick: () => _onChangePage(currentPageState - 1)
+      onClick: e => _onChangePage(currentPageState - 1, false, e)
     }), jsx(NumberInput, {
       css: _dynamicWidthCSS,
       disabledNegative: true,
@@ -204,7 +244,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       min: 1,
       max: lastPage,
       onKeyDown: checkKeyPress,
-      onChange: e => onTypePaging(e === null || e === void 0 ? void 0 : e.value)
+      onChange: e => onTypePaging(e, false)
     }), "/", jsx(Typography, {
       type: 'p2',
       style: {
@@ -216,14 +256,14 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       size: 'small',
       name: 'ArrowRight',
       disabled: disableNextState,
-      onClick: () => _onChangePage(currentPageState + 1)
+      onClick: e => _onChangePage(currentPageState + 1, false, e)
     }), jsx(ButtonIcon, {
       circular: true,
       viewType: 'text',
       size: 'small',
       name: 'ArrowDoubleRight',
       disabled: disableNextState,
-      onClick: () => _onChangePage(lastPage - 1)
+      onClick: e => _onChangePage(lastPage - 1, false, e)
     }), typeShort && jsx(Divider, {
       direction: 'vertical',
       height: 24,
@@ -330,36 +370,56 @@ PagingInfo.defaultProps = {
   listPerPage: [10, 15, 20, 30, 50]
 };
 PagingInfo.propTypes = {
-  /** Compact type for mobile. */
-  typeShort: PropTypes.bool,
-
-  /** Background color for paging. */
+  /** Background color for component. */
   bgColor: PropTypes.string,
 
-  /** Style inline of component. */
-  style: PropTypes.object,
-
   /** Class for component. */
   className: PropTypes.string,
 
   /** Specifies the current page. */
   currentPage: PropTypes.number,
 
-  /** Total items of paging. */
-  totalItems: PropTypes.number,
-
   /** The quantity of items per page. */
   itemsPerPage: PropTypes.number,
 
   /** The list to choose the number of elements to display per page. */
   listPerPage: PropTypes.array,
 
-  /** The function will run after change page number. */
+  /** Callback fired when page number changed. */
   onChangePage: PropTypes.func,
 
-  /** The function will run after change quantity on per page. */
+  /** 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
+   */
+  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
+   */
+  onChangingPerPage: PropTypes.func,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** Total items. */
+  totalItems: PropTypes.number,
+
+  /** Compact type for mobile. */
+  typeShort: PropTypes.bool,
+
   /**
    * ref methods (ref.current.instance.*method*)
    *

package/components/popover/index.js

@@ -1,19 +1,23 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useState, useEffect, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
+import React, { memo, useState, useEffect, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { typography } from '../../styles/typography';
 import { borderRadius4px, displayBlock, flexRow, parseWidthHeight, positionAbsolute, positionFixed, positionRelative } from '../../styles/general';
-import { useTheme } from '../../theme';
+import theme from '../../theme/settings';
 const {
+  colors: {
+    system: {
+      white
+    }
+  },
+  typography: {
+    paragraph1
+  },
   zIndex: zIndexCORE
-} = useTheme();
-const {
-  paragraph1
-} = typography;
+} = theme;
 
 const getArrowPosition = (anchorOrigin, transformOrigin, translate) => {
   if (anchorOrigin.horizontal === 'right' && transformOrigin.horizontal === 'left') {
@@ -131,6 +135,14 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [openState, setOpenState] = useState(open);
   const [element, setElement] = useState(null);
 
+  const _PortalPopoverCSS = PortalPopoverCSS(zIndex, fullScreen);
+
+  const _PopoverContainerCSS = PopoverContainerCSS(width, height);
+
+  const _PopoverRootCSS = PopoverRootCSS(bgColor);
+
+  const _PopoverArrowCSS = PopoverArrowCSS(bgColor);
+
   if (direction) {
     const directionObject = getDirectionPopover(direction);
     anchorOrigin = directionObject.anchorOrigin;
@@ -272,7 +284,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           break;
       }
 
-      Object.assign(ref.current.querySelector(`.css-${PopoverArrowCSS(bgColor).name}`).style, arrowPosition, {
+      Object.assign(ref.current.querySelector(`.css-${_PopoverArrowCSS.name}`).style, arrowPosition, {
         transform: translate.transform
       });
     }
@@ -341,27 +353,43 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     return currentRef;
   });
+
+  const renderAnchor = () => {
+    var _anchor;
+
+    if (!((_anchor = anchor) !== null && _anchor !== void 0 && _anchor.type)) return null;
+    const AnchorTag = /*#__PURE__*/React.cloneElement(anchor, {
+      onClick: () => {
+        setOpenState(true);
+      },
+      ref: ref => {
+        anchor = ref;
+      }
+    });
+    return AnchorTag;
+  };
+
   const PopoverView = useMemo(() => {
     if (openState) {
       const node = jsx("div", {
         className: 'DGN-UI-Portal DGN-UI-Popover',
-        css: PortalPopoverCSS(zIndex, fullScreen)
+        css: _PortalPopoverCSS
       }, jsx("div", {
-        css: PopoverContainerCSS(width, height),
+        css: _PopoverContainerCSS,
         ref: ref,
         ...props
       }, jsx("div", {
-        css: PopoverRootCSS(bgColor),
+        css: _PopoverRootCSS,
         style: style
       }, arrow && jsx("span", {
-        css: PopoverArrowCSS(bgColor)
+        css: _PopoverArrowCSS
       }), children)));
       return /*#__PURE__*/createPortal(node, document.body);
     }
 
     return null;
   }, [openState, zIndex, fullScreen, style, arrow, children, width, height, bgColor]);
-  return PopoverView;
+  return jsx(React.Fragment, null, renderAnchor(), PopoverView);
 }));
 
 const PortalPopoverCSS = (zIndex, fullScreen) => css`
@@ -410,7 +438,7 @@ Popover.defaultProps = {
   arrow: false,
   width: 150,
   height: 'auto',
-  bgColor: '#FFF',
+  bgColor: white,
   zIndex: zIndexCORE(1),
   anchorOrigin: {
     vertical: 'bottom',
@@ -423,10 +451,10 @@ Popover.defaultProps = {
   style: {}
 };
 Popover.propTypes = {
-  /** If true, the component is shown. */
+  /** If `true`, the component is shown. */
   open: PropTypes.bool,
 
-  /** If true, arrow is shown. */
+  /** If `true`, arrow is shown. */
   arrow: PropTypes.bool,
 
   /** allow close Popover when press ESC. */
@@ -439,7 +467,7 @@ Popover.propTypes = {
   style: PropTypes.object,
 
   /** An HTML element, or a function that returns one. It's used to set the position of the popover. */
-  anchor: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.func, PropTypes.object]),
+  anchor: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.func, PropTypes.object, PropTypes.node]),
 
   /**
    * This is the point on the anchor where the popover's anchor will attach to.

package/package.json

@@ -1,42 +1,65 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.52",
-  "description": "The DigiNet core ui",
-  "homepage": "https://diginet.com.vn",
+  "version": "1.3.53-beta.1",
+  "description": "",
   "main": "index.js",
+  "license": "UNLICENSED",
   "scripts": {
-    "start-js": "react-scripts start --max_old_space_size=4096",
-    "start": "npx npm-run-all -p start-js",
-    "build": "GENERATE_SOURCEMAP=false && react-scripts build --env=production --max_old_space_size=8192",
-    "eject": "react-scripts eject",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "npm-run-all --parallel start-sb eslint-test",
+    "start-sb": "start-storybook -p 9050",
+    "build-storybook": "build-storybook -c .storybook -s src",
+    "build": "run-script-os",
+    "build:windows": "rimraf dist && mkdirp dist/components && npm run compile && sass --style=compressed src/scss:dist/css && xcopy src\\\\assets dist\\\\assets\\ /e /y",
+    "build:darwin:linux:default": "rm -rf dist && npm run compile && sass --style=compressed src/scss:dist/css && cp -rf src/assets dist/assets",
+    "compile": "babel src --out-dir dist --ignore **/*.stories.js",
+    "pack": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm pack",
+    "production-keep-version": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish",
+    "beta": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish --tag beta",
+    "production": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm publish",
+    "version:add": "run-script-os",
+    "version:add:windows": "cat package.json.tmp | sed \"s/0.0.0/%npm_package_version%/g\" > dist/package.json",
+    "version:add:darwin:linux:default": "VERSION=$(npm run version:extract --silent) && cat package.json.tmp | sed \"s/0.0.0/${VERSION}/g\" > dist/package.json",
+    "version:bump": "npm version patch --no-git-tag-version --silent",
+    "version:extract": "cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]'",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint --fix --config .eslintrc.js \"**/*.js\"",
+    "eslint-test": "onchange \"src/**/*.{js,jsx,json}\" -- eslint . --fix"
   },
   "dependencies": {
     "@emotion/core": "^10.0.35",
     "prop-types": "^15.7.2"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://diginetvn@bitbucket.org/diginetvn/diginet-core-ui.git"
+  "lint-staged": {
+    "*/**/*.{js,jsx,json}": [
+      "prettier --write",
+      "git add"
+    ]
   },
-  "keywords": [
-    "core ui",
-    "diginet"
-  ],
-  "author": "rocachien",
-  "contributors": [
-    {
-      "name": "Chien Do",
-      "email": "rocachien@gmail.com"
-    },
-    {
-      "name": "Nhat Tran",
-      "email": "tranminhnhat1005@gmail.com"
-    },
-    {
-      "name": "Thuan Nguyen",
-      "email": "nt.thuan.hutech@gmail.com"
-    }
-  ],
-  "license": "MIT"
+  "devDependencies": {
+    "@babel/cli": "^7.14.3",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.16.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.2",
+    "@babel/preset-react": "^7.13.13",
+    "@storybook/addon-actions": "6.2.9",
+    "@storybook/addon-essentials": "6.2.9",
+    "@storybook/addon-links": "6.2.9",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/react": "6.2.9",
+    "autoprefixer": "^10.3.1",
+    "babel-loader": "^8.2.2",
+    "eslint": "^8.4.1",
+    "eslint-plugin-react": "^7.27.1",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.1.2",
+    "mkdirp": "^1.0.4",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "rimraf": "^3.0.2",
+    "run-script-os": "^1.1.6",
+    "sass": "^1.37.0",
+    "onchange": "^7.1.0"
+  }
 }

package/readme.md

@@ -38,6 +38,9 @@ npm test
 ```
 
 ## Changelog
+## 1.3.53
+- \[Fixed\]: Dropdown – Fix bug icon Arrow not clickable when multiple
+
 ## 1.3.52
 - \[Fixed\]: Avatar – Add props onClick, allowEdit
 - \[Fixed\]: Typography – Fix tooltip width fit Typography

package/styles/general.js

@@ -4,10 +4,10 @@ import { color } from './colors';
 import { parseToPixel } from './utils';
 export const rootSpacing = 4;
 export let rootZIndex = 1500;
-/**
- * get value spacing with rootZIndex
- * @param number
- * @return {number}
+/**
+ * get value spacing with rootZIndex
+ * @param number
+ * @return {number}
  */
 
 export const zIndex = number => {
@@ -15,10 +15,10 @@ export const zIndex = number => {
   if (isNaN(number)) return rootZIndex;
   return rootZIndex + number;
 };
-/**
- * get value spacing with rootSpacing
- * @param {(number|number[])} vl - default 1
- * @returns {(number|string)}
+/**
+ * get value spacing with rootSpacing
+ * @param {(number|number[])} vl - default 1
+ * @returns {(number|string)}
  */
 
 export const getSpacing = (vl = 1) => {
@@ -27,9 +27,9 @@ export const getSpacing = (vl = 1) => {
     return `${vl.flatMap(i => Number(i !== null && i !== void 0 ? i : 0) * rootSpacing).join('px ')}px`;
   }
 };
-/**
- * replace rootZIndex
- * @param number
+/**
+ * replace rootZIndex
+ * @param number
  */
 
 export const setZIndex = number => {
@@ -46,6 +46,10 @@ export const flexCol = css`
     display: flex;
     flex-direction: column;
 `;
+export const flexColReverse = css`
+    display: flex;
+    flex-direction: column-reverse;
+`;
 export const flexRowReverse = css`
     flex-direction: row-reverse;
 `;

package/utils/useInput.js

@@ -5,7 +5,8 @@ const useInput = props => {
     defaultValue,
     valueProp,
     delayOnChange,
-    onChange
+    onChange,
+    onInput
   } = props;
   const [value, setValue] = useState(defaultValue || valueProp);
   const timer = useRef(null);
@@ -21,6 +22,7 @@ const useInput = props => {
       e.reset = () => {
         setValue(valueProp);
         e.target.value = valueProp;
+        onInput === null || onInput === void 0 ? void 0 : onInput(e);
       };
 
       onChange === null || onChange === void 0 ? void 0 : onChange(e);