rsuite 5.37.1 → 5.37.2

package/esm/CheckPicker/CheckPicker.js

@@ -111,16 +111,15 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);
   }, [setFocusItemValue, onSearch, valueKey]); // Use search keywords to filter options.
 
-  var _useSearch = useSearch({
+  var _useSearch = useSearch(data, {
     labelKey: labelKey,
-    data: data,
     searchBy: searchBy,
     callback: handleSearchCallback
   }),
       searchKeyword = _useSearch.searchKeyword,
       filteredData = _useSearch.filteredData,
-      setSearchKeyword = _useSearch.setSearchKeyword,
       handleSearch = _useSearch.handleSearch,
+      resetSearch = _useSearch.resetSearch,
       checkShouldDisplay = _useSearch.checkShouldDisplay; // Use component active state to support keyboard events.
 
 
@@ -229,11 +228,11 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
   }, [onOpen]);
   var handleExited = useCallback(function () {
-    setSearchKeyword('');
+    resetSearch();
     setFocusItemValue(null);
     setActive(false);
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose, setFocusItemValue, setSearchKeyword]);
+  }, [onClose, setFocusItemValue, resetSearch]);
   usePublicMethods(ref, {
     triggerRef: triggerRef,
     overlayRef: overlayRef,

package/esm/InputPicker/InputPicker.js

@@ -180,14 +180,13 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);
   }, [disabledOptions, setFocusItemValue, valueKey, onSearch]); // Use search keywords to filter options.
 
-  var _useSearch = useSearch({
+  var _useSearch = useSearch(getAllData(), {
     labelKey: labelKey,
-    data: getAllData(),
     searchBy: searchBy,
     callback: handleSearchCallback
   }),
       searchKeyword = _useSearch.searchKeyword,
-      setSearchKeyword = _useSearch.setSearchKeyword,
+      resetSearch = _useSearch.resetSearch,
       checkShouldDisplay = _useSearch.checkShouldDisplay,
       handleSearch = _useSearch.handleSearch; // Update the state when the data in props changes
 
@@ -300,7 +299,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleSelectItem = function handleSelectItem(value, item, event) {
     setValue(value);
     setFocusItemValue(value);
-    setSearchKeyword('');
+    resetSearch();
     handleSelect(value, item, event);
     handleChange(value, event);
     handleClose();
@@ -326,7 +325,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     setValue(val);
-    setSearchKeyword('');
+    resetSearch();
     setFocusItemValue(nextItemValue);
     handleSelect(val, item, event);
     handleChange(val, event);
@@ -372,10 +371,10 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     setValue(val);
-    setSearchKeyword('');
+    resetSearch();
     handleSelect(val, focusItem, event);
     handleChange(val, event);
-  }, [cloneValue, getAllData, focusItemValue, disabledItemValues, disabledOptions, setValue, setSearchKeyword, handleSelect, handleChange, valueKey, createOption]);
+  }, [cloneValue, getAllData, focusItemValue, disabledItemValues, disabledOptions, setValue, resetSearch, handleSelect, handleChange, valueKey, createOption]);
   var handleMenuItemKeyPress = useCallback(function (event) {
     if (!focusItemValue || !controlledData) {
       return;
@@ -399,7 +398,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     setValue(focusItemValue);
-    setSearchKeyword('');
+    resetSearch();
 
     if (focusItem) {
       handleSelect(focusItemValue, focusItem, event);
@@ -407,7 +406,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     handleChange(focusItemValue, event);
     handleClose();
-  }, [setValue, disabledItemValues, controlledData, focusItemValue, valueKey, searchKeyword, handleClose, setSearchKeyword, createOption, getAllData, handleChange, handleSelect]);
+  }, [setValue, disabledItemValues, controlledData, focusItemValue, valueKey, searchKeyword, handleClose, resetSearch, createOption, getAllData, handleChange, handleSelect]);
   usePublicMethods(ref, {
     triggerRef: triggerRef,
     overlayRef: overlayRef,
@@ -443,7 +442,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     setValue(null);
     setFocusItemValue(null);
-    setSearchKeyword('');
+    resetSearch();
 
     if (multi) {
       handleChange([], event);
@@ -452,7 +451,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     onClean === null || onClean === void 0 ? void 0 : onClean(event);
-  }, [disabled, searchKeyword, setValue, setFocusItemValue, setSearchKeyword, multi, onClean, handleChange]);
+  }, [disabled, searchKeyword, setValue, setFocusItemValue, resetSearch, multi, onClean, handleChange]);
   var events = {
     onMenuPressBackspace: multi ? removeLastItem : handleClean,
     onMenuKeyDown: onKeyDown,
@@ -492,9 +491,9 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, events, rest));
   var handleExited = useCallback(function () {
     setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);
-    setSearchKeyword('');
+    resetSearch();
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [setFocusItemValue, setSearchKeyword, onClose, value, multi]);
+  }, [setFocusItemValue, resetSearch, onClose, value, multi]);
   var handleFocus = useCallback(function () {
     if (!readOnly) {
       var _triggerRef$current4;

package/esm/Overlay/OverlayTrigger.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { AnimationEventProps, StandardProps, TypeAttributes } from '../@types/common';
 import { PositionChildProps } from './Position';
 export declare type OverlayTriggerType = 'click' | 'hover' | 'focus' | 'active' | 'contextMenu' | 'none';
-export interface OverlayTriggerProps extends StandardProps, AnimationEventProps {
+export interface OverlayTriggerProps extends Omit<StandardProps, 'children'>, AnimationEventProps {
     /** Triggering events */
     trigger?: OverlayTriggerType | OverlayTriggerType[];
     /** Display placement */

package/esm/Picker/utils.d.ts

@@ -89,25 +89,22 @@ export interface ToggleKeyDownEventProps {
  * @param props
  */
 export declare const useToggleKeyDownEvent: (props: ToggleKeyDownEventProps) => (event: React.KeyboardEvent) => void;
-export interface SearchProps<TItem extends Record<string, unknown>, TLabel> {
+interface SearchOptions<T> {
     labelKey: string;
-    data: TItem[];
-    searchBy?: (keyword: string, label: TLabel, item: TItem) => boolean;
-    callback?: (keyword: string, data: TItem[], event: React.SyntheticEvent) => void;
+    searchBy?: (keyword: string, label: any, item: T) => boolean;
+    callback?: (keyword: string, data: T[], event: React.SyntheticEvent) => void;
 }
-declare type UseSearchResult<TItem extends Record<string, unknown>> = {
+declare type UseSearchResult<T> = {
     searchKeyword: string;
-    filteredData: TItem[];
-    updateFilteredData: (nextData: TItem[]) => void;
-    setSearchKeyword: (value: string) => void;
-    checkShouldDisplay: (item: TItem, keyword?: string) => boolean;
+    filteredData: T[];
+    checkShouldDisplay: (item: T, keyword?: string) => boolean;
     handleSearch: (searchKeyword: string, event: React.SyntheticEvent) => void;
+    resetSearch: () => void;
 };
 /**
  * A hook that handles search filter options
- * @param props
  */
-export declare function useSearch<TItem extends Record<string, unknown>, TLabel>(props: SearchProps<TItem, TLabel>): UseSearchResult<TItem>;
+export declare function useSearch<T>(data: readonly T[], props: SearchOptions<T>): UseSearchResult<T>;
 export interface PickerDependentParameters {
     triggerRef?: React.RefObject<OverlayTriggerHandle>;
     rootRef?: React.RefObject<HTMLElement>;

package/esm/Picker/utils.js

@@ -6,7 +6,7 @@ import isFunction from 'lodash/isFunction';
 import isUndefined from 'lodash/isUndefined';
 import omit from 'lodash/omit';
 import find from 'lodash/find';
-import { findNodeOfTree, filterNodesOfTree } from '../utils/treeUtils';
+import { findNodeOfTree } from '../utils/treeUtils';
 import { KEY_VALUES, useClassNames, shallowEqual, reactToString, placementPolyfill } from '../utils';
 import { getHeight } from 'dom-lib';
 var defaultNodeKeys = {
@@ -494,48 +494,49 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
 
 /**
  * A hook that handles search filter options
- * @param props
  */
-export function useSearch(props) {
+export function useSearch(data, props) {
   var labelKey = props.labelKey,
-      data = props.data,
       searchBy = props.searchBy,
       callback = props.callback; // Use search keywords to filter options.
 
   var _useState4 = useState(''),
       searchKeyword = _useState4[0],
       setSearchKeyword = _useState4[1];
+
+  var resetSearch = useCallback(function () {
+    setSearchKeyword('');
+  }, []);
   /**
    * Index of keyword  in `label`
    * @param {node} label
    */
 
-
   var checkShouldDisplay = useCallback(function (item, keyword) {
-    var label = item === null || item === void 0 ? void 0 : item[labelKey];
+    var checkValue = typeof item === 'object' ? item === null || item === void 0 ? void 0 : item[labelKey] : String(item);
 
     var _keyword = isUndefined(keyword) ? searchKeyword : keyword;
 
     if (typeof searchBy === 'function') {
-      return searchBy(_keyword, label, item);
+      return searchBy(_keyword, checkValue, item);
     }
 
-    return shouldDisplay(label, _keyword);
-  }, [labelKey, searchBy, searchKeyword]);
-  var updateFilteredData = useCallback(function (nextData) {
-    setFilteredData(filterNodesOfTree(nextData, function (item) {
-      return checkShouldDisplay(item);
-    }));
-  }, [checkShouldDisplay]);
+    return shouldDisplay(checkValue, _keyword);
+  }, [labelKey, searchBy, searchKeyword]); // TODO-Doma
+  // filteredData should be derived from data and searchKeyword
+  // This redundant state might be here for preventing callback firing multiple times
+  // Find out if this is the case and remove this state if possible
 
-  var _useState5 = useState(filterNodesOfTree(data, function (item) {
-    return checkShouldDisplay(item);
-  })),
+  var _useState5 = useState(function () {
+    return data.filter(function (item) {
+      return checkShouldDisplay(item);
+    });
+  }),
       filteredData = _useState5[0],
       setFilteredData = _useState5[1];
 
   var handleSearch = function handleSearch(searchKeyword, event) {
-    var filteredData = filterNodesOfTree(data, function (item) {
+    var filteredData = data.filter(function (item) {
       return checkShouldDisplay(item, searchKeyword);
     });
     setFilteredData(filteredData);
@@ -546,10 +547,9 @@ export function useSearch(props) {
   return {
     searchKeyword: searchKeyword,
     filteredData: filteredData,
-    updateFilteredData: updateFilteredData,
-    setSearchKeyword: setSearchKeyword,
     checkShouldDisplay: checkShouldDisplay,
-    handleSearch: handleSearch
+    handleSearch: handleSearch,
+    resetSearch: resetSearch
   };
 }
 

package/esm/SelectPicker/SelectPicker.js

@@ -4,7 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 
 var _templateObject;
 
-import React, { useRef, useState, useCallback, useEffect } from 'react';
+import React, { useRef, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import isUndefined from 'lodash/isUndefined';
@@ -97,9 +97,8 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onFocusItem = _useFocusItemValue.onKeyDown; // Use search keywords to filter options.
 
 
-  var _useSearch = useSearch({
+  var _useSearch = useSearch(data, {
     labelKey: labelKey,
-    data: data,
     searchBy: searchBy,
     callback: function callback(searchKeyword, filteredData, event) {
       var _filteredData$;
@@ -111,13 +110,9 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }),
       searchKeyword = _useSearch.searchKeyword,
       filteredData = _useSearch.filteredData,
-      updateFilteredData = _useSearch.updateFilteredData,
-      setSearchKeyword = _useSearch.setSearchKeyword,
-      handleSearch = _useSearch.handleSearch;
+      resetSearch = _useSearch.resetSearch,
+      handleSearch = _useSearch.handleSearch; // Use component active state to support keyboard events.
 
-  useEffect(function () {
-    updateFilteredData(data);
-  }, [data, updateFilteredData]); // Use component active state to support keyboard events.
 
   var _useState = useState(false),
       active = _useState[0],
@@ -182,11 +177,11 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, rest));
   var handleExited = useCallback(function () {
-    setSearchKeyword('');
+    resetSearch();
     setActive(false);
     onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose, setSearchKeyword, onSearch]);
+  }, [onClose, resetSearch, onSearch]);
   var handleEntered = useCallback(function () {
     setActive(true);
     setFocusItemValue(value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.37.1",
+  "version": "5.37.2",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",