diginet-core-ui 1.4.39 → 1.4.40

package/components/tree-view/index.js

@@ -1,1017 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { Accordion, AccordionDetails, AccordionSummary, ButtonIcon, Checkbox, Divider, InputBase, Typography } from "./..";
-import { getGlobal } from "../../global";
-import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { render } from 'react-dom';
-import { bgColor, borderRadius, boxBorder, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, displayInlineBlock, flexRow, itemsCenter, parseHeight, parseMinHeight, parseWidth, positionRelative, textColor, textLeft } from "../../styles/general";
-import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp, mapParent, randomString, removeUnicode } from "../../utils";
-const separatorPattern = /\{\w+\}/g;
-const currentValue = {},
-  itemsRenderAsync = {};
-const TreeView = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  var _value3;
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'TreeView'
-  });
-  const {
-    action = {},
-    allowSearch,
-    autoExpandToResult,
-    className,
-    collapseIcon,
-    dataSource,
-    disabled,
-    disabledBoldResult,
-    disabledRelevantValue,
-    displayExpr,
-    expand,
-    expandIcon,
-    id,
-    multiple,
-    multipleValueMode,
-    onChange,
-    parentID,
-    renderAsyncFromLevel,
-    renderAsyncWithLength,
-    renderItem,
-    searchDelayTime: searchDelayTimeProp,
-    searchMode,
-    searchProps,
-    selectAll,
-    selectAllLabel: selectAllLabelProp,
-    selectBox,
-    showChildrenOfResult,
-    showSelectedItems,
-    value: valueProp,
-    valueExpr,
-    ...other
-  } = props;
-  let searchDelayTime = searchDelayTimeProp;
-  let value = valueProp;
-  const selectAllLabel = selectAllLabelProp || getGlobal('selectAll');
-  const ref = useRef(null);
-  const selectAllRef = useRef(null);
-  const inputValueRef = useRef(null);
-  const clearIconRef = useRef(null);
-  const timer = useRef(null);
-  const timeout = useRef(null);
-  const [unique] = useState(randomString(6, {
-    allowNumber: false,
-    allowSymbol: false
-  }));
-  const _TreeViewRootCSS = TreeViewRootCSS(theme);
-  const determinateCheckbox = (input, determinate) => {
-    if (multipleValueMode === 'multiple' || disabledRelevantValue) {
-      input.classList[determinate ? 'add' : 'remove']('determinate');
-      input.classList[determinate ? 'remove' : 'add']('indeterminate');
-      input.nextElementSibling.firstChild.classList[determinate ? 'add' : 'remove']('determinate');
-      input.nextElementSibling.firstChild.classList[determinate ? 'remove' : 'add']('indeterminate');
-    }
-  };
-
-  // const triggerCheckboxRecursion = (nodes, isChecked) => {
-  //     nodes.forEach(el => {
-  //         if (el.classList.contains('non-child')) {
-  //             el.querySelector('input').checked = isChecked;
-  //         } else {
-  //             el.firstChild.querySelector('input').checked = isChecked;
-  //             triggerCheckboxRecursion(Array.from(el.lastChild.firstChild.childNodes), isChecked);
-  //         }
-  //     });
-  // };
-
-  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);
-          }
-        }
-      });
-    }
-  };
-  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
-          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;
-                }
-              }
-            }
-          }
-        }
-      } else if (multipleValueMode === 'inheritance' && node.classList.contains('DGN-UI-Accordion')) {
-        const input = node.firstChild.firstChild.querySelector('input');
-        input.checked = true;
-        currentValue[unique][input.value] = true;
-      }
-    }
-  };
-  const checkChildrenCheckbox = (node, isChecked) => {
-    // node = node.nextElementSibling?.firstChild;
-    // if (node) {
-    //     const childNodes = Array.from(node.childNodes);
-    //     if (childNodes) {
-    //         triggerCheckboxRecursion(childNodes, isChecked);
-    //     }
-    // }
-    if (node) {
-      node.querySelectorAll('input').forEach(el => {
-        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);
-        }
-      } else {
-        if (selectAllRef.current.classList.contains('determinate')) {
-          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;
-          Array.from(el.childNodes).forEach(e => {
-            e.classList[isChecked ? 'add' : 'remove']('treeview-disabled');
-          });
-        } else {
-          el.firstChild.firstChild.firstChild.firstChild.disabled = isChecked;
-          el.parentNode.classList[isChecked ? 'add' : 'remove']('disabled');
-          el.firstChild.firstChild.firstChild.classList[isChecked ? 'add' : 'remove']('disabled');
-        }
-      });
-    }
-  };
-  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')) {
-        const summaryEl = node.firstChild;
-        if (!summaryEl.classList.contains('expanding')) {
-          summaryEl.lastChild.firstChild.click();
-        }
-        const checkbox = node.firstChild.firstChild.lastChild.firstChild.firstChild.firstChild;
-        if (checkbox) {
-          var _node$querySelectorAl;
-          // 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
-          checkbox.firstChild.checked = mustDisabled;
-          determinateCheckbox(checkbox.firstChild, !mustDisabled);
-          node.classList[mustDisabled || isChecked ? 'add' : 'remove']('disabled');
-          checkbox.classList[mustDisabled || isChecked ? 'add' : 'remove']('disabled');
-          Array.from(node.childNodes).forEach(e => {
-            setTimeout(() => {
-              e.classList[mustDisabled || isChecked ? 'add' : 'remove']('treeview-disabled');
-            });
-          });
-        }
-      }
-    }
-  };
-  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);
-        });
-      }
-    }
-  };
-  const clearAllValue = () => {
-    inputValueRef.current.value = '';
-    clearIconRef.current.style.opacity = 0;
-    Object.keys(currentValue[unique]).forEach(key => {
-      currentValue[unique][key] = false;
-    });
-    Array.from(ref.current.querySelectorAll('input')).forEach(input => {
-      input.checked = false;
-    });
-    !!onChange && onChange({
-      value: [],
-      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 => {
-      result += keyArr ? renderData(d, keyArr) : d[displayExpr] + ', ';
-    });
-    inputValueRef.current.value = result.replace(/, $/, '');
-  };
-  const handleCheckbox = (isChecked = false, value = 'all') => {
-    if ((selectBox || multiple) && ref.current) {
-      if (value === 'all') {
-        ref.current.querySelectorAll('input').forEach(input => input.checked = isChecked);
-      } else if (value) {
-        if (typeof value === 'string') {
-          value = [value];
-        }
-        value.forEach(v => {
-          const input = ref.current.querySelector(`input[value="${v}"]`);
-          if (input) {
-            input.checked = isChecked;
-          }
-        });
-      }
-    }
-  };
-  const onClickHandler = (e, data) => {
-    if (disabled) return;
-    const target = e.target;
-    const currentTarget = e.currentTarget;
-    let value = typeof data === 'object' ? data[valueExpr] : data;
-    const justSelected = value;
-    const result = [];
-    const checkBoxEl = currentTarget.querySelector('.TreeView-Item-Checkbox');
-    if (multiple) {
-      var _value;
-      let checked;
-      let inputEl;
-      // Click on text (not checkbox)
-      if (!checkBoxEl.contains(target)) {
-        inputEl = checkBoxEl.querySelector('input');
-        checked = !inputEl.checked || inputEl.classList.contains('indeterminate');
-        inputEl.checked = checked;
-      } else {
-        inputEl = currentTarget.querySelector('input');
-        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
-        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]).filter(v => v !== ''));
-      value = result;
-      if ((_value = value) !== null && _value !== void 0 && _value.length) {
-        data = dataSource === null || dataSource === void 0 ? void 0 : 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
-        if (checkBoxEl.contains(target)) {
-          if (!input.checked) {
-            input.checked = true;
-            return;
-          }
-        } 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 = [];
-      result = [];
-    } else {
-      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);
-        }
-      });
-      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(() => {
-        onSearchHandler(value);
-      }, /^\d+$/.test(timeout.current) ? timeout.current : 700);
-    } else {
-      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
-          if (entry.classList.contains('TreeView-Item')) {
-            if (!disabledBoldResult && !entry.classList.contains('TreeView-Item-active')) {
-              entry.classList.add('TreeView-Item-active');
-            }
-          } 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 {
-                  summaryEl.lastChild.classList.remove('DGN-Invisible');
-                }
-              } else if (TreeViewItemEl.classList.contains('TreeView-Item-active')) {
-                TreeViewItemEl.classList.remove('TreeView-Item-active');
-                entry.classList.remove('TreeView-Item-contain-children-active');
-              }
-              if (autoExpandToResult && !summaryEl.classList.contains('expanding')) {
-                summaryEl.lastChild.firstChild.click();
-              }
-            }
-          }
-        } 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'));
-            }
-          }
-        });
-      }
-    } 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');
-        });
-      }
-    }
-  };
-  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(({
-        data,
-        index,
-        level
-      }) => {
-        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,
-      index
-    }) : typeof item === 'object' ? keyArr ? renderData(item, keyArr) : item[displayExpr] : item;
-    return jsx(Typography, {
-      mapping: 'div',
-      color: 'inherit',
-      style: {
-        width: '100%'
-      }
-    }, displayText);
-  };
-  const renderTreeView = (data, index, level, sync = true, id) => {
-    if (level > renderAsyncFromLevel - 1 && sync) {
-      if (itemsRenderAsync[unique][id]) {
-        itemsRenderAsync[unique][id].push({
-          data,
-          index,
-          level
-        });
-      } else {
-        itemsRenderAsync[unique][id] = [{
-          data,
-          index,
-          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
-    if (childItems && childItems !== null && childItems !== void 0 && childItems.length) {
-      const id = randomString(6, {
-        allowSymbol: false,
-        allowNumber: false
-      });
-      return jsx(Accordion, {
-        key: index,
-        className: focusClass,
-        expand: expand || data.expand,
-        onExpand: e => {
-          if (disabledRelevantValue && !isTrue && !isParentTrue) {
-            handleDisabledParent(e, isTrue);
-          }
-        },
-        onCollapse: e => {
-          if (disabledRelevantValue && !isTrue && !isParentTrue) {
-            handleDisabledParent(e, isTrue);
-          }
-        }
-      }, jsx(AccordionSummary, {
-        expandIcon: expandIcon,
-        collapseIcon: collapseIcon,
-        expandIconAt: 'start',
-        expandIconProps: {
-          className: 'TreeView'
-        },
-        className: focusClass,
-        onClick: multiple || selectBox || onChange ? e => onClickHandler(e, data) : undefined,
-        style: {
-          paddingLeft: 16 * level
-        }
-      }, jsx("div", {
-        className: 'TreeView-Item'
-      }, selectBox || multiple ? jsx("span", {
-        className: 'TreeView-Item-Checkbox'
-      }, jsx(Checkbox, {
-        checked: isTrue,
-        value: typeof data === 'object' ? data[valueExpr] : data,
-        stopPropagation: false,
-        disabled: disabled
-      })) : null, renderContent(data, keyArr, index))), jsx(AccordionDetails, {
-        id: id
-      }, childItems.map((child, i) => renderTreeView(child, index + i, level + 1, sync, id))));
-    }
-    return jsx("div", {
-      className: classNames('TreeView-Item', 'non-child', focusClass),
-      style: {
-        paddingLeft: 34 + 16 * level
-      },
-      onClick: multiple || selectBox || onChange ? e => onClickHandler(e, data) : undefined,
-      key: index,
-      tabIndex: "-1"
-    }, selectBox || multiple ? jsx("span", {
-      className: 'TreeView-Item-Checkbox'
-    }, jsx(Checkbox, {
-      checked: isTrue,
-      value: typeof data === 'object' ? data[valueExpr] : data,
-      stopPropagation: false,
-      disabled: disabled
-    })) : null, renderContent(data, keyArr, index));
-  };
-  useEffect(() => {
-    currentValue[unique] = {};
-    return () => {
-      currentValue[unique] = null;
-    };
-  }, []);
-  useEffect(() => {
-    if (searchDelayTime) {
-      var _searchDelayTime$matc, _searchDelayTime$matc2;
-      if (searchDelayTime === true) searchDelayTime = getGlobal('delayOnInput');
-      const units = {
-        m: 60000,
-        s: 1000,
-        ms: 1
-      };
-      timeout.current = typeof searchDelayTime === 'number' ? searchDelayTime : (((_searchDelayTime$matc = searchDelayTime.match(/[^a-z]+/i)) === null || _searchDelayTime$matc === void 0 ? void 0 : _searchDelayTime$matc[0]) || 1) * units[((_searchDelayTime$matc2 = searchDelayTime.match(/ms|s|m/i)) === null || _searchDelayTime$matc2 === void 0 ? void 0 : _searchDelayTime$matc2[0]) || 's'];
-      return () => {
-        timeout.current = null;
-      };
-    }
-  }, [searchDelayTime]);
-  useEffect(() => {
-    var _value2;
-    dataSource === null || dataSource === void 0 ? void 0 : 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] = {};
-    };
-  }, [dataSource, value]);
-  useEffect(() => {
-    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 === null || dataSource === void 0 ? void 0 : dataSource.filter(d => value.includes(d[valueExpr]));
-          setValueIntoInput(data);
-        }
-        return () => {
-          if (ref.current) {
-            Array.from(ref.current.querySelectorAll('input')).forEach(input => {
-              input.checked = value.includes(input.value);
-            });
-          }
-        };
-      } else if (disabledRelevantValue) {
-        Array.from(ref.current.querySelectorAll('.TreeView-Item.non-child, .DGN-UI-Accordion')).forEach(el => {
-          if (el.firstChild.querySelector('input').checked) {
-            if (!el.classList.contains('non-child')) {
-              handleDisabledChildren(el, true);
-            }
-            handleDisabledParent(el.parentNode, true);
-          }
-        });
-      }
-    }
-  }, []);
-  useEffect(() => {
-    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');
-        }
-      };
-    }
-  }, [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]);
-      });
-    }
-  }, [dataSource, value, multiple, selectBox, onChange]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    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;
-  });
-  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", {
-    css: _TreeViewRootCSS,
-    className: classNames('DGN-UI-TreeView', disabled && 'disabled')
-  }, showSelectedItems && multiple ? jsx(InputBase, {
-    inputRef: inputValueRef,
-    viewType: 'outlined',
-    readOnly: true,
-    style: {
-      marginBottom: 1
-    },
-    inputStyle: {
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    },
-    endIcon: jsx(ButtonIcon, {
-      viewType: 'ghost',
-      ref: clearIconRef,
-      name: 'Cancel',
-      onClick: clearAllValue
-    })
-  }) : null, allowSearch ? jsx(InputBase, {
-    startIcon: 'Search',
-    onChange: onChangeHandler,
-    viewType: 'outlined',
-    ...searchProps
-  }) : null, multiple && selectAll ? jsx(Fragment, null, jsx("div", {
-    className: 'TreeView-All'
-  }, jsx(Checkbox, {
-    label: selectAllLabel,
-    onChange: onSelectAll,
-    inputRef: selectAllRef,
-    stopPropagation: false,
-    disabled: disabled
-  })), jsx(Divider, null)) : null, jsx("div", {
-    ref: ref,
-    className: classNames('TreeView-Content', disabled && 'disabled', className),
-    ...other
-  }, mapParent(dataSource || [], id, parentID, true).map((data, index) => renderTreeView(data, index.toString(), 0, sync))));
-}));
-const TreeViewRootCSS = ({
-  colors,
-  spacing
-}) => css`
-    ${displayBlock};
-    ${positionRelative};
-    .DGN-UI-Accordion {
-        box-shadow: none !important;
-        .DGN-UI-Accordion-Summary {
-            ${itemsCenter};
-            ${parseMinHeight(40)};
-            padding: ${spacing([0])};
-            ${borderRadius(0)};
-            &.focus {
-                ${bgColor(getProp(colors, 'fill/focus'))};
-            }
-            .Accordion-Icon-Root {
-                ${displayFlex};
-                ${flexRow};
-                margin-right: ${spacing([1])};
-            }
-        }
-        .DGN-UI-Accordion-Details-Content {
-            padding: ${spacing([0])};
-            ${borderRadius(0)};
-        }
-        .Accordion-Icon-Root {
-            ${displayFlex};
-            ${flexRow};
-            transition: opacity 0.2s ease-out;
-            opacity: 1;
-            &.DGN-Invisible {
-                opacity: 0;
-            }
-        }
-        &.DGN-Hidden {
-            display: none !important;
-        }
-    }
-    .TreeView-All,
-    .TreeView-Content {
-        ${displayBlock};
-        ${positionRelative};
-        .DGN-UI-Accordion {
-            margin-bottom: 0px;
-        }
-    }
-    .TreeView-Item-Checkbox {
-        ${displayInlineBlock};
-        ${positionRelative};
-        ${parseHeight('100%')};
-        margin-right: ${spacing([2])};
-    }
-    .TreeView-Item {
-        ${flexRow};
-        ${positionRelative};
-        ${itemsCenter};
-        ${boxBorder};
-        ${parseWidth('100%')};
-        ${parseMinHeight(40)};
-        ${textLeft};
-        ${textColor(getProp(colors, 'text/main'))};
-        &.non-child {
-            ${cursorPointer};
-            transition: background-color 300ms ease;
-            &.disabled {
-                ${cursorNotAllowed};
-                ${textColor(getProp(colors, 'system/disabled'))};
-            }
-            &:not(.disabled) {
-                &:hover {
-                    ${bgColor(getProp(colors, 'fill/hover'))};
-                }
-                &:focus {
-                    ${bgColor(getProp(colors, 'fill/focus'))};
-                }
-                &:active {
-                    ${bgColor(getProp(colors, 'fill/pressed'))};
-                }
-            }
-            &.DGN-Hidden {
-                display: none !important;
-            }
-        }
-        &.focus {
-            ${bgColor(getProp(colors, 'fill/focus'))};
-        }
-        &.TreeView-Item-active .DGN-UI-Typography {
-            font-weight: bold;
-        }
-    }
-    &.expand-able {
-        .TreeView-All {
-            margin-left: ${spacing([8.5])};
-        }
-        .TreeView-Item.non-child {
-            padding-left: ${spacing([8.5])};
-        }
-    }
-`;
-
-// TreeView.defaultProps = {
-//     allowSearch: false,
-//     autoExpandToResult: true,
-//     className: '',
-//     dataSource: [],
-//     disabled: false,
-//     disabledBoldResult: false,
-//     disabledRelevantValue: false,
-//     displayExpr: 'name',
-//     expand: false,
-//     expandIcon: 'ArrowDown',
-//     id: 'id',
-//     multiple: false,
-//     multipleValueMode: 'multiple',
-//     parentID: 'parentID',
-//     renderAsyncFromLevel: 2,
-//     renderAsyncWithLength: 200,
-//     searchMode: 'contains',
-//     searchProps: {},
-//     selectAll: false,
-//     selectAllLabel: getGlobal('selectAll'),
-//     selectBox: false,
-//     showChildrenOfResult: false,
-//     showSelectedItems: false,
-//     value: [],
-//     valueExpr: '',
-// };
-
-TreeView.propTypes = {
-  /** If `true`, display input box search. */
-  allowSearch: PropTypes.bool,
-  /** If `true`, expand TreeView to match result. */
-  autoExpandToResult: PropTypes.bool,
-  /** Class for component. */
-  className: PropTypes.string,
-  /** Icon display for collapse icon. */
-  collapseIcon: PropTypes.any,
-  /** The array of elements that appear in the tree list. */
-  dataSource: PropTypes.array,
-  /** If `true`, the component is disabled. */
-  disabled: PropTypes.bool,
-  /** If `true`, prevent display content of match values with bold style. */
-  disabledBoldResult: PropTypes.bool,
-  /** If `true`, disabled parent and children item (only supported for multipleValueMode is single). */
-  disabledRelevantValue: PropTypes.bool,
-  /** Field name used for text display in dropdown list.<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
-   */
-  displayExpr: PropTypes.string,
-  /** If `true`, expand immediate after render (shouldn't use this). */
-  expand: PropTypes.bool,
-  /** Icon display for expand icon. */
-  expandIcon: PropTypes.any,
-  /** If `true`, value must be an array and the treeview will support multiple selections. */
-  multiple: PropTypes.bool,
-  /** Return value for the select multiple use case. */
-  multipleValueMode: PropTypes.oneOf(['single', 'multiple', 'inheritance']),
-  /**
-   * Callback fired when the value changes.<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,
-  /** Used for mapping into a nested list. */
-  parentID: PropTypes.string.isRequired,
-  /** Will render asynchronously from level equal this number. */
-  renderAsyncFromLevel: PropTypes.oneOf([2, 3, 4, 5]),
-  /** Will render asynchronously if the number of elements is greater than this number. */
-  renderAsyncWithLength: PropTypes.number,
-  /** Function displays items by custom.<br/>
-   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
-   * --> such as: displayExpr={'name - role'}
-   */
-  renderItem: PropTypes.func,
-  /**
-   * Duration wait enter search content on search.<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If `true`, used default delayOnInput.
-   */
-  searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Specifies a comparison operation used to search items. */
-  searchMode: PropTypes.oneOf(['contains', 'similar']),
-  /** The props for InputBase. */
-  searchProps: PropTypes.object,
-  /** If `true`, allow select/unselect all items on one click (just support for multiple). */
-  selectAll: PropTypes.bool,
-  /** The content display for label of checkbox select all */
-  selectAllLabel: PropTypes.string,
-  /** If `true`, show checkbox in each item. */
-  selectBox: PropTypes.bool,
-  /** If `true`, still show children of last result was found. */
-  showChildrenOfResult: PropTypes.bool,
-  /** If `true`, display all value in a box. */
-  showSelectedItems: PropTypes.bool,
-  /** Used to identify the parent key. */
-  id: PropTypes.string.isRequired,
-  /** The displayed value of component. */
-  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-  /** The field name used for the returned result. */
-  valueExpr: PropTypes.string
-  /**
-   * 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/>
-   * }
-   */
-};
-export default TreeView;