diginet-core-ui 1.3.87 → 1.3.88

package/components/tree-view/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, useMemo, useState, useEffect, useRef, forwardRef, Fragment, useImperativeHandle } from 'react';
 import { render } from 'react-dom';
@@ -27,7 +28,7 @@ const {
 } = theme;
 const separatorPattern = /\{\w+\}/g;
 const currentValue = {},
-  itemsRenderAsync = {};
+      itemsRenderAsync = {};
 const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   allowSearch,
@@ -71,6 +72,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allowNumber: false,
     allowSymbol: false
   }));
+
   const determinateCheckbox = (input, determinate) => {
     if (multipleValueMode === 'multiple' || disabledRelevantValue) {
       input.classList[determinate ? 'add' : 'remove']('determinate');
@@ -78,9 +80,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       input.nextElementSibling.firstChild.classList[determinate ? 'add' : 'remove']('determinate');
       input.nextElementSibling.firstChild.classList[determinate ? 'remove' : 'add']('indeterminate');
     }
-  };
-
-  // const triggerCheckboxRecursion = (nodes, isChecked) => {
+  }; // const triggerCheckboxRecursion = (nodes, isChecked) => {
   //     nodes.forEach(el => {
   //         if (el.classList.contains('non-child')) {
   //             el.querySelector('input').checked = isChecked;
@@ -91,32 +91,40 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   //     });
   // };
 
+
   const checkedParentFollowValue = nodes => {
     if (nodes && nodes !== null && nodes !== void 0 && nodes.length) {
       nodes.forEach(node => {
         if (!node.classList.contains('non-child')) {
           const input = node.firstChild.querySelector('input');
+
           if (input.checked) {
             if (!input.classList.contains('determinate')) {
               determinateCheckbox(input, true);
             }
+
             Array.from(node.querySelectorAll('input')).forEach(el => {
               el.checked = true;
+
               if (!el.classList.contains('determinate')) {
                 determinateCheckbox(el, true);
               }
             });
           } else {
             var _node$lastChild, _node$lastChild$first;
+
             const checkedLeastOfOne = Array.from(node.querySelectorAll('input')).some(el => el.checked);
+
             if (checkedLeastOfOne) {
               input.checked = checkedLeastOfOne;
+
               if (input.classList.contains('determinate')) {
                 determinateCheckbox(input, false);
               }
             } else if (input.checked) {
               input.checked = false;
             }
+
             const childNodes = Array.from((node === null || node === void 0 ? void 0 : (_node$lastChild = node.lastChild) === null || _node$lastChild === void 0 ? void 0 : (_node$lastChild$first = _node$lastChild.firstChild) === null || _node$lastChild$first === void 0 ? void 0 : _node$lastChild$first.childNodes) || '');
             checkedParentFollowValue(childNodes);
           }
@@ -124,39 +132,48 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     }
   };
+
   const checkParentCheckbox = node => {
     while (ref.current.contains(node)) {
       node = node.parentNode;
+
       if (multipleValueMode === 'multiple' && node.classList.contains('DGN-UI-Accordion-Details-Content')) {
         const childNodes = Array.from(node.childNodes);
+
         if (childNodes) {
           var _node$parentNode;
+
           // Số lượng input đã check, dùng để kiểm tra là đã check tất cả, check chưa đầy đủ hoặc chưa check phần tử nào
           let determinateQuantity = 0;
           const checkedQuantity = childNodes.reduce((quantity, el) => {
             const input = el.querySelector('input');
             determinateQuantity += +input.classList.contains('determinate');
             return quantity + +input.checked;
-          }, 0);
-          // Accordion root
+          }, 0); // Accordion root
+
           node = (_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.parentNode;
+
           if (node && node.firstChild) {
             const input = node.firstChild.querySelector('input');
+
             if (input) {
               if (!checkedQuantity) {
                 input.checked = false;
                 currentValue[unique][input.value] = false;
               } else {
                 input.checked = true;
+
                 if (checkedQuantity === (childNodes === null || childNodes === void 0 ? void 0 : childNodes.length) && checkedQuantity === determinateQuantity) {
                   if (!input.classList.contains('determinate')) {
                     determinateCheckbox(input, true);
                   }
+
                   currentValue[unique][input.value] = true;
                 } else {
                   if (input.classList.contains('determinate')) {
                     determinateCheckbox(input, false);
                   }
+
                   currentValue[unique][input.value] = false;
                 }
               }
@@ -170,6 +187,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   };
+
   const checkChildrenCheckbox = (node, isChecked) => {
     // node = node.nextElementSibling?.firstChild;
     // if (node) {
@@ -183,14 +201,18 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         if (!el.classList.contains('determinate')) {
           determinateCheckbox(el, true);
         }
+
         el.checked = isChecked;
       });
     }
   };
+
   const checkedSelectAllCheckbox = () => {
     const allInput = Array.from(ref.current.querySelectorAll('input'));
+
     if (allInput.some(i => i.checked)) {
       const isCheckedAll = allInput.every(i => i.checked);
+
       if (isCheckedAll) {
         if (!selectAllRef.current.classList.contains('determinate')) {
           determinateCheckbox(selectAllRef.current, true);
@@ -200,15 +222,18 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           determinateCheckbox(selectAllRef.current, false);
         }
       }
+
       selectAllRef.current.checked = true;
     } else if (selectAllRef.current.checked) {
       selectAllRef.current.checked = false;
     }
   };
+
   const handleDisabledChildren = (node, isChecked) => {
     if (node) {
       node.querySelectorAll('.TreeView-Item.non-child, .DGN-UI-Accordion').forEach(el => {
         el.classList[isChecked ? 'add' : 'remove']('disabled');
+
         if (el.classList.contains('DGN-UI-Accordion')) {
           el.firstChild.firstChild.lastChild.firstChild.firstChild.firstChild.classList[isChecked ? 'add' : 'remove']('disabled');
           el.firstChild.firstChild.lastChild.firstChild.firstChild.firstChild.disabled = isChecked;
@@ -223,20 +248,25 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     }
   };
+
   const handleDisabledParent = (node, isChecked) => {
     while (ref.current.contains(node)) {
       node = node.parentNode;
+
       if (node.classList.contains('DGN-UI-Accordion') && node.firstChild.classList.contains('DGN-UI-Accordion-Summary')) {
         var _node$querySelectorAl;
+
         const summaryEl = node.firstChild;
+
         if (!summaryEl.classList.contains('expanding')) {
           summaryEl.lastChild.firstChild.click();
         }
-        const checkbox = node.firstChild.firstChild.lastChild.firstChild.firstChild.firstChild;
-        // Trường hợp phải set về false để xét các input đã check không bao gồm node này
+
+        const checkbox = node.firstChild.firstChild.lastChild.firstChild.firstChild.firstChild; // Trường hợp phải set về false để xét các input đã check không bao gồm node này
+
         checkbox.firstChild.checked = isChecked;
-        const mustDisabled = !!((_node$querySelectorAl = node.querySelectorAll('input:checked')) !== null && _node$querySelectorAl !== void 0 && _node$querySelectorAl.length);
-        // Nếu có ít nhất một input con được check thì phải checked cho input này
+        const mustDisabled = !!((_node$querySelectorAl = node.querySelectorAll('input:checked')) !== null && _node$querySelectorAl !== void 0 && _node$querySelectorAl.length); // Nếu có ít nhất một input con được check thì phải checked cho input này
+
         checkbox.firstChild.checked = mustDisabled;
         determinateCheckbox(checkbox.firstChild, !mustDisabled);
         node.classList[mustDisabled || isChecked ? 'add' : 'remove']('disabled');
@@ -249,10 +279,13 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   };
+
   const setValue = (data, isChecked) => {
     if (multiple && multipleValueMode !== 'single') {
       var _data$childItems;
+
       currentValue[unique][typeof data === 'object' ? data[valueExpr] : data] = isChecked;
+
       if (data.childItems && (_data$childItems = data.childItems) !== null && _data$childItems !== void 0 && _data$childItems.length) {
         data.childItems.forEach(d => {
           setValue(d, isChecked);
@@ -260,6 +293,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   };
+
   const clearAllValue = () => {
     inputValueRef.current.value = '';
     clearIconRef.current.style.opacity = 0;
@@ -274,17 +308,22 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       data: []
     }, []);
   };
+
   const setValueIntoInput = data => {
     var _clearIconRef$current2;
+
     if (!data || !(data !== null && data !== void 0 && data.length)) {
       var _clearIconRef$current;
+
       inputValueRef.current.value = '';
       if ((_clearIconRef$current = clearIconRef.current) !== null && _clearIconRef$current !== void 0 && _clearIconRef$current.element) clearIconRef.current.element.style.opacity = 0;
       return;
     }
+
     if ((_clearIconRef$current2 = clearIconRef.current) !== null && _clearIconRef$current2 !== void 0 && _clearIconRef$current2.element && clearIconRef.current.element.style.opacity === '0') {
       clearIconRef.current.element.style.opacity = null;
     }
+
     let result = '';
     const keyArr = displayExpr.match(separatorPattern);
     data.forEach(d => {
@@ -292,6 +331,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     });
     inputValueRef.current.value = result.replace(/, $/, '');
   };
+
   const handleCheckbox = (isChecked = false, value = 'all') => {
     if ((selectBox || multiple) && ref.current) {
       if (value === 'all') {
@@ -300,8 +340,10 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         if (typeof value === 'string') {
           value = [value];
         }
+
         value.forEach(v => {
           const input = ref.current.querySelector(`input[value="${v}"]`);
+
           if (input) {
             input.checked = isChecked;
           }
@@ -309,6 +351,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   };
+
   const onClickHandler = (e, data) => {
     if (disabled) return;
     const target = e.target;
@@ -317,11 +360,13 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const justSelected = value;
     const result = [];
     const checkBoxEl = currentTarget.querySelector('.TreeView-Item-Checkbox');
+
     if (multiple) {
       var _value;
+
       let checked = false;
-      let inputEl = null;
-      // Click on text (not checkbox)
+      let inputEl = null; // Click on text (not checkbox)
+
       if (!checkBoxEl.contains(target)) {
         inputEl = checkBoxEl.querySelector('input');
         checked = !inputEl.checked || inputEl.classList.contains('indeterminate');
@@ -331,43 +376,52 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         checked = inputEl.checked || inputEl.classList.contains('indeterminate');
         inputEl.checked = checked;
       }
+
       if (multipleValueMode !== 'single') {
         if (!currentTarget.classList.contains('non-child')) {
           checkChildrenCheckbox(currentTarget.nextElementSibling, checked);
+
           if (checked) {
             determinateCheckbox(inputEl, true);
           }
         }
+
         if (checked || multipleValueMode === 'multiple') {
           checkParentCheckbox(currentTarget);
-        }
-        // Handle result when multiple
+        } // Handle result when multiple
+
+
         setValue(data, checked);
       } else {
         currentValue[unique][value] = checked;
+
         if (disabledRelevantValue) {
           // Disabled/Enabled parent and children node
           if (!currentTarget.classList.contains('non-child')) {
             handleDisabledChildren(currentTarget.nextElementSibling, checked);
           }
+
           handleDisabledParent(currentTarget.parentNode, checked);
         }
       }
+
       result.push(...Object.keys(currentValue[unique]).filter(v => currentValue[unique][v]));
       value = result;
+
       if ((_value = value) !== null && _value !== void 0 && _value.length) {
         data = dataSource.filter(obj => value.includes(typeof obj === 'object' ? obj[valueExpr] : obj));
       } else {
         data = [];
       }
+
       if (showSelectedItems) {
         setValueIntoInput(data);
       }
     } else {
       if (selectBox) {
         const checkedInput = ref.current.querySelectorAll('input:checked');
-        let input = currentTarget.querySelector('input');
-        // Click on checkbox
+        let input = currentTarget.querySelector('input'); // Click on checkbox
+
         if (checkBoxEl.contains(target)) {
           if (!input.checked) {
             input.checked = true;
@@ -376,24 +430,31 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         } else if (checkedInput[0].isSameNode(input)) {
           return;
         }
+
         if (checkedInput) {
           checkedInput.forEach(el => el.checked = false);
         }
+
         input.checked = true;
       }
+
       currentValue[unique][value] = true;
       result.push(value);
     }
+
     if (selectAllRef.current) {
       checkedSelectAllCheckbox();
     }
+
     e.value = value;
     e.justSelected = justSelected;
     e.data = data;
     !!onChange && onChange(e, result);
   };
+
   const onSelectAll = e => {
     let result;
+
     if (!e.target.checked && e.target.classList.contains('determinate')) {
       ref.current.querySelectorAll('input:checked').forEach(input => input.checked = false);
       e.value = [];
@@ -402,9 +463,11 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (!e.target.classList.contains('determinate')) {
         determinateCheckbox(e.target, true);
       }
+
       e.target.checked = true;
       ref.current.querySelectorAll('input').forEach(input => {
         input.checked = true;
+
         if (!input.classList.contains('determinate')) {
           determinateCheckbox(input, true);
         }
@@ -412,10 +475,13 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       result = Object.keys(currentValue[unique]).map(v => v);
       e.value = result;
     }
+
     !!onChange && onChange(e, result);
   };
+
   const onChangeHandler = e => {
     const value = e.target.value;
+
     if (timeout.current) {
       if (timer.current) clearTimeout(timer.current);
       timer.current = setTimeout(() => {
@@ -425,13 +491,15 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onSearchHandler(value);
     }
   };
+
   const onSearchHandler = value => {
     const entries = ref.current.querySelectorAll('.TreeView-Item.non-child, .DGN-UI-Accordion');
+
     if (value) {
       entries.forEach(entry => {
         if (compareTwoString(value, entry.textContent)) {
-          entry.classList.remove('DGN-Hidden');
-          // Check exactly entry
+          entry.classList.remove('DGN-Hidden'); // Check exactly entry
+
           if (entry.classList.contains('TreeView-Item')) {
             if (!disabledBoldResult && !entry.classList.contains('TreeView-Item-active')) {
               entry.classList.add('TreeView-Item-active');
@@ -439,12 +507,14 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           } else {
             const summaryEl = entry.firstChild;
             const TreeViewItemEl = summaryEl.querySelector('.TreeView-Item');
+
             if (TreeViewItemEl) {
               if (compareTwoString(value, TreeViewItemEl.textContent)) {
                 if (!disabledBoldResult && !TreeViewItemEl.classList.contains('TreeView-Item-active')) {
                   TreeViewItemEl.classList.add('TreeView-Item-active');
                   entry.classList.add('TreeView-Item-contain-children-active');
                 }
+
                 if (!compareTwoString(value, entry.lastChild.textContent)) {
                   summaryEl.lastChild.classList.add('DGN-Invisible');
                 } else {
@@ -454,6 +524,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 TreeViewItemEl.classList.remove('TreeView-Item-active');
                 entry.classList.remove('TreeView-Item-contain-children-active');
               }
+
               if (autoExpandToResult && !summaryEl.classList.contains('expanding')) {
                 summaryEl.lastChild.firstChild.click();
               }
@@ -461,27 +532,33 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           }
         } else {
           entry.classList.add('DGN-Hidden');
+
           if (entry.classList.contains('TreeView-Item')) {
             if (entry.classList.contains('TreeView-Item-active')) {
               entry.classList.remove('TreeView-Item-active');
             }
+
             entry.classList.remove('TreeView-Item-contain-children-active');
           } else {
             const summaryEl = entry.firstChild;
             const TreeViewItemEl = summaryEl.querySelector('.TreeView-Item');
+
             if (TreeViewItemEl) {
               if (TreeViewItemEl.classList.contains('TreeView-Item-active')) {
                 TreeViewItemEl.classList.remove('TreeView-Item-active');
               }
+
               summaryEl.lastChild.classList.remove('DGN-Invisible');
             }
           }
         }
       });
+
       if (showChildrenOfResult) {
         entries.forEach(entry => {
           if (entry.classList.contains('TreeView-Item-contain-children-active')) {
             const hiddenEls = entry.querySelectorAll('.DGN-Hidden, .DGN-Invisible');
+
             if (hiddenEls && hiddenEls !== null && hiddenEls !== void 0 && hiddenEls.length) {
               hiddenEls.forEach(hiddenEl => hiddenEl.classList.remove('DGN-Hidden', 'DGN-Invisible'));
             }
@@ -491,11 +568,13 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else {
       entries.forEach(entry => {
         entry.classList.remove('DGN-Hidden');
+
         if (!entry.classList.contains('TreeView-Item') && entry.firstChild.lastChild.classList.contains('DGN-Invisible')) {
           entry.firstChild.lastChild.classList.remove('DGN-Invisible');
         }
       });
       const activeEls = ref.current.querySelectorAll('.TreeView-Item-active');
+
       if (!disabledBoldResult && activeEls && activeEls !== null && activeEls !== void 0 && activeEls.length) {
         activeEls.forEach(activeEl => {
           activeEl.classList.remove('TreeView-Item-active', 'TreeView-Item-contain-children-active');
@@ -503,13 +582,16 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   };
+
   const compareTwoString = (search, content) => {
     if (searchMode === 'similar') {
       search = removeUnicode(search.normalize(), '.*?');
       content = removeUnicode(content);
     }
+
     return new RegExp(search.normalize(), 'img').test(content.normalize());
   };
+
   const renderDataAsync = (id, array) => {
     return new Promise(res => {
       const node = array.map(({
@@ -520,21 +602,26 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         return renderTreeView(data, index, level, false);
       });
       const container = document.getElementById(id);
+
       if (container && node) {
         render(node, container.firstChild, () => res(1));
       }
     });
   };
+
   const renderData = (data, keyArr) => {
     const pattern = keyArr.join('|').replace(/([{}])/g, '\\$1');
     const separatorArr = displayExpr.split(new RegExp(pattern));
     let str = '';
     let i = 0;
+
     for (i; i < (keyArr === null || keyArr === void 0 ? void 0 : keyArr.length); i++) {
       str += separatorArr[i] + (data[keyArr[i].replace(/\W/g, '')] !== undefined ? data[keyArr[i].replace(/\W/g, '')] : keyArr[i]);
     }
+
     return str + separatorArr[i];
   };
+
   const renderContent = (item, keyArr, index) => {
     const displayText = renderItem && typeof renderItem === 'function' ? renderItem({
       data: item,
@@ -548,6 +635,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }, displayText);
   };
+
   const renderTreeView = (data, index, level, sync = true, id) => {
     if (level > renderAsyncFromLevel - 1 && sync) {
       if (itemsRenderAsync[unique][id]) {
@@ -563,14 +651,16 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           level
         }];
       }
+
       return null;
     }
+
     const keyArr = displayExpr.match(separatorPattern);
     const isTrue = value.includes(data[valueExpr] || data);
     const isParentTrue = value.includes(data[parentID]);
     const focusClass = isTrue && !selectBox && !multiple ? 'focus' : '';
-    const childItems = data.childItems;
-    // is Summary
+    const childItems = data.childItems; // is Summary
+
     if (childItems && childItems !== null && childItems !== void 0 && childItems.length) {
       const id = randomString(6, {
         allowSymbol: false,
@@ -616,6 +706,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         id: id
       }, childItems.map((child, i) => renderTreeView(child, index + i, level + 1, sync, id))));
     }
+
     return jsx("div", {
       className: 'TreeView-Item non-child ' + focusClass,
       style: {
@@ -634,6 +725,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       disabled: disabled
     })), renderContent(data, keyArr, index));
   };
+
   useEffect(() => {
     currentValue[unique] = {};
     return () => {
@@ -643,6 +735,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (searchDelayTime) {
       var _searchDelayTime$matc, _searchDelayTime$matc2;
+
       if (searchDelayTime === true) searchDelayTime = getGlobal('delayOnInput');
       const units = {
         m: 60000,
@@ -657,14 +750,17 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [searchDelayTime]);
   useEffect(() => {
     var _value2;
+
     dataSource.forEach(data => {
       currentValue[unique][typeof data === 'object' ? data[valueExpr] : data] = false;
     });
+
     if (value && (_value2 = value) !== null && _value2 !== void 0 && _value2.length) {
       value.forEach(v => {
         currentValue[unique][v] = true;
       });
     }
+
     return () => {
       currentValue[unique] = {};
     };
@@ -673,13 +769,16 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (value && multiple) {
       if (multipleValueMode !== 'single') {
         const childNodes = Array.from(ref.current.childNodes);
+
         if (childNodes && childNodes !== null && childNodes !== void 0 && childNodes.length) {
           checkedParentFollowValue(childNodes);
         }
+
         if (showSelectedItems) {
           const data = dataSource.filter(d => value.includes(d[valueExpr]));
           setValueIntoInput(data);
         }
+
         return () => {
           if (ref.current) {
             Array.from(ref.current.querySelectorAll('input')).forEach(input => {
@@ -693,6 +792,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             if (!el.classList.contains('non-child')) {
               handleDisabledChildren(el, true);
             }
+
             handleDisabledParent(el.parentNode, true);
           }
         });
@@ -703,10 +803,12 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (selectAllRef.current) {
       checkedSelectAllCheckbox();
     }
+
     if (ref.current.querySelector('.DGN-UI-Accordion-Details-Content')) {
       if (!ref.current.parentNode.classList.contains('expand-able')) {
         ref.current.parentNode.classList.add('expand-able');
       }
+
       return () => {
         if (ref.current) {
           ref.current.parentNode.classList.remove('expand-able');
@@ -716,6 +818,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [dataSource, value, multiple, selectBox]);
   useEffect(() => {
     var _Object$keys;
+
     if ((_Object$keys = Object.keys(itemsRenderAsync[unique])) !== null && _Object$keys !== void 0 && _Object$keys.length) {
       Object.keys(itemsRenderAsync[unique]).forEach(async key => {
         await renderDataAsync(key, itemsRenderAsync[unique][key]);
@@ -725,32 +828,40 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = {
-      ...action
+    const _instance = { ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    // keep old method
+
+    currentRef.instance = _instance; // keep old method
+
     currentRef.disabled = disabled;
     currentRef.displayExpr = displayExpr;
     currentRef.valueExpr = valueExpr;
     currentRef.id = id;
     currentRef.parentID = parentID;
     currentRef.value = value;
+
     currentRef.getValue = () => Object.keys(currentValue[unique]).filter(v => currentValue[unique][v]);
+
     currentRef.setValue = setValue;
     currentRef.handleCheckbox = handleCheckbox;
+
     currentRef.get = () => ref.current;
+
     return currentRef;
   });
   return useMemo(() => {
     var _value3;
+
     if (typeof value === 'string') {
       value = [value];
     }
+
     if (!multiple && ((_value3 = value) === null || _value3 === void 0 ? void 0 : _value3.length) > 1) {
       value.length = 1;
     }
+
     itemsRenderAsync[unique] = {};
     const sync = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > renderAsyncWithLength;
     return jsx("div", {
@@ -920,100 +1031,129 @@ TreeView.defaultProps = {
 TreeView.propTypes = {
   /** expand immediate if true */
   expand: PropTypes.bool,
+
   /** prevent all event if true */
   disabled: PropTypes.bool,
+
   /** show checkbox in each item */
   selectBox: PropTypes.bool,
+
   /** allow select multiple item if true */
   multiple: PropTypes.bool,
+
   /** allow select/unselect all items on one click (just support for multiple) */
   selectAll: PropTypes.bool,
+
   /** display input box search if true */
   allowSearch: PropTypes.bool,
+
   /** display all value in a box */
   showSelectedItems: PropTypes.bool,
+
   /** disabled parent and children item if true (only supported for multipleValueMode is single) */
   disabledRelevantValue: PropTypes.bool,
+
   /** prevent display content of match values with bold style */
   disabledBoldResult: PropTypes.bool,
+
   /** expand TreeView to match result if true */
   autoExpandToResult: PropTypes.bool,
+
   /** still show children of last result was found if true */
   showChildrenOfResult: PropTypes.bool,
+
   /** Used to identify the parent key */
   id: PropTypes.string.isRequired,
+
   /** used for mapping into a nested list */
   parentID: PropTypes.string.isRequired,
+
   /** class on element */
   className: PropTypes.string,
-  /**
-   * field name used for text display<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+
+  /**
+   * field name used for text display<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.string,
+
   /** the key to determine value to return */
   valueExpr: PropTypes.string,
+
   /** return value for the select multiple use case */
   multipleValueMode: PropTypes.oneOf(['single', 'multiple', 'inheritance']),
-  /**
-   * return value for the select multiple use case
-   * * contains: "Công ty" contains "công", but not contains "cong"
-   * * similar: "Công ty" contains "công" and "cong"
+
+  /**
+   * return value for the select multiple use case
+   * * contains: "Công ty" contains "công", but not contains "cong"
+   * * similar: "Công ty" contains "công" and "cong"
    */
   searchMode: PropTypes.oneOf(['contains', 'similar']),
+
   /** The content display for label of checkbox select all */
   selectAllLabel: PropTypes.string,
-  /**
-   * duration wait enter search content on search<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+
+  /**
+   * duration wait enter search content on search<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   /** will render asynchronously if the number of elements is greater than this number */
   renderAsyncWithLength: PropTypes.number,
+
   /** will render asynchronously from level equal this number */
   renderAsyncFromLevel: PropTypes.oneOf([2, 3, 4, 5]),
+
   /** data to show in tree list */
   dataSource: PropTypes.array,
+
   /** the value was selected */
   value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-  /** function displays items by custom<br/>
-   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
-   * --> such as: displayExpr={'name - role'}
+
+  /** function displays items by custom<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
-  /**
-   * on change value function<br />
-   * return 2 parameters (e, data)<br />
-   * * e: element (insist {value, justSelected, data})<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp; + value is one or an array of selected values<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp; + justSelected is value has just been selected (either true or false))<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp; + data is one or an array of selected values with full information<br />
-   * * data: array of selected values (not recommend because it's the same e.value)
+
+  /**
+   * on change value function<br />
+   * return 2 parameters (e, data)<br />
+   * * e: element (insist {value, justSelected, data})<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp; + value is one or an array of selected values<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp; + justSelected is value has just been selected (either true or false))<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp; + data is one or an array of selected values with full information<br />
+   * * data: array of selected values (not recommend because it's the same e.value)
    */
   onChange: PropTypes.func,
+
   /** the icon to display for expand icon */
   expandIcon: PropTypes.any,
+
   /** the props for InputBase */
   searchProps: PropTypes.object,
+
   /** the icon to display for collapse icon */
   collapseIcon: PropTypes.any,
-  /**
-   * get ref of TreeView component, insist:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;disabled: true/false,<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;displayExpr: string,<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;valueExpr: string,<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;id: string,<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;parentID: string,<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: string/array<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;getValue: get selected values (instead of onChange function),<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;setValue: set array of value (only multiple),<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;handleCheckbox: checked/unchecked a Checkbox, includes 2 parameters (isChecked, value):<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + isChecked: checked if true (default is false) <br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + value: selected values, use 'all' for all values (default is 'all') <br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;get: get DOM of TreeView component<br/>
-   * }
+
+  /**
+   * get ref of TreeView component, insist:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;disabled: true/false,<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;displayExpr: string,<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;valueExpr: string,<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;id: string,<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;parentID: string,<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: string/array<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;getValue: get selected values (instead of onChange function),<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;setValue: set array of value (only multiple),<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;handleCheckbox: checked/unchecked a Checkbox, includes 2 parameters (isChecked, value):<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + isChecked: checked if true (default is false) <br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + value: selected values, use 'all' for all values (default is 'all') <br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;get: get DOM of TreeView component<br/>
+   * }
    */
   ref: PropTypes.any
 };