rsuite 5.37.0 → 5.37.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [5.37.2](https://github.com/rsuite/rsuite/compare/v5.37.1...v5.37.2) (2023-07-28)
+
+### Bug Fixes
+
+- **CheckPicker:** wrong padding of grouped options ([#3306](https://github.com/rsuite/rsuite/issues/3306)) ([03ca6bf](https://github.com/rsuite/rsuite/commit/03ca6bff626146d44b1dd9ca1f931a984ad3103a))
+- **Overlay:** type error on OverlayTriggerProps ([#3307](https://github.com/rsuite/rsuite/issues/3307)) ([4a2e28e](https://github.com/rsuite/rsuite/commit/4a2e28e2412a6ffebcb9ad03a99a808f4d9ee3ee))
+- **RadioGroup:** unexpected wrapped text in picker appearance ([#3303](https://github.com/rsuite/rsuite/issues/3303)) ([c5aa81a](https://github.com/rsuite/rsuite/commit/c5aa81affab3333e6a29189d69c071d9208fbba8))
+
+## [5.37.1](https://github.com/rsuite/rsuite/compare/v5.37.0...v5.37.1) (2023-07-21)
+
+### Bug Fixes
+
+- **SelectPicker:** wrong padding for grouped options ([#3298](https://github.com/rsuite/rsuite/issues/3298)) ([e929f74](https://github.com/rsuite/rsuite/commit/e929f74273092855503f306f2e7e3362c716e574))
+
 # [5.37.0](https://github.com/rsuite/rsuite/compare/v5.36.0...v5.37.0) (2023-07-07)
 
 ### Bug Fixes

package/CheckPicker/styles/index.less

@@ -15,4 +15,14 @@
   .rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label {
     .picker-item-active();
   }
+
+  &.rs-picker-check-menu-grouped {
+    .rs-check-item .rs-checkbox-checker > label {
+      padding-left: 52px;
+    }
+
+    .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+      left: 26px;
+    }
+  }
 }

package/Picker/styles/index.less

@@ -397,22 +397,20 @@
         cursor: not-allowed;
       }
 
-      .rs-checkbox-wrapper {
-        left: @picker-item-content-padding-horizontal;
-
-        .grouped &,
-        .@{ckpns}-menu-group-children & {
-          left: (
-            @picker-item-content-padding-horizontal + @picker-children-check-item-padding-left
-          );
-        }
-      }
-
       .grouped &,
       .@{ckpns}-menu-group-children & {
         padding-left: @picker-check-item-content-padding-left +
           @picker-children-check-item-padding-left;
       }
     }
+
+    .rs-checkbox-wrapper {
+      left: @picker-item-content-padding-horizontal;
+
+      .grouped &,
+      .@{ckpns}-menu-group-children & {
+        left: (@picker-item-content-padding-horizontal + @picker-children-check-item-padding-left);
+      }
+    }
   }
 }

package/RadioGroup/styles/index.less

@@ -49,6 +49,7 @@
 
   .rs-radio-checker > label {
     display: inline-block;
+    white-space: nowrap;
     font-size: @font-size-base;
     line-height: @line-height-base;
     border-radius: 0;

package/SelectPicker/styles/index.less

@@ -11,6 +11,10 @@
   .picker-menu-group-common(picker);
   .picker-menu-group-title(picker);
   .picker-menu-group-closed(picker);
+
+  .rs-picker-menu-group ~ [role='option'] > .rs-picker-select-menu-item {
+    padding-left: 26px;
+  }
 }
 
 // Menu item (the option)

package/cjs/CheckPicker/CheckPicker.js

@@ -135,16 +135,15 @@ var CheckPicker = /*#__PURE__*/_react.default.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 = (0, _Picker.useSearch)({
+  var _useSearch = (0, _Picker.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.
 
 
@@ -253,11 +252,11 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
   }, [onOpen]);
   var handleExited = (0, _react.useCallback)(function () {
-    setSearchKeyword('');
+    resetSearch();
     setFocusItemValue(null);
     setActive(false);
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose, setFocusItemValue, setSearchKeyword]);
+  }, [onClose, setFocusItemValue, resetSearch]);
   (0, _Picker.usePublicMethods)(ref, {
     triggerRef: triggerRef,
     overlayRef: overlayRef,

package/cjs/InputPicker/InputPicker.js

@@ -214,14 +214,13 @@ var InputPicker = /*#__PURE__*/_react.default.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 = (0, _Picker.useSearch)({
+  var _useSearch = (0, _Picker.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
 
@@ -334,7 +333,7 @@ var InputPicker = /*#__PURE__*/_react.default.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();
@@ -360,7 +359,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
 
     setValue(val);
-    setSearchKeyword('');
+    resetSearch();
     setFocusItemValue(nextItemValue);
     handleSelect(val, item, event);
     handleChange(val, event);
@@ -406,10 +405,10 @@ var InputPicker = /*#__PURE__*/_react.default.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 = (0, _react.useCallback)(function (event) {
     if (!focusItemValue || !controlledData) {
       return;
@@ -433,7 +432,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
 
     setValue(focusItemValue);
-    setSearchKeyword('');
+    resetSearch();
 
     if (focusItem) {
       handleSelect(focusItemValue, focusItem, event);
@@ -441,7 +440,7 @@ var InputPicker = /*#__PURE__*/_react.default.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]);
   (0, _Picker.usePublicMethods)(ref, {
     triggerRef: triggerRef,
     overlayRef: overlayRef,
@@ -477,7 +476,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     setValue(null);
     setFocusItemValue(null);
-    setSearchKeyword('');
+    resetSearch();
 
     if (multi) {
       handleChange([], event);
@@ -486,7 +485,7 @@ var InputPicker = /*#__PURE__*/_react.default.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,
@@ -526,9 +525,9 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, events, rest));
   var handleExited = (0, _react.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 = (0, _react.useCallback)(function () {
     if (!readOnly) {
       var _triggerRef$current4;

package/cjs/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/cjs/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/cjs/Picker/utils.js

@@ -526,48 +526,49 @@ exports.useToggleKeyDownEvent = useToggleKeyDownEvent;
 
 /**
  * A hook that handles search filter options
- * @param props
  */
-function useSearch(props) {
+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 = (0, _react.useState)(''),
       searchKeyword = _useState4[0],
       setSearchKeyword = _useState4[1];
+
+  var resetSearch = (0, _react.useCallback)(function () {
+    setSearchKeyword('');
+  }, []);
   /**
    * Index of keyword  in `label`
    * @param {node} label
    */
 
-
   var checkShouldDisplay = (0, _react.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 = (0, _isUndefined.default)(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 = (0, _react.useCallback)(function (nextData) {
-    setFilteredData((0, _treeUtils.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 = (0, _react.useState)((0, _treeUtils.filterNodesOfTree)(data, function (item) {
-    return checkShouldDisplay(item);
-  })),
+  var _useState5 = (0, _react.useState)(function () {
+    return data.filter(function (item) {
+      return checkShouldDisplay(item);
+    });
+  }),
       filteredData = _useState5[0],
       setFilteredData = _useState5[1];
 
   var handleSearch = function handleSearch(searchKeyword, event) {
-    var filteredData = (0, _treeUtils.filterNodesOfTree)(data, function (item) {
+    var filteredData = data.filter(function (item) {
       return checkShouldDisplay(item, searchKeyword);
     });
     setFilteredData(filteredData);
@@ -578,10 +579,9 @@ function useSearch(props) {
   return {
     searchKeyword: searchKeyword,
     filteredData: filteredData,
-    updateFilteredData: updateFilteredData,
-    setSearchKeyword: setSearchKeyword,
     checkShouldDisplay: checkShouldDisplay,
-    handleSearch: handleSearch
+    handleSearch: handleSearch,
+    resetSearch: resetSearch
   };
 }
 

package/cjs/SelectPicker/SelectPicker.js

@@ -118,9 +118,8 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       onFocusItem = _useFocusItemValue.onKeyDown; // Use search keywords to filter options.
 
 
-  var _useSearch = (0, _Picker.useSearch)({
+  var _useSearch = (0, _Picker.useSearch)(data, {
     labelKey: labelKey,
-    data: data,
     searchBy: searchBy,
     callback: function callback(searchKeyword, filteredData, event) {
       var _filteredData$;
@@ -132,13 +131,9 @@ var SelectPicker = /*#__PURE__*/_react.default.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.
 
-  (0, _react.useEffect)(function () {
-    updateFilteredData(data);
-  }, [data, updateFilteredData]); // Use component active state to support keyboard events.
 
   var _useState = (0, _react.useState)(false),
       active = _useState[0],
@@ -203,11 +198,11 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }
   }, rest));
   var handleExited = (0, _react.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 = (0, _react.useCallback)(function () {
     setActive(true);
     setFocusItemValue(value);

package/dist/rsuite-no-reset-rtl.css

@@ -4116,6 +4116,12 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
 .rs-picker-check-menu-items .rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label {
   font-weight: bold;
 }
+.rs-picker-check-menu-items.rs-picker-check-menu-grouped .rs-check-item .rs-checkbox-checker > label {
+  padding-right: 52px;
+}
+.rs-picker-check-menu-items.rs-picker-check-menu-grouped .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+  right: 26px;
+}
 .rs-check-tree {
   max-height: 360px;
   height: 100%;
@@ -11784,17 +11790,17 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 .rs-checkbox-disabled.rs-check-item .rs-checkbox-checker > label {
   cursor: not-allowed;
 }
-.rs-check-item .rs-checkbox-checker > label .rs-checkbox-wrapper {
-  right: 12px;
-}
-.grouped .rs-check-item .rs-checkbox-checker > label .rs-checkbox-wrapper,
-.rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker > label .rs-checkbox-wrapper {
-  right: 26px;
-}
 .grouped .rs-check-item .rs-checkbox-checker > label,
 .rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker > label {
   padding-right: 52px;
 }
+.rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+  right: 12px;
+}
+.grouped .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper,
+.rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+  right: 26px;
+}
 .rs-placeholder {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -12698,6 +12704,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 }
 .rs-radio-group-picker .rs-radio-checker > label {
   display: inline-block;
+  white-space: nowrap;
   font-size: 14px;
   line-height: 1.42857143;
   border-radius: 0;
@@ -12880,6 +12887,9 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   -webkit-transform: rotate(-90deg);
           transform: rotate(-90deg);
 }
+.rs-picker-select-menu-items .rs-picker-menu-group ~ [role='option'] > .rs-picker-select-menu-item {
+  padding-right: 26px;
+}
 .rs-picker-select-menu-item {
   display: block;
   padding: 8px 12px;