rsuite 5.4.2 → 5.5.1

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 (101) hide show
  1. package/Button/styles/index.less +1 -5
  2. package/CHANGELOG.md +47 -0
  3. package/Carousel/styles/index.less +1 -0
  4. package/CheckTreePicker/styles/index.less +51 -50
  5. package/Drawer/styles/index.less +3 -0
  6. package/Dropdown/styles/index.less +3 -19
  7. package/Dropdown/styles/mixin.less +0 -2
  8. package/Modal/styles/mixin.less +1 -0
  9. package/Navbar/styles/index.less +8 -3
  10. package/Picker/styles/mixin.less +3 -2
  11. package/README.md +1 -1
  12. package/Sidenav/styles/index.less +59 -58
  13. package/TreePicker/styles/index.less +3 -3
  14. package/cjs/Calendar/useCalendarDate.d.ts +1 -1
  15. package/cjs/Calendar/useCalendarDate.js +1 -1
  16. package/cjs/Carousel/Carousel.js +7 -1
  17. package/cjs/Cascader/Cascader.js +13 -2
  18. package/cjs/CheckPicker/CheckPicker.d.ts +5 -2
  19. package/cjs/CheckPicker/test/CheckPicker.test.js +8 -0
  20. package/cjs/CheckTreePicker/CheckTreePicker.js +1 -1
  21. package/cjs/CheckTreePicker/utils.js +1 -1
  22. package/cjs/CustomProvider/CustomProvider.d.ts +14 -14
  23. package/cjs/CustomProvider/CustomProvider.js +4 -3
  24. package/cjs/DatePicker/DatePicker.d.ts +1 -1
  25. package/cjs/DatePicker/DatePicker.js +2 -4
  26. package/cjs/DateRangePicker/Calendar.js +2 -16
  27. package/cjs/Dropdown/Dropdown.d.ts +5 -0
  28. package/cjs/Dropdown/DropdownMenu.js +5 -11
  29. package/cjs/Dropdown/test/Dropdown.test.d.ts +1 -0
  30. package/cjs/Dropdown/test/Dropdown.test.js +30 -0
  31. package/cjs/InputNumber/InputNumber.d.ts +1 -1
  32. package/cjs/InputNumber/InputNumber.js +36 -6
  33. package/cjs/InputNumber/test/InputNumber.test.d.ts +1 -0
  34. package/cjs/InputNumber/test/InputNumber.test.js +14 -0
  35. package/cjs/Modal/utils.js +16 -8
  36. package/cjs/MultiCascader/MultiCascader.js +7 -3
  37. package/cjs/Nav/NavItem.js +3 -1
  38. package/cjs/Picker/DropdownMenu.js +5 -0
  39. package/cjs/Picker/PickerToggle.js +2 -4
  40. package/cjs/RangeSlider/RangeSlider.d.ts +12 -2
  41. package/cjs/RangeSlider/RangeSlider.js +35 -12
  42. package/cjs/SelectPicker/SelectPicker.d.ts +5 -2
  43. package/cjs/SelectPicker/test/SelectPicker.test.js +8 -0
  44. package/cjs/Uploader/UploadFileItem.d.ts +1 -1
  45. package/cjs/Uploader/UploadFileItem.js +1 -1
  46. package/cjs/Uploader/Uploader.js +3 -0
  47. package/cjs/utils/propTypeChecker.d.ts +2 -6
  48. package/cjs/utils/propTypeChecker.js +7 -59
  49. package/cjs/utils/treeUtils.js +4 -3
  50. package/cjs/utils/useClickOutside.js +6 -2
  51. package/dist/rsuite-rtl.css +399 -252
  52. package/dist/rsuite-rtl.min.css +1 -1
  53. package/dist/rsuite-rtl.min.css.map +1 -1
  54. package/dist/rsuite.css +399 -252
  55. package/dist/rsuite.js +27 -27
  56. package/dist/rsuite.min.css +1 -1
  57. package/dist/rsuite.min.css.map +1 -1
  58. package/dist/rsuite.min.js +1 -1
  59. package/dist/rsuite.min.js.map +1 -1
  60. package/esm/Calendar/useCalendarDate.d.ts +1 -1
  61. package/esm/Calendar/useCalendarDate.js +1 -1
  62. package/esm/Carousel/Carousel.js +9 -3
  63. package/esm/Cascader/Cascader.js +13 -2
  64. package/esm/CheckPicker/CheckPicker.d.ts +5 -2
  65. package/esm/CheckPicker/test/CheckPicker.test.js +7 -0
  66. package/esm/CheckTreePicker/CheckTreePicker.js +1 -1
  67. package/esm/CheckTreePicker/utils.js +1 -1
  68. package/esm/CustomProvider/CustomProvider.d.ts +14 -14
  69. package/esm/CustomProvider/CustomProvider.js +2 -2
  70. package/esm/DatePicker/DatePicker.d.ts +1 -1
  71. package/esm/DatePicker/DatePicker.js +2 -3
  72. package/esm/DateRangePicker/Calendar.js +2 -16
  73. package/esm/Dropdown/Dropdown.d.ts +5 -0
  74. package/esm/Dropdown/DropdownMenu.js +5 -11
  75. package/esm/Dropdown/test/Dropdown.test.d.ts +1 -0
  76. package/esm/Dropdown/test/Dropdown.test.js +22 -0
  77. package/esm/InputNumber/InputNumber.d.ts +1 -1
  78. package/esm/InputNumber/InputNumber.js +38 -7
  79. package/esm/InputNumber/test/InputNumber.test.d.ts +1 -0
  80. package/esm/InputNumber/test/InputNumber.test.js +7 -0
  81. package/esm/Modal/utils.js +16 -8
  82. package/esm/MultiCascader/MultiCascader.js +7 -3
  83. package/esm/Nav/NavItem.js +3 -1
  84. package/esm/Picker/DropdownMenu.js +5 -0
  85. package/esm/Picker/PickerToggle.js +2 -4
  86. package/esm/RangeSlider/RangeSlider.d.ts +12 -2
  87. package/esm/RangeSlider/RangeSlider.js +35 -12
  88. package/esm/SelectPicker/SelectPicker.d.ts +5 -2
  89. package/esm/SelectPicker/test/SelectPicker.test.js +7 -0
  90. package/esm/Uploader/UploadFileItem.d.ts +1 -1
  91. package/esm/Uploader/UploadFileItem.js +1 -1
  92. package/esm/Uploader/Uploader.js +4 -1
  93. package/esm/utils/propTypeChecker.d.ts +2 -6
  94. package/esm/utils/propTypeChecker.js +7 -59
  95. package/esm/utils/treeUtils.js +6 -3
  96. package/esm/utils/useClickOutside.js +6 -2
  97. package/package.json +2 -2
  98. package/styles/color-modes/dark.less +1 -0
  99. package/styles/color-modes/high-contrast.less +1 -0
  100. package/styles/color-modes/light.less +1 -0
  101. package/styles/mixins/utilities.less +17 -5
@@ -1,4 +1,4 @@
1
- declare const useCalendarDate: (value: Date | undefined, defaultDate: Date | undefined) => {
1
+ declare const useCalendarDate: (value: Date | null | undefined, defaultDate: Date | undefined) => {
2
2
  calendarDate: Date;
3
3
  setCalendarDate: (date: Date | undefined) => void;
4
4
  };
@@ -19,7 +19,7 @@ var useCalendarDate = function useCalendarDate(value, defaultDate) {
19
19
  var _valueRef$current;
20
20
 
21
21
  if ((value === null || value === void 0 ? void 0 : value.valueOf()) !== ((_valueRef$current = valueRef.current) === null || _valueRef$current === void 0 ? void 0 : _valueRef$current.valueOf())) {
22
- setCalendarDate(value);
22
+ setCalendarDate(value !== null && value !== void 0 ? value : new Date());
23
23
  valueRef.current = value;
24
24
  }
25
25
  }, [value]);
@@ -1,9 +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, { useState, useMemo, useCallback } from 'react';
3
+ import React, { useState, useMemo, useCallback, useRef } from 'react';
4
4
  import PropTypes from 'prop-types';
5
5
  import classNames from 'classnames';
6
- import { useClassNames, useCustom, guid, ReactChildren, useTimeout } from '../utils';
6
+ import { useClassNames, useCustom, guid, ReactChildren, useTimeout, mergeRefs } from '../utils';
7
7
  var Carousel = /*#__PURE__*/React.forwardRef(function (props, ref) {
8
8
  var _sliderStyles, _ref;
9
9
 
@@ -46,7 +46,13 @@ var Carousel = /*#__PURE__*/React.forwardRef(function (props, ref) {
46
46
  lastIndex = _useState2[0],
47
47
  setLastIndex = _useState2[1];
48
48
 
49
+ var rootRef = useRef(null);
50
+
49
51
  var handleSlide = function handleSlide(nextActiveIndex, event) {
52
+ if (!rootRef.current) {
53
+ return;
54
+ }
55
+
50
56
  clear();
51
57
  var index = nextActiveIndex !== null && nextActiveIndex !== void 0 ? nextActiveIndex : activeIndex + 1; // When index is greater than count, start from 1 again.
52
58
 
@@ -111,7 +117,7 @@ var Carousel = /*#__PURE__*/React.forwardRef(function (props, ref) {
111
117
  var sliderStyles = (_sliderStyles = {}, _sliderStyles[lengthKey] = count * 100 + "%", _sliderStyles.transform = vertical ? "translate3d(0, " + activeRatio + " ,0)" : "translate3d(" + activeRatio + ", 0 ,0)", _sliderStyles);
112
118
  var showMask = count > 1 && activeIndex === 0 && activeIndex !== lastIndex;
113
119
  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
114
- ref: ref,
120
+ ref: mergeRefs(ref, rootRef),
115
121
  className: classes
116
122
  }), /*#__PURE__*/React.createElement("div", {
117
123
  className: prefix('content')
@@ -188,10 +188,18 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
188
188
  }
189
189
  }, [getSearchResult, onSearch, setFocusItemValue, setKeys, setLayer, valueKey]);
190
190
  var handleEntered = useCallback(function () {
191
+ if (!targetRef.current) {
192
+ return;
193
+ }
194
+
191
195
  onOpen === null || onOpen === void 0 ? void 0 : onOpen();
192
196
  setActive(true);
193
197
  }, [onOpen]);
194
198
  var handleExited = useCallback(function () {
199
+ if (!targetRef.current) {
200
+ return;
201
+ }
202
+
195
203
  onClose === null || onClose === void 0 ? void 0 : onClose();
196
204
  setActive(false);
197
205
  setSearchKeyword('');
@@ -202,7 +210,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
202
210
  (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();
203
211
  }, [triggerRef]);
204
212
  var handleClean = useCallback(function (event) {
205
- if (disabled) {
213
+ if (disabled || !targetRef.current) {
206
214
  return;
207
215
  }
208
216
 
@@ -260,7 +268,10 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
260
268
  children.then(function (data) {
261
269
  node.loading = false;
262
270
  node[childrenKey] = data;
263
- addColumn(data, cascadePaths.length);
271
+
272
+ if (targetRef.current) {
273
+ addColumn(data, cascadePaths.length);
274
+ }
264
275
  });
265
276
  } else {
266
277
  node.loading = false;
@@ -1,5 +1,6 @@
1
- import React from 'react';
1
+ import React, { Ref } from 'react';
2
2
  import { PickerLocale } from '../locales';
3
+ import { PickerInstance } from '../Picker';
3
4
  import { ItemDataType, FormControlPickerProps } from '../@types/common';
4
5
  import type { MultipleSelectProps } from '../SelectPicker';
5
6
  export declare type ValueType = (number | string)[];
@@ -10,7 +11,9 @@ export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerL
10
11
  countable?: boolean;
11
12
  }
12
13
  export interface CheckPickerComponent {
13
- <T>(props: CheckPickerProps<T>): JSX.Element | null;
14
+ <T>(props: CheckPickerProps<T> & {
15
+ ref?: Ref<PickerInstance>;
16
+ }): JSX.Element | null;
14
17
  displayName?: string;
15
18
  propTypes?: React.WeakValidationMap<CheckPickerProps<any>>;
16
19
  }
@@ -61,4 +61,11 @@ React.createElement(CheckPicker, {
61
61
  onChange: function onChange(newValue) {
62
62
  expectType(newValue);
63
63
  }
64
+ });
65
+ var pickerRef = /*#__PURE__*/React.createRef();
66
+
67
+ /*#__PURE__*/
68
+ React.createElement(CheckPicker, {
69
+ ref: pickerRef,
70
+ data: []
64
71
  });
@@ -621,7 +621,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
621
621
  var renderCheckTree = function renderCheckTree() {
622
622
  var _withCheckTreeClassPr, _merge2;
623
623
 
624
- var classes = withCheckTreeClassPrefix((_withCheckTreeClassPr = {}, _withCheckTreeClassPr[className !== null && className !== void 0 ? className : ''] = inline, _withCheckTreeClassPr['without-children'] = !isSomeNodeHasChildren, _withCheckTreeClassPr.virtualized = virtualized, _withCheckTreeClassPr));
624
+ var classes = withCheckTreeClassPrefix((_withCheckTreeClassPr = {}, _withCheckTreeClassPr[className !== null && className !== void 0 ? className : ''] = inline, _withCheckTreeClassPr['without-children'] = !isSomeNodeHasChildren(data, childrenKey), _withCheckTreeClassPr.virtualized = virtualized, _withCheckTreeClassPr));
625
625
  var formattedNodes = getFormattedNodes(renderNode);
626
626
 
627
627
  if (!formattedNodes.some(function (v) {
@@ -38,7 +38,7 @@ export function isSomeChildChecked(nodes, parent, childrenKey) {
38
38
  }
39
39
  export function isSomeNodeHasChildren(data, childrenKey) {
40
40
  return data.some(function (node) {
41
- return node[childrenKey];
41
+ return Array.isArray(node[childrenKey]);
42
42
  });
43
43
  }
44
44
  /**
@@ -72,10 +72,10 @@ declare const CustomContext: React.Context<CustomProviderProps<{
72
72
  saturday: string;
73
73
  ok: string;
74
74
  today: string;
75
- yesterday: string; /** Language configuration */
75
+ yesterday: string;
76
76
  hours: string;
77
77
  minutes: string;
78
- seconds: string;
78
+ seconds: string; /** Support right-to-left */
79
79
  formattedMonthPattern: string;
80
80
  formattedDayPattern: string;
81
81
  dateLocale: any;
@@ -90,10 +90,10 @@ declare const CustomContext: React.Context<CustomProviderProps<{
90
90
  saturday: string;
91
91
  ok: string;
92
92
  today: string;
93
- yesterday: string; /** Language configuration */
93
+ yesterday: string;
94
94
  hours: string;
95
95
  minutes: string;
96
- seconds: string;
96
+ seconds: string; /** Support right-to-left */
97
97
  formattedMonthPattern: string;
98
98
  formattedDayPattern: string;
99
99
  dateLocale: any;
@@ -109,10 +109,10 @@ declare const CustomContext: React.Context<CustomProviderProps<{
109
109
  saturday: string;
110
110
  ok: string;
111
111
  today: string;
112
- yesterday: string; /** Language configuration */
112
+ yesterday: string;
113
113
  hours: string;
114
114
  minutes: string;
115
- seconds: string;
115
+ seconds: string; /** Support right-to-left */
116
116
  formattedMonthPattern: string;
117
117
  formattedDayPattern: string;
118
118
  dateLocale: any;
@@ -120,7 +120,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
120
120
  Picker?: {
121
121
  noResultsText: string;
122
122
  placeholder: string;
123
- searchPlaceholder: string; /** Supported themes */
123
+ searchPlaceholder: string;
124
124
  checkAll: string;
125
125
  } | undefined;
126
126
  InputPicker?: {
@@ -176,10 +176,10 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
176
176
  saturday: string;
177
177
  ok: string;
178
178
  today: string;
179
- yesterday: string; /** Language configuration */
179
+ yesterday: string;
180
180
  hours: string;
181
181
  minutes: string;
182
- seconds: string;
182
+ seconds: string; /** Support right-to-left */
183
183
  formattedMonthPattern: string;
184
184
  formattedDayPattern: string;
185
185
  dateLocale: any;
@@ -194,10 +194,10 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
194
194
  saturday: string;
195
195
  ok: string;
196
196
  today: string;
197
- yesterday: string; /** Language configuration */
197
+ yesterday: string;
198
198
  hours: string;
199
199
  minutes: string;
200
- seconds: string;
200
+ seconds: string; /** Support right-to-left */
201
201
  formattedMonthPattern: string;
202
202
  formattedDayPattern: string;
203
203
  dateLocale: any;
@@ -213,10 +213,10 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
213
213
  saturday: string;
214
214
  ok: string;
215
215
  today: string;
216
- yesterday: string; /** Language configuration */
216
+ yesterday: string;
217
217
  hours: string;
218
218
  minutes: string;
219
- seconds: string;
219
+ seconds: string; /** Support right-to-left */
220
220
  formattedMonthPattern: string;
221
221
  formattedDayPattern: string;
222
222
  dateLocale: any;
@@ -224,7 +224,7 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
224
224
  Picker?: {
225
225
  noResultsText: string;
226
226
  placeholder: string;
227
- searchPlaceholder: string; /** Supported themes */
227
+ searchPlaceholder: string;
228
228
  checkAll: string;
229
229
  } | undefined;
230
230
  InputPicker?: {
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
- import React from 'react';
3
+ import React, { useEffect } from 'react';
4
4
  import { getClassNamePrefix, prefix } from '../utils/prefix';
5
5
  import { addClass, removeClass, canUseDOM } from '../DOMHelper';
6
6
  var CustomContext = /*#__PURE__*/React.createContext({});
@@ -21,7 +21,7 @@ var CustomProvider = function CustomProvider(props) {
21
21
  theme: theme
22
22
  }, rest);
23
23
  }, [classPrefix, theme, rest]);
24
- React.useEffect(function () {
24
+ useEffect(function () {
25
25
  if (canUseDOM && theme) {
26
26
  addClass(document.body, prefix(classPrefix, "theme-" + theme)); // Remove the className that will cause style conflicts
27
27
 
@@ -3,7 +3,7 @@ import { RangeType } from './Toolbar';
3
3
  import { DatePickerLocale } from '../locales';
4
4
  import { FormControlBaseProps, PickerBaseProps, RsRefForwardingComponent } from '../@types/common';
5
5
  export type { RangeType } from './Toolbar';
6
- export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date> {
6
+ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null> {
7
7
  /** Configure shortcut options */
8
8
  ranges?: RangeType<Date>[];
9
9
  /** Calendar panel default presentation date and time */
@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
3
  import React, { useCallback, useMemo, useRef, useState } from 'react';
4
4
  import PropTypes from 'prop-types';
5
- import isNil from 'lodash/isNil';
6
5
  import mapValues from 'lodash/mapValues';
7
6
  import pick from 'lodash/pick';
8
7
  import omit from 'lodash/omit';
@@ -166,11 +165,11 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
166
165
  closeOverlay = true;
167
166
  }
168
167
 
169
- var nextValue = !isNil(nextPageDate) ? nextPageDate : calendarDate;
168
+ var nextValue = typeof nextPageDate !== 'undefined' ? nextPageDate : calendarDate;
170
169
  setCalendarDate(nextValue || new Date());
171
170
  setValue(nextValue);
172
171
 
173
- if (nextValue !== value || !DateUtils.isSameDay(nextValue, value)) {
172
+ if (nextValue !== value) {
174
173
  onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
175
174
  } // `closeOverlay` default value is `true`
176
175
 
@@ -99,22 +99,8 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
99
99
  return !after;
100
100
  }, [calendarDate, index, showOneCalendar]);
101
101
  var disabledMonth = useCallback(function (date) {
102
- var after;
103
-
104
- if (disabledDate !== null && disabledDate !== void 0 && disabledDate(date, value, DATERANGE_DISABLED_TARGET.CALENDAR)) {
105
- return true;
106
- }
107
-
108
- if (showOneCalendar) return false;
109
-
110
- if (index === 1) {
111
- after = isAfter(date, calendarDate[0]);
112
- return !after;
113
- }
114
-
115
- after = isAfter(calendarDate[1], date);
116
- return !after;
117
- }, [calendarDate, disabledDate, index, showOneCalendar, value]);
102
+ return disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date, value, DATERANGE_DISABLED_TARGET.CALENDAR);
103
+ }, [disabledDate, value]);
118
104
  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
119
105
  format: format,
120
106
  calendarState: calendarState,
@@ -3,6 +3,7 @@ import DropdownMenu from './DropdownMenu';
3
3
  import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../@types/common';
4
4
  import { IconProps } from '@rsuite/icons/lib/Icon';
5
5
  import DropdownItem from './DropdownItem';
6
+ import Button from '../Button';
6
7
  export declare type DropdownTrigger = 'click' | 'hover' | 'contextMenu';
7
8
  export interface DropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'title'> {
8
9
  /** Define the title as a submenu */
@@ -48,6 +49,10 @@ export interface DropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttr
48
49
  onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
49
50
  }
50
51
  export interface DropdownComponent extends RsRefForwardingComponent<'div', DropdownProps> {
52
+ <ToggleAs extends React.ElementType = typeof Button>(props: DropdownProps & {
53
+ ref?: React.Ref<any>;
54
+ toggleAs?: ToggleAs;
55
+ } & React.ComponentProps<ToggleAs>, context: any): JSX.Element | null;
51
56
  Item: typeof DropdownItem;
52
57
  Menu: typeof DropdownMenu;
53
58
  }
@@ -129,8 +129,7 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
129
129
  var classes = mergeItemClassNames(className, withItemClassPrefix({
130
130
  disabled: disabled,
131
131
  open: open,
132
- submenu: true // focus: hasFocus
133
-
132
+ submenu: true
134
133
  }));
135
134
  return /*#__PURE__*/React.createElement("li", _extends({
136
135
  ref: mergeRefs(ref, containerRef),
@@ -139,13 +138,10 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
139
138
  var open = _ref2.open,
140
139
  buttonProps = _objectWithoutPropertiesLoose(_ref2, ["open"]);
141
140
 
142
- var classes = mergeItemClassNames(className, prefixItemClassName("pull-" + (rtl ? 'left' : 'right')), prefixItemClassName(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["toggle"]))), // prefixItemClassName`submenu`,
143
- withItemClassPrefix({
141
+ var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["toggle"]))), withItemClassPrefix({
144
142
  'with-icon': icon,
145
143
  open: open,
146
- // active: selected,
147
- disabled: disabled // focus: active
148
-
144
+ disabled: disabled
149
145
  }));
150
146
  return /*#__PURE__*/React.createElement("div", _extends({
151
147
  ref: mergeRefs(buttonRef, buttonRef),
@@ -182,8 +178,7 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
182
178
  active = _ref5.active,
183
179
  menuitem = _objectWithoutPropertiesLoose(_ref5, ["selected", "active"]);
184
180
 
185
- var classes = mergeItemClassNames(className, prefixItemClassName("pull-" + (rtl ? 'left' : 'right')), prefixItemClassName(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["toggle"]))), // prefixItemClassName`submenu`,
186
- withItemClassPrefix({
181
+ var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["toggle"]))), withItemClassPrefix({
187
182
  'with-icon': icon,
188
183
  open: open,
189
184
  active: selected,
@@ -221,8 +216,7 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
221
216
  var classes = mergeItemClassNames(className, withItemClassPrefix({
222
217
  disabled: disabled,
223
218
  open: open,
224
- submenu: true // focus: hasFocus
225
-
219
+ submenu: true
226
220
  }));
227
221
  return /*#__PURE__*/React.createElement("li", _extends({
228
222
  ref: mergeRefs(ref, menuContainerRef),
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+ import Dropdown from '../Dropdown';
3
+ var ref = /*#__PURE__*/React.createRef(); // Infer `toggleAs` props (defaults to Button)
4
+
5
+ /*#__PURE__*/
6
+ React.createElement(Dropdown, {
7
+ ref: ref,
8
+ appearance: "subtle",
9
+ size: "sm"
10
+ });
11
+ /* eslint-disable @typescript-eslint/no-unused-vars */
12
+
13
+ var CustomToggle = function CustomToggle(_props) {
14
+ return null;
15
+ };
16
+
17
+ /*#__PURE__*/
18
+ React.createElement(Dropdown, {
19
+ ref: ref,
20
+ toggleAs: CustomToggle,
21
+ myProp: "myValue"
22
+ });
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { WithAsProps, TypeAttributes, FormControlBaseProps } from '../@types/common';
3
- export interface InputNumberProps<T = number | string> extends WithAsProps, FormControlBaseProps<T> {
3
+ export interface InputNumberProps<T = number | string> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'prefix'>, WithAsProps, FormControlBaseProps<T> {
4
4
  /** Button can have different appearances */
5
5
  buttonAppearance?: TypeAttributes.Appearance;
6
6
  /** An input can show that it is disabled */
@@ -10,7 +10,7 @@ import InputGroup from '../InputGroup/InputGroup';
10
10
  import InputGroupAddon from '../InputGroup/InputGroupAddon';
11
11
  import Input from '../Input';
12
12
  import Button from '../Button';
13
- import { partitionHTMLProps, createChainedFunction, useClassNames, useControlled } from '../utils';
13
+ import { partitionHTMLProps, createChainedFunction, useClassNames, useControlled, KEY_VALUES } from '../utils';
14
14
 
15
15
  /**
16
16
  * Check if the value is a number.
@@ -93,16 +93,17 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
93
93
  step = _props$step === void 0 ? 1 : _props$step,
94
94
  _props$buttonAppearan = props.buttonAppearance,
95
95
  buttonAppearance = _props$buttonAppearan === void 0 ? 'subtle' : _props$buttonAppearan,
96
- _props$min = props.min,
97
- min = _props$min === void 0 ? -Infinity : _props$min,
98
- _props$max = props.max,
99
- max = _props$max === void 0 ? Infinity : _props$max,
96
+ minProp = props.min,
97
+ maxProp = props.max,
100
98
  _props$scrollable = props.scrollable,
101
99
  scrollable = _props$scrollable === void 0 ? true : _props$scrollable,
102
100
  onChange = props.onChange,
103
101
  onWheel = props.onWheel,
104
102
  restProps = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "disabled", "readOnly", "plaintext", "value", "defaultValue", "size", "prefix", "postfix", "step", "buttonAppearance", "min", "max", "scrollable", "onChange", "onWheel"]);
105
103
 
104
+ var min = minProp !== null && minProp !== void 0 ? minProp : -Infinity;
105
+ var max = maxProp !== null && maxProp !== void 0 ? maxProp : Infinity;
106
+
106
107
  var _useControlled = useControlled(valueProp, defaultValue),
107
108
  value = _useControlled[0],
108
109
  setValue = _useControlled[1];
@@ -166,6 +167,35 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
166
167
  var bit = decimals(val, step);
167
168
  handleChangeValue(getSafeValue((val - step).toFixed(bit)), event);
168
169
  }, [getSafeValue, handleChangeValue, step, value]);
170
+ var handleKeyDown = useCallback(function (event) {
171
+ switch (event.key) {
172
+ case KEY_VALUES.UP:
173
+ event.preventDefault();
174
+ handlePlus(event);
175
+ break;
176
+
177
+ case KEY_VALUES.DOWN:
178
+ event.preventDefault();
179
+ handleMinus(event);
180
+ break;
181
+
182
+ case KEY_VALUES.HOME:
183
+ if (typeof minProp !== 'undefined') {
184
+ event.preventDefault();
185
+ handleChangeValue(getSafeValue(minProp), event);
186
+ }
187
+
188
+ break;
189
+
190
+ case KEY_VALUES.END:
191
+ if (typeof maxProp !== 'undefined') {
192
+ event.preventDefault();
193
+ handleChangeValue(getSafeValue(maxProp), event);
194
+ }
195
+
196
+ break;
197
+ }
198
+ }, [handlePlus, handleMinus, minProp, maxProp, handleChangeValue, getSafeValue]);
169
199
  var handleWheel = useCallback(function (event) {
170
200
  if (!disabled && !readOnly && event.target === document.activeElement) {
171
201
  event.preventDefault();
@@ -211,7 +241,7 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
211
241
  };
212
242
  }, [handleWheel, scrollable]);
213
243
  var input = /*#__PURE__*/React.createElement(Input, _extends({}, htmlInputProps, {
214
- type: "text",
244
+ type: "number",
215
245
  autoComplete: "off",
216
246
  step: step,
217
247
  inputRef: inputRef,
@@ -221,7 +251,8 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
221
251
  disabled: disabled,
222
252
  readOnly: readOnly,
223
253
  plaintext: plaintext,
224
- ref: plaintext ? ref : undefined
254
+ ref: plaintext ? ref : undefined,
255
+ onKeyDown: handleKeyDown
225
256
  }));
226
257
 
227
258
  if (plaintext) {
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import InputNumber from '../InputNumber'; // Inherits <input type="number" /> attributes
3
+
4
+ /*#__PURE__*/
5
+ React.createElement(InputNumber, {
6
+ placeholder: "Enter number"
7
+ });
@@ -45,20 +45,28 @@ export var useBodyStyles = function useBodyStyles(ref, options) {
45
45
 
46
46
  (_windowResizeListener = windowResizeListener.current) === null || _windowResizeListener === void 0 ? void 0 : (_windowResizeListener2 = _windowResizeListener.off) === null || _windowResizeListener2 === void 0 ? void 0 : _windowResizeListener2.call(_windowResizeListener);
47
47
  (_contentElementResize = contentElementResizeObserver.current) === null || _contentElementResize === void 0 ? void 0 : _contentElementResize.disconnect();
48
+ windowResizeListener.current = null;
49
+ contentElementResizeObserver.current = null;
48
50
  }, []);
49
51
  var onChangeBodyStyles = useCallback(function (entering) {
50
- if (overflow && !drawer) {
52
+ if (overflow && !drawer && ref.current) {
51
53
  updateBodyStyles(undefined, entering);
52
54
  contentElement.current = ref.current.querySelector("." + prefix('content'));
53
- windowResizeListener.current = on(window, 'resize', updateBodyStyles);
54
- contentElementResizeObserver.current = new ResizeObserver(function () {
55
- return updateBodyStyles();
56
- });
57
- contentElementResizeObserver.current.observe(contentElement.current);
55
+
56
+ if (!windowResizeListener.current) {
57
+ windowResizeListener.current = on(window, 'resize', updateBodyStyles);
58
+ }
59
+
60
+ if (contentElement.current && !contentElementResizeObserver.current) {
61
+ contentElementResizeObserver.current = new ResizeObserver(function () {
62
+ return updateBodyStyles();
63
+ });
64
+ contentElementResizeObserver.current.observe(contentElement.current);
65
+ }
58
66
  }
59
67
  }, [drawer, overflow, prefix, ref, updateBodyStyles]);
60
68
  useEffect(function () {
61
- onDestroyEvents();
62
- }, [onDestroyEvents]);
69
+ return onDestroyEvents; // eslint-disable-next-line react-hooks/exhaustive-deps
70
+ }, []);
63
71
  return [overflow ? bodyStyles : {}, onChangeBodyStyles, onDestroyEvents];
64
72
  };
@@ -196,8 +196,11 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
196
196
  children.then(function (data) {
197
197
  node.loading = false;
198
198
  node[childrenKey] = data;
199
- addFlattenData(data, node);
200
- addColumn(data, cascadePaths.length);
199
+
200
+ if (targetRef.current) {
201
+ addFlattenData(data, node);
202
+ addColumn(data, cascadePaths.length);
203
+ }
201
204
  });
202
205
  } else {
203
206
  node.loading = false;
@@ -234,7 +237,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
234
237
  onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextValue, node, checked, event);
235
238
  }, [cascade, onChange, onCheck, setValue, splitValue, value, valueKey]);
236
239
  var handleClean = useCallback(function (event) {
237
- if (disabled) {
240
+ if (disabled || !targetRef.current) {
238
241
  return;
239
242
  }
240
243
 
@@ -456,6 +459,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
456
459
  var _usePickerClassName = usePickerClassName(_extends({}, props, {
457
460
  classPrefix: classPrefix,
458
461
  hasValue: hasValue,
462
+ countable: countable,
459
463
  name: 'cascader',
460
464
  appearance: appearance,
461
465
  cleanable: cleanable
@@ -83,7 +83,9 @@ var NavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
83
83
  }
84
84
 
85
85
  if (navbar) {
86
- return /*#__PURE__*/React.createElement(NavbarItem, props);
86
+ return /*#__PURE__*/React.createElement(NavbarItem, _extends({
87
+ ref: ref
88
+ }, props));
87
89
  }
88
90
 
89
91
  return /*#__PURE__*/React.createElement(Component, _extends({
@@ -99,6 +99,11 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
99
99
 
100
100
  useEffect(function () {
101
101
  var container = menuBodyContainerRef.current;
102
+
103
+ if (!container) {
104
+ return;
105
+ }
106
+
102
107
  var activeItem = container.querySelector("." + prefix('item-focus'));
103
108
 
104
109
  if (!activeItem) {
@@ -90,11 +90,9 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
90
90
  }
91
91
  }, [input, onFocus]);
92
92
  var handleBlur = useCallback(function (event) {
93
- if (document.activeElement !== inputRef.current) {
94
- var _inputRef$current2;
95
-
93
+ if (inputRef.current && document.activeElement !== inputRef.current) {
96
94
  setActive(false);
97
- (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
95
+ inputRef.current.blur();
98
96
  }
99
97
 
100
98
  onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
@@ -1,6 +1,16 @@
1
1
  import React from 'react';
2
2
  import { SliderProps } from '../Slider';
3
3
  export declare type Range = [number, number];
4
- export declare type RangeSliderProps = SliderProps<Range>;
5
- declare const RangeSlider: React.ForwardRefExoticComponent<RangeSliderProps & React.RefAttributes<unknown>>;
4
+ export declare type RangeSliderProps = SliderProps<Range> & {
5
+ /**
6
+ * Add constraint to validate before onChange is dispatched
7
+ */
8
+ constraint?: (range: Range) => boolean;
9
+ };
10
+ declare const RangeSlider: React.ForwardRefExoticComponent<SliderProps<Range> & {
11
+ /**
12
+ * Add constraint to validate before onChange is dispatched
13
+ */
14
+ constraint?: ((range: Range) => boolean) | undefined;
15
+ } & React.RefAttributes<unknown>>;
6
16
  export default RangeSlider;