rsuite 5.24.0 → 5.24.1

package/esm/Calendar/TableHeaderRow.js

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

package/esm/Cascader/Cascader.js

@@ -94,7 +94,7 @@ var Cascader = /*#__PURE__*/React.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,
@@ -285,7 +285,7 @@ var Cascader = /*#__PURE__*/React.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/esm/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/esm/Cascader/utils.js

@@ -117,7 +117,7 @@ export function usePaths(params) {
    */
 
 
-  function romoveColumnByIndex(index) {
+  function removeColumnByIndex(index) {
     setColumnData([].concat(slice(columnData, 0, index)));
   }
   /**
@@ -156,6 +156,6 @@ export function usePaths(params) {
     setColumnData: setColumnData,
     setSelectedPaths: setSelectedPaths,
     addColumn: addColumn,
-    romoveColumnByIndex: romoveColumnByIndex
+    removeColumnByIndex: removeColumnByIndex
   };
 }

package/esm/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/esm/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/esm/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/esm/MultiCascader/MultiCascader.js

@@ -103,7 +103,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       columnData = _useColumnData.columnData,
       setColumnData = _useColumnData.setColumnData,
       addColumn = _useColumnData.addColumn,
-      romoveColumnByIndex = _useColumnData.romoveColumnByIndex,
+      removeColumnByIndex = _useColumnData.removeColumnByIndex,
       enforceUpdateColumnData = _useColumnData.enforceUpdateColumnData;
 
   useUpdateEffect(function () {
@@ -199,7 +199,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
           node.loading = false;
           node[childrenKey] = data;
 
-          if (targetRef.current) {
+          if (targetRef.current || inline) {
             addFlattenData(data, node);
             addColumn(data, columnIndex);
           }
@@ -214,11 +214,11 @@ var MultiCascader = /*#__PURE__*/React.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 = useCallback(function (node, event, checked) {
     var nodeValue = node[valueKey];
     var nextValue = [];

package/esm/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/esm/MultiCascader/utils.js

@@ -209,7 +209,7 @@ export function useColumnData(flattenData) {
    */
 
 
-  function romoveColumnByIndex(index) {
+  function removeColumnByIndex(index) {
     setColumnData([].concat(slice(columnData, 0, index)));
   }
 
@@ -223,7 +223,7 @@ export function useColumnData(flattenData) {
   return {
     columnData: columnData,
     addColumn: addColumn,
-    romoveColumnByIndex: romoveColumnByIndex,
+    removeColumnByIndex: removeColumnByIndex,
     setColumnData: setColumnData,
     enforceUpdateColumnData: enforceUpdateColumnData
   };

package/esm/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/esm/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/esm/TreePicker/TreeNode.js

@@ -5,9 +5,8 @@ import PropTypes from 'prop-types';
 import hasClass from 'dom-lib/hasClass';
 import ArrowDown from '@rsuite/icons/legacy/ArrowDown';
 import Spinner from '@rsuite/icons/legacy/Spinner';
-import reactToString from '../utils/reactToString';
 import { useClassNames } from '../utils';
-import { getTreeNodeIndent } from '../utils/treeUtils';
+import { getTreeNodeIndent, stringifyTreeNodeLabel } from '../utils/treeUtils';
 var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$as = _ref.as,
       Component = _ref$as === void 0 ? 'div' : _ref$as,
@@ -49,14 +48,6 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
       merge = _useClassNames.merge,
       withClassPrefix = _useClassNames.withClassPrefix;
 
-  var getTitle = useCallback(function () {
-    if (typeof label === 'string') {
-      return label;
-    } else if ( /*#__PURE__*/React.isValidElement(label)) {
-      var nodes = reactToString(label);
-      return nodes.join('');
-    }
-  }, [label]);
   var handleExpand = useCallback(function (event) {
     var _event$nativeEvent, _event$nativeEvent$st;
 
@@ -145,7 +136,7 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
     });
     return /*#__PURE__*/React.createElement("span", {
       className: prefix('label'),
-      title: getTitle(),
+      title: stringifyTreeNodeLabel(label),
       "data-layer": layer,
       "data-key": (nodeData === null || nodeData === void 0 ? void 0 : nodeData.refKey) || '',
       role: "button",

package/esm/TreePicker/TreePicker.js

@@ -9,7 +9,7 @@ import React, { useState, useRef, useEffect, useCallback, useContext } from 'rea
 import PropTypes from 'prop-types';
 import { List, AutoSizer } from '../Windowing';
 import TreeNode from './TreeNode';
-import { getTreeNodeIndent } from '../utils/treeUtils';
+import { createDragPreview, getTreeNodeIndent, removeDragPreview, stringifyTreeNodeLabel } from '../utils/treeUtils';
 import { createChainedFunction, useClassNames, useCustom, useControlled, TREE_NODE_DROP_POSITION, KEY_VALUES, mergeRefs, shallowEqual } from '../utils';
 import { getExpandWhenSearching, hasVisibleChildren, getDragNodeKeys, calDropNodePosition, createUpdateTreeDataFunction, useTreeDrag, useFlattenTreeData, getTreeActiveNode, getDefaultExpandItemValues, useTreeNodeRefs, useTreeSearch, focusPreviousItem, getFocusableItems, focusNextItem, getActiveItem, toggleExpand, useGetTreeNodeChildren, focusToActiveTreeNode, leftArrowHandler, focusTreeNode, rightArrowHandler, isSearching } from '../utils/treeUtils';
 import { PickerToggle, PickerOverlay, SearchBar, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, onMenuKeyDown as _onMenuKeyDown, usePublicMethods, listPickerPropTypes, pickTriggerPropKeys, omitTriggerPropKeys, useToggleKeyDownEvent } from '../Picker';
@@ -331,11 +331,15 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [valueKey, childrenKey, expandItemValues, getChildren, onExpand, setExpandItemValues, loadChildren]);
   var handleDragStart = useCallback(function (nodeData, event) {
     if (draggable) {
+      var _event$dataTransfer;
+
+      var dragMoverNode = createDragPreview(stringifyTreeNodeLabel(nodeData[labelKey]), treePrefix('drag-preview'));
+      (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setDragImage(dragMoverNode, 0, 0);
       setDragNodeKeys(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 = useCallback(function (nodeData, event) {
     if (dragNodeKeys.some(function (d) {
       return shallowEqual(d, nodeData[valueKey]);
@@ -354,6 +358,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (dragNodeKeys.some(function (d) {
       return shallowEqual(d, nodeData[valueKey]);
     })) {
+      event.dataTransfer.dropEffect = 'none';
       return;
     }
 
@@ -369,6 +374,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);
   }, [onDragLeave]);
   var handleDragEnd = useCallback(function (nodeData, event) {
+    removeDragPreview();
     setDragNode(null);
     setDragNodeKeys([]);
     setDragOverNodeKey(null);
@@ -384,6 +390,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onDrop === null || onDrop === void 0 ? void 0 : onDrop(dropData, event);
     }
 
+    removeDragPreview();
     setDragNode(null);
     setDragNodeKeys([]);
     setDragOverNodeKey(null);

package/esm/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/esm/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/esm/utils/treeUtils.js

@@ -1031,4 +1031,40 @@ export function getTreeNodeIndent(rtl, layer, absolute) {
 
 export function getNodeFormattedRefKey(value) {
   return "" + (typeof value === 'number' ? 'Number_' : 'String_') + value;
+}
+/**
+ * create drag preview when tree node start drag
+ * @param name
+ * @param className
+ * @returns
+ */
+
+export 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
+ */
+
+export 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);
+}
+export function stringifyTreeNodeLabel(label) {
+  if (typeof label === 'string') {
+    return label;
+  } else if ( /*#__PURE__*/React.isValidElement(label)) {
+    var _nodes2 = reactToString(label);
+
+    return _nodes2.join('');
+  }
+
+  return '';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.24.0",
+  "version": "5.24.1",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -37,7 +37,7 @@
     "lodash": "^4.17.11",
     "prop-types": "^15.8.1",
     "react-window": "^1.8.8",
-    "rsuite-table": "^5.8.1",
+    "rsuite-table": "^5.8.2",
     "schema-typed": "^2.0.3"
   },
   "peerDependencies": {

package/styles/color-modes/dark.less

@@ -339,6 +339,7 @@
   --rs-calendar-range-bg: fade(@H900-dark, 50%);
   --rs-calendar-time-unit-bg: @B600-dark;
   --rs-calendar-date-selected-text: #fff;
+  --rs-calendar-cell-selected-hover-bg: @H700;
 
   // Popover
   --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);

package/styles/color-modes/high-contrast.less

@@ -355,6 +355,7 @@
   --rs-calendar-range-bg: fade(@H900-high-contrast, 50%);
   --rs-calendar-time-unit-bg: @B900-high-contrast;
   --rs-calendar-date-selected-text: @B900-high-contrast;
+  --rs-calendar-cell-selected-hover-bg: @B050-high-contrast;
 
   // Popover
   --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);

package/styles/color-modes/light.less

@@ -348,6 +348,7 @@
   --rs-calendar-range-bg: fade(@H100, 50%);
   --rs-calendar-time-unit-bg: @B050;
   --rs-calendar-date-selected-text: #fff;
+  --rs-calendar-cell-selected-hover-bg: @H700;
 
   // Popover
   --rs-popover-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);

package/styles/variables.less

@@ -241,7 +241,7 @@
 @btn-border-radius-base:    @border-radius; // @deprecated use @btn-border-radius instead
 @btn-border-radius:         @btn-border-radius-base;
 
-@btn-transition:            color 0.2s linear, background-color 0.3s linear;
+@btn-transition:            color 0.15s ease-out, background-color 0.15s ease-out;
 @btn-disabled-opacity:      0.3;
 
 // Ghost Button
@@ -312,7 +312,7 @@
 @input-padding-y:               @padding-base-input-vertical;
 @input-padding-x:               @padding-base-input-horizontal;
 @input-border-width:            1px;
-@input-transition:              border-color ease-in-out 0.3s;
+@input-transition:              border-color ease-in-out 0.15s;
 
 // This has no effect on `<select>`s  in some browsers, due to the limited stylability of `<select>`s in CSS.
 @input-border-radius:       @border-radius;
@@ -368,7 +368,7 @@
 // Toggle
 
 @toggle-active-scale: 1.2;
-@toggle-transition:   0.2s ease-in-out;
+@toggle-transition:   0.15s ease-out;
 
 @toggle-md-height:                      24px;
 @toggle-md-handle-gap:                  3px;
@@ -393,7 +393,7 @@
 
 // Navs
 
-@nav-item-transition:             color 0.3s linear, background-color 0.3s linear;
+@nav-item-transition:             color 0.15s ease-out, background-color 0.15s ease-out;
 
 // Tab
 @nav-tab-bar-width:               1px;
@@ -432,7 +432,7 @@
 @sidenav-icon-spacing:                  20px;
 @sidenav-icon-width:                    @sidenav-level1-item-font-size;
 @sidenav-dropdown-toggle-caret-width:   20px;
-@sidenav-collapse-transition-config:     0.2s ease-in;
+@sidenav-collapse-transition-config:     0.15s ease-in;
 
 @sidenav-level-retract:                 9px;
 @sidenav-level2-retract:                (@sidenav-padding-horizontal + @sidenav-icon-width + @sidenav-icon-spacing);
@@ -648,7 +648,7 @@
 @panel-padding:                 20px;
 @panel-header-font-size:        16px;
 @panel-split-line-color:        @dropdown-divider-bg;
-@panel-accodion-transition:     0.3s linear;
+@panel-accodion-transition:     0.15s linear;
 @panel-box-shadow:              @box-shadow;
 
 // Timeline
@@ -717,7 +717,6 @@
 
 @picker-item-content-padding-vertical:    8px;
 @picker-item-content-padding-horizontal:  @picker-menu-padding;
-@picker-item-transition:                  color 0.3s linear, background-color 0.3s linear;
 
 // group title
 @picker-group-children-padding-left:    26px;
@@ -806,7 +805,7 @@
 @slider-calibration-diameter:         8px;
 @slider-calibration-border-width:     2px;
 @slider-mark-margin-top:              9px;
-@slider-handle-transition:            0.3s ease-in-out;
+@slider-handle-transition:            0.15s ease-in-out;
 
 // Breadcrumbs