diginet-core-ui 1.3.55-beta.1 → 1.3.57-beta.1

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

@@ -0,0 +1,13 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.85 17.94V9.33C30.85 9.12 30.76 8.9 30.62 8.74L22.1 0.23C21.93 0.09 21.72 0 21.51 0H6.6C4.97 0 3.63 1.33 3.63 2.95V3.16H2.95C1.33 3.16 0 4.49 0 6.12V36.04C0 37.66 1.33 39 2.95 39H24.26C25.89 39 27.21 37.66 27.21 36.04V35.83H27.89C29.53 35.83 30.85 34.5 30.85 32.87V31.4H29.19V32.87C29.19 33.59 28.61 34.17 27.89 34.17H6.6C5.89 34.17 5.3 33.59 5.3 32.87V2.95C5.3 2.24 5.89 1.66 6.6 1.66H20.67V7.2C20.67 7.52 20.72 7.83 20.82 8.12C21.11 9.03 21.83 9.74 22.74 10.04H22.75C23.03 10.12 23.33 10.17 23.63 10.17H27.43L28.95 10.16H29.19V17.94H30.85ZM6.6 35.83H25.55V36.04C25.55 36.75 24.97 37.33 24.26 37.33H2.95C2.25 37.33 1.67 36.75 1.67 36.04V6.12C1.67 5.4 2.25 4.82 2.95 4.82H3.63V32.87C3.63 34.5 4.97 35.83 6.6 35.83Z" fill="#2680EB"/>
+<path d="M25.3298 22.8899L24.6498 25.2699H26.0398L25.3598 22.8899H25.3298Z" fill="#FF8C00"/>
+<path d="M37.0798 18.9399H16.1998C15.1398 18.9399 14.2798 19.7999 14.2798 20.8599V28.4799C14.2798 29.5399 15.1398 30.3999 16.1998 30.3999H37.0798C38.1398 30.3999 38.9998 29.5399 38.9998 28.4799V20.8599C38.9998 19.7999 38.1398 18.9399 37.0798 18.9399ZM20.3798 27.7499L19.3298 25.5899H18.5398V27.7499H16.9898V21.5799H19.5998C21.1198 21.5799 21.9398 22.3399 21.9398 23.6099C21.9398 24.3699 21.5598 25.0599 20.8998 25.3499L22.1198 27.7399H20.3798V27.7499ZM26.7298 27.7499L26.3498 26.3999H24.3598L23.9698 27.7499H22.3898L24.4398 21.5799H26.3398L28.3898 27.7499H26.7298ZM34.6898 27.7499H33.2298L32.1998 23.8999H32.1698L31.1398 27.7499H29.6798L28.0898 21.5799H29.6898L30.5098 25.7499H30.5398L31.5598 21.5799H32.7998L33.8198 25.7499H33.8498L34.6698 21.5799H36.2698L34.6898 27.7499Z" fill="#FF8C00"/>
+<path d="M19.4498 22.7699H18.5498V24.5199H19.4598C20.0298 24.5199 20.3698 24.1799 20.3698 23.6499C20.3598 23.1199 19.9998 22.7699 19.4498 22.7699Z" fill="#FF8C00"/>
+<path d="M7.49984 20.99C7.00984 20.99 6.60984 21.39 6.60984 21.88C6.60984 22.37 7.00984 22.77 7.49984 22.77H11.9498C12.4398 22.77 12.8398 22.37 12.8398 21.88C12.8398 21.39 12.4398 20.99 11.9498 20.99H7.49984Z" fill="#2680EB"/>
+<path d="M7.47984 26.56C6.98984 26.56 6.58984 26.96 6.58984 27.45C6.58984 27.94 6.98984 28.34 7.47984 28.34H11.9298C12.4198 28.34 12.8198 27.94 12.8198 27.45C12.8198 26.96 12.4198 26.56 11.9298 26.56H7.47984Z" fill="#2680EB"/>
+<path d="M13.5401 9.06006C13.5401 10.1301 13.5401 11.2101 13.5401 12.2801C13.5401 12.8201 13.3601 13.0101 12.8301 13.0101C12.3901 13.0101 11.9501 13.0201 11.5101 13.0101C11.0701 13.0001 10.8701 12.7901 10.8701 12.3401C10.8701 10.1501 10.8701 7.96006 10.8701 5.77006C10.8701 5.25006 11.0601 5.06006 11.5601 5.06006C12.0001 5.06006 12.4401 5.06006 12.8801 5.06006C13.3501 5.07006 13.5401 5.25006 13.5401 5.74006C13.5401 6.85006 13.5401 7.95006 13.5401 9.06006Z" fill="#2680EB"/>
+<path d="M17.5501 9.49006C17.5501 10.4401 17.5501 11.4001 17.5501 12.3501C17.5501 12.8001 17.3601 13.0001 16.9101 13.0101C16.4501 13.0201 15.9901 13.0201 15.5301 13.0101C15.1001 13.0001 14.9001 12.7901 14.9001 12.3701C14.9001 10.4701 14.9001 8.58006 14.9001 6.68006C14.9001 6.17006 15.0801 6.00006 15.5701 5.99006C16.0201 5.99006 16.4701 5.99006 16.9201 5.99006C17.3501 5.99006 17.5501 6.19006 17.5501 6.62006C17.5501 7.58006 17.5401 8.54006 17.5501 9.49006Z" fill="#2680EB"/>
+<path d="M6.81006 10.2501C6.81006 9.55006 6.81006 8.84006 6.81006 8.14006C6.81006 7.65006 6.98006 7.48006 7.47006 7.47006C7.94006 7.46006 8.41006 7.46006 8.88006 7.47006C9.26006 7.48006 9.45006 7.67006 9.46006 8.06006C9.47006 9.51006 9.47006 10.9701 9.46006 12.4201C9.46006 12.7801 9.27006 13.0001 8.91006 13.0101C8.40006 13.0301 7.88006 13.0301 7.37006 13.0101C7.01006 13.0001 6.81006 12.7701 6.81006 12.4001C6.81006 11.6801 6.81006 10.9701 6.81006 10.2501Z" fill="#2680EB"/>
+<path d="M20.2401 10.5001C20.5001 10.5001 20.7501 10.4901 21.0101 10.5001C21.3501 10.5201 21.5501 10.7101 21.5601 11.0601C21.5801 11.5301 21.5801 11.9901 21.5601 12.4601C21.5501 12.7901 21.3501 12.9901 21.0301 13.0001C20.5101 13.0201 19.9801 13.0201 19.4601 13.0001C19.1401 12.9901 18.9101 12.7501 18.9001 12.4001C18.8901 11.9601 18.8901 11.5101 18.9001 11.0701C18.9101 10.7201 19.1201 10.5101 19.4701 10.5001C19.7301 10.4901 19.9801 10.5001 20.2401 10.5001Z" fill="#2680EB"/>
+<path d="M21.0801 15.8601H7.30006C7.03006 15.8601 6.81006 15.6401 6.81006 15.3701C6.81006 15.1001 7.03006 14.8801 7.30006 14.8801H21.0801C21.3501 14.8801 21.5701 15.1001 21.5701 15.3701C21.5701 15.6401 21.3501 15.8601 21.0801 15.8601Z" fill="#2680EB"/>
+</svg>

package/components/button/icon.js

@@ -370,14 +370,14 @@ ButtonIcon.propTypes = {
   /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
   name: PropTypes.string,
 
-  /**
-   * 	The size of the component.
-   *
-   * * tiny (button 24px, icon 16px)
-   * * small (button 32px, icon 20px)
-   * * medium (button 40px, icon 24px)
-   * * large (button 48px, icon 32px)
-   * * giant (button 56px, icon 40px)
+  /**
+   * 	The size of the component.
+   *
+   * * tiny (button 24px, icon 16px)
+   * * small (button 32px, icon 20px)
+   * * medium (button 40px, icon 24px)
+   * * large (button 48px, icon 32px)
+   * * giant (button 56px, icon 40px)
    * */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
 
@@ -393,19 +393,19 @@ ButtonIcon.propTypes = {
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * 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*)
+   *
+   * * 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
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

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

@@ -44,6 +44,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   forTreeView,
   labelProps,
   width,
+  stopPropagation,
   ...props
 }, reference) => {
   if (!inputRef) {
@@ -68,7 +69,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const _CheckBoxInputCSS = CheckBoxInputCSS(_CheckBoxSquareCSS.name, clMain);
 
   const handleChange = event => {
-    event.stopPropagation();
+    stopPropagation && event.stopPropagation();
     if (readOnly || inputProps.readOnly || disabled || inputProps.disabled) return;
     const oldLogicChecked = inputRef.current.checked; //Use for TreeView
 
@@ -278,7 +279,8 @@ Checkbox.defaultProps = {
   determinate: true,
   inputProps: {},
   labelProps: {},
-  width: 18
+  width: 18,
+  stopPropagation: true
 };
 Checkbox.propTypes = {
   /** If `true`, the component is checked. */
@@ -314,10 +316,10 @@ Checkbox.propTypes = {
   /** The name of the Checkbox corresponds to the label displayed on the interface. */
   name: PropTypes.string,
 
-  /**
-   * Callback fired when the state is changed.
-   *
-   * You can pull out the new checked state by accessing `event.value` or `event.target.checked` (boolean).
+  /**
+   * Callback fired when the state is changed.
+   *
+   * You can pull out the new checked state by accessing `event.value` or `event.target.checked` (boolean).
    */
   onChange: PropTypes.func,
 

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

@@ -124,9 +124,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _isMobile = isMobile.any();
 
-  const _InputCSS = InputCSS(multiple, renderSelectedItem);
+  const _InputCSS = InputCSS(multiple, typeof renderSelectedItem === 'function');
 
-  const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, disabled);
+  const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, typeof renderSelectedItem === 'function', disabled);
 
   const _IconCSS = IconCSS(viewType, loading, showClear);
 
@@ -1746,7 +1746,6 @@ Dropdown.defaultProps = {
   required: false,
   multiple: false,
   allowSearch: false,
-  closeAfterSelect: true,
   inputProps: {},
   formStyle: {},
   dataSource: [],
@@ -1786,14 +1785,14 @@ Dropdown.propTypes = {
   /** The icon to display if not found the icon follow `iconExpr`. */
   iconDefault: PropTypes.string,
 
-  /** Field name used for icon display.<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;}
+  /** Field name used for icon display.<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,
@@ -1808,9 +1807,9 @@ Dropdown.propTypes = {
   /** The displayed value of component. */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
-  /** 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
+  /** 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.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
@@ -1820,10 +1819,10 @@ Dropdown.propTypes = {
   /** The field name used for the returned result. */
   valueExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   * Duration wait enter search content on search.<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If `true`, used default delayOnInput.
+  /**
+   * 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, PropTypes.bool]),
 
@@ -1890,19 +1889,19 @@ Dropdown.propTypes = {
   /** The array of elements that appear in the dropdown list. */
   dataSource: PropTypes.array,
 
-  /** 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,
 
-  /** Function displays selected items by custom, example:<br/>
-   * renderSelectedItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** Function or field name used for display selected items, example:<br/>
+   * renderSelectedItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
-  /** Callback fired when the input value changes.<br/>
-   * if undefined: the filter function will run (default)
+  /** Callback fired when the input value changes.<br/>
+   * if undefined: the filter function will run (default)
    */
   onInput: PropTypes.func,
 
@@ -1921,19 +1920,19 @@ Dropdown.propTypes = {
   /** The contents in Dropdown box (Exp: TreeView). */
   children: PropTypes.node,
 
-  /**
-   * 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
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/tree-view/index.js

@@ -4,18 +4,27 @@
 import { memo, useMemo, useState, useEffect, useRef, forwardRef, Fragment, useImperativeHandle } from 'react';
 import { render } from 'react-dom';
 import PropTypes from 'prop-types';
-import { jsx } from '@emotion/core';
-import { TreeViewRootCSS } from './css';
+import { jsx, css } from '@emotion/core';
 import { Accordion, AccordionSummary, AccordionDetails, Typography, Checkbox, Divider, InputBase, ButtonIcon } from '..';
 import { mapParent, randomString, removeUnicode } from '../../utils';
 import { getGlobal } from '../../global';
+import { alignCenter, borderBox, cursorPointer, displayBlock, displayInlineBlock, flexRow, positionRelative } from '../../styles/general';
+import theme from '../../theme/settings';
+const {
+  colors: {
+    fill: {
+      focus: fillFocus,
+      hover: fillHover,
+      pressed: fillPressed
+    }
+  }
+} = theme;
 const separatorPattern = /\{\w+\}/g;
 const currentValue = {},
       itemsRenderAsync = {};
 const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   expand,
   disabled,
-  disabledMap,
   selectBox,
   multiple,
   selectAll,
@@ -60,22 +69,20 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (multipleValueMode === 'multiple' || disabledRelevantValue) {
       input.classList[determinate ? 'add' : 'remove']('determinate');
       input.classList[determinate ? 'remove' : 'add']('indeterminate');
-      input.nextElementSibling.classList[determinate ? 'add' : 'remove']('determinate');
-      input.nextElementSibling.classList[determinate ? 'remove' : 'add']('indeterminate');
+      input.nextElementSibling.firstChild.classList[determinate ? 'add' : 'remove']('determinate');
+      input.nextElementSibling.firstChild.classList[determinate ? 'remove' : 'add']('indeterminate');
     }
-  }; // eslint-disable-next-line no-unused-vars
-
+  }; // 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 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) {
@@ -331,6 +338,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onClickHandler = (e, data) => {
+    if (disabled) return;
     const target = e.target;
     const currentTarget = e.currentTarget;
     let value = typeof data === 'object' ? data[valueExpr] : data;
@@ -665,9 +673,9 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }, jsx(Checkbox, {
         forTreeView: true,
         checked: isTrue,
-        inputProps: {
-          value: typeof data === 'object' ? data[valueExpr] : data
-        }
+        value: typeof data === 'object' ? data[valueExpr] : data,
+        stopPropagation: false,
+        disabled: disabled
       })), renderContent(data, keyArr, index))), jsx(AccordionDetails, {
         id: id
       }, childItems.map((child, i) => renderTreeView(child, index + i, level + 1, sync, id))));
@@ -686,9 +694,9 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx(Checkbox, {
       forTreeView: true,
       checked: isTrue,
-      inputProps: {
-        value: typeof data === 'object' ? data[valueExpr] : data
-      }
+      value: typeof data === 'object' ? data[valueExpr] : data,
+      stopPropagation: false,
+      disabled: disabled
     })), renderContent(data, keyArr, index));
   };
 
@@ -702,6 +710,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (searchDelayTime) {
       var _searchDelayTime$matc, _searchDelayTime$matc2;
 
+      if (searchDelayTime === true) searchDelayTime = getGlobal('delayOnInput');
       const units = {
         m: 60000,
         s: 1000,
@@ -781,19 +790,6 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       };
     }
   }, [dataSource, value, multiple, selectBox]);
-  useEffect(() => {
-    if (disabled && ref.current) {
-      const childNodes = ref.current.childNodes;
-      Array.from(childNodes).forEach(node => {
-        node.classList.add('disabled');
-      });
-      return () => {
-        Array.from(childNodes).forEach(node => {
-          node.classList.remove('disabled');
-        });
-      };
-    }
-  }, [disabled]);
   useEffect(() => {
     var _Object$keys;
 
@@ -860,14 +856,111 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       forTreeView: true,
       label: selectAllLabel,
       onChange: onSelectAll,
-      inputRef: selectAllRef
+      inputRef: selectAllRef,
+      stopPropagation: false,
+      disabled: disabled
     })), jsx(Divider, null)), jsx("div", {
       ref: ref,
       ...props,
       className: ['TreeView-Content', disabled ? 'disabled' : '', className].join(' ').trim().replace(/\s+/g, ' ')
-    }, disabledMap ? dataSource : mapParent(dataSource, id, parentID, true).map((data, index) => renderTreeView(data, index.toString(), 0, sync))));
-  }, [dataSource, value, multiple, selectBox, disabledBoldResult, autoExpandToResult, showChildrenOfResult, searchMode, onChange, searchProps]);
+    }, mapParent(dataSource, id, parentID, true).map((data, index) => renderTreeView(data, index.toString(), 0, sync))));
+  }, [dataSource, value, renderAsyncWithLength, disabled, showSelectedItems, allowSearch, multiple, selectAll, selectAllLabel, className, selectBox, id, parentID, disabledBoldResult, autoExpandToResult, showChildrenOfResult, searchMode, onChange, searchProps]);
 }));
+const TreeViewRootCSS = css`
+    ${displayBlock};
+    ${positionRelative};
+    .DGN-UI-Accordion {
+        box-shadow: none !important;
+        .DGN-UI-Accordion-Summary {
+            ${alignCenter};
+            min-height: 40px;
+            padding: 0;
+            border-radius: 0;
+            &.focus {
+                background-color: ${theme.colors.focus};
+            }
+            .Accordion-Icon-Root {
+                ${flexRow};
+                margin-right: 4px;
+            }
+        }
+        .DGN-UI-Accordion-Details-Content {
+            padding: 0;
+            border-radius: 0;
+        }
+        .Accordion-Icon-Root {
+            ${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: 0;
+        }
+    }
+    .TreeView-Item-Checkbox {
+        ${displayInlineBlock};
+        ${positionRelative};
+        height: 100%;
+        margin-right: 8px;
+    }
+    .TreeView-Item {
+        ${flexRow};
+        ${positionRelative};
+        ${alignCenter};
+        ${borderBox};
+        min-height: 40px;
+        text-align: left;
+        color: ${theme.colors.text.main};
+        width: 100%;
+        &.non-child {
+            ${cursorPointer};
+            transition: background-color 300ms ease;
+            &.disabled {
+                color: ${theme.colors.disabled};
+                cursor: no-drop;
+            }
+            &:not(.disabled) {
+                &:hover {
+                    background-color: ${fillHover};
+                }
+                &:focus {
+                    background-color: ${fillFocus};
+                }
+                &:active {
+                    background-color: ${fillPressed};
+                }
+            }
+            &.DGN-Hidden {
+                display: none !important;
+            }
+        }
+        &.focus {
+            background-color: ${theme.colors.focus};
+        }
+        &.TreeView-Item-active .DGN-UI-Typography {
+            font-weight: bold;
+        }
+    }
+    &.expand-able {
+        .TreeView-All {
+            margin-left: 34px;
+        }
+        .TreeView-Item.non-child {
+            padding-left: 34px;
+        }
+    }
+`;
 TreeView.defaultProps = {
   expand: false,
   disabled: false,
@@ -903,9 +996,6 @@ TreeView.propTypes = {
   /** prevent all event if true */
   disabled: PropTypes.bool,
 
-  /** Will not map parent from data */
-  disabledMap: PropTypes.bool,
-
   /** show checkbox in each item */
   selectBox: PropTypes.bool,
 
@@ -942,10 +1032,10 @@ TreeView.propTypes = {
   /** 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,
 
@@ -955,19 +1045,19 @@ TreeView.propTypes = {
   /** 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]),
 
@@ -983,20 +1073,20 @@ TreeView.propTypes = {
   /** 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,
 
@@ -1009,22 +1099,22 @@ TreeView.propTypes = {
   /** 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
 };

package/icons/basic.js

@@ -1342,6 +1342,54 @@ export const ChatBubble = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const Checkin = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M11 7L9.6 8.4L12.2 11H2V13H12.2L9.6 15.6L11 17L16 12L11 7ZM20 19H12V21H20C21.1 21 22 20.1 22 19V5C22 3.9 21.1 3 20 3H12V5H20V19Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 20,
+    height: height || 18,
+    viewBox: "0 0 20 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M9 4L7.6 5.4L10.2 8H0V10H10.2L7.6 12.6L9 14L14 9L9 4ZM18 16H10V18H18C19.1 18 20 17.1 20 16V2C20 0.9 19.1 0 18 0H10V2H18V16Z",
+    fill: colors[color] || color
+  }));
+});
+export const Checkout = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M17 7L15.59 8.41L18.17 11H8V13H18.17L15.59 15.58L17 17L22 12L17 7ZM4 5H12V3H4C2.9 3 2 3.9 2 5V19C2 20.1 2.9 21 4 21H12V19H4V5Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 20,
+    height: height || 18,
+    viewBox: "0 0 20 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M15 4L13.59 5.41L16.17 8H6V10H16.17L13.59 12.58L15 14L20 9L15 4ZM2 2H10V0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H10V16H2V2Z",
+    fill: colors[color] || color
+  }));
+});
 export const CheckList = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.55-beta.1",
+  "version": "1.3.57-beta.1",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/readme.md

@@ -38,6 +38,20 @@ npm test
 ```
 
 ## Changelog
+## 1.3.57
+- \[Added\]: MenuIcon – MHRM29N0005
+- \[Changed\]: MoneyInput – Update PagingSelector with new design
+- \[Fixed\]: Attachment – Fix bug not set overflow when close
+- \[Fixed\]: Alert, Notify – Fix bug not set overflow when close
+- \[Fixed\]: Datepicker – Fix bug not set overflow when close
+
+## 1.3.56
+- \[Changed\]: PagingSelector – Update PagingSelector with new design
+- \[Changed\]: NumberInput – Return e.valueString
+- \[Fixed\]: Modal – Fix bug not set overflow when close
+- \[Fixed\]: Dropdown – Replace keyExpr with renderSelectedItem; Fix clear icon show wrong when not use prop value
+- \[Fixed\]: Dropdown – Fix bug search, load more
+
 ## 1.3.55
 - \[Added\]: MenuIcon – MHRM09N1040
 - \[Added\]: Icon – CalendarAdd