diginet-core-ui 1.3.66 → 1.3.67

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

@@ -31,15 +31,15 @@ const {
   danger8,
   info8
 } = colors;
-/**
- * START STYLE
+/**
+ * START STYLE
  */
 
-/**
- *
- * @param {Object} unique
- * @param {Boolean} boxShadow
- * @returns
+/**
+ *
+ * @param {Object} unique
+ * @param {Boolean} boxShadow
+ * @returns
  */
 
 const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) => css`
@@ -243,15 +243,15 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
         }
     }
 `;
-/**
- * END STYLE
+/**
+ * END STYLE
  */
 
-/**
- *
- * @description return props of the typography.
- * @param {String} className
- * @returns {Object} props of the typography
+/**
+ *
+ * @description return props of the typography.
+ * @param {String} className
+ * @returns {Object} props of the typography
  */
 
 
@@ -272,11 +272,11 @@ const typographyProps = className => {
     type: 'h6'
   };
 };
-/**
- *
- * @description return props of the button icon.
- * @param {String} className
- * @returns {Object} props of the button icon
+/**
+ *
+ * @description return props of the button icon.
+ * @param {String} className
+ * @returns {Object} props of the button icon
  */
 
 
@@ -290,11 +290,11 @@ const buttonIconProps = className => {
     width: 28
   };
 };
-/**
- *
- * @description return props of the button icon.
- * @param {Function} fn
- * @returns {Object} props of the button text
+/**
+ *
+ * @description return props of the button icon.
+ * @param {Function} fn
+ * @returns {Object} props of the button text
  */
 
 
@@ -311,21 +311,21 @@ const buttonTextProps = fn => {
     }
   };
 };
-/**
- * @description detect value is a Date object
- * @param {String | Number | Array} value
- * @returns boolean
+/**
+ * @description detect value is a Date object
+ * @param {String | Number | Array} value
+ * @returns boolean
  */
 
 
 const isValidDate = value => {
   return new Date(value) instanceof Date && !isNaN(new Date(value));
 };
-/**
- *
- * @description set Sunday (0) to the last day of week.
- * @param {Date} date
- * @returns number of day from 0 (Monday) to 6 (Sunday).
+/**
+ *
+ * @description set Sunday (0) to the last day of week.
+ * @param {Date} date
+ * @returns number of day from 0 (Monday) to 6 (Sunday).
  */
 
 
@@ -334,26 +334,26 @@ const getDateOfWeek = date => {
   if (day === 0) day = 7;
   return day - 1;
 };
-/**
- *
- * @description check day is today.
- * @param {Date} day
- * @param {Date} today
- * @param {String} className
- * @returns {Boolean} is today
+/**
+ *
+ * @description check day is today.
+ * @param {Date} day
+ * @param {Date} today
+ * @param {String} className
+ * @returns {Boolean} is today
  */
 
 
 const isToday = (day, today, className) => {
   return +moment(day).diff(today) === 0 ? className : '';
 };
-/**
- *
- * @description check day is active day.
- * @param {Date} day
- * @param {Date} active
- * @param {String} className
- * @returns {Boolean} is active day
+/**
+ *
+ * @description check day is active day.
+ * @param {Date} day
+ * @param {Date} active
+ * @param {String} className
+ * @returns {Boolean} is active day
  */
 
 
@@ -370,14 +370,14 @@ const isActive = (day, active, className) => {
 
   return '';
 };
-/**
- *
- * @description check day is min/max day.
- * @param {Date} day
- * @param {Date} max
- * @param {Date} min
- * @param {Object} className
- * @returns {Boolean} is limited day
+/**
+ *
+ * @description check day is min/max day.
+ * @param {Date} day
+ * @param {Date} max
+ * @param {Date} min
+ * @param {Object} className
+ * @returns {Boolean} is limited day
  */
 
 
@@ -408,17 +408,17 @@ const isBeforeLimit = (min, time) => {
 const isAfterLimit = (max, time) => {
   return max && isValidDate(max) && moment(time).diff(new Date(max).setHours(0, 0, 0, 0)) > 0;
 };
-/**
- *
- * @description return the table body of the calendar.
- * @param {Date} time
- * @param {Date} activeValue
- * @param {Object} className
- * @param {Boolean} displayAnotherMonth
- * @param {Function} onTableDataClick
- * @param {Date} min
- * @param {Date} max
- * @returns {Element}
+/**
+ *
+ * @description return the table body of the calendar.
+ * @param {Date} time
+ * @param {Date} activeValue
+ * @param {Object} className
+ * @param {Boolean} displayAnotherMonth
+ * @param {Function} onTableDataClick
+ * @param {Date} min
+ * @param {Date} max
+ * @returns {Element}
  */
 
 
@@ -438,8 +438,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       weekDateLast = getDateOfWeek(lastDay);
 
   if (activeValue && Array.isArray(activeValue) && activeValue.length === 2 && activeValue[0] !== activeValue[1]) {
-    /**
-     * days of previous month
+    /**
+     * days of previous month
      */
     active = activeValue;
 
@@ -455,8 +455,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       }, jsx(Typography, { ...typographyProps(className.day.day)
       }, '')));
     }
-    /**
-     * days of this month
+    /**
+     * days of this month
      */
 
 
@@ -470,8 +470,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       }, jsx(Typography, { ...typographyProps(className.day.day)
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * days of next month
      */
 
 
@@ -488,8 +488,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       }, '')));
     }
   } else {
-    /**
-     * days of previous month
+    /**
+     * days of previous month
      */
     for (let i = weekDateFirst; i > 0; i--) {
       const day = new Date(time.getFullYear(), time.getMonth() - 1, displayAnotherMonth ? prevDate - i + 1 : 1);
@@ -501,8 +501,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       }, jsx(Typography, { ...typographyProps(className.day.day)
       }, displayAnotherMonth ? prevDate - i + 1 : '')));
     }
-    /**
-     * days of this month
+    /**
+     * days of this month
      */
 
 
@@ -516,8 +516,8 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
       }, jsx(Typography, { ...typographyProps(className.day.day)
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * days of next month
      */
 
 
@@ -547,10 +547,10 @@ const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTa
 
   return tableBody;
 };
-/**
- *
- * @param {Object} className
- * @returns
+/**
+ *
+ * @param {Object} className
+ * @returns
  */
 
 
@@ -573,15 +573,15 @@ const renderHeader = className => {
   }, tableHeader));
   return header;
 };
-/**
- *
- * @param {Object} className
- * @param {Object} refs
- * @param {Function} dbLeftFn
- * @param {Function} leftFn
- * @param {Function} rightFn
- * @param {Function} dbRightFn
- * @returns navigator
+/**
+ *
+ * @param {Object} className
+ * @param {Object} refs
+ * @param {Function} dbLeftFn
+ * @param {Function} leftFn
+ * @param {Function} rightFn
+ * @param {Function} dbRightFn
+ * @returns navigator
  */
 
 
@@ -615,10 +615,10 @@ const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn,
   onClick: dbRightFn,
   ref: refs.doubleRight
 })));
-/**
- *
- * @param {Date} time
- * @returns {String} month year
+/**
+ *
+ * @param {Date} time
+ * @returns {String} month year
  */
 
 
@@ -627,16 +627,18 @@ const renderNavigatorContent = time => {
   const months = getGlobal(['months', 'full']);
   return [months[value.getMonth()], value.getFullYear()];
 };
-/**
- *
- * @param {Date} time
- * @param {Object} refs
- * @param {Date} min
- * @param {Date} max
+/**
+ *
+ * @param {Date} time
+ * @param {Object} refs
+ * @param {Date} min
+ * @param {Date} max
  */
 
 
 const onUpdateNavigator = (time, refs, min, max) => {
+  var _refs$doubleLeft$curr, _refs$doubleLeft$curr2, _refs$doubleRight$cur, _refs$doubleRight$cur2, _refs$left$current, _refs$left$current$in, _refs$right$current, _refs$right$current$i;
+
   const el = refs.content.current;
   const vl = renderNavigatorContent(time);
   const year = locale.get() === 'vi' ? ` ${getGlobal(['year'])} ` : '';
@@ -647,45 +649,53 @@ const onUpdateNavigator = (time, refs, min, max) => {
 
   const firstDayOfMin = new Date(new Date(new Date(min).setDate(1)).setHours(0, 0, 0, 0));
   const firstDayOfMax = new Date(new Date(new Date(max).setDate(1)).setHours(0, 0, 0, 0));
-  refs.doubleLeft.current.disabled = false;
-  refs.doubleRight.current.disabled = false;
-  refs.left.current.disabled = false;
-  refs.right.current.disabled = false;
+  (_refs$doubleLeft$curr = refs.doubleLeft.current) === null || _refs$doubleLeft$curr === void 0 ? void 0 : (_refs$doubleLeft$curr2 = _refs$doubleLeft$curr.instance) === null || _refs$doubleLeft$curr2 === void 0 ? void 0 : _refs$doubleLeft$curr2.option('disabled', false);
+  (_refs$doubleRight$cur = refs.doubleRight.current) === null || _refs$doubleRight$cur === void 0 ? void 0 : (_refs$doubleRight$cur2 = _refs$doubleRight$cur.instance) === null || _refs$doubleRight$cur2 === void 0 ? void 0 : _refs$doubleRight$cur2.option('disabled', false);
+  (_refs$left$current = refs.left.current) === null || _refs$left$current === void 0 ? void 0 : (_refs$left$current$in = _refs$left$current.instance) === null || _refs$left$current$in === void 0 ? void 0 : _refs$left$current$in.option('disabled', false);
+  (_refs$right$current = refs.right.current) === null || _refs$right$current === void 0 ? void 0 : (_refs$right$current$i = _refs$right$current.instance) === null || _refs$right$current$i === void 0 ? void 0 : _refs$right$current$i.option('disabled', false);
 
   if (min && isValidDate(min)) {
     if (moment(time).diff(firstDayOfMin) < 365) {
-      refs.doubleLeft.current.disabled = true;
+      var _refs$doubleLeft$curr3, _refs$doubleLeft$curr4;
+
+      (_refs$doubleLeft$curr3 = refs.doubleLeft.current) === null || _refs$doubleLeft$curr3 === void 0 ? void 0 : (_refs$doubleLeft$curr4 = _refs$doubleLeft$curr3.instance) === null || _refs$doubleLeft$curr4 === void 0 ? void 0 : _refs$doubleLeft$curr4.option('disabled', true);
     }
 
     if (moment(time).diff(firstDayOfMin) <= 28) {
-      refs.doubleLeft.current.disabled = true;
-      refs.left.current.disabled = true;
+      var _refs$doubleLeft$curr5, _refs$doubleLeft$curr6, _refs$left$current2, _refs$left$current2$i;
+
+      (_refs$doubleLeft$curr5 = refs.doubleLeft.current) === null || _refs$doubleLeft$curr5 === void 0 ? void 0 : (_refs$doubleLeft$curr6 = _refs$doubleLeft$curr5.instance) === null || _refs$doubleLeft$curr6 === void 0 ? void 0 : _refs$doubleLeft$curr6.option('disabled', true);
+      (_refs$left$current2 = refs.left.current) === null || _refs$left$current2 === void 0 ? void 0 : (_refs$left$current2$i = _refs$left$current2.instance) === null || _refs$left$current2$i === void 0 ? void 0 : _refs$left$current2$i.option('disabled', true);
     }
   }
 
   if (max && isValidDate(max)) {
     if (moment(time).diff(firstDayOfMax) > -334) {
-      refs.doubleRight.current.disabled = true;
+      var _refs$doubleRight$cur3, _refs$doubleRight$cur4;
+
+      (_refs$doubleRight$cur3 = refs.doubleRight.current) === null || _refs$doubleRight$cur3 === void 0 ? void 0 : (_refs$doubleRight$cur4 = _refs$doubleRight$cur3.instance) === null || _refs$doubleRight$cur4 === void 0 ? void 0 : _refs$doubleRight$cur4.option('disabled', true);
     }
 
     if (moment(time).diff(firstDayOfMax) > -1) {
-      refs.doubleRight.current.disabled = true;
-      refs.right.current.disabled = true;
+      var _refs$doubleRight$cur5, _refs$doubleRight$cur6, _refs$right$current2, _refs$right$current2$;
+
+      (_refs$doubleRight$cur5 = refs.doubleRight.current) === null || _refs$doubleRight$cur5 === void 0 ? void 0 : (_refs$doubleRight$cur6 = _refs$doubleRight$cur5.instance) === null || _refs$doubleRight$cur6 === void 0 ? void 0 : _refs$doubleRight$cur6.option('disabled', true);
+      (_refs$right$current2 = refs.right.current) === null || _refs$right$current2 === void 0 ? void 0 : (_refs$right$current2$ = _refs$right$current2.instance) === null || _refs$right$current2$ === void 0 ? void 0 : _refs$right$current2$.option('disabled', true);
     }
   }
 };
-/**
- *
- * @param {Date} time
- * @param {Object} navigatorRefs
- * @param {Date} min
- * @param {Date} max
- * @param {Element} table
- * @param {Date} activeValue
- * @param {Object} className
- * @param {Boolean} displayAnotherMonth
- * @param {Function} onTableDataClick
- * @param {Function} onUpdateNavigatorValue
+/**
+ *
+ * @param {Date} time
+ * @param {Object} navigatorRefs
+ * @param {Date} min
+ * @param {Date} max
+ * @param {Element} table
+ * @param {Date} activeValue
+ * @param {Object} className
+ * @param {Boolean} displayAnotherMonth
+ * @param {Function} onTableDataClick
+ * @param {Function} onUpdateNavigatorValue
  */
 
 

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/dropdown/index.js

@@ -101,9 +101,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   labelProps,
   errorStyle,
   children,
-  dropdownItemStyle
+  dropdownItemStyle,
+  searchExpr,
+  searchMode
 }, reference) => {
   if (multiple && selectBox === undefined) selectBox = true;
+  if (typeof searchExpr === 'string') searchExpr = [searchExpr];
   const ref = useRef(null);
   const dropdownRef = useRef(null);
   const loadingProgressRef = useRef(null);
@@ -122,6 +125,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }));
   const [openState, setOpenState] = useState(false);
   const [showClear, setShowClear] = useState(false);
+  const [textValue, setTextValue] = useState('');
 
   const _isMobile = isMobile.any();
 
@@ -169,6 +173,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onClickInput = e => {
+    if (disabled || readOnly || loading) return;
+
     if (!dropdownListRef.current) {
       if (!multiple || !Array.from(inputRef.current.querySelectorAll('.DGN-UI-Chip')).some(item => item.contains(e === null || e === void 0 ? void 0 : e.target))) {
         if ((typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none') && !multiple) {
@@ -231,7 +237,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const dropdownHeight = Math.min(Math.max(1, (itemMode === 'normal' ? dropdown.props.children : mapParent(dataSource, treeViewID, treeViewParentID)).length || 1), 7) * 40 + (multiple ? 43 : 0);
     let positionTop = top + height + 4;
 
-    if (top + height + 4 + dropdownHeight > innerHeight) {
+    if (top + height + 4 + dropdownHeight + (allowSearch ? 40 : 0) > innerHeight) {
       if (top - dropdownHeight > 0) {
         positionTop = top - dropdownHeight;
       } else {
@@ -387,6 +393,29 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
+  const handleRenderBySearch = (data, searchValue) => {
+    let existExpr = [];
+    typeof data === 'object' ? existExpr = searchExpr.filter(value => Object.keys(data).includes(value)) : existExpr = [data];
+    return existExpr.every(key => {
+      // return searchByMode(data?.[key] || key.toString(), searchValue);
+      const _data = (data === null || data === void 0 ? void 0 : data[key]) || key.toString();
+
+      if (searchMode === 'contains') {
+        if (_data.indexOf(searchValue) !== -1) return false;
+      }
+
+      if (searchMode === 'startswith') {
+        if (_data.lastIndexOf(searchValue) === 0) return false;
+      }
+
+      if (searchMode === 'equals') {
+        if (_data == searchValue) return false;
+      }
+
+      return true;
+    });
+  };
+
   const mapDropdown = (pattern, keyArr) => {
     var _currentObjectDefault;
 
@@ -414,9 +443,16 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const length = dataSourceUsable.length;
 
     for (let index = 0; index < length; index++) {
+      var _searchExpr;
+
       const data = dataSourceUsable[index];
+      const itemHidden = typeof data === 'object' ? data['hidden'] : false;
+      if (itemHidden) continue;
       let displayText = typeof data === 'object' ? keyArr ? renderData(data, keyArr) : data[displayExpr] || data[valueExpr] : data;
-      if (pattern && !new RegExp(pattern).test(displayText.normalize())) continue;
+
+      if (((_searchExpr = searchExpr) === null || _searchExpr === void 0 ? void 0 : _searchExpr.length) > 0 && pattern) {
+        if (handleRenderBySearch(data, pattern)) continue;
+      } else if (pattern && !new RegExp(pattern).test(displayText.normalize())) continue;
 
       if (renderItem && typeof renderItem === 'function') {
         displayText = renderItem({
@@ -785,11 +821,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     if (timing[unique]) clearTimeout(timing[unique]);
     timing[unique] = setTimeout(() => {
+      var _searchExpr2;
+
       // if (timerRef.current) {
       //     clearTimeout(timerRef.current);
       //     timerRef.current = null;
       // }
-      renderDropdown(new RegExp(value.normalize(), 'gim'));
+      renderDropdown(((_searchExpr2 = searchExpr) === null || _searchExpr2 === void 0 ? void 0 : _searchExpr2.length) > 0 ? value.normalize() : new RegExp(value.normalize(), 'gim'));
     }, timeout.current || searchDelayTime);
   };
 
@@ -931,6 +969,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     } else {
       inputRef.current.value = '';
+      setTextValue('');
     } // onChangeValue('', '');
 
 
@@ -962,6 +1001,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           inputRef.current.innerHTML = '';
         } else if (!isSearch[unique]) {
           inputRef.current.value = '';
+          setTextValue('');
         }
 
         currentValue[unique] = '';
@@ -1093,6 +1133,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ReactDOM.render(valueWithIcon, inputRef.current.appendChild(el));
     } else {
       inputRef.current.value = text;
+      setTextValue(text);
     }
   };
 
@@ -1325,14 +1366,26 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           return false;
         }
       }
-    }) : jsx("input", { ...inputProps,
-      style: inputStyle,
+    }) : jsx(Fragment, null, jsx("input", { ...inputProps,
+      style: openState || !textValue ? inputStyle : { ...inputStyle,
+        visibility: 'hidden'
+      },
       ref: inputRef,
       css: _DropdownInputCSS,
       type: "text",
       placeholder: placeholder,
-      disabled: disabled || openState && allowSearch
-    })), jsx("div", {
+      disabled: disabled || allowSearch
+    }), !openState && textValue && jsx(Typography, {
+      hoverTooltip: true,
+      lineClamp: 1,
+      type: 'p1',
+      css: _DropdownInputCSS,
+      style: {
+        position: 'absolute',
+        lineHeight: '24px'
+      },
+      onClick: onClickInput
+    }, textValue))), jsx("div", {
       ref: iconRef,
       css: _IconCSS,
       className: 'DGN-UI-Dropdown-Icon'
@@ -1356,7 +1409,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       },
       disabled: disabled || readOnly
     })));
-  }, [viewType, inputProps, inputStyle, multiple, clearAble, onChange, disabled, readOnly, loading, renderSelectedItem, placeholder, itemMultipleSize, openState, showClear]);
+  }, [viewType, inputProps, inputStyle, multiple, clearAble, onChange, disabled, readOnly, loading, renderSelectedItem, placeholder, itemMultipleSize, openState, showClear, textValue]);
   const ErrorView = useMemo(() => error && jsx(HelperText, {
     disabled: disabled,
     style: {
@@ -1382,6 +1435,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
 const InputCSS = (multiple, renderSelectedItem) => css`
     ${flexRow};
+    ${positionRelative};
     width: 100%;
     ${!multiple && renderSelectedItem ? `width: calc(100% - 34px)` : ''}
 `;
@@ -1757,7 +1811,8 @@ Dropdown.defaultProps = {
   inputProps: {},
   formStyle: {},
   dataSource: [],
-  onInput: null
+  onInput: null,
+  searchMode: 'contains'
 };
 Dropdown.propTypes = {
   /**The variant to use. */
@@ -1928,6 +1983,12 @@ Dropdown.propTypes = {
   /** The contents in Dropdown box (Exp: TreeView). */
   children: PropTypes.node,
 
+  /** Specifies a data object's field name or an expression whose value is compared to the search string. */
+  searchExpr: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+
+  /** Specifies a comparison operation used to search items. */
+  searchMode: PropTypes.oneOf(['contains', 'startswith', 'equals']),
+
   /**
    * ref methods
    *