diginet-core-ui 1.3.75 → 1.3.76

package/components/avatar/index.js

@@ -437,15 +437,15 @@ Avatar.propTypes = {
   /** If `true`, display remove avatar icon. */
   clearAble: PropTypes.bool,
 
-  /**
-   * data to display when hoverAble is true<br />
-   * data is an object or function return a jsx element
+  /**
+   * data to display when hoverAble is true<br />
+   * data is an object or function return a jsx element
    */
   data: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
 
-  /**
-   * it is used to display the default if there is no src<br />
-   * if undefined, will display icons available in the icons store
+  /**
+   * it is used to display the default if there is no src<br />
+   * if undefined, will display icons available in the icons store
    */
   defaultSrc: PropTypes.string,
 
@@ -500,19 +500,19 @@ Avatar.propTypes = {
   /** the error to show on wrong type */
   wrongTypeError: PropTypes.string,
 
-  /**
-   * ref methods
-   *
-   * * 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
+   *
+   * * 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/badge/index.js

@@ -213,11 +213,11 @@ Badge.propTypes = {
   /** other icon props when use prop name */
   iconProps: PropTypes.object,
 
-  /** size of Badge
-   *
-   * * medium (dot 8px, typography p3)
-   * * large (button 10px, typography p2)
-   * * giant (button 12px, typography p1)
+  /** size of Badge
+   *
+   * * medium (dot 8px, typography p3)
+   * * large (button 10px, typography p2)
+   * * giant (button 12px, typography p1)
    * */
   size: PropTypes.oneOf(['medium', 'large', 'giant']),
 

package/components/button/icon.js

@@ -376,14 +376,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']),
 
@@ -399,19 +399,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/button/index.js

@@ -491,19 +491,19 @@ Button.propTypes = {
   /** The variant to use. */
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'link']),
 
-  /**
-   * 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/attachment/index.js

@@ -1791,17 +1791,17 @@ Attachment.propTypes = {
   /** Class for component. */
   className: PropTypes.string,
 
-  /** List attachment:<br />
-   * [{<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
-   * }, ...]
+  /** List attachment:<br />
+   * [{<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
+   * }, ...]
    */
   data: PropTypes.array,
 
@@ -1844,16 +1844,16 @@ Attachment.propTypes = {
   /** Download attached event, if not it will use default. */
   onDownload: PropTypes.func,
 
-  /**
-   * event when removed file(s)
-   *
-   * return data: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
-   * }
+  /**
+   * event when removed file(s)
+   *
+   * return data: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
+   * }
    */
   onRemove: PropTypes.func,
 

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

@@ -5,8 +5,8 @@ import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useRef, useState, useImperativeHandle, Fragment } from 'react';
 import { Typography } from '../..';
-import { alignCenter, alignStart, borderBox, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative, cursorNoDrop, parseWidthHeight } from '../../../styles/general';
-import { randomString } from '../../../utils';
+import { alignCenter, alignStart, borderBox, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative, cursorNoDrop, parseWidthHeight, border } from '../../../styles/general';
+import { classNames, randomString, refType as ref } from '../../../utils';
 import { color as colors } from '../../../styles/colors';
 import theme from '../../../theme/settings';
 const {
@@ -29,26 +29,27 @@ const {
 } = theme;
 const padding = spacing(0.75);
 const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  id,
+  action = {},
+  checked,
+  children,
   className,
-  disabled,
-  readOnly,
-  name,
-  label,
   color,
-  value,
-  checked,
   defaultChecked,
   determinate,
-  onChange,
-  inputRef,
-  children,
-  inputProps,
+  disabled,
   forTreeView,
-  width,
+  id,
+  inputProps,
+  inputRef,
+  label,
   labelProps,
-  stopPropagation,
+  name,
+  onChange,
+  readOnly,
   required,
+  stopPropagation,
+  value,
+  width,
   ...props
 }, reference) => {
   if (!inputRef) {
@@ -82,11 +83,11 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     setChecked(checked !== undefined ? Boolean(checked) : !checkedState);
+    const currentInputRef = inputRef.current;
+    if (!forTreeView) inputRef.current.checked = !checkedState;
     const e = {
       value: forTreeView ? oldLogicChecked : !checkedState,
-      target: forTreeView ? inputRef.current : { ...inputRef.current,
-        checked: !checkedState
-      }
+      target: currentInputRef
     };
     if (onChange) onChange(e, checkedState);
   };
@@ -102,10 +103,12 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [checked]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
+    currentRef.element = ref.current;
     const _instance = {
       determinate: determinate,
       setChecked: setChecked,
-      getChecked: () => checkedState
+      getChecked: () => checkedState,
+      ...action
     }; // methods
 
     _instance.__proto__ = {}; // hidden methods
@@ -121,17 +124,17 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   return jsx("div", {
     id: 'DGN-UI-Checkbox-' + id.replace('DGN-UI-', ''),
     css: CheckboxContainerCSS,
-    className: ['DGN-UI-Checkbox', className].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames('DGN-UI-Checkbox', className),
     ref: ref,
     ...props,
     onClick: handleChange
   }, jsx("div", {
     css: CheckBoxRootCSS,
-    className: ['DGN-UI-Checkbox-Root', disabled ? 'disabled' : readOnly ? 'read-only' : ''].join(' ').trim().replace(/\s+/g, ' ')
+    className: classNames('DGN-UI-Checkbox-Root', disabled && 'disabled', readOnly && 'read-only')
   }, jsx("input", {
     value: value,
     ...inputProps,
-    className: [determinate ? 'determinate' : 'indeterminate', inputProps.className || ''].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames(determinate ? 'determinate' : 'indeterminate', inputProps === null || inputProps === void 0 ? void 0 : inputProps.className),
     readOnly: readOnly || inputProps.readOnly,
     disabled: disabled || inputProps.disabled,
     ref: inputRef,
@@ -145,7 +148,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }), jsx("label", {
     css: CheckBoxLabelCSS
   }, jsx("span", {
-    className: [determinate ? 'determinate' : 'indeterminate', readOnly ? 'read-only' : '', disabled ? 'disabled' : ''].join(' '),
+    className: classNames(determinate ? 'determinate' : 'indeterminate', readOnly && 'read-only', disabled && 'disabled'),
     css: _CheckBoxSquareCSS
   }), (children || label) && jsx(Typography, {
     type: 'p1',
@@ -167,35 +170,33 @@ const CheckBoxSquareCSS = (width, clMain) => css`
     ${cursorPointer};
     ${borderBox};
     ${parseWidthHeight(width, width)};
+    ${border(2, rest)};
     min-width: ${width};
     min-height: ${width};
     background-color: ${white};
-    border: 2px solid ${rest};
     border-radius: 2px;
     margin: ${padding}px;
     &.determinate {
         &::after {
             ${displayBlock};
             ${positionAbsolute};
+            ${parseWidthHeight(12.6, 7)};
             content: '';
-            height: 7px;
             left: 50%;
             top: 43%;
             transform: translate(-50%, -50%) scale(0) rotate(45deg);
             transition: transform 0.3s;
-            width: 12.6px;
         }
     }
     &.indeterminate {
         &::after {
             ${flexRow};
             ${positionAbsolute};
+            ${parseWidthHeight(10, 2)};
             content: '';
             background-color: white;
             left: 2px;
             top: 6px;
-            width: 10px;
-            height: 2px;
             transition: transform 0.3s;
             transform: scale(0);
         }
@@ -278,17 +279,17 @@ const CheckboxContainerCSS = css`
     width: fit-content;
 `;
 Checkbox.defaultProps = {
-  label: '',
   className: '',
   color: 'primary',
-  disabled: false,
-  readOnly: false,
   defaultChecked: false,
   determinate: true,
+  disabled: false,
   inputProps: {},
+  label: '',
   labelProps: {},
-  width: 18,
-  stopPropagation: true
+  readOnly: false,
+  stopPropagation: true,
+  width: 18
 };
 Checkbox.propTypes = {
   /** If `true`, the component is checked. */
@@ -315,6 +316,9 @@ Checkbox.propTypes = {
   /** [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. */
   inputProps: PropTypes.object,
 
+  /** Pass a ref to the input element. */
+  inputRef: ref,
+
   /** The name of the Radio is displayed on the interface. */
   label: PropTypes.string,
 
@@ -334,13 +338,13 @@ Checkbox.propTypes = {
   /** If `true`, the component is readonly. */
   readOnly: PropTypes.bool,
 
-  /** The width of checkbox. */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** If `true`, the label will indicate that the checkbox is required. */
+  required: PropTypes.bool,
 
   /** The value of input */
   value: PropTypes.any,
 
-  /** If `true`, the label will indicate that the checkbox is required. */
-  required: PropTypes.bool
+  /** The width of checkbox. */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 export default Checkbox;

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

@@ -536,10 +536,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     required: required,
     ...labelProps
   }, label), jsx(Tooltip, {
-    title: (ipRef === null || ipRef === void 0 ? void 0 : (_ipRef$current = ipRef.current) === null || _ipRef$current === void 0 ? void 0 : _ipRef$current.clientWidth) < 200 ? ipRef === null || ipRef === void 0 ? void 0 : (_ipRef$current2 = ipRef.current) === null || _ipRef$current2 === void 0 ? void 0 : _ipRef$current2.value : '',
-    style: {
-      width: 'none'
-    }
+    title: (ipRef === null || ipRef === void 0 ? void 0 : (_ipRef$current = ipRef.current) === null || _ipRef$current === void 0 ? void 0 : _ipRef$current.clientWidth) < 200 ? ipRef === null || ipRef === void 0 ? void 0 : (_ipRef$current2 = ipRef.current) === null || _ipRef$current2 === void 0 ? void 0 : _ipRef$current2.value : ''
   }, jsx(InputBase, {
     inputProps: {
       placeholder: !readOnly && !disabled ? placeholder : '',

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

@@ -463,8 +463,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--) {
@@ -477,8 +477,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         className: unique.day.day
       })));
     }
-    /**
-     * days of current month
+    /**
+     * days of current month
      */
 
 
@@ -492,8 +492,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

@@ -1574,8 +1574,10 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
                   content: '${placeholder}';
                   color: ${sub};
                   height: 100%;
-                  ${flexRow};
-                  ${alignCenter};
+                  ${overflowHidden}
+                  display: -webkit-box;
+                  -webkit-line-clamp: 1;
+                  -webkit-box-orient: vertical;
               }
               &::placeholder {
                   color: ${sub};
@@ -1629,8 +1631,10 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
                   content: '${placeholder}';
                   color: ${sub};
                   height: 100%;
-                  ${flexRow};
-                  ${alignCenter};
+                  ${overflowHidden}
+                  display: -webkit-box;
+                  -webkit-line-clamp: 1;
+                  -webkit-box-orient: vertical;
               }
               &::placeholder {
                   color: ${sub};
@@ -1850,14 +1854,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,
@@ -1872,9 +1876,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]),
 
@@ -1884,10 +1888,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]),
 
@@ -1954,19 +1958,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 or field name used for display selected items, 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,
 
@@ -1997,19 +2001,19 @@ Dropdown.propTypes = {
   /** If `true`, show multi-line selected item(s). */
   multilineSelectedItem: PropTypes.bool,
 
-  /**
-   * 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)