rsuite 5.24.0 → 5.24.1

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## [5.24.1](https://github.com/rsuite/rsuite/compare/v5.24.0...v5.24.1) (2023-01-12)
+
+### Bug Fixes
+
+- **DatePicker,DateRangePicker:** fix the background color error when the cell is hovered ([#3018](https://github.com/rsuite/rsuite/issues/3018)) ([9d6f43e](https://github.com/rsuite/rsuite/commit/9d6f43e6db6049b7fdcc8514e071d870b785ecbb))
+- **MultiCascader:** fix load async data error in inline mode ([#3015](https://github.com/rsuite/rsuite/issues/3015)) ([081eb14](https://github.com/rsuite/rsuite/commit/081eb14de9fb37d80a95324a669b8089e29ef03c)), closes [#3014](https://github.com/rsuite/rsuite/issues/3014)
+- **Navbar.Brand:** fix missing href prop ([#3007](https://github.com/rsuite/rsuite/issues/3007)) ([d0a1f27](https://github.com/rsuite/rsuite/commit/d0a1f276d63e25c295fbef94f82559333ba4c148))
+- **Tree:** fix Tree drag preview style error ([#3003](https://github.com/rsuite/rsuite/issues/3003)) ([4830148](https://github.com/rsuite/rsuite/commit/4830148b9e325bee926a2bfefe0786c08952ec79))
+
+### Performance Improvements
+
+- **CSS transitions:** improved duration of transitions ([#3016](https://github.com/rsuite/rsuite/issues/3016)) ([d1829da](https://github.com/rsuite/rsuite/commit/d1829da2e77131e031479ef9aa4f6d00d6307a52))
+
 # [5.24.0](https://github.com/rsuite/rsuite/compare/v5.23.3...v5.24.0) (2022-12-30)
 
 ### Bug Fixes

package/Calendar/styles/index.less

@@ -370,7 +370,8 @@
   }
 }
 
-.rs-calendar-table-cell {
+.rs-calendar-table-cell,
+.rs-calendar-table-header-cell {
   display: table-cell;
   width: 1%;
   padding: @calendar-table-cell-padding 0;
@@ -418,21 +419,19 @@
 }
 
 // Table header row
-.rs-calendar-table-header-row {
-  .rs-calendar-table-cell-content {
-    color: var(--rs-text-secondary);
-    font-size: @font-size-small;
-    line-height: @line-height-small;
-    padding-top: 2px;
-    padding-bottom: 2px;
-
-    &,
-    &:hover,
-    &:focus,
-    &:hover:focus {
-      background: none;
-      cursor: auto;
-    }
+.rs-calendar-table-header-cell-content {
+  color: var(--rs-text-secondary);
+  font-size: @font-size-small;
+  line-height: @line-height-small;
+  padding-top: 2px;
+  padding-bottom: 2px;
+
+  &,
+  &:hover,
+  &:focus,
+  &:hover:focus {
+    background: none;
+    cursor: auto;
   }
 }
 

package/DatePicker/styles/index.less

@@ -2,6 +2,7 @@
 @import '../../styles/mixins/listbox';
 @import '../../Button/styles/mixin';
 @import '../../Picker/styles/mixin';
+@import 'mixin';
 
 // DatePicker Picker
 // ----------------------
@@ -91,6 +92,10 @@
       .listbox-option-active();
     }
 
+    .rs-calendar-month-dropdown-cell-active .rs-calendar-month-dropdown-cell-content:hover {
+      .calendar-cell-selected-hover();
+    }
+
     .rs-calendar-table-header-row .rs-calendar-table-cell-content {
       height: 24px;
       padding-top: 0;
@@ -109,6 +114,10 @@
       .listbox-option-active();
     }
 
+    .rs-calendar-table-cell-selected:hover .rs-calendar-table-cell-content {
+      .calendar-cell-selected-hover();
+    }
+
     .rs-calendar-month-dropdown-scroll {
       height: 227px;
     }

package/DatePicker/styles/mixin.less

@@ -0,0 +1,8 @@
+.calendar-cell-selected-hover() {
+  background-color: var(--rs-calendar-cell-selected-hover-bg);
+  color: var(--rs-calendar-date-selected-text);
+
+  .high-contrast-mode({
+    color: var(--rs-calendar-date-selected-text);
+  });
+}

package/Picker/styles/index.less

@@ -382,7 +382,6 @@
       display: block;
       padding: @picker-item-content-padding-vertical @picker-item-content-padding-horizontal
         @picker-item-content-padding-vertical @picker-check-item-content-padding-left;
-      transition: @picker-item-transition;
       line-height: @line-height-computed;
 
       .high-contrast-mode({

package/Picker/styles/mixin.less

@@ -31,21 +31,15 @@
     padding: @picker-item-content-padding-vertical @picker-item-content-padding-horizontal;
     padding-right: (@padding-x + @dropdown-caret-width + @dropdown-caret-padding);
     position: relative;
-    cursor: default;
-    transition: @picker-item-transition;
+    cursor: pointer;
     color: var(--rs-text-heading);
 
-    &:hover {
-      background-color: var(--rs-state-hover-bg);
-    }
-
     .rs-@{prefix}-menu-group-caret {
       display: inline-block;
       margin-left: 2px;
       position: absolute;
       top: @padding-y;
       right: @padding-x;
-      transition: transform 0.3s linear;
       padding: 3px;
     }
   }
@@ -60,19 +54,6 @@
   }
 }
 
-.picker-select-item() {
-  display: block;
-  padding: @picker-item-content-padding-vertical @picker-item-content-padding-horizontal;
-  clear: both;
-  font-weight: normal;
-  line-height: @line-height-base;
-  color: var(--rs-text-primary);
-  cursor: pointer; //fixed link has not [href] style
-  transition: @picker-item-transition;
-  text-decoration: none;
-  width: 100%;
-}
-
 .picker-item-hover() {
   color: var(--rs-text-primary);
   background-color: var(--rs-state-hover-bg);

package/TreePicker/styles/index.less

@@ -16,6 +16,19 @@
   &.rs-tree-virtualized {
     overflow: hidden;
   }
+
+  &-drag-preview {
+    position: absolute;
+    top: 0;
+    color: var(--rs-text-primary);
+    background-color: var(--rs-bg-overlay);
+    display: inline-block;
+    margin: 0;
+    padding: @picker-tree-node-padding-vertical @picker-tree-node-padding-horizontal;
+    border-radius: 6px;
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
+    z-index: -1;
+  }
 }
 
 .rs-tree-node {

package/cjs/Calendar/TableHeaderRow.js

@@ -52,15 +52,15 @@ var TableHeaderRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     ref: ref,
     className: classes
   }), showWeekNumbers && /*#__PURE__*/_react.default.createElement("div", {
-    className: prefix('cell'),
+    className: prefix('header-cell'),
     role: "columnheader"
   }), items.map(function (key) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: key,
-      className: prefix('cell'),
+      className: prefix('header-cell'),
       role: "columnheader"
     }, /*#__PURE__*/_react.default.createElement("span", {
-      className: prefix('cell-content')
+      className: prefix('header-cell-content')
     }, locale === null || locale === void 0 ? void 0 : locale[key]));
   }));
 });

package/cjs/Cascader/Cascader.js

@@ -117,7 +117,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       valueToPaths = _usePaths.valueToPaths,
       columnData = _usePaths.columnData,
       addColumn = _usePaths.addColumn,
-      romoveColumnByIndex = _usePaths.romoveColumnByIndex,
+      removeColumnByIndex = _usePaths.removeColumnByIndex,
       setValueToPaths = _usePaths.setValueToPaths,
       setColumnData = _usePaths.setColumnData,
       setSelectedPaths = _usePaths.setSelectedPaths,
@@ -308,7 +308,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       addColumn(node[childrenKey], columnIndex);
     } else {
       // Removes subsequent columns of the current column when the clicked node is a leaf node.
-      romoveColumnByIndex(columnIndex);
+      removeColumnByIndex(columnIndex);
     }
 
     if (isLeafNode) {

package/cjs/Cascader/utils.d.ts

@@ -18,6 +18,6 @@ export declare function usePaths<T extends Record<string, unknown>>(params: UseP
     setColumnData: import("react").Dispatch<import("react").SetStateAction<T[][]>>;
     setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<T[]>>;
     addColumn: (column: T[], index: number) => void;
-    romoveColumnByIndex: (index: number) => void;
+    removeColumnByIndex: (index: number) => void;
 };
 export {};

package/cjs/Cascader/utils.js

@@ -131,7 +131,7 @@ function usePaths(params) {
    */
 
 
-  function romoveColumnByIndex(index) {
+  function removeColumnByIndex(index) {
     setColumnData([].concat((0, _slice.default)(columnData, 0, index)));
   }
   /**
@@ -170,6 +170,6 @@ function usePaths(params) {
     setColumnData: setColumnData,
     setSelectedPaths: setSelectedPaths,
     addColumn: addColumn,
-    romoveColumnByIndex: romoveColumnByIndex
+    removeColumnByIndex: removeColumnByIndex
   };
 }

package/cjs/Content/Content.d.ts

@@ -4,5 +4,5 @@ export declare type ContentProps = ComponentProps;
  * For Internet Explorer 11 and lower, it's suggested that an ARIA role of "main"
  * be added to the <main> element to ensure it is accessible
  */
-declare const Content: import("../@types/common").RsRefForwardingComponent<"div", ComponentProps>;
+declare const Content: import("../@types/common").RsRefForwardingComponent<"main", ComponentProps>;
 export default Content;

package/cjs/Footer/Footer.d.ts

@@ -1,4 +1,4 @@
 import { ComponentProps } from '../utils/createComponent';
 export declare type FooterProps = ComponentProps;
-declare const Footer: import("../@types/common").RsRefForwardingComponent<"div", ComponentProps>;
+declare const Footer: import("../@types/common").RsRefForwardingComponent<"footer", ComponentProps>;
 export default Footer;

package/cjs/Header/Header.d.ts

@@ -1,4 +1,4 @@
 import { ComponentProps } from '../utils/createComponent';
 export declare type HeaderProps = ComponentProps;
-declare const Header: import("../@types/common").RsRefForwardingComponent<"div", ComponentProps>;
+declare const Header: import("../@types/common").RsRefForwardingComponent<"header", ComponentProps>;
 export default Header;

package/cjs/MultiCascader/MultiCascader.js

@@ -127,7 +127,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       columnData = _useColumnData.columnData,
       setColumnData = _useColumnData.setColumnData,
       addColumn = _useColumnData.addColumn,
-      romoveColumnByIndex = _useColumnData.romoveColumnByIndex,
+      removeColumnByIndex = _useColumnData.removeColumnByIndex,
       enforceUpdateColumnData = _useColumnData.enforceUpdateColumnData;
 
   (0, _utils3.useUpdateEffect)(function () {
@@ -223,7 +223,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
           node.loading = false;
           node[childrenKey] = data;
 
-          if (targetRef.current) {
+          if (targetRef.current || inline) {
             addFlattenData(data, node);
             addColumn(data, columnIndex);
           }
@@ -238,11 +238,11 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       addColumn(node[childrenKey], columnIndex);
     } else {
       // Removes subsequent columns of the current column when the clicked node is a leaf node.
-      romoveColumnByIndex(columnIndex);
+      removeColumnByIndex(columnIndex);
     }
 
     (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$u = _triggerRef$current.updatePosition) === null || _triggerRef$current$u === void 0 ? void 0 : _triggerRef$current$u.call(_triggerRef$current);
-  }, [onSelect, getChildren, childrenKey, addFlattenData, addColumn, romoveColumnByIndex]);
+  }, [onSelect, getChildren, childrenKey, inline, addFlattenData, addColumn, removeColumnByIndex]);
   var handleCheck = (0, _react.useCallback)(function (node, event, checked) {
     var nodeValue = node[valueKey];
     var nextValue = [];

package/cjs/MultiCascader/utils.d.ts

@@ -51,7 +51,7 @@ export declare function useFlattenData<T>(data: T[], itemKeys: ItemKeys): {
 export declare function useColumnData<T extends MayHasParent<Record<string, unknown>>>(flattenData: T[]): {
     columnData: T[][];
     addColumn: (column: T[], index: number) => void;
-    romoveColumnByIndex: (index: number) => void;
+    removeColumnByIndex: (index: number) => void;
     setColumnData: import("react").Dispatch<import("react").SetStateAction<T[][]>>;
     enforceUpdateColumnData: (nextData: T[]) => void;
 };

package/cjs/MultiCascader/utils.js

@@ -240,7 +240,7 @@ function useColumnData(flattenData) {
    */
 
 
-  function romoveColumnByIndex(index) {
+  function removeColumnByIndex(index) {
     setColumnData([].concat((0, _slice.default)(columnData, 0, index)));
   }
 
@@ -254,7 +254,7 @@ function useColumnData(flattenData) {
   return {
     columnData: columnData,
     addColumn: addColumn,
-    romoveColumnByIndex: romoveColumnByIndex,
+    removeColumnByIndex: removeColumnByIndex,
     setColumnData: setColumnData,
     enforceUpdateColumnData: enforceUpdateColumnData
   };

package/cjs/Navbar/NavbarBrand.d.ts

@@ -1,4 +1,4 @@
 import { ComponentProps } from '../utils/createComponent';
 export declare type NavbarBrandProps = ComponentProps;
-declare const NavbarBrand: import("../@types/common").RsRefForwardingComponent<"div", ComponentProps>;
+declare const NavbarBrand: import("../@types/common").RsRefForwardingComponent<"a", ComponentProps>;
 export default NavbarBrand;

package/cjs/TreePicker/TreeNode.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import { WithAsProps, RsRefForwardingComponent, ItemDataType } from '../@types/common';
 export interface TreeNodeProps extends WithAsProps {
     rtl?: boolean;
     layer: number;
-    value?: any;
-    label?: any;
+    value?: ItemDataType['value'];
+    label?: ItemDataType['label'];
     focus?: boolean;
     loading?: boolean;
     expand?: boolean;

package/cjs/TreePicker/TreeNode.js

@@ -21,8 +21,6 @@ var _ArrowDown = _interopRequireDefault(require("@rsuite/icons/legacy/ArrowDown"
 
 var _Spinner = _interopRequireDefault(require("@rsuite/icons/legacy/Spinner"));
 
-var _reactToString = _interopRequireDefault(require("../utils/reactToString"));
-
 var _utils = require("../utils");
 
 var _treeUtils = require("../utils/treeUtils");
@@ -68,14 +66,6 @@ var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       merge = _useClassNames.merge,
       withClassPrefix = _useClassNames.withClassPrefix;
 
-  var getTitle = (0, _react.useCallback)(function () {
-    if (typeof label === 'string') {
-      return label;
-    } else if ( /*#__PURE__*/_react.default.isValidElement(label)) {
-      var nodes = (0, _reactToString.default)(label);
-      return nodes.join('');
-    }
-  }, [label]);
   var handleExpand = (0, _react.useCallback)(function (event) {
     var _event$nativeEvent, _event$nativeEvent$st;
 
@@ -165,7 +155,7 @@ var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     });
     return /*#__PURE__*/_react.default.createElement("span", {
       className: prefix('label'),
-      title: getTitle(),
+      title: (0, _treeUtils.stringifyTreeNodeLabel)(label),
       "data-layer": layer,
       "data-key": (nodeData === null || nodeData === void 0 ? void 0 : nodeData.refKey) || '',
       role: "button",

package/cjs/TreePicker/TreePicker.js

@@ -353,11 +353,15 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [valueKey, childrenKey, expandItemValues, getChildren, onExpand, setExpandItemValues, loadChildren]);
   var handleDragStart = (0, _react.useCallback)(function (nodeData, event) {
     if (draggable) {
+      var _event$dataTransfer;
+
+      var dragMoverNode = (0, _treeUtils.createDragPreview)((0, _treeUtils.stringifyTreeNodeLabel)(nodeData[labelKey]), treePrefix('drag-preview'));
+      (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setDragImage(dragMoverNode, 0, 0);
       setDragNodeKeys((0, _treeUtils.getDragNodeKeys)(nodeData, childrenKey, valueKey));
       setDragNode(flattenNodes[nodeData.refKey]);
       onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);
     }
-  }, [draggable, childrenKey, flattenNodes, onDragStart, setDragNodeKeys, setDragNode, valueKey]);
+  }, [draggable, labelKey, treePrefix, setDragNodeKeys, childrenKey, valueKey, setDragNode, flattenNodes, onDragStart]);
   var handleDragEnter = (0, _react.useCallback)(function (nodeData, event) {
     if (dragNodeKeys.some(function (d) {
       return (0, _utils.shallowEqual)(d, nodeData[valueKey]);
@@ -376,6 +380,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     if (dragNodeKeys.some(function (d) {
       return (0, _utils.shallowEqual)(d, nodeData[valueKey]);
     })) {
+      event.dataTransfer.dropEffect = 'none';
       return;
     }
 
@@ -391,6 +396,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);
   }, [onDragLeave]);
   var handleDragEnd = (0, _react.useCallback)(function (nodeData, event) {
+    (0, _treeUtils.removeDragPreview)();
     setDragNode(null);
     setDragNodeKeys([]);
     setDragOverNodeKey(null);
@@ -406,6 +412,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onDrop === null || onDrop === void 0 ? void 0 : onDrop(dropData, event);
     }
 
+    (0, _treeUtils.removeDragPreview)();
     setDragNode(null);
     setDragNodeKeys([]);
     setDragOverNodeKey(null);

package/cjs/utils/createComponent.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export declare type ComponentProps = WithAsProps & React.HTMLAttributes<HTMLDivElement>;
-interface Props extends React.HTMLAttributes<HTMLDivElement> {
+interface Props<TElement extends React.ElementType> extends React.HTMLAttributes<HTMLDivElement> {
     name: string;
-    componentAs?: React.ElementType;
+    componentAs?: TElement;
     componentClassPrefix?: string;
 }
 /**
  * Create a component with `classPrefix` and `as` attributes.
  */
-declare function createComponent({ name, componentAs, componentClassPrefix, ...defaultProps }: Props): RsRefForwardingComponent<"div", ComponentProps>;
+declare function createComponent<TElement extends React.ElementType = 'div'>({ name, componentAs, componentClassPrefix, ...defaultProps }: Props<TElement>): RsRefForwardingComponent<TElement, ComponentProps>;
 export default createComponent;

package/cjs/utils/treeUtils.d.ts

@@ -262,3 +262,15 @@ export declare function getTreeNodeIndent(rtl: any, layer: any, absolute?: boole
  * @returns
  */
 export declare function getNodeFormattedRefKey(value: string | number): string;
+/**
+ * create drag preview when tree node start drag
+ * @param name
+ * @param className
+ * @returns
+ */
+export declare function createDragPreview(name: string, className: string): HTMLDivElement;
+/**
+ * remove drag preview when tree node drop
+ */
+export declare function removeDragPreview(): void;
+export declare function stringifyTreeNodeLabel(label: string | React.ReactNode): string;

package/cjs/utils/treeUtils.js

@@ -35,6 +35,9 @@ exports.focusToActiveTreeNode = focusToActiveTreeNode;
 exports.isSearching = isSearching;
 exports.getTreeNodeIndent = getTreeNodeIndent;
 exports.getNodeFormattedRefKey = getNodeFormattedRefKey;
+exports.createDragPreview = createDragPreview;
+exports.removeDragPreview = removeDragPreview;
+exports.stringifyTreeNodeLabel = stringifyTreeNodeLabel;
 exports.getScrollToIndex = exports.focusPreviousItem = exports.focusNextItem = exports.focusTreeNode = exports.getElementByDataKey = exports.getActiveItem = exports.getActiveIndex = exports.getFocusableItems = void 0;
 
 var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -1128,4 +1131,43 @@ function getTreeNodeIndent(rtl, layer, absolute) {
 
 function getNodeFormattedRefKey(value) {
   return "" + (typeof value === 'number' ? 'Number_' : 'String_') + value;
+}
+/**
+ * create drag preview when tree node start drag
+ * @param name
+ * @param className
+ * @returns
+ */
+
+
+function createDragPreview(name, className) {
+  var dragPreview = document.createElement('div');
+  dragPreview.id = 'rs-tree-drag-preview';
+  dragPreview.innerHTML = name;
+  dragPreview.classList.add(className);
+  document.body.appendChild(dragPreview);
+  return dragPreview;
+}
+/**
+ * remove drag preview when tree node drop
+ */
+
+
+function removeDragPreview() {
+  var _dragPreview$parentNo, _dragPreview$parentNo2;
+
+  var dragPreview = document.getElementById('rs-tree-drag-preview');
+  dragPreview === null || dragPreview === void 0 ? void 0 : (_dragPreview$parentNo = dragPreview.parentNode) === null || _dragPreview$parentNo === void 0 ? void 0 : (_dragPreview$parentNo2 = _dragPreview$parentNo.removeChild) === null || _dragPreview$parentNo2 === void 0 ? void 0 : _dragPreview$parentNo2.call(_dragPreview$parentNo, dragPreview);
+}
+
+function stringifyTreeNodeLabel(label) {
+  if (typeof label === 'string') {
+    return label;
+  } else if ( /*#__PURE__*/_react.default.isValidElement(label)) {
+    var _nodes2 = (0, _reactToString.default)(label);
+
+    return _nodes2.join('');
+  }
+
+  return '';
 }