rsuite 5.37.2 → 5.37.4

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [5.37.4](https://github.com/rsuite/rsuite/compare/v5.37.3...v5.37.4) (2023-08-11)
+
+### Bug Fixes
+
+- **DatePicker,DateRangePicker:** fix calendar styles per design ([#3325](https://github.com/rsuite/rsuite/issues/3325)) ([a7d1c08](https://github.com/rsuite/rsuite/commit/a7d1c08c44c6169bcd10b32dcb4bb9ebcbb93677))
+- **InputGroup:** fix inside addon overlapping input text ([#3324](https://github.com/rsuite/rsuite/issues/3324)) ([8f1ff30](https://github.com/rsuite/rsuite/commit/8f1ff30634dbfcd20f05b63168e767723af5a968))
+- **InputPicker:** Fix InputPicker select bug ([#3329](https://github.com/rsuite/rsuite/issues/3329)) ([c52756b](https://github.com/rsuite/rsuite/commit/c52756b8596c20d275a9d5d2d41b7a81d355920f))
+- **OverlayTrigger:** fix handleClose will trigger twice ([#3286](https://github.com/rsuite/rsuite/issues/3286)) ([11b8eb8](https://github.com/rsuite/rsuite/commit/11b8eb8c6f43b46dcad5d1f800e6eb7a5374b0c2))
+- **Picker:** change color of caret on option group title ([#3323](https://github.com/rsuite/rsuite/issues/3323)) ([0d7be85](https://github.com/rsuite/rsuite/commit/0d7be85eec97063b162877ff8169209070fb1d4a))
+
+## [5.37.3](https://github.com/rsuite/rsuite/compare/v5.37.2...v5.37.3) (2023-08-02)
+
+### Bug Fixes
+
+- **SelectPicker:** fix display options not updating when data prop is updated ([#3319](https://github.com/rsuite/rsuite/issues/3319)) ([06c9cce](https://github.com/rsuite/rsuite/commit/06c9cce64ea27a756f87aa74a0af0287afdf106a))
+
 ## [5.37.2](https://github.com/rsuite/rsuite/compare/v5.37.1...v5.37.2) (2023-07-28)
 
 ### Bug Fixes

package/Calendar/styles/index.less

@@ -346,6 +346,7 @@
 }
 
 // Calendar Table
+// TODO-Doma Use CSS grid layout.
 .rs-calendar-table {
   display: table;
   table-layout: fixed;
@@ -438,7 +439,7 @@
 
 .rs-calendar-table-cell-week-number {
   display: table-cell;
-  width: 1%;
+  min-width: 30px;
   padding: @calendar-table-cell-padding;
   text-align: center;
   vertical-align: middle;
@@ -473,13 +474,13 @@
 
   &-row {
     position: relative;
-    padding-left: (40px + @calendar-picker-padding);
+    padding-left: @calendar-picker-padding + 38px; // 30px for the year label + 8px gap
     padding-right: @calendar-picker-padding;
     padding-top: 5px;
     padding-bottom: 5px;
 
     &:not(:last-child) {
-      border-bottom: 1px dotted var(--rs-border-primary);
+      border-bottom: 1px dashed var(--rs-border-primary);
     }
   }
 
@@ -495,13 +496,14 @@
 
   &-list {
     display: block;
+    min-width: 30px * 6 + 4px * 5;
     .clearfix();
   }
 
   &-cell {
     display: inline-block;
     float: left;
-    width: ~'calc((100% - @{calendar-table-cell-content-today-border-width} * 12 ) / 6)';
+    // width: ~'calc((100% - @{calendar-table-cell-content-today-border-width} * 12 ) / 6)';
     margin: 1px;
     text-align: center;
     vertical-align: middle;

package/DatePicker/styles/index.less

@@ -49,9 +49,11 @@
 
 // Calendar in DatePicker popup
 .rs-picker-menu {
-  @calendar-width: (
-    @datepicker-calendar-cell-gap-x * 6 + 30px * 7 + @datepicker-calendar-padding-x * 2
-  );
+  @calendar-width: 264px; // This is a fixed value per design.
+
+  @calendar-padding-x: 15px;
+  // The padding used when show week numbers.
+  @calendar-padding-x-condensed: 12px;
 
   .rs-picker-toolbar {
     max-width: 100%;
@@ -68,17 +70,25 @@
     margin: 0 auto;
 
     &-show-week-numbers {
-      @calendar-width: (
-        @datepicker-calendar-cell-gap-x * 7 + 30px * 8 + @datepicker-calendar-padding-x * 2
-      );
+      @calendar-width: 278px; // This is a fixed value per design.
 
       min-width: @calendar-width;
+
+      & .rs-calendar-body {
+        padding-left: @calendar-padding-x-condensed;
+        padding-right: @calendar-padding-x-condensed;
+      }
     }
 
     &-header {
       width: 100%;
     }
 
+    &-body {
+      padding-left: @calendar-padding-x;
+      padding-right: @calendar-padding-x;
+    }
+
     &-table {
       width: unset;
     }

package/InputGroup/styles/index.less

@@ -129,12 +129,12 @@
       display: block;
       width: 100%;
       border: none;
+      outline: none;
       padding-right: @input-group-padding-for-add-on-base;
     }
 
     .rs-input-group-btn,
     .rs-input-group-addon {
-      position: absolute;
       z-index: @zindex-input-group-icon;
       flex: 0 0 auto;
       width: auto;
@@ -165,7 +165,7 @@
       top: 0;
       background: none;
       border: none;
-      padding: 10px 13px;
+      padding: 10px 12px;
 
       &.rs-input-group-btn {
         padding: 8px 13px;
@@ -178,7 +178,7 @@
     .rs-input-group-addon ~ .rs-auto-complete > input.rs-input,
     .rs-input-group-addon ~ .rs-form-control-wrapper > input.rs-input,
     .rs-input-group-btn ~ .rs-form-control-wrapper > input.rs-input {
-      padding-left: @input-group-padding-for-add-on-base;
+      padding-left: 0;
       padding-right: 12px;
     }
 

package/Picker/styles/mixin.less

@@ -41,6 +41,7 @@
       top: @padding-y;
       right: @padding-x;
       padding: 3px;
+      color: var(--rs-text-secondary);
     }
   }
 }

package/cjs/InputPicker/InputPicker.js

@@ -536,9 +536,6 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.open();
     }
   }, [readOnly]);
-  var handleBlur = (0, _react.useCallback)(function () {
-    setOpen(false);
-  }, []);
   var handleEnter = (0, _react.useCallback)(function () {
     focusInput();
     setOpen(true);
@@ -773,7 +770,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, tagElements, displaySearchInput && /*#__PURE__*/_react.default.createElement(_InputSearch.default, (0, _extends2.default)({}, inputProps, {
     tabIndex: tabIndex,
     readOnly: readOnly,
-    onBlur: (0, _utils.createChainedFunction)(handleBlur, onBlur),
+    onBlur: onBlur,
     onFocus: (0, _utils.createChainedFunction)(handleFocus, onFocus),
     inputRef: inputRef,
     onChange: handleSearch,

package/cjs/Overlay/OverlayTrigger.js

@@ -252,7 +252,7 @@ var OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   }, [enterable, open, handleOpen]);
   var handleDelayedClose = (0, _react.useCallback)(function () {
     if (!enterable) {
-      handleClose();
+      return handleClose();
     }
 
     isOnTrigger.current = false;

package/cjs/Picker/utils.js

@@ -554,24 +554,17 @@ function useSearch(data, props) {
     }
 
     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)(function () {
+  }, [labelKey, searchBy, searchKeyword]);
+  var filteredData = (0, _react.useMemo)(function () {
     return data.filter(function (item) {
-      return checkShouldDisplay(item);
+      return checkShouldDisplay(item, searchKeyword);
     });
-  }),
-      filteredData = _useState5[0],
-      setFilteredData = _useState5[1];
+  }, [checkShouldDisplay, data, searchKeyword]);
 
   var handleSearch = function handleSearch(searchKeyword, event) {
     var filteredData = data.filter(function (item) {
       return checkShouldDisplay(item, searchKeyword);
     });
-    setFilteredData(filteredData);
     setSearchKeyword(searchKeyword);
     callback === null || callback === void 0 ? void 0 : callback(searchKeyword, filteredData, event);
   };

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

@@ -3211,7 +3211,7 @@ tbody.rs-anim-collapse.rs-anim-in {
 }
 .rs-calendar-table-cell-week-number {
   display: table-cell;
-  width: 1%;
+  min-width: 30px;
   padding: 1px;
   text-align: center;
   vertical-align: middle;
@@ -3246,14 +3246,14 @@ tbody.rs-anim-collapse.rs-anim-in {
 }
 .rs-calendar-month-dropdown-row {
   position: relative;
-  padding-right: 52px;
+  padding-right: 50px;
   padding-left: 12px;
   padding-top: 5px;
   padding-bottom: 5px;
 }
 .rs-calendar-month-dropdown-row:not(:last-child) {
-  border-bottom: 1px dotted #e5e5ea;
-  border-bottom: 1px dotted var(--rs-border-primary);
+  border-bottom: 1px dashed #e5e5ea;
+  border-bottom: 1px dashed var(--rs-border-primary);
 }
 .rs-calendar-month-dropdown-year {
   position: absolute;
@@ -3266,6 +3266,7 @@ tbody.rs-anim-collapse.rs-anim-in {
 }
 .rs-calendar-month-dropdown-list {
   display: block;
+  min-width: 200px;
 }
 .rs-calendar-month-dropdown-list::before,
 .rs-calendar-month-dropdown-list::after {
@@ -3278,7 +3279,6 @@ tbody.rs-anim-collapse.rs-anim-in {
 .rs-calendar-month-dropdown-cell {
   display: inline-block;
   float: right;
-  width: calc((100% - 1px * 12 ) / 6);
   margin: 1px;
   text-align: center;
   vertical-align: middle;
@@ -4108,6 +4108,8 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
   top: 8px;
   left: 12px;
   padding: 3px;
+  color: #8e8e93;
+  color: var(--rs-text-secondary);
 }
 .rs-picker-check-menu-items .rs-picker-menu-group.folded .rs-picker-menu-group-caret {
   -webkit-transform: rotate(-90deg);
@@ -4344,16 +4346,24 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
   max-width: 400px;
 }
 .rs-picker-menu .rs-calendar {
-  min-width: 246px;
+  min-width: 264px;
   display: block;
   margin: 0 auto;
 }
 .rs-picker-menu .rs-calendar-show-week-numbers {
   min-width: 278px;
 }
+.rs-picker-menu .rs-calendar-show-week-numbers .rs-calendar-body {
+  padding-right: 12px;
+  padding-left: 12px;
+}
 .rs-picker-menu .rs-calendar-header {
   width: 100%;
 }
+.rs-picker-menu .rs-calendar-body {
+  padding-right: 15px;
+  padding-left: 15px;
+}
 .rs-picker-menu .rs-calendar-table {
   width: unset;
 }
@@ -8026,11 +8036,11 @@ textarea.rs-input-sm {
   display: block;
   width: 100%;
   border: none;
+  outline: none;
   padding-left: 36px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon {
-  position: absolute;
   z-index: 4;
   -webkit-box-flex: 0;
       -ms-flex: 0 0 auto;
@@ -8091,7 +8101,7 @@ textarea.rs-input-sm {
   top: 0;
   background: none;
   border: none;
-  padding: 10px 13px;
+  padding: 10px 12px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-addon.rs-input-group-btn {
   padding: 8px 13px;
@@ -8102,7 +8112,7 @@ textarea.rs-input-sm {
 .rs-input-group.rs-input-group-inside .rs-input-group-addon ~ .rs-auto-complete > input.rs-input,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon ~ .rs-form-control-wrapper > input.rs-input,
 .rs-input-group.rs-input-group-inside .rs-input-group-btn ~ .rs-form-control-wrapper > input.rs-input {
-  padding-right: 36px;
+  padding-right: 0;
   padding-left: 12px;
 }
 .rs-input-group.rs-input-group-inside input.rs-input ~ .rs-input-group-btn,
@@ -12882,6 +12892,8 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   top: 8px;
   left: 12px;
   padding: 3px;
+  color: #8e8e93;
+  color: var(--rs-text-secondary);
 }
 .rs-picker-select-menu-items .rs-picker-menu-group.folded .rs-picker-menu-group-caret {
   -webkit-transform: rotate(-90deg);