rsuite 5.33.1 → 5.34.1

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [5.34.1](https://github.com/rsuite/rsuite/compare/v5.34.0...v5.34.1) (2023-05-26)
+
+### Bug Fixes
+
+- **InputPicker:** add missing top padding of listbox ([#3214](https://github.com/rsuite/rsuite/issues/3214)) ([f6df23c](https://github.com/rsuite/rsuite/commit/f6df23c085c4d7944c5817b0a9f8a1168c41f0b9))
+- **Radio,Checkbox:** remove leading space for Radio/Checkbox in groups ([#3215](https://github.com/rsuite/rsuite/issues/3215)) ([27c1495](https://github.com/rsuite/rsuite/commit/27c14952da87c21612a8e822295eefc0908b08d6))
+
+# [5.34.0](https://github.com/rsuite/rsuite/compare/v5.33.1...v5.34.0) (2023-05-19)
+
+### Bug Fixes
+
+- **DatePicker:** added stack styles to datepicker styles ([#3195](https://github.com/rsuite/rsuite/issues/3195)) ([b3ed580](https://github.com/rsuite/rsuite/commit/b3ed580867db2e5205e71475c593e7d17ff04b49))
+- **SelectPicker:** prevent error when listProps.itemSize is a number ([#3193](https://github.com/rsuite/rsuite/issues/3193)) ([151df47](https://github.com/rsuite/rsuite/commit/151df474b15ab4651d4ee5777b66018e58837816))
+
+### Features
+
+- **Timeline:** add isItemActive prop ([#3198](https://github.com/rsuite/rsuite/issues/3198)) ([377930f](https://github.com/rsuite/rsuite/commit/377930f3498c59834a424417c136499866aacec2))
+
 ## [5.33.1](https://github.com/rsuite/rsuite/compare/v5.33.0...v5.33.1) (2023-05-12)
 
 ### Bug Fixes

package/Checkbox/styles/mixin.less

@@ -45,7 +45,7 @@
     vertical-align: middle;
     font-weight: normal;
     margin-top: 0;
-    margin-left: @radio-sense-width; // space out consecutive inline controls
+    margin-right: @radio-sense-width; // space out consecutive inline controls
 
     .rs-plaintext &:first-child {
       margin-left: 0;

package/CheckboxGroup/styles/index.less

@@ -3,9 +3,12 @@
 .rs-checkbox-group {
   display: flex;
   flex-direction: column;
+
+  > .rs-checkbox {
+    margin-left: -1 * @radio-sense-width;
+  }
 }
 
 .rs-checkbox-group-inline {
   flex-direction: row;
-  margin-left: -1 * @radio-sense-width;
 }

package/DatePicker/styles/index.less

@@ -2,6 +2,7 @@
 @import '../../styles/mixins/listbox';
 @import '../../Button/styles/mixin';
 @import '../../Picker/styles/mixin';
+@import '../../Stack/styles/index';
 @import 'mixin';
 
 // DatePicker Picker

package/RadioGroup/styles/index.less

@@ -3,11 +3,14 @@
 .rs-radio-group {
   display: flex;
   flex-direction: column;
+
+  > .rs-radio {
+    margin-left: -1 * @radio-sense-width;
+  }
 }
 
 .rs-radio-group-inline {
   flex-direction: row;
-  margin-left: -1 * @radio-sense-width;
 }
 
 // Radio Group - picker appearance

package/Timeline/styles/index.less

@@ -42,7 +42,7 @@
     }
   }
 
-  &-item-last &-item-dot::before {
+  &-item-active &-item-dot::before {
     background-color: var(--rs-timeline-indicator-active-bg);
   }
 

package/cjs/InputPicker/InputPicker.js

@@ -616,7 +616,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         top = positionProps.top,
         className = positionProps.className;
     var menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';
-    var classes = merge(className, menuClassName, prefix(menuClassPrefix));
+    var classes = merge(className, menuClassName, prefix(multi ? 'check-menu' : 'select-menu'));
     var styles = (0, _extends2.default)({}, menuStyle, {
       left: left,
       top: top

package/cjs/Timeline/Timeline.d.ts

@@ -8,9 +8,18 @@ export interface TimelineProps extends WithAsProps {
     align?: 'left' | 'right' | 'alternate';
     /** Timeline endless **/
     endless?: boolean;
+    /**
+     * Whether an item is active (with highlighted dot).
+     *
+     * @default
+     * The last item is marked active.
+     */
+    isItemActive?: (index: number, totalItemsCount: number) => boolean;
 }
 interface TimelineComponent extends RsRefForwardingComponent<'div', TimelineProps> {
     Item: typeof TimelineItem;
+    ACTIVE_FIRST: (index: number, totalItemsCount: number) => boolean;
+    ACTIVE_LAST: (index: number, totalItemsCount: number) => boolean;
 }
 declare const Timeline: TimelineComponent;
 export default Timeline;

package/cjs/Timeline/Timeline.js

@@ -29,7 +29,9 @@ var Timeline = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       _props$align = props.align,
       align = _props$align === void 0 ? 'left' : _props$align,
       endless = props.endless,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "as", "classPrefix", "className", "align", "endless"]);
+      _props$isItemActive = props.isItemActive,
+      isItemActive = _props$isItemActive === void 0 ? Timeline.ACTIVE_LAST : _props$isItemActive,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "as", "classPrefix", "className", "align", "endless", "isItemActive"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -52,11 +54,20 @@ var Timeline = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }), _utils.ReactChildren.mapCloneElement(children, function (_child, index) {
     return {
       last: index + 1 === count,
+      INTERNAL_active: isItemActive(index, count),
       align: align
     };
   }));
 });
 
+Timeline.ACTIVE_FIRST = function (index) {
+  return index === 0;
+};
+
+Timeline.ACTIVE_LAST = function (index, totalItemsCount) {
+  return index === totalItemsCount - 1;
+};
+
 Timeline.Item = _TimelineItem.default;
 Timeline.displayName = 'Timeline';
 Timeline.propTypes = {

package/cjs/Timeline/TimelineItem.d.ts

@@ -1,7 +1,18 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface TimelineItemProps extends WithAsProps {
-    /** Whether the last item */
+    /**
+     * Whether the last item
+     *
+     * @internal
+     * This props is supposed to be used only by Timeline component internally
+     * User should never rely on this prop
+     *
+     * @deprecated
+     * This prop was used to indicate whether an item is the last item so that it gets highlighted.
+     * Now we can specify whether an item should be highlighted individually.
+     * Use {@link INTERNAL_active} instead
+     */
     last?: boolean;
     /** Customizing the Timeline item */
     dot?: React.ReactNode;
@@ -11,6 +22,12 @@ export interface TimelineItemProps extends WithAsProps {
     as?: React.ElementType;
     /** Customized time of timeline  **/
     time?: React.ReactNode;
+    /**
+     * @internal
+     * This props is supposed to be used only by Timeline component internally
+     * User should never rely on this prop
+     */
+    INTERNAL_active?: boolean;
 }
 declare const TimelineItem: RsRefForwardingComponent<'div', TimelineItemProps>;
 export default TimelineItem;

package/cjs/Timeline/TimelineItem.js

@@ -21,11 +21,12 @@ var TimelineItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       children = props.children,
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? 'timeline-item' : _props$classPrefix,
-      last = props.last,
+      DEPRECATED_last = props.last,
       className = props.className,
       dot = props.dot,
       time = props.time,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "children", "classPrefix", "last", "className", "dot", "time"]);
+      INTERNAL_active = props.INTERNAL_active,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "children", "classPrefix", "last", "className", "dot", "time", "INTERNAL_active"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -33,7 +34,8 @@ var TimelineItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       prefix = _useClassNames.prefix;
 
   var classes = merge(className, withClassPrefix({
-    last: last
+    last: DEPRECATED_last,
+    active: INTERNAL_active
   }));
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,

package/cjs/Windowing/List.js

@@ -21,7 +21,8 @@ var List = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var rowHeight = props.rowHeight,
       _props$as = props.as,
       Component = _props$as === void 0 ? _reactWindow.VariableSizeList : _props$as,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["rowHeight", "as"]);
+      itemSizeProp = props.itemSize,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["rowHeight", "as", "itemSize"]);
   var listRef = (0, _react.useRef)(null);
 
   var _useCustom = (0, _utils.useCustom)(),
@@ -56,7 +57,15 @@ var List = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       index: index
     }) : rowHeight || 0;
   }, [rowHeight]);
-  var compatibleProps = (0, _extends2.default)({}, rest);
+  var itemSize = (0, _react.useMemo)(function () {
+    if (typeof itemSizeProp === 'function') return itemSizeProp;
+    return function () {
+      return itemSizeProp;
+    };
+  }, [itemSizeProp]);
+  var compatibleProps = (0, _extends2.default)({
+    itemSize: itemSize
+  }, rest);
 
   if (rowHeight) {
     compatibleProps.itemSize = Component === _reactWindow.VariableSizeList ? setRowHeight : rowHeight;

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

@@ -3890,7 +3890,7 @@ tbody.rs-anim-collapse.rs-anim-in {
   vertical-align: middle;
   font-weight: normal;
   margin-top: 0;
-  margin-right: 10px;
+  margin-left: 10px;
 }
 .rs-plaintext .rs-checkbox-inline:first-child {
   margin-right: 0;
@@ -4053,12 +4053,14 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.rs-checkbox-group > .rs-checkbox {
+  margin-right: -10px;
+}
 .rs-checkbox-group-inline {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
-  margin-right: -10px;
 }
 .rs-picker-check-menu-items {
   margin-bottom: 6px;
@@ -12492,7 +12494,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   vertical-align: middle;
   font-weight: normal;
   margin-top: 0;
-  margin-right: 10px;
+  margin-left: 10px;
 }
 .rs-plaintext .rs-radio-inline:first-child {
   margin-right: 0;
@@ -12642,12 +12644,14 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.rs-radio-group > .rs-radio {
+  margin-right: -10px;
+}
 .rs-radio-group-inline {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
-  margin-right: -10px;
 }
 .rs-radio-group-picker {
   display: -webkit-inline-box;
@@ -14770,7 +14774,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 .rs-timeline-item-custom-dot::before {
   display: none;
 }
-.rs-timeline-item-last .rs-timeline-item-dot::before {
+.rs-timeline-item-active .rs-timeline-item-dot::before {
   background-color: #3498ff;
   background-color: var(--rs-timeline-indicator-active-bg);
 }