rsuite 5.33.1 → 5.34.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+# [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/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/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/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

@@ -14770,7 +14770,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);
 }