rsuite 5.24.0 → 5.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/Breadcrumb/styles/index.less +4 -0
  2. package/Button/styles/index.less +14 -10
  3. package/CHANGELOG.md +31 -0
  4. package/Calendar/styles/index.less +15 -16
  5. package/DatePicker/styles/index.less +9 -0
  6. package/DatePicker/styles/mixin.less +8 -0
  7. package/Picker/styles/index.less +5 -9
  8. package/Picker/styles/mixin.less +4 -40
  9. package/TreePicker/styles/index.less +13 -0
  10. package/cjs/@types/global.d.ts +6 -0
  11. package/cjs/Breadcrumb/BreadcrumbItem.js +1 -1
  12. package/cjs/Calendar/MonthDropdown.js +2 -4
  13. package/cjs/Calendar/TableHeaderRow.js +3 -3
  14. package/cjs/Cascader/Cascader.js +2 -2
  15. package/cjs/Cascader/utils.d.ts +1 -1
  16. package/cjs/Cascader/utils.js +2 -2
  17. package/cjs/Content/Content.d.ts +1 -1
  18. package/cjs/CustomProvider/CustomProvider.d.ts +2 -0
  19. package/cjs/CustomProvider/CustomProvider.js +5 -3
  20. package/cjs/Footer/Footer.d.ts +1 -1
  21. package/cjs/Header/Header.d.ts +1 -1
  22. package/cjs/MultiCascader/MultiCascader.js +4 -4
  23. package/cjs/MultiCascader/utils.d.ts +1 -1
  24. package/cjs/MultiCascader/utils.js +2 -2
  25. package/cjs/Navbar/NavbarBrand.d.ts +1 -1
  26. package/cjs/Overlay/OverlayTrigger.js +4 -0
  27. package/cjs/Picker/PickerToggle.js +1 -1
  28. package/cjs/Picker/PickerToggleTrigger.js +6 -7
  29. package/cjs/Ripple/Ripple.js +8 -0
  30. package/cjs/TreePicker/TreeNode.d.ts +3 -3
  31. package/cjs/TreePicker/TreeNode.js +1 -11
  32. package/cjs/TreePicker/TreePicker.js +8 -1
  33. package/cjs/utils/createComponent.d.ts +3 -3
  34. package/cjs/utils/treeUtils.d.ts +12 -0
  35. package/cjs/utils/treeUtils.js +42 -0
  36. package/cjs/utils/useCustom.js +3 -1
  37. package/dist/rsuite-rtl.css +299 -263
  38. package/dist/rsuite-rtl.min.css +1 -1
  39. package/dist/rsuite-rtl.min.css.map +1 -1
  40. package/dist/rsuite.css +299 -263
  41. package/dist/rsuite.js +19 -19
  42. package/dist/rsuite.min.css +1 -1
  43. package/dist/rsuite.min.css.map +1 -1
  44. package/dist/rsuite.min.js +1 -1
  45. package/dist/rsuite.min.js.map +1 -1
  46. package/esm/@types/global.d.ts +6 -0
  47. package/esm/Breadcrumb/BreadcrumbItem.js +1 -1
  48. package/esm/Calendar/MonthDropdown.js +2 -4
  49. package/esm/Calendar/TableHeaderRow.js +3 -3
  50. package/esm/Cascader/Cascader.js +2 -2
  51. package/esm/Cascader/utils.d.ts +1 -1
  52. package/esm/Cascader/utils.js +2 -2
  53. package/esm/Content/Content.d.ts +1 -1
  54. package/esm/CustomProvider/CustomProvider.d.ts +2 -0
  55. package/esm/CustomProvider/CustomProvider.js +5 -3
  56. package/esm/Footer/Footer.d.ts +1 -1
  57. package/esm/Header/Header.d.ts +1 -1
  58. package/esm/MultiCascader/MultiCascader.js +4 -4
  59. package/esm/MultiCascader/utils.d.ts +1 -1
  60. package/esm/MultiCascader/utils.js +2 -2
  61. package/esm/Navbar/NavbarBrand.d.ts +1 -1
  62. package/esm/Overlay/OverlayTrigger.js +4 -0
  63. package/esm/Picker/PickerToggle.js +1 -1
  64. package/esm/Picker/PickerToggleTrigger.js +7 -5
  65. package/esm/Ripple/Ripple.js +9 -1
  66. package/esm/TreePicker/TreeNode.d.ts +3 -3
  67. package/esm/TreePicker/TreeNode.js +2 -11
  68. package/esm/TreePicker/TreePicker.js +9 -2
  69. package/esm/utils/createComponent.d.ts +3 -3
  70. package/esm/utils/treeUtils.d.ts +12 -0
  71. package/esm/utils/treeUtils.js +36 -0
  72. package/esm/utils/useCustom.js +3 -1
  73. package/package.json +2 -2
  74. package/styles/color-modes/dark.less +6 -2
  75. package/styles/color-modes/high-contrast.less +4 -0
  76. package/styles/color-modes/light.less +5 -1
  77. package/styles/variables.less +7 -8
@@ -1 +1,7 @@
1
1
  declare const __DEV__: boolean;
2
+
3
+ declare namespace Chai {
4
+ interface Assertion {
5
+ toHaveError(expectedMessage?: string): Assertion;
6
+ }
7
+ }
@@ -6,7 +6,7 @@ import SafeAnchor from '../SafeAnchor';
6
6
  import { useClassNames } from '../utils';
7
7
  var BreadcrumbItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
8
8
  var _props$as = props.as,
9
- Component = _props$as === void 0 ? SafeAnchor : _props$as,
9
+ Component = _props$as === void 0 ? props.href ? SafeAnchor : 'span' : _props$as,
10
10
  href = props.href,
11
11
  _props$classPrefix = props.classPrefix,
12
12
  classPrefix = _props$classPrefix === void 0 ? 'breadcrumb-item' : _props$classPrefix,
@@ -57,8 +57,7 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
57
57
 
58
58
  return false;
59
59
  }, [disabledMonth]);
60
-
61
- var rowRenderer = function rowRenderer(_ref) {
60
+ var rowRenderer = useCallback(function (_ref) {
62
61
  var index = _ref.index,
63
62
  style = _ref.style;
64
63
  var selectedMonth = DateUtils.getMonth(date);
@@ -91,8 +90,7 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
91
90
  year: year
92
91
  });
93
92
  })));
94
- };
95
-
93
+ }, [date, isMonthDisabled, merge, prefix, rowCount, startYear]);
96
94
  var classes = merge(className, withClassPrefix(), {
97
95
  show: show
98
96
  });
@@ -38,15 +38,15 @@ var TableHeaderRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
38
38
  ref: ref,
39
39
  className: classes
40
40
  }), showWeekNumbers && /*#__PURE__*/React.createElement("div", {
41
- className: prefix('cell'),
41
+ className: prefix('header-cell'),
42
42
  role: "columnheader"
43
43
  }), items.map(function (key) {
44
44
  return /*#__PURE__*/React.createElement("div", {
45
45
  key: key,
46
- className: prefix('cell'),
46
+ className: prefix('header-cell'),
47
47
  role: "columnheader"
48
48
  }, /*#__PURE__*/React.createElement("span", {
49
- className: prefix('cell-content')
49
+ className: prefix('header-cell-content')
50
50
  }, locale === null || locale === void 0 ? void 0 : locale[key]));
51
51
  }));
52
52
  });
@@ -94,7 +94,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
94
94
  valueToPaths = _usePaths.valueToPaths,
95
95
  columnData = _usePaths.columnData,
96
96
  addColumn = _usePaths.addColumn,
97
- romoveColumnByIndex = _usePaths.romoveColumnByIndex,
97
+ removeColumnByIndex = _usePaths.removeColumnByIndex,
98
98
  setValueToPaths = _usePaths.setValueToPaths,
99
99
  setColumnData = _usePaths.setColumnData,
100
100
  setSelectedPaths = _usePaths.setSelectedPaths,
@@ -285,7 +285,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
285
285
  addColumn(node[childrenKey], columnIndex);
286
286
  } else {
287
287
  // Removes subsequent columns of the current column when the clicked node is a leaf node.
288
- romoveColumnByIndex(columnIndex);
288
+ removeColumnByIndex(columnIndex);
289
289
  }
290
290
 
291
291
  if (isLeafNode) {
@@ -18,6 +18,6 @@ export declare function usePaths<T extends Record<string, unknown>>(params: UseP
18
18
  setColumnData: import("react").Dispatch<import("react").SetStateAction<T[][]>>;
19
19
  setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<T[]>>;
20
20
  addColumn: (column: T[], index: number) => void;
21
- romoveColumnByIndex: (index: number) => void;
21
+ removeColumnByIndex: (index: number) => void;
22
22
  };
23
23
  export {};
@@ -117,7 +117,7 @@ export function usePaths(params) {
117
117
  */
118
118
 
119
119
 
120
- function romoveColumnByIndex(index) {
120
+ function removeColumnByIndex(index) {
121
121
  setColumnData([].concat(slice(columnData, 0, index)));
122
122
  }
123
123
  /**
@@ -156,6 +156,6 @@ export function usePaths(params) {
156
156
  setColumnData: setColumnData,
157
157
  setSelectedPaths: setSelectedPaths,
158
158
  addColumn: addColumn,
159
- romoveColumnByIndex: romoveColumnByIndex
159
+ removeColumnByIndex: removeColumnByIndex
160
160
  };
161
161
  }
@@ -4,5 +4,5 @@ export declare type ContentProps = ComponentProps;
4
4
  * For Internet Explorer 11 and lower, it's suggested that an ARIA role of "main"
5
5
  * be added to the <main> element to ensure it is accessible
6
6
  */
7
- declare const Content: import("../@types/common").RsRefForwardingComponent<"div", ComponentProps>;
7
+ declare const Content: import("../@types/common").RsRefForwardingComponent<"main", ComponentProps>;
8
8
  export default Content;
@@ -38,6 +38,8 @@ export interface CustomValue<T = Locale> {
38
38
  * A Map of toast containers
39
39
  */
40
40
  toasters?: React.MutableRefObject<Map<string, ToastContainerInstance>>;
41
+ /** If true, the ripple effect is disabled. Affected components include: Button, Nav.Item, Pagination. */
42
+ disableRipple?: boolean;
41
43
  }
42
44
  export interface CustomProviderProps<T = Locale> extends Partial<CustomValue<T>> {
43
45
  /** Supported themes */
@@ -14,7 +14,8 @@ var CustomProvider = function CustomProvider(props) {
14
14
  classPrefix = _props$classPrefix === void 0 ? getClassNamePrefix() : _props$classPrefix,
15
15
  theme = props.theme,
16
16
  container = props.toastContainer,
17
- rest = _objectWithoutPropertiesLoose(props, ["children", "classPrefix", "theme", "toastContainer"]);
17
+ disableRipple = props.disableRipple,
18
+ rest = _objectWithoutPropertiesLoose(props, ["children", "classPrefix", "theme", "toastContainer", "disableRipple"]);
18
19
 
19
20
  var toasters = React.useRef(new Map());
20
21
 
@@ -28,9 +29,10 @@ var CustomProvider = function CustomProvider(props) {
28
29
  return _extends({
29
30
  classPrefix: classPrefix,
30
31
  theme: theme,
31
- toasters: toasters
32
+ toasters: toasters,
33
+ disableRipple: disableRipple
32
34
  }, rest);
33
- }, [classPrefix, theme, rest]);
35
+ }, [classPrefix, theme, disableRipple, rest]);
34
36
  useEffect(function () {
35
37
  if (canUseDOM && theme) {
36
38
  addClass(document.body, prefix(classPrefix, "theme-" + theme)); // Remove the className that will cause style conflicts
@@ -1,4 +1,4 @@
1
1
  import { ComponentProps } from '../utils/createComponent';
2
2
  export declare type FooterProps = ComponentProps;
3
- declare const Footer: import("../@types/common").RsRefForwardingComponent<"div", ComponentProps>;
3
+ declare const Footer: import("../@types/common").RsRefForwardingComponent<"footer", ComponentProps>;
4
4
  export default Footer;
@@ -1,4 +1,4 @@
1
1
  import { ComponentProps } from '../utils/createComponent';
2
2
  export declare type HeaderProps = ComponentProps;
3
- declare const Header: import("../@types/common").RsRefForwardingComponent<"div", ComponentProps>;
3
+ declare const Header: import("../@types/common").RsRefForwardingComponent<"header", ComponentProps>;
4
4
  export default Header;
@@ -103,7 +103,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
103
103
  columnData = _useColumnData.columnData,
104
104
  setColumnData = _useColumnData.setColumnData,
105
105
  addColumn = _useColumnData.addColumn,
106
- romoveColumnByIndex = _useColumnData.romoveColumnByIndex,
106
+ removeColumnByIndex = _useColumnData.removeColumnByIndex,
107
107
  enforceUpdateColumnData = _useColumnData.enforceUpdateColumnData;
108
108
 
109
109
  useUpdateEffect(function () {
@@ -199,7 +199,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
199
199
  node.loading = false;
200
200
  node[childrenKey] = data;
201
201
 
202
- if (targetRef.current) {
202
+ if (targetRef.current || inline) {
203
203
  addFlattenData(data, node);
204
204
  addColumn(data, columnIndex);
205
205
  }
@@ -214,11 +214,11 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
214
214
  addColumn(node[childrenKey], columnIndex);
215
215
  } else {
216
216
  // Removes subsequent columns of the current column when the clicked node is a leaf node.
217
- romoveColumnByIndex(columnIndex);
217
+ removeColumnByIndex(columnIndex);
218
218
  }
219
219
 
220
220
  (_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);
221
- }, [onSelect, getChildren, childrenKey, addFlattenData, addColumn, romoveColumnByIndex]);
221
+ }, [onSelect, getChildren, childrenKey, inline, addFlattenData, addColumn, removeColumnByIndex]);
222
222
  var handleCheck = useCallback(function (node, event, checked) {
223
223
  var nodeValue = node[valueKey];
224
224
  var nextValue = [];
@@ -51,7 +51,7 @@ export declare function useFlattenData<T>(data: T[], itemKeys: ItemKeys): {
51
51
  export declare function useColumnData<T extends MayHasParent<Record<string, unknown>>>(flattenData: T[]): {
52
52
  columnData: T[][];
53
53
  addColumn: (column: T[], index: number) => void;
54
- romoveColumnByIndex: (index: number) => void;
54
+ removeColumnByIndex: (index: number) => void;
55
55
  setColumnData: import("react").Dispatch<import("react").SetStateAction<T[][]>>;
56
56
  enforceUpdateColumnData: (nextData: T[]) => void;
57
57
  };
@@ -209,7 +209,7 @@ export function useColumnData(flattenData) {
209
209
  */
210
210
 
211
211
 
212
- function romoveColumnByIndex(index) {
212
+ function removeColumnByIndex(index) {
213
213
  setColumnData([].concat(slice(columnData, 0, index)));
214
214
  }
215
215
 
@@ -223,7 +223,7 @@ export function useColumnData(flattenData) {
223
223
  return {
224
224
  columnData: columnData,
225
225
  addColumn: addColumn,
226
- romoveColumnByIndex: romoveColumnByIndex,
226
+ removeColumnByIndex: removeColumnByIndex,
227
227
  setColumnData: setColumnData,
228
228
  enforceUpdateColumnData: enforceUpdateColumnData
229
229
  };
@@ -1,4 +1,4 @@
1
1
  import { ComponentProps } from '../utils/createComponent';
2
2
  export declare type NavbarBrandProps = ComponentProps;
3
- declare const NavbarBrand: import("../@types/common").RsRefForwardingComponent<"div", ComponentProps>;
3
+ declare const NavbarBrand: import("../@types/common").RsRefForwardingComponent<"a", ComponentProps>;
4
4
  export default NavbarBrand;
@@ -372,6 +372,10 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
372
372
  } : speaker);
373
373
  };
374
374
 
375
+ if (typeof children === 'object' && children.type === React.Fragment || typeof children === 'string') {
376
+ console.error('[rsuite] The OverlayTrigger component does not accept strings or Fragments as child.');
377
+ }
378
+
375
379
  return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ? children(triggerEvents, triggerRef) : /*#__PURE__*/React.cloneElement(children, _extends({
376
380
  ref: triggerRef,
377
381
  'aria-describedby': controlId
@@ -224,7 +224,7 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
224
224
  closeLabel: 'Clear'
225
225
  },
226
226
  onClick: handleClean
227
- }), caret && /*#__PURE__*/React.createElement(Caret, {
227
+ }), caret && !showCleanButton && /*#__PURE__*/React.createElement(Caret, {
228
228
  className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["caret"])))
229
229
  })));
230
230
  });
@@ -1,10 +1,9 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
- import React, { useContext } from 'react';
3
+ import React from 'react';
4
4
  import pick from 'lodash/pick';
5
5
  import OverlayTrigger from '../Overlay/OverlayTrigger';
6
- import { placementPolyfill } from '../utils';
7
- import { CustomContext } from '../CustomProvider';
6
+ import { placementPolyfill, useCustom } from '../utils';
8
7
  export var omitTriggerPropKeys = ['onEntered', 'onExited', 'onEnter', 'onEntering', 'onExit', 'onExiting', 'open', 'defaultOpen', 'onHide', 'container', 'containerPadding', 'preventOverflow'];
9
8
  export var pickTriggerPropKeys = [].concat(omitTriggerPropKeys, ['disabled', 'plaintext', 'readOnly', 'loading']);
10
9
  var PickerToggleTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -16,12 +15,15 @@ var PickerToggleTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
16
15
  rest = _objectWithoutPropertiesLoose(props, ["pickerProps", "speaker", "placement", "trigger"]);
17
16
 
18
17
  var pickerTriggerProps = pick(pickerProps, pickTriggerPropKeys);
19
- var context = useContext(CustomContext);
18
+
19
+ var _useCustom = useCustom(),
20
+ rtl = _useCustom.rtl;
21
+
20
22
  return /*#__PURE__*/React.createElement(OverlayTrigger, _extends({}, rest, pickerTriggerProps, {
21
23
  disabled: pickerTriggerProps.disabled || pickerTriggerProps.loading,
22
24
  ref: ref,
23
25
  trigger: trigger,
24
- placement: placementPolyfill(placement, context === null || context === void 0 ? void 0 : context.rtl),
26
+ placement: placementPolyfill(placement, rtl),
25
27
  speaker: speaker
26
28
  }));
27
29
  });
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
5
5
  import getOffset from 'dom-lib/getOffset';
6
6
  import on from 'dom-lib/on';
7
7
  import Transition from '../Animation/Transition';
8
- import { mergeRefs, useClassNames } from '../utils';
8
+ import { mergeRefs, useClassNames, useCustom } from '../utils';
9
9
 
10
10
  var getPosition = function getPosition(target, event) {
11
11
  var offset = getOffset(target);
@@ -23,6 +23,9 @@ var getPosition = function getPosition(target, event) {
23
23
  };
24
24
 
25
25
  var Ripple = /*#__PURE__*/React.forwardRef(function (props, ref) {
26
+ var _useCustom = useCustom(),
27
+ disableRipple = _useCustom.disableRipple;
28
+
26
29
  var _props$as = props.as,
27
30
  Component = _props$as === void 0 ? 'span' : _props$as,
28
31
  className = props.className,
@@ -72,6 +75,11 @@ var Ripple = /*#__PURE__*/React.forwardRef(function (props, ref) {
72
75
  };
73
76
  }
74
77
  }, [handleMouseDown]);
78
+
79
+ if (disableRipple) {
80
+ return null;
81
+ }
82
+
75
83
  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
76
84
  className: classes,
77
85
  ref: mergeRefs(triggerRef, ref)
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
- import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
2
+ import { WithAsProps, RsRefForwardingComponent, ItemDataType } from '../@types/common';
3
3
  export interface TreeNodeProps extends WithAsProps {
4
4
  rtl?: boolean;
5
5
  layer: number;
6
- value?: any;
7
- label?: any;
6
+ value?: ItemDataType['value'];
7
+ label?: ItemDataType['label'];
8
8
  focus?: boolean;
9
9
  loading?: boolean;
10
10
  expand?: boolean;
@@ -5,9 +5,8 @@ import PropTypes from 'prop-types';
5
5
  import hasClass from 'dom-lib/hasClass';
6
6
  import ArrowDown from '@rsuite/icons/legacy/ArrowDown';
7
7
  import Spinner from '@rsuite/icons/legacy/Spinner';
8
- import reactToString from '../utils/reactToString';
9
8
  import { useClassNames } from '../utils';
10
- import { getTreeNodeIndent } from '../utils/treeUtils';
9
+ import { getTreeNodeIndent, stringifyTreeNodeLabel } from '../utils/treeUtils';
11
10
  var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
12
11
  var _ref$as = _ref.as,
13
12
  Component = _ref$as === void 0 ? 'div' : _ref$as,
@@ -49,14 +48,6 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
49
48
  merge = _useClassNames.merge,
50
49
  withClassPrefix = _useClassNames.withClassPrefix;
51
50
 
52
- var getTitle = useCallback(function () {
53
- if (typeof label === 'string') {
54
- return label;
55
- } else if ( /*#__PURE__*/React.isValidElement(label)) {
56
- var nodes = reactToString(label);
57
- return nodes.join('');
58
- }
59
- }, [label]);
60
51
  var handleExpand = useCallback(function (event) {
61
52
  var _event$nativeEvent, _event$nativeEvent$st;
62
53
 
@@ -145,7 +136,7 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
145
136
  });
146
137
  return /*#__PURE__*/React.createElement("span", {
147
138
  className: prefix('label'),
148
- title: getTitle(),
139
+ title: stringifyTreeNodeLabel(label),
149
140
  "data-layer": layer,
150
141
  "data-key": (nodeData === null || nodeData === void 0 ? void 0 : nodeData.refKey) || '',
151
142
  role: "button",
@@ -9,7 +9,7 @@ import React, { useState, useRef, useEffect, useCallback, useContext } from 'rea
9
9
  import PropTypes from 'prop-types';
10
10
  import { List, AutoSizer } from '../Windowing';
11
11
  import TreeNode from './TreeNode';
12
- import { getTreeNodeIndent } from '../utils/treeUtils';
12
+ import { createDragPreview, getTreeNodeIndent, removeDragPreview, stringifyTreeNodeLabel } from '../utils/treeUtils';
13
13
  import { createChainedFunction, useClassNames, useCustom, useControlled, TREE_NODE_DROP_POSITION, KEY_VALUES, mergeRefs, shallowEqual } from '../utils';
14
14
  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';
15
15
  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) {
331
331
  }, [valueKey, childrenKey, expandItemValues, getChildren, onExpand, setExpandItemValues, loadChildren]);
332
332
  var handleDragStart = useCallback(function (nodeData, event) {
333
333
  if (draggable) {
334
+ var _event$dataTransfer;
335
+
336
+ var dragMoverNode = createDragPreview(stringifyTreeNodeLabel(nodeData[labelKey]), treePrefix('drag-preview'));
337
+ (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setDragImage(dragMoverNode, 0, 0);
334
338
  setDragNodeKeys(getDragNodeKeys(nodeData, childrenKey, valueKey));
335
339
  setDragNode(flattenNodes[nodeData.refKey]);
336
340
  onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);
337
341
  }
338
- }, [draggable, childrenKey, flattenNodes, onDragStart, setDragNodeKeys, setDragNode, valueKey]);
342
+ }, [draggable, labelKey, treePrefix, setDragNodeKeys, childrenKey, valueKey, setDragNode, flattenNodes, onDragStart]);
339
343
  var handleDragEnter = useCallback(function (nodeData, event) {
340
344
  if (dragNodeKeys.some(function (d) {
341
345
  return shallowEqual(d, nodeData[valueKey]);
@@ -354,6 +358,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
354
358
  if (dragNodeKeys.some(function (d) {
355
359
  return shallowEqual(d, nodeData[valueKey]);
356
360
  })) {
361
+ event.dataTransfer.dropEffect = 'none';
357
362
  return;
358
363
  }
359
364
 
@@ -369,6 +374,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
369
374
  onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);
370
375
  }, [onDragLeave]);
371
376
  var handleDragEnd = useCallback(function (nodeData, event) {
377
+ removeDragPreview();
372
378
  setDragNode(null);
373
379
  setDragNodeKeys([]);
374
380
  setDragOverNodeKey(null);
@@ -384,6 +390,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
384
390
  onDrop === null || onDrop === void 0 ? void 0 : onDrop(dropData, event);
385
391
  }
386
392
 
393
+ removeDragPreview();
387
394
  setDragNode(null);
388
395
  setDragNodeKeys([]);
389
396
  setDragOverNodeKey(null);
@@ -1,13 +1,13 @@
1
1
  import React from 'react';
2
2
  import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
3
3
  export declare type ComponentProps = WithAsProps & React.HTMLAttributes<HTMLDivElement>;
4
- interface Props extends React.HTMLAttributes<HTMLDivElement> {
4
+ interface Props<TElement extends React.ElementType> extends React.HTMLAttributes<HTMLDivElement> {
5
5
  name: string;
6
- componentAs?: React.ElementType;
6
+ componentAs?: TElement;
7
7
  componentClassPrefix?: string;
8
8
  }
9
9
  /**
10
10
  * Create a component with `classPrefix` and `as` attributes.
11
11
  */
12
- declare function createComponent({ name, componentAs, componentClassPrefix, ...defaultProps }: Props): RsRefForwardingComponent<"div", ComponentProps>;
12
+ declare function createComponent<TElement extends React.ElementType = 'div'>({ name, componentAs, componentClassPrefix, ...defaultProps }: Props<TElement>): RsRefForwardingComponent<TElement, ComponentProps>;
13
13
  export default createComponent;
@@ -262,3 +262,15 @@ export declare function getTreeNodeIndent(rtl: any, layer: any, absolute?: boole
262
262
  * @returns
263
263
  */
264
264
  export declare function getNodeFormattedRefKey(value: string | number): string;
265
+ /**
266
+ * create drag preview when tree node start drag
267
+ * @param name
268
+ * @param className
269
+ * @returns
270
+ */
271
+ export declare function createDragPreview(name: string, className: string): HTMLDivElement;
272
+ /**
273
+ * remove drag preview when tree node drop
274
+ */
275
+ export declare function removeDragPreview(): void;
276
+ export declare function stringifyTreeNodeLabel(label: string | React.ReactNode): string;
@@ -1031,4 +1031,40 @@ export function getTreeNodeIndent(rtl, layer, absolute) {
1031
1031
 
1032
1032
  export function getNodeFormattedRefKey(value) {
1033
1033
  return "" + (typeof value === 'number' ? 'Number_' : 'String_') + value;
1034
+ }
1035
+ /**
1036
+ * create drag preview when tree node start drag
1037
+ * @param name
1038
+ * @param className
1039
+ * @returns
1040
+ */
1041
+
1042
+ export function createDragPreview(name, className) {
1043
+ var dragPreview = document.createElement('div');
1044
+ dragPreview.id = 'rs-tree-drag-preview';
1045
+ dragPreview.innerHTML = name;
1046
+ dragPreview.classList.add(className);
1047
+ document.body.appendChild(dragPreview);
1048
+ return dragPreview;
1049
+ }
1050
+ /**
1051
+ * remove drag preview when tree node drop
1052
+ */
1053
+
1054
+ export function removeDragPreview() {
1055
+ var _dragPreview$parentNo, _dragPreview$parentNo2;
1056
+
1057
+ var dragPreview = document.getElementById('rs-tree-drag-preview');
1058
+ 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);
1059
+ }
1060
+ export function stringifyTreeNodeLabel(label) {
1061
+ if (typeof label === 'string') {
1062
+ return label;
1063
+ } else if ( /*#__PURE__*/React.isValidElement(label)) {
1064
+ var _nodes2 = reactToString(label);
1065
+
1066
+ return _nodes2.join('');
1067
+ }
1068
+
1069
+ return '';
1034
1070
  }
@@ -30,7 +30,8 @@ function useCustom(keys, overrideLocale) {
30
30
  rtl = _useContext$rtl === void 0 ? getDefaultRTL() : _useContext$rtl,
31
31
  formatDate = _useContext.formatDate,
32
32
  parseDate = _useContext.parseDate,
33
- toasters = _useContext.toasters;
33
+ toasters = _useContext.toasters,
34
+ disableRipple = _useContext.disableRipple;
34
35
 
35
36
  var componentLocale = _extends({}, locale === null || locale === void 0 ? void 0 : locale.common, typeof keys === 'string' ? locale === null || locale === void 0 ? void 0 : locale[keys] : typeof keys === 'object' ? mergeObject(keys.map(function (key) {
36
37
  return locale === null || locale === void 0 ? void 0 : locale[key];
@@ -59,6 +60,7 @@ function useCustom(keys, overrideLocale) {
59
60
  locale: componentLocale,
60
61
  rtl: rtl,
61
62
  toasters: toasters,
63
+ disableRipple: disableRipple,
62
64
  formatDate: formatDate || defaultFormatDate,
63
65
  parseDate: parseDate || defaultParseDate
64
66
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rsuite",
3
- "version": "5.24.0",
3
+ "version": "5.25.0",
4
4
  "description": "A suite of react components",
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
@@ -37,7 +37,7 @@
37
37
  "lodash": "^4.17.11",
38
38
  "prop-types": "^15.8.1",
39
39
  "react-window": "^1.8.8",
40
- "rsuite-table": "^5.8.1",
40
+ "rsuite-table": "^5.8.2",
41
41
  "schema-typed": "^2.0.3"
42
42
  },
43
43
  "peerDependencies": {
@@ -78,13 +78,13 @@
78
78
  --rs-btn-default-active-bg: @B300-dark;
79
79
  --rs-btn-default-active-text: @B000-dark;
80
80
  --rs-btn-default-disabled-bg: @B600-dark;
81
- --rs-btn-default-disabled-text: @B500-dark;
81
+ --rs-btn-default-disabled-text: @B400-dark;
82
82
  --rs-btn-primary-bg: @H700-dark;
83
83
  --rs-btn-primary-text: @B000-dark;
84
84
  --rs-btn-primary-hover-bg: @H600-dark;
85
85
  --rs-btn-primary-active-bg: @H400-dark;
86
86
  --rs-btn-subtle-text: @B200-dark;
87
- --rs-btn-subtle-hover-bg: @B700-dark;
87
+ --rs-btn-subtle-hover-bg: @B500-dark;
88
88
  --rs-btn-subtle-hover-text: @B050-dark;
89
89
  --rs-btn-subtle-active-bg: @B400-dark;
90
90
  --rs-btn-subtle-active-text: @B000-dark;
@@ -150,6 +150,9 @@
150
150
  --rs-placeholder: @B600-dark;
151
151
  --rs-placeholder-active: lighten(@B600-dark, 5%);
152
152
 
153
+ // Breadcrumb
154
+ --rs-breadcrumb-item-active-text: #fff;
155
+
153
156
  // Dropdown
154
157
  --rs-dropdown-divider: @B600-dark;
155
158
  --rs-dropdown-item-bg-hover: @B600-dark;
@@ -339,6 +342,7 @@
339
342
  --rs-calendar-range-bg: fade(@H900-dark, 50%);
340
343
  --rs-calendar-time-unit-bg: @B600-dark;
341
344
  --rs-calendar-date-selected-text: #fff;
345
+ --rs-calendar-cell-selected-hover-bg: @H700;
342
346
 
343
347
  // Popover
344
348
  --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
@@ -157,6 +157,9 @@
157
157
  --rs-placeholder: @B600-high-contrast;
158
158
  --rs-placeholder-active: lighten(@B600-high-contrast, 5%);
159
159
 
160
+ // Breadcrumb
161
+ --rs-breadcrumb-item-active-text: #fff;
162
+
160
163
  // Dropdown
161
164
  --rs-dropdown-divider: @B600-high-contrast;
162
165
  --rs-dropdown-item-bg-hover: @B600-high-contrast;
@@ -355,6 +358,7 @@
355
358
  --rs-calendar-range-bg: fade(@H900-high-contrast, 50%);
356
359
  --rs-calendar-time-unit-bg: @B900-high-contrast;
357
360
  --rs-calendar-date-selected-text: @B900-high-contrast;
361
+ --rs-calendar-cell-selected-hover-bg: @B050-high-contrast;
358
362
 
359
363
  // Popover
360
364
  --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
@@ -91,7 +91,7 @@
91
91
  --rs-btn-primary-hover-bg: @H600;
92
92
  --rs-btn-primary-active-bg: @H700;
93
93
  --rs-btn-subtle-text: @B600;
94
- --rs-btn-subtle-hover-bg: @B050;
94
+ --rs-btn-subtle-hover-bg: @B200;
95
95
  --rs-btn-subtle-hover-text: @B800;
96
96
  --rs-btn-subtle-active-bg: @B200;
97
97
  --rs-btn-subtle-active-text: @B900;
@@ -157,6 +157,9 @@
157
157
  --rs-placeholder: @B100;
158
158
  --rs-placeholder-active: @B200;
159
159
 
160
+ // Breadcrumb
161
+ --rs-breadcrumb-item-active-text: @B900;
162
+
160
163
  // Dropdown
161
164
  --rs-dropdown-divider: @B200;
162
165
  --rs-dropdown-item-bg-hover: fade(@H100, 50%);
@@ -348,6 +351,7 @@
348
351
  --rs-calendar-range-bg: fade(@H100, 50%);
349
352
  --rs-calendar-time-unit-bg: @B050;
350
353
  --rs-calendar-date-selected-text: #fff;
354
+ --rs-calendar-cell-selected-hover-bg: @H700;
351
355
 
352
356
  // Popover
353
357
  --rs-popover-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);