diginet-core-ui 1.3.36 → 1.3.38

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

@@ -41,8 +41,8 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       limit: 'DGN-UI-Calendar-Day-limit'
     }
   };
-  /**
-   * START REFERENCE
+  /**
+   * START REFERENCE
    */
 
   const ref = useRef(null);
@@ -61,12 +61,12 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const firstDayOfMax = new Date(new Date(max).setDate(1)).setHours(0, 0, 0, 0);
   const firstDayOfMin = new Date(new Date(min).setDate(1)).setHours(0, 0, 0, 0);
-  /**
-   * END REFERENCE
+  /**
+   * END REFERENCE
    */
 
-  /**
-   * START FUNCTION
+  /**
+   * START FUNCTION
    */
 
   const onUpdateNavigatorValue = useCallback(value => {
@@ -152,12 +152,12 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, onDayClick, onUpdateNavigatorValue);
     }
   };
-  /**
-   * END FUNCTION
+  /**
+   * END FUNCTION
    */
 
-  /**
-   * START EFFECT
+  /**
+   * START EFFECT
    */
 
 
@@ -198,12 +198,12 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onUpdate(activeValue.current);
     }
   }, [onClick, min, max]);
-  /**
-   * END FUNCTION
+  /**
+   * END FUNCTION
    */
 
-  /**
-   * START COMPONENT
+  /**
+   * START COMPONENT
    */
 
   const tableMemo = jsx("div", {
@@ -212,8 +212,8 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: unique.table.table,
     ref: tableRef
   }, renderHeader(unique), jsx("tbody", null)));
-  /**
-   * END COMPONENT
+  /**
+   * END COMPONENT
    */
 
   return jsx("div", { ...props,

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

@@ -318,11 +318,11 @@ Checkbox.propTypes = {
   /** The function will run to return a true or false value of Radio Component */
   onChange: PropTypes.func,
 
-  /**
-   * ref methods
-  * 
-   * * setChecked: Set check for input
-   * * getChecked: Get check of input
+  /**
+   * ref methods
+  * 
+   * * setChecked: Set check for input
+   * * getChecked: Get check of input
    */
   ref: PropTypes.any
 };

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

@@ -14,6 +14,10 @@ import { ButtonIcon, HelperText, InputBase, Label } from '../../index';
 import Button from '../../button';
 import Tooltip from '../../tooltip';
 import { isValidDate } from '../calendar/function';
+import { useTheme } from '../../../theme';
+const {
+  zIndex
+} = useTheme();
 const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   actionIconAt,
   clearAble,
@@ -116,7 +120,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     display: 'block'
   };
   const pickerCSS = {
-    backGr: 'background-color: transparent; inset: 0px; pointer-events: auto; position: fixed; z-index: 9001;',
+    backGr: `background-color: transparent; inset: 0px; pointer-events: auto; position: fixed; z-index: ${zIndex(1)};`,
     picker: (position, left, width) => css`
                     background-color: ${theme.colors.white};
                     border-radius: ${theme.border.radius};
@@ -132,7 +136,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
                         transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                     width: ${width}px;
-                    z-index: 9002;
+                    z-index: ${zIndex(2)};
                 `,
     active: {
       opacity: 1,
@@ -399,7 +403,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     if (!el.classList.contains(unique.focus)) {
       el.classList.add(unique.focus);
-      el.style.zIndex = 9001;
+      el.style.zIndex = zIndex(2);
       openPicker();
     }
   };

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

@@ -12,6 +12,10 @@ import { randomString, updatePosition, date as moment, capitalizeSentenceCase, i
 import { getGlobal } from '../../../global';
 import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from '../calendar/function';
 import locale from '../../../locale';
+import { useTheme } from '../../../theme';
+const {
+  zIndex
+} = useTheme();
 const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   actionIconAt,
   controls,
@@ -224,7 +228,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         visibility: hidden;
                         white-space: nowrap;
                         will-change: left top visibility;
-                        z-index: 9003;
+                        z-index: ${zIndex(3)};
                     }
                     @media only screen and (max-width: 599px) {
                         max-width: 400px;
@@ -253,7 +257,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
                         transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                     width: ${width}px;
-                    z-index: 9002;
+                    z-index: ${zIndex(2)};
                 `,
     active: {
       opacity: 1,
@@ -458,8 +462,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         tableData = [],
         weekDateFirst = getDateOfWeek(firstDay),
         weekDateLast = getDateOfWeek(lastDay);
-    /**
-     * days of previous month
+    /**
+     * days of previous month
      */
 
     for (let i = weekDateFirst; i > 0; i--) {
@@ -472,8 +476,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         className: unique.day.day
       })));
     }
-    /**
-     * days of current month
+    /**
+     * days of current month
      */
 
 
@@ -487,8 +491,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }, jsx(Typography, { ...typographyProps(unique.day.day)
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * days of next month
      */
 
 

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

@@ -8,13 +8,17 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { Account } from '../../../icons';
 import AvatarDefault from '../../../assets/avatar/default.svg';
-import { InputBase, Chip, CircularProgress, Checkbox, TreeView, HelperText, Label, ButtonIcon } from '../../';
+import { InputBase, Chip, CircularProgress, Checkbox, TreeView, HelperText, Label, ButtonIcon, Typography } from '../../';
 import { mapParent, randomString, updatePosition } from '../../../utils';
 import { getGlobal } from '../../../global';
 import { color as colors } from '../../../styles/colors';
 import { typography } from '../../../styles/typography';
 import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, breakWord, cursorPointer, displayBlock, flexRow, flexWrap, inlineFlex, justifyCenter, justifyStart, outlineNone, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../../styles/general';
 import isMobile from '../../../utils/isMobile';
+import { useTheme } from '../../../theme';
+const {
+  zIndex
+} = useTheme();
 const {
   paragraph1,
   paragraph3
@@ -88,6 +92,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onInput,
   onChange,
   onLoadMore,
+  onClosed,
   renderItem,
   renderSelectedItem,
   valueObjectDefault,
@@ -97,10 +102,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   formStyle,
   labelProps,
   errorStyle,
-  refs,
   children,
   dropdownItemStyle
-}, ref) => {
+}, reference) => {
   const dropdownRef = useRef(null);
   const timerRef = useRef(null);
   const formRef = useRef(null);
@@ -115,7 +119,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allowSymbol: false
   }));
   const [openState, setOpenState] = useState(false);
-  const [errorState, setErrorState] = useState(error && !valueProp && valueProp !== 0);
   const [showClear, setShowClear] = useState(false);
 
   const _isMobile = isMobile.any();
@@ -230,7 +233,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       left: `${left}px`,
       width: `${width}px`,
       backgroundColor: '#FFF',
-      zIndex: 9001
+      zIndex: zIndex(1)
     };
     if (_isMobile && allowSearch) dropdownStyle = { ...dropdownStyle,
       bottom: 0,
@@ -249,7 +252,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       height: '100%',
       backgroundColor: 'rgba(255, 255, 255, 0.6)',
       borderRadius: 4,
-      zIndex: 9002
+      zIndex: zIndex(2)
     };
     const defaultSearch = lastSearchRef.current || (onInput ? (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.value : '');
     const el = jsx("div", {
@@ -377,6 +380,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     document.documentElement.style.overflow = 'auto';
+    onClosed === null || onClosed === void 0 ? void 0 : onClosed();
   };
 
   const renderDropdown = pattern => {
@@ -838,10 +842,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
               startIcon: icon,
               label: displayText,
               size: itemMultipleSize,
+              disabled: disabled,
               clearAble: true,
               onRemove: e => onRemove(e, value),
               style: {
-                margin: '3px 0'
+                margin: '3px 0',
+                width: '100%'
               }
             });
           }
@@ -1049,10 +1055,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         startIcon: icon,
         label: text,
         size: itemMultipleSize,
+        disabled: disabled,
         clearAble: true,
         onRemove: e => onRemove(e, value),
         style: {
-          margin: '3px 0'
+          margin: '3px 0',
+          width: '100%'
         }
       });
     }
@@ -1081,8 +1089,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const icon = getIconFromData(data);
       const valueWithIcon = jsx(Fragment, null, icon && jsx("div", {
         css: DropdownIconCSS
-      }, icon), jsx("div", {
-        css: DropdownTextCSS
+      }, icon), jsx(Typography, {
+        type: 'p1',
+        lineClamp: 1,
+        hoverTooltip: !_isMobile
       }, text));
       const el = document.createElement('div');
       el.style.cssText = 'display: flex; align-items: center; min-height:24px;';
@@ -1092,17 +1102,43 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  useImperativeHandle(ref, () => ({
-    closeDropdown: () => {
-      closeDropdown();
-    },
-    showDropdown: () => {
-      showDropdown();
-    },
-    onClear,
-    setPreviousValue,
-    DOM: dropdownRef.current
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = dropdownRef.current || {};
+    const _instance = {
+      closeDropdown: () => {
+        closeDropdown();
+      },
+      showDropdown: () => {
+        showDropdown();
+      },
+      onClear,
+      setPreviousValue,
+      setValue: value => {
+        if (allValue[unique][allValue[unique].length - 1] !== value) {
+          allValue[unique].push(value);
+        }
+
+        setValueIntoInput(value);
+      }
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance; // keep old method
+
+    currentRef.closeDropdown = () => closeDropdown();
+
+    currentRef.showDropdown = () => showDropdown();
+
+    currentRef.onClear = onClear, currentRef.setPreviousValue = setPreviousValue, currentRef.setValue = value => {
+      if (allValue[unique][allValue[unique].length - 1] !== value) {
+        allValue[unique].push(value);
+      }
+
+      setValueIntoInput(value);
+    }, currentRef.DOM = dropdownRef.current;
+    return currentRef;
+  });
   useEffect(() => {
     setShowClear(clearAble && checkHasValue(valueProp) && !disabled && !readOnly && !loading);
   }, [clearAble, valueProp, disabled, readOnly, loading]);
@@ -1122,7 +1158,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     };
   }, [valueObjectDefault]);
   useEffect(() => {
-    !!refs && refs(dropdownRef);
     allValue[unique] = [];
 
     if (defaultValue !== undefined && JSON.stringify(defaultValue) !== '[]') {
@@ -1186,9 +1221,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       };
     }
   }, [loading]);
-  useEffect(() => {
-    setErrorState(error && (!valueProp && valueProp !== 0 || (valueProp === null || valueProp === void 0 ? void 0 : valueProp.length) === 0));
-  }, [error, valueProp]);
   useEffect(() => {
     if (valueProp !== undefined && (!boxRef.current || children || JSON.stringify(valueProp) !== JSON.stringify(currentValue[unique]))) {
       setValueIntoInput(valueProp);
@@ -1295,7 +1327,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const inputComp = useMemo(() => {
     const _InputCSS = InputCSS(multiple, renderSelectedItem, clearAble);
 
-    const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem);
+    const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, disabled);
 
     const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem);
 
@@ -1305,7 +1337,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: ['DGN-UI-Dropdown-Form', openState && 'dropdown-showing'].join(' ').trim().replace(/\s+/g, ' '),
       style: formStyle
     }, jsx("div", {
-      css: _InputCSS
+      css: _InputCSS,
+      className: 'DGN-UI-Dropdown-Form-Input'
     }, multiple ? jsx("div", { ...inputProps,
       style: {
         cursor: 'text',
@@ -1337,7 +1370,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: inputRef,
       css: _DropdownInputCSS,
       type: "text",
-      placeholder: placeholder
+      placeholder: placeholder,
+      disabled: disabled
     })), jsx("div", {
       ref: iconRef,
       css: IconCSS(viewType, loading, showClear),
@@ -1363,7 +1397,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       disabled: disabled || readOnly
     })));
   }, [viewType, inputProps, inputStyle, multiple, clearAble, onChange, disabled, readOnly, loading, renderSelectedItem, placeholder, itemMultipleSize, openState, showClear]);
-  const errorComp = useMemo(() => errorState && jsx(HelperText, {
+  const errorComp = useMemo(() => error && jsx(HelperText, {
     disabled: disabled,
     style: {
       minHeight: '16px',
@@ -1371,13 +1405,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       top: '100%',
       ...errorStyle
     }
-  }, error), [error, valueProp, disabled, errorStyle, errorState]);
+  }, error), [error, disabled, errorStyle]);
   /* End component */
 
   return jsx(Fragment, null, jsx("div", {
     ref: dropdownRef,
     css: DropdownRootCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, loading, showClear),
-    className: ['DGN-UI-Dropdown', className, errorState && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly'].join(' ').trim().replace(/\s+/g, ' '),
+    className: ['DGN-UI-Dropdown', className, error && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly'].join(' ').trim().replace(/\s+/g, ' '),
     style: style
   }, labelComp, inputComp, errorComp), openState ? /*#__PURE__*/createPortal(showDropdown(), document.body) : null);
 }));
@@ -1385,7 +1419,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
 const InputCSS = (multiple, renderSelectedItem, clearAble) => css`
     ${flexRow};
-    flex: 1 1 auto;
+    width: 100%;
     ${!multiple && renderSelectedItem ? `width: calc(100% - 34px${clearAble ? ' - 18px' : ''})` : ''}
 `;
 
@@ -1397,11 +1431,15 @@ const DropdownIconCSS = css`
     height: inherit;
     margin-right: 8px;
     height: 32px;
+    min-height: 32px;
     width: 32px;
+    min-width: 32px;
     border-radius: 16px;
     img {
         height: 32px;
+        min-height: 32px;
         width: 32px;
+        min-width: 32px;
         object-fit: cover;
     }
 `;
@@ -1423,8 +1461,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
         ${flexWrap};
         ${overflowHidden};
         ${breakWord};
-        /* max-height: max-content; */
-        ${!multiple ? 'min-height: 24px; max-width: 100%; white-space: nowrap;' : ''}
+        ${!multiple ? 'min-height: 24px; max-width: 100%;' : ''}
         &::after {
             ${flexRow};
             ${positionAbsolute};
@@ -1455,10 +1492,14 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
             min-width: 24px;
             ` : `
             height: 24px;
+            min-height: 24px;
             width: 24px;
+            min-width: 24px;
             img {
                 height: 24px;
+                min-height: 24px;
                 width: 24px;
+                min-width: 24px;
             }
             `}
     }
@@ -1479,22 +1520,25 @@ const IconCSS = (viewType, loading, showClear) => css`
     }
 `;
 
-const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem) => viewType !== 'outlined' ? css`
+const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, disabled) => viewType !== 'outlined' ? css`
               ${flexRow};
               ${alignCenter};
               ${positionRelative};
               ${borderBox};
-              flex: 1 1 auto;
+              width: 100%;
               padding-bottom: ${multiple ? 1 : 4}px;
               padding-top: ${multiple ? 1 : 4}px;
-              &:not(:focus-within):hover {
-                  &::before {
-                      border-bottom-color: ${active};
-                  }
-                  .css-${DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
-                      color: ${active};
-                  }
+              ${!disabled && `
+                    &:not(:focus-within):hover {
+                        &::before {
+                            border-bottom-color: ${active};
+                        }
+                        .css-${DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
+                            color: ${active};
+                    }
               }
+              `}
+
               &:focus-within {
                   border-bottom-color: ${focus};
                   &::after {
@@ -1539,15 +1583,17 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
               ${borderRadius4px};
               ${borderBox};
               ${border(1, rest)};
-              flex: 1 1 auto;
+              width: 100%;
               min-height: 40px;
-              &:not(:focus-within):hover {
-                  background-color: ${hover};
-                  border-color: ${active};
-                  input {
-                      background-color: ${hover};
-                  }
-              }
+              ${!disabled && `
+                &:not(:focus-within):hover {
+                    background-color: ${hover};
+                    border-color: ${active};
+                    input {
+                        background-color: ${hover};
+                    }
+                }
+              `}
               &:focus-within {
                   border-color: ${focus};
               }
@@ -1582,7 +1628,7 @@ const DropdownBoxCSS = css`
     overflow: auto;
     background-color: ${white};
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-    z-index: 9001;
+    z-index: ${zIndex(1)};
     &::-webkit-scrollbar {
         ${borderRadius4px};
         width: 24px;
@@ -1644,7 +1690,6 @@ const DropdownRootCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
     ${displayBlock};
     ${positionRelative};
     margin-bottom: 20px;
-    /* min-width: 150px; */
     height: max-content;
     &.error {
         .css-${DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
@@ -1659,8 +1704,6 @@ const DropdownRootCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
     }
     &.dgn-dropdown-loading,
     &.disabled {
-        ${pointerEventsNone};
-        ${userSelectNone};
         .css-${DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
             border-color: ${systemDisabled};
             .css-${IconCSS(viewType, loading, showClear).name} {
@@ -1754,14 +1797,14 @@ Dropdown.propTypes = {
   /** display this icon 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,
@@ -1779,9 +1822,9 @@ Dropdown.propTypes = {
   /** field name used for text display in input */
   keyExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
-  /** field name used for text display<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** 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.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
@@ -1791,9 +1834,9 @@ 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
+  /**
+   * 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]),
 
@@ -1860,22 +1903,19 @@ Dropdown.propTypes = {
   /** The array of elements that appear in the dropdown */
   dataSource: PropTypes.array,
 
-  /** The function to get ref of Dropdown component */
-  refs: PropTypes.func,
-
-  /** 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/>
-   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** function displays selected items by custom, example:<br/>
+   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.func,
 
-  /** the function will run when entering input<br/>
-   * if undefined: the filter function will run (default)
+  /** the function will run when entering input<br/>
+   * if undefined: the filter function will run (default)
    */
   onInput: PropTypes.func,
 
@@ -1888,10 +1928,28 @@ Dropdown.propTypes = {
   /** the function will run when scroll near the end */
   onLoadMore: PropTypes.func,
 
+  /** the function will run when dropdown closed */
+  onClosed: PropTypes.func,
+
   /** the contents in Dropdown box (Exp: TreeView) */
   children: PropTypes.node,
 
-  /** any props else */
-  props: PropTypes.any
+  /**
+   * 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)
+  })])
 };
 export default Dropdown;