diginet-core-ui 1.4.52 → 1.4.53-beta.1

package/assets/images/menu/dhr/MHRP09N0036.svg

@@ -0,0 +1,13 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2302_32)">
+<path d="M0 32.6C0 32.8 0.1 33 0.3 33.1C4.1 35 8 36.9 11.8 38.8C11.9 38.9 12 38.9 12.1 39C12.1 39 12.1 39 12.2 39C12.2 37 12.2 35 12.2 32.9H21.4C21.9 32.9 22.3 32.5 22.3 32V21L20.3 23V30.9C17.6 30.9 14.9 30.9 12.2 30.9C12.2 30.8 12.2 30.6 12.2 30.5C12.2 24.8 12.2 12.6 12.2 7C12.2 6.5 11.9 6 11.4 5.7C9.1 4.5 6.8 3.4 4.4 2.2C4.4 2.2 4.3 2.1 4.1 2C9.5 2 14.9 2 20.2 2V11L22.2 13V0.9C22.2 0.4 21.8 0 21.3 0H0C0 0.1 0 0.2 0 0.3C0 8.9 0 24 0 32.6ZM8.4 22.5C8.4 22 8.8 21.6 9.3 21.6C9.8 21.6 10.2 22 10.2 22.5C10.2 23 9.8 23.4 9.3 23.4C8.9 23.4 8.4 23 8.4 22.5Z" fill="#FFAA00"/>
+<path d="M32.8002 12.7V22.2C32.8002 22.8 33.6002 23.2 34.0002 22.7L38.8002 17.9C39.1002 17.6 39.1002 17.2 38.8002 16.9L34.0002 12.2C33.6002 11.8 32.8002 12.1 32.8002 12.7Z" fill="#FF4444"/>
+<path d="M24.8002 12.7V22.2C24.8002 22.8 25.6002 23.2 26.0002 22.7L30.8002 17.9C31.1002 17.6 31.1002 17.2 30.8002 16.9L26.0002 12.1C25.6002 11.8 24.8002 12.1 24.8002 12.7Z" fill="#FF4444"/>
+<path d="M16.7002 12.7V22.2C16.7002 22.8 17.5002 23.2 17.9002 22.7L22.7002 17.9C23.0002 17.6 23.0002 17.2 22.7002 16.9L17.9002 12.1C17.5002 11.8 16.7002 12.1 16.7002 12.7Z" fill="#FF4444"/>
+</g>
+<defs>
+<clipPath id="clip0_2302_32">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/menu/dhr/MHRP09N0037.svg

@@ -0,0 +1,14 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2302_42)">
+<path d="M21.4 0H0V0.3C0 8.9 0 24 0 32.6C0 32.8 0.1 33 0.3 33.1C4.1 35 8 36.9 11.8 38.8C11.9 38.9 12 38.9 12.1 39H12.2V32.9H18.8C18.5 32.3 18.4 31.6 18.2 30.9H12.2V6.9C12.2 6.4 11.9 5.9 11.4 5.6C9.1 4.5 6.8 3.4 4.5 2.2C4.4 2.2 4.3 2.1 4.1 2H20.2V7L22.2 9V0.9C22.3 0.4 21.9 0 21.4 0ZM9.4 21.5C9.9 21.5 10.4 21.9 10.4 22.5C10.4 23.1 10 23.4 9.4 23.4C8.8 23.4 8.4 23 8.4 22.5C8.4 22 8.9 21.5 9.4 21.5Z" fill="#FFAA00"/>
+<path d="M32.4999 7.29994V17.1999C32.4999 17.8999 33.2999 18.1999 33.7999 17.6999L38.7999 12.6999C39.0999 12.3999 39.0999 11.8999 38.7999 11.5999L33.7999 6.59994C33.3999 6.29994 32.4999 6.69994 32.4999 7.29994Z" fill="#FF4444"/>
+<path d="M24.2999 7.29994V17.1999C24.2999 17.8999 25.0999 18.1999 25.5999 17.6999L30.5999 12.6999C30.8999 12.3999 30.8999 11.8999 30.5999 11.5999L25.5999 6.59994C25.0999 6.29994 24.2999 6.69994 24.2999 7.29994Z" fill="#FF4444"/>
+<path d="M15.8999 7.29994V17.1999C15.8999 17.8999 16.6999 18.1999 17.1999 17.6999L22.1999 12.6999C22.4999 12.3999 22.4999 11.8999 22.1999 11.5999L17.1999 6.59994C16.6999 6.29994 15.8999 6.69994 15.8999 7.29994Z" fill="#FF4444"/>
+<path d="M34.4 20.6C32.8 19.6 31 19 29 19C28.5 19 28.1 19 27.7 19.1C26.9 19.2 26 19.4 25.3 19.7C24.9 19.9 24.4 20.1 24 20.3C22 21.4 20.5 23.2 19.7 25.3C19.2 26.5 19 27.7 19 29C19 34.5 23.5 39 29 39C34.5 39 39 34.5 39 29C39 25.5 37.1 22.3 34.4 20.6ZM35.2 25.8L29.3 33.8C29 34.3 28.4 34.6 27.8 34.6H27.7C27.2 34.6 26.6 34.4 26.3 34L22.8 30.2C22.3 29.6 22.3 28.7 22.9 28.1C23.2 27.8 23.5 27.7 23.9 27.7C24.3 27.7 24.7 27.9 25 28.2L27.5 30.9L27.6 31C27.7 31 27.7 31 27.7 30.9L32.7 24.1C33 23.7 33.4 23.5 33.9 23.5C34.2 23.5 34.5 23.6 34.8 23.8C35.6 24.2 35.7 25.1 35.2 25.8Z" fill="#1CA261"/>
+</g>
+<defs>
+<clipPath id="clip0_2302_42">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/menu/dhr/MHRP25N0009.svg

@@ -0,0 +1,15 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2319_30)">
+<path d="M19.5 19.2015C19.9 19.5995 20.3 19.898 20.8 20.2959C21.8 20.8929 23 21.4898 24.1 21.6888C24.8 21.8878 26.6 21.7883 26.9 21.7883C27.8 21.6888 28.7 21.4898 29.5 21.1913C30.5 20.7934 31.4 20.2959 32.1 19.5995C31.9 18.6046 31.7 17.6097 31.5 16.7143C31.3 15.9184 30.8 15.4209 30 15.4209H21.6C20.7 15.4209 20.2 15.9184 20 16.8138C19.9 17.5102 19.7 18.3061 19.5 19.2015Z" fill="#2680EB"/>
+<path d="M25.8 13.8291C28.5 13.8291 30.6 11.6403 30.6 8.9541C30.6 6.26788 28.4 4.0791 25.8 4.0791C23.2 4.0791 21 6.26788 21 8.9541C21 11.7398 23.2 13.9286 25.8 13.8291Z" fill="#2680EB"/>
+<path d="M35.2001 3.78061C32.8001 1.39286 29.5001 0 26.0001 0C25.7001 0 25.4001 0 25.1001 0C25.0001 0 25.0001 0 24.9001 0H9.1001C8.5001 0 8.0001 0.497449 8.0001 1.09439C8.0001 1.69133 8.5001 2.18878 9.1001 2.18878H18.6001C18.0001 2.58673 17.4001 3.08418 16.8001 3.68112C16.4001 4.07908 16.1001 4.47704 15.7001 4.875H7.0001C6.4001 4.97449 5.9001 5.47194 5.9001 6.06888C5.9001 6.66582 6.4001 7.26275 7.0001 7.26275H14.3001C13.9001 8.15816 13.6001 9.05357 13.3001 9.94898H9.0001C8.4001 9.94898 7.9001 10.4464 7.9001 11.0434C7.9001 11.6403 8.4001 12.1378 9.0001 12.1378H13.0001C13.0001 12.3367 13.0001 12.5357 13.0001 12.7347C13.0001 13.4311 13.1001 14.1276 13.2001 14.9235H5.0001C4.4001 14.9235 3.9001 15.4209 3.9001 16.0179C3.9001 16.6148 4.4001 17.1122 5.0001 17.1122H13.9001C14.3001 18.2066 14.9001 19.301 15.6001 20.2959L1.6001 31.3393C-0.3999 33.2296 -0.5999 36.2143 1.1001 37.8061C2.8001 39.4974 5.7001 39.2985 7.7001 37.4082L19.0001 23.5791C21.1001 24.8724 23.5001 25.5689 26.0001 25.5689C29.5001 25.5689 32.8001 24.176 35.2001 21.7883C37.6001 19.4005 39.0001 16.1173 39.0001 12.7347C39.0001 9.35204 37.6001 6.16837 35.2001 3.78061ZM33.4001 20.0969C32.4001 21.0918 31.3001 21.7883 30.0001 22.2857C28.7001 22.7832 27.3001 23.0816 26.0001 23.0816C23.9001 23.0816 21.9001 22.4847 20.2001 21.2908C18.5001 20.0969 17.1001 18.5051 16.3001 16.6148C15.5001 14.7245 15.3001 12.6352 15.7001 10.6454C16.1001 8.65561 17.1001 6.76531 18.6001 5.37245C20.1001 3.97959 22.0001 2.98469 24.0001 2.58673C26.0001 2.18878 28.2001 2.38776 30.1001 3.18367C32.0001 3.97959 33.6001 5.27296 34.8001 7.06378C35.9001 8.7551 36.6001 10.7449 36.5001 12.8342C36.5001 14.227 36.2001 15.5204 35.7001 16.8138C35.2001 18.0077 34.4001 19.102 33.4001 20.0969Z" fill="#FF8C00"/>
+<path d="M1.1001 12.2372H5.8001C6.4001 12.2372 6.9001 11.7398 6.9001 11.1429C6.9001 10.5459 6.5001 9.94898 5.9001 9.94898H1.1001C0.5001 9.94898 0.000100322 10.4464 0.000100322 11.0434C0.000100322 11.6403 0.5001 12.2372 1.1001 12.2372Z" fill="#FF8C00"/>
+<path d="M3.0001 7.26275H4.0001C4.6001 7.26275 5.1001 6.76531 5.1001 6.16837C5.1001 5.57143 4.6001 4.97449 4.0001 4.97449H3.0001C2.4001 4.97449 1.9001 5.47194 1.9001 6.06888C1.9001 6.66582 2.4001 7.26275 3.0001 7.26275Z" fill="#FF8C00"/>
+<path d="M11.0001 22.1862C11.6001 22.1862 12.1001 21.6888 12.1001 21.0918C12.1001 20.4949 11.6001 19.898 11.0001 19.898H8.1001C7.5001 19.898 7.0001 20.3954 7.0001 20.9923C7.0001 21.5893 7.5001 22.0867 8.1001 22.0867H11.0001V22.1862Z" fill="#FF8C00"/>
+</g>
+<defs>
+<clipPath id="clip0_2319_30">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -454,6 +454,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       allNewAttached: tempNewDataState
     });
     !!onRemoveProp && onRemoveProp(recentRemovedAttached);
+    removeActiveChosenItem();
     onClosePopup();
   };
   const clearAllAttached = (confirmPopup = false) => {
@@ -689,13 +690,12 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
   const clickOutOfItem = e => {
-    var _popupRef$current, _popupRef$current$sty;
     if (!attachedRef || !attachedRef.current) {
       document.removeEventListener('keydown', onKeyDown);
       document.removeEventListener('click', clickOutOfItem);
       return;
     }
-    if (!(attachedRef.current.contains(e.target) && attachedRef.current !== e.target) && !attachmentHandleIconRef.current.contains(e.target) && !isDeleteAll.current && (((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : (_popupRef$current$sty = _popupRef$current.style) === null || _popupRef$current$sty === void 0 ? void 0 : _popupRef$current$sty.display) !== 'flex' || popupRef.current.querySelector('button.filled.info').contains(e.target))) {
+    if (!(attachedRef.current.contains(e.target) && attachedRef.current !== e.target) && !attachmentHandleIconRef.current.contains(e.target) && !isDeleteAll.current && !(popupRef.current instanceof Element)) {
       removeAllChosenItems();
       removeActiveChosenItem();
     }
@@ -1442,17 +1442,17 @@ Attachment.propTypes = {
   allowSort: PropTypes.bool,
   /** Class for component. */
   className: PropTypes.string,
-  /** List attachment:<br />
-   * [{<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/demo.jpg",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
-   * }, ...]
+  /** List attachment:<br />
+   * [{<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/demo.jpg",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
+   * }, ...]
    */
   data: PropTypes.array,
   /** The message to display when deleting files. */
@@ -1483,16 +1483,16 @@ Attachment.propTypes = {
   onChange: PropTypes.func,
   /** Download attached event, if not it will use default. */
   onDownload: PropTypes.func,
-  /**
-   * event when removed file(s)
-   *
-   * return data: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
-   * }
+  /**
+   * event when removed file(s)
+   *
+   * return data: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
+   * }
    */
   onRemove: PropTypes.func,
   /** View attached event, if not it will use default. */

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

@@ -652,7 +652,7 @@ const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn,
     color: 'primary',
     type: 'h3',
     ref: refs.content,
-    format: ['lowercase']
+    format: ['sentence']
   }))), jsx("div", {
     className: className.navigator.around
   }, jsx(ButtonIcon, {

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

@@ -226,7 +226,7 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
    * START EFFECT
    */
   useEffect(() => {
-    if (defaultValue && defaultValue !== '' && isValidDate(defaultValue)) {
+    if (defaultValue && defaultValue !== '' && isValidDate(defaultValue) && !value) {
       if (isBeforeLimit(min, defaultValue)) {
         onUpdate(min);
       } else if (isAfterLimit(max, defaultValue)) {

package/components/form-control/date-range-picker/index.js

@@ -262,8 +262,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       tableData = [],
       weekDateFirst = getDateOfWeek(firstDay),
       weekDateLast = getDateOfWeek(lastDay);
-    /**
-     * days of previous month
+    /**
+     * days of previous month
      */
     for (let i = weekDateFirst; i > 0; i--) {
       const day = Date.parse(new Date(time.getFullYear(), time.getMonth(), 1));
@@ -275,8 +275,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
         className: unique.day.day
       })));
     }
-    /**
-     * days of current month
+    /**
+     * days of current month
      */
     for (let i = 0; i < lastDate; i++) {
       const day = new Date(time.getFullYear(), time.getMonth(), i + 1);
@@ -302,8 +302,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
         type: 'h6'
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * days of next month
      */
     for (let i = 0; i < 13 - weekDateLast; i++) {
       const day = Date.parse(new Date(time.getFullYear(), time.getMonth() + 1, 0));

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

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

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

@@ -1,13 +1,15 @@
 /** @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 regexBetween = /[^{}]+(?=})/g;
+const regexInclude = /{|}/g;
 const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
@@ -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/money-input/index.js

@@ -116,6 +116,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     viewType,
     defaultValue,
     value,
+    fixedDecimalDigit,
     ...other
   } = props;
   const ref = useRef(null);
@@ -145,7 +146,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       if (decimal && decimal.length > decimalDigit) {
         if (decimalDigit) {
           decimal = decimal.slice(0, decimalDigit);
-          return number + decimalSymbol + decimal;
+          return parseValueWithFix(number + decimalSymbol + decimal);
         } else {
           return number;
         }
@@ -332,11 +333,24 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       if (value === null) {
         inputRef.current.value = '';
       } else {
-        const v = getValueWithDecimal(value.toString().replace('.', decimalSymbol));
+        let number = value;
+        if (fixedDecimalDigit && !!decimalDigit) {
+          var _strVal$split;
+          const strVal = String(value);
+          const isDecimalNum = strVal.indexOf('.') > -1 && (((_strVal$split = strVal.split('.')) === null || _strVal$split === void 0 ? void 0 : _strVal$split[1]) || '').length >= decimalDigit;
+          if (isDecimalNum) {
+            const coreToFixed = (num, precision) => {
+              return (+(Math.round(+(num + 'e' + precision)) + 'e' + -precision)).toFixed(precision);
+            };
+            const val = coreToFixed(Number(String(value).replace(thousandSeparator, '')), decimalDigit);
+            number = String(val);
+          }
+        }
+        const v = getValueWithDecimal(number.toString().replace('.', decimalSymbol));
         if (convertToWords && !decimalDigit && (disabled || readOnly)) {
           let valueConverted = getGlobal('helperInvalid');
-          if (Number.isInteger(value)) {
-            valueConverted = locale.get() === 'vi' ? num2WordsVi.convert(value) : num2WordsEn(value);
+          if (Number.isInteger(number)) {
+            valueConverted = locale.get() === 'vi' ? num2WordsVi.convert(number) : num2WordsEn(number);
           }
           inputRef.current.value = parseValueWithFix(valueConverted);
         } else {
@@ -345,11 +359,12 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       }
     }
   }, [disabled, readOnly, value, prefix, suffix]);
-  useEffect(() => {
-    const valueInput = inputRef.current.value;
-    inputRef.current.value = getValueWithDecimal(valueInput);
-  }, [decimalDigit]);
-  /* End handler */
+
+  // useEffect(() => {
+  //     const valueInput = inputRef.current.value;
+  //     inputRef.current.value = getValueWithDecimal(valueInput);
+  // }, [decimalDigit]);
+  // /* End handler */
 
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -478,10 +493,10 @@ MoneyInput.propTypes = {
   inputProps: PropTypes.object,
   /** style inline of input in MoneyInput component */
   inputStyle: PropTypes.object,
-  /** validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
   /** on key down function */
@@ -490,13 +505,13 @@ MoneyInput.propTypes = {
   onKeyUp: PropTypes.func,
   /** on input function */
   onInput: PropTypes.func,
-  /**
-   * on change function, return an object:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: is a number or null value<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;target.value: value of input<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;...element<br/>
-   * }
+  /**
+   * on change function, return an object:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: is a number or null value<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;target.value: value of input<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;...element<br/>
+   * }
    */
   onChange: PropTypes.func,
   /** on blur function */
@@ -508,6 +523,8 @@ MoneyInput.propTypes = {
   /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
   labelProps: PropTypes.object,
   /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
-  helperTextProps: PropTypes.object
+  helperTextProps: PropTypes.object,
+  /** If `true`, decimal digit is fixed. */
+  fixedDecimalDigit: PropTypes.bool
 };
 export default MoneyInput;

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({});
@@ -111,6 +114,18 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
       }
     } = inputRef;
     let number = convertMoneyToNumber(vl, isNumber);
+    if (fixedDecimalDigit && !!decimalDigit) {
+      var _strVal$split;
+      const strVal = String(vl);
+      const isDecimalNum = strVal.indexOf('.') > -1 && (((_strVal$split = strVal.split('.')) === null || _strVal$split === void 0 ? void 0 : _strVal$split[1]) || '').length >= decimalDigit;
+      if (isDecimalNum) {
+        const coreToFixed = (num, precision) => {
+          return (+(Math.round(+(num + 'e' + precision)) + 'e' + -precision)).toFixed(precision);
+        };
+        const val = coreToFixed(Number(String(vl).replaceAll(thousandSymbol, '')), decimalDigit);
+        number = String(val);
+      }
+    }
 
     // if (disabledNegative && Number(number || 0) < 0) number = clamp(number, min, max);
     // if (typeof max !== 'undefined' && Number(number) > max) number = Math.min(number, max);
@@ -134,15 +149,6 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     if (((_number3 = number) === null || _number3 === void 0 ? void 0 : _number3.indexOf(thousandSymbol)) > -1 && selectionStart !== number.length + 1) {
       pos.current = selectionStart + (number.toString().length - 1 === vl.toString().length ? 1 : 0);
     }
-    if (fixedDecimalDigit && !!decimalDigit) {
-      var _strVal$split;
-      const strVal = String(vl);
-      const isDecimalNum = strVal.indexOf('.') > -1 && (((_strVal$split = strVal.split('.')) === null || _strVal$split === void 0 ? void 0 : _strVal$split[1]) || '').length >= decimalDigit;
-      if (isDecimalNum) {
-        const val = Number(vl).toFixed(decimalDigit);
-        number = String(val);
-      }
-    }
     return number;
   }, [decimalSymbol, max, value, decimalDigit, fixedDecimalDigit]);
 
@@ -178,7 +184,7 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     if (flag) _onChange(e);
   }, [min, max, decimalDigit]);
   const _onBlur = useCallback(e => {
-    var _e$value;
+    var _e$value, _e$value2;
     let value = (_e$value = e.value) !== null && _e$value !== void 0 ? _e$value : e.target.value;
     if (fixedDecimalDigit) value = Number(value).toFixed(decimalDigit);
     value = convertMoneyToNumber(value);
@@ -190,6 +196,15 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
         target
       }, true);
     }
+    if (((_e$value2 = e.value) !== null && _e$value2 !== void 0 ? _e$value2 : e.target.value).slice(-1) === decimalSymbol) {
+      var _e$value3;
+      const target = e.target;
+      target.value = Number(String((_e$value3 = e.value) !== null && _e$value3 !== void 0 ? _e$value3 : e.target.value).replaceAll(thousandSymbol, ''));
+      _onInput({
+        ...e,
+        target
+      }, true);
+    }
     onBlur && onBlur(e);
   }, [min, max]);
   const _onKeyDown = e => {
@@ -280,6 +295,10 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     const target = e.target;
     target.value = globalRef.current.valueString;
     target.valueString = globalRef.current.returnValue;
+    // eslint-disable-next-line no-extra-boolean-cast
+    if (String(e.target.valueString).slice(-1) === decimalSymbol) {
+      return;
+    }
     onChange({
       ...e,
       value: globalRef.current.value,
@@ -315,8 +334,7 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
         // nếu không cho nhập số âm mà value đầu vào là âm thì reset value về 0
         valueProps = clamp(0, min, max);
       }
-
-      // setValue(parseNumberToMoney(valueProps?.toString().replace(regexValidNumber, ''), true));
+      // setValue(valueProps);
       setValue(parseNumberToMoney((_valueProps = valueProps) === null || _valueProps === void 0 ? void 0 : _valueProps.toString().replace(regexValidNumber, ''), true));
     }
   }, [valueProps, decimalDigit]);
@@ -384,29 +402,28 @@ const NumberInputRootCSS = ({
         ${cursorNotAllowed};
     }
 `;
-
-// NumberInput.defaultProps = {
-//     autoFocus: false,
-//     className: '',
-//     decimalDigit: Infinity,
-//     decimalSymbol: locale.get() === 'vi' ? ',' : '.',
-//     disabled: false,
-//     disabledNegative: false,
-//     endIcon: '',
-//     error: '',
-//     fixedDecimalDigit: false,
-//     label: '',
-//     max: Infinity,
-//     min: -Infinity,
-//     readOnly: false,
-//     required: false,
-//     startIcon: '',
-//     step: 1,
-//     style: {},
-//     thousandSeparator: false,
-//     viewType: 'underlined',
-// };
-
+NumberInput.defaultProps = {
+  // delayOnChange: 500,
+  // autoFocus: false,
+  // className: '',
+  // decimalDigit: Infinity,
+  // decimalSymbol: locale.get() === 'vi' ? ',' : '.',
+  // disabled: false,
+  // disabledNegative: false,
+  // endIcon: '',
+  // error: '',
+  // fixedDecimalDigit: false,
+  // label: '',
+  // max: Infinity,
+  // min: -Infinity,
+  // readOnly: false,
+  // required: false,
+  // startIcon: '',
+  // step: 1,
+  // style: {},
+  // thousandSeparator: false,
+  // viewType: 'underlined',
+};
 NumberInput.propTypes = {
   /** If `true`, the input element is focused during the first mount. */
   autoFocus: PropTypes.bool,

package/components/paging/page-info.js

@@ -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/tree-view/index.js

@@ -37,7 +37,6 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     expand,
     expandIcon,
     id,
-    isInDropdown,
     multiple,
     multipleValueMode,
     onChange,
@@ -70,7 +69,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     allowNumber: false,
     allowSymbol: false
   }));
-  const _TreeViewRootCSS = TreeViewRootCSS(theme, isInDropdown);
+  const _TreeViewRootCSS = TreeViewRootCSS(theme);
   const determinateCheckbox = (input, determinate) => {
     if (multipleValueMode === 'multiple' || disabledRelevantValue) {
       input.classList[determinate ? 'add' : 'remove']('determinate');
@@ -620,7 +619,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     return jsx("div", {
       className: classNames('TreeView-Item', 'non-child', focusClass),
       style: {
-        paddingLeft: 34 + 16 * level
+        paddingLeft: multipleValueMode === 'single' ? 16 : 34 + 16 * level
       },
       onClick: multiple || selectBox || onChange ? e => onClickHandler(e, data) : undefined,
       key: index,
@@ -794,7 +793,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
 const TreeViewRootCSS = ({
   colors,
   spacing
-}, isInDropdown) => css`
+}) => css`
     ${displayBlock};
     ${positionRelative};
     .DGN-UI-Accordion {
@@ -834,7 +833,7 @@ const TreeViewRootCSS = ({
     .TreeView-Content {
         ${displayBlock};
         ${positionRelative};
-        ${isInDropdown && parseMaxHeight(240)};
+        ${parseMaxHeight(240)};
         ${overflowYScroll};
         &::-webkit-scrollbar {
             ${borderRadius(4)};

package/package.json

@@ -1,44 +1,78 @@
-{
-  "name": "diginet-core-ui",
-  "version": "1.4.52",
-  "description": "The DigiNet core ui",
-  "homepage": "https://diginet.com.vn",
-  "main": "index.js",
-  "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"
-  },
-  "dependencies": {
-    "@emotion/core": "^10.0.35",
-    "prop-types": "^15.7.2",
-    "@emotion/css": "^11.11.0",
-    "@emotion/react": "^11.10.6"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://diginetvn@bitbucket.org/diginetvn/diginet-core-ui.git"
-  },
-  "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"
-}
+{
+  "name": "diginet-core-ui",
+  "version": "1.4.53-beta.1",
+  "description": "",
+  "main": "index.js",
+  "license": "UNLICENSED",
+  "scripts": {
+    "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",
+    "freshtall": "npm cache clean --force && rm -rf node_modules && rm -f package-lock.json && npm install",
+    "test-storybook": "test-storybook --url http://localhost:9050",
+    "preinstall": "echo {} > package-lock.json"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.35",
+    "@emotion/css": "^11.11.0",
+    "@emotion/react": "^11.10.6",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "date-fns": "^2.30.0",
+    "prop-types": "^15.7.2"
+  },
+  "lint-staged": {
+    "*/**/*.{js,jsx,json}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "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/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
+    "@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",
+    "@storybook/test-runner": "^0.7.1",
+    "autoprefixer": "^10.3.1",
+    "babel-loader": "^8.2.2",
+    "eslint": "^8.4.1",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-regex": "^1.10.0",
+    "husky": "^7.0.4",
+    "jest": "^27.5.1",
+    "lint-staged": "^12.1.2",
+    "mkdirp": "^1.0.4",
+    "npm-run-all": "^4.1.5",
+    "onchange": "^7.1.0",
+    "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.58.3"
+  }
+}

package/readme.md

@@ -42,6 +42,13 @@ npm test
 
 ## Changelog
 
+## 1.4.53
+- \[Added\]: Icon – Add IconMenu MHRP09N0036, MHRP09N0037
+- \[Added\]: Icon – Add IconMenu MHRP25N0009
+- \[Fixed\]: Treeview  - Fix bug Treeview keeps the search bar visible while scrolling
+- \[Fixed\]: NumberInput  – NumberInput Core when changing 'decimalDigit'
+- \[Fixed\]: Attachment  – Fix the issue where the attachment cannot be deleted when clicking outside the Attachment popup
+
 ## 1.4.52
 - \[Fixed\]: DropDown  - Fix bug search data in Dropdown
 - \[Fixed\]: NumberInput  – NumberInput Core when changing 'decimalDigit'