rsuite 5.3.0 → 5.4.3
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.
- package/Button/styles/index.less +1 -5
- package/CHANGELOG.md +53 -0
- package/Drawer/styles/index.less +3 -0
- package/Dropdown/styles/index.less +5 -3
- package/Dropdown/styles/mixin.less +0 -2
- package/Modal/styles/index.less +23 -22
- package/Nav/styles/index.less +1 -0
- package/Navbar/styles/index.less +27 -8
- package/Radio/styles/index.less +6 -0
- package/Sidenav/styles/index.less +8 -2
- package/Stack/package.json +7 -0
- package/Stack/styles/index.less +5 -0
- package/TreePicker/styles/index.less +0 -14
- package/cjs/@types/common.d.ts +4 -4
- package/cjs/Affix/Affix.js +3 -1
- package/cjs/AvatarGroup/AvatarGroup.js +9 -4
- package/cjs/ButtonGroup/ButtonGroup.js +9 -4
- package/cjs/Calendar/Calendar.js +21 -20
- package/cjs/Calendar/Header.js +1 -3
- package/cjs/Calendar/Table.js +1 -1
- package/cjs/Calendar/TableRow.js +12 -7
- package/cjs/Calendar/View.js +9 -5
- package/cjs/Cascader/utils.d.ts +7 -7
- package/cjs/CheckPicker/CheckPicker.d.ts +12 -4
- package/cjs/CheckPicker/test/CheckPicker.test.d.ts +1 -0
- package/cjs/CheckPicker/test/CheckPicker.test.js +84 -0
- package/cjs/CheckTree/index.js +6 -5
- package/cjs/Container/Container.js +6 -3
- package/cjs/DatePicker/DatePicker.js +4 -2
- package/cjs/DateRangePicker/DateRangePicker.js +9 -5
- package/cjs/Disclosure/Disclosure.d.ts +8 -5
- package/cjs/Disclosure/Disclosure.js +51 -11
- package/cjs/Disclosure/DisclosureButton.d.ts +2 -2
- package/cjs/Disclosure/DisclosureContext.d.ts +6 -1
- package/cjs/Dropdown/Dropdown.js +1 -1
- package/cjs/Dropdown/DropdownItem.js +9 -10
- package/cjs/Dropdown/DropdownMenu.js +81 -23
- package/cjs/Dropdown/DropdownToggle.js +8 -1
- package/cjs/FormGroup/FormGroup.js +9 -4
- package/cjs/Menu/MenuItem.js +1 -1
- package/cjs/Modal/Modal.js +34 -22
- package/cjs/MultiCascader/utils.d.ts +3 -3
- package/cjs/Nav/Nav.js +10 -12
- package/cjs/Nav/NavContext.d.ts +6 -0
- package/cjs/Nav/NavContext.js +1 -0
- package/cjs/Navbar/index.d.ts +1 -0
- package/cjs/Navbar/index.js +4 -3
- package/cjs/Overlay/Modal.js +43 -45
- package/cjs/Overlay/Overlay.d.ts +1 -1
- package/cjs/Overlay/Overlay.js +7 -1
- package/cjs/Overlay/OverlayContext.d.ts +6 -0
- package/cjs/Overlay/OverlayContext.js +14 -0
- package/cjs/Overlay/OverlayTrigger.js +7 -1
- package/cjs/Overlay/Position.d.ts +1 -1
- package/cjs/PanelGroup/PanelGroup.js +8 -5
- package/cjs/Picker/propTypes.d.ts +3 -5
- package/cjs/Picker/propTypes.js +4 -3
- package/cjs/Picker/utils.d.ts +3 -3
- package/cjs/SelectPicker/SelectPicker.d.ts +16 -6
- package/cjs/SelectPicker/SelectPicker.js +4 -4
- package/cjs/SelectPicker/index.d.ts +1 -1
- package/cjs/SelectPicker/test/SelectPicker.test.d.ts +1 -0
- package/cjs/SelectPicker/test/SelectPicker.test.js +70 -0
- package/cjs/Stack/Stack.d.ts +26 -0
- package/cjs/Stack/Stack.js +86 -0
- package/cjs/Stack/index.d.ts +3 -0
- package/cjs/Stack/index.js +11 -0
- package/cjs/Steps/StepItem.js +2 -2
- package/cjs/Toggle/Toggle.js +4 -3
- package/cjs/Tree/Tree.d.ts +0 -1
- package/cjs/Tree/Tree.js +6 -5
- package/cjs/Tree/TreeContext.d.ts +0 -1
- package/cjs/TreePicker/TreeNode.js +1 -14
- package/cjs/TreePicker/TreePicker.js +3 -29
- package/cjs/index.d.ts +4 -2
- package/cjs/index.js +9 -5
- package/cjs/utils/index.d.ts +1 -0
- package/cjs/utils/index.js +7 -2
- package/cjs/utils/treeUtils.d.ts +5 -5
- package/cjs/utils/useMount.d.ts +2 -0
- package/cjs/utils/useMount.js +19 -0
- package/cjs/utils/usePortal.d.ts +1 -1
- package/dist/rsuite-rtl.css +351 -188
- package/dist/rsuite-rtl.min.css +1 -1
- package/dist/rsuite-rtl.min.css.map +1 -1
- package/dist/rsuite.css +351 -188
- package/dist/rsuite.js +94 -39
- package/dist/rsuite.js.map +1 -1
- package/dist/rsuite.min.css +1 -1
- package/dist/rsuite.min.css.map +1 -1
- package/dist/rsuite.min.js +1 -1
- package/dist/rsuite.min.js.map +1 -1
- package/esm/@types/common.d.ts +4 -4
- package/esm/Affix/Affix.js +4 -2
- package/esm/AvatarGroup/AvatarGroup.js +7 -4
- package/esm/ButtonGroup/ButtonGroup.js +7 -4
- package/esm/Calendar/Calendar.js +22 -21
- package/esm/Calendar/Header.js +1 -3
- package/esm/Calendar/Table.js +1 -1
- package/esm/Calendar/TableRow.js +13 -8
- package/esm/Calendar/View.js +10 -6
- package/esm/Cascader/utils.d.ts +7 -7
- package/esm/CheckPicker/CheckPicker.d.ts +12 -4
- package/esm/CheckPicker/test/CheckPicker.test.d.ts +1 -0
- package/esm/CheckPicker/test/CheckPicker.test.js +71 -0
- package/esm/CheckTree/index.js +7 -6
- package/esm/Container/Container.js +7 -4
- package/esm/DatePicker/DatePicker.js +4 -2
- package/esm/DateRangePicker/DateRangePicker.js +9 -5
- package/esm/Disclosure/Disclosure.d.ts +8 -5
- package/esm/Disclosure/Disclosure.js +52 -13
- package/esm/Disclosure/DisclosureButton.d.ts +2 -2
- package/esm/Disclosure/DisclosureContext.d.ts +6 -1
- package/esm/Dropdown/Dropdown.js +1 -1
- package/esm/Dropdown/DropdownItem.js +9 -9
- package/esm/Dropdown/DropdownMenu.js +82 -24
- package/esm/Dropdown/DropdownToggle.js +7 -1
- package/esm/FormGroup/FormGroup.js +7 -4
- package/esm/Menu/MenuItem.js +1 -1
- package/esm/Modal/Modal.js +36 -24
- package/esm/MultiCascader/utils.d.ts +3 -3
- package/esm/Nav/Nav.js +11 -13
- package/esm/Nav/NavContext.d.ts +6 -0
- package/esm/Nav/NavContext.js +1 -0
- package/esm/Navbar/index.d.ts +1 -0
- package/esm/Navbar/index.js +1 -0
- package/esm/Overlay/Modal.js +44 -46
- package/esm/Overlay/Overlay.d.ts +1 -1
- package/esm/Overlay/Overlay.js +7 -2
- package/esm/Overlay/OverlayContext.d.ts +6 -0
- package/esm/Overlay/OverlayContext.js +4 -0
- package/esm/Overlay/OverlayTrigger.js +7 -2
- package/esm/Overlay/Position.d.ts +1 -1
- package/esm/PanelGroup/PanelGroup.js +9 -6
- package/esm/Picker/propTypes.d.ts +3 -5
- package/esm/Picker/propTypes.js +4 -3
- package/esm/Picker/utils.d.ts +3 -3
- package/esm/SelectPicker/SelectPicker.d.ts +16 -6
- package/esm/SelectPicker/SelectPicker.js +4 -4
- package/esm/SelectPicker/index.d.ts +1 -1
- package/esm/SelectPicker/test/SelectPicker.test.d.ts +1 -0
- package/esm/SelectPicker/test/SelectPicker.test.js +59 -0
- package/esm/Stack/Stack.d.ts +26 -0
- package/esm/Stack/Stack.js +71 -0
- package/esm/Stack/index.d.ts +3 -0
- package/esm/Stack/index.js +2 -0
- package/esm/Steps/StepItem.js +2 -2
- package/esm/Toggle/Toggle.js +4 -3
- package/esm/Tree/Tree.d.ts +0 -1
- package/esm/Tree/Tree.js +7 -6
- package/esm/Tree/TreeContext.d.ts +0 -1
- package/esm/TreePicker/TreeNode.js +2 -14
- package/esm/TreePicker/TreePicker.js +3 -29
- package/esm/index.d.ts +4 -2
- package/esm/index.js +2 -1
- package/esm/utils/index.d.ts +1 -0
- package/esm/utils/index.js +2 -1
- package/esm/utils/treeUtils.d.ts +5 -5
- package/esm/utils/useMount.d.ts +2 -0
- package/esm/utils/useMount.js +13 -0
- package/esm/utils/usePortal.d.ts +1 -1
- package/package.json +2 -2
- package/styles/color-modes/dark.less +1 -0
- package/styles/color-modes/high-contrast.less +1 -0
- package/styles/color-modes/light.less +1 -0
- package/styles/index.less +1 -0
- package/styles/mixins/utilities.less +17 -5
package/esm/@types/common.d.ts
CHANGED
|
@@ -134,12 +134,12 @@ export interface SVGIcon {
|
|
|
134
134
|
viewBox: string;
|
|
135
135
|
id: string;
|
|
136
136
|
}
|
|
137
|
-
export interface ItemDataType extends Record<string, any> {
|
|
137
|
+
export interface ItemDataType<T = number | string> extends Record<string, any> {
|
|
138
138
|
label?: string | React.ReactNode;
|
|
139
|
-
value?:
|
|
139
|
+
value?: T;
|
|
140
140
|
groupBy?: string;
|
|
141
|
-
parent?: ItemDataType
|
|
142
|
-
children?: ItemDataType[];
|
|
141
|
+
parent?: ItemDataType<T>;
|
|
142
|
+
children?: ItemDataType<T>[];
|
|
143
143
|
loading?: boolean;
|
|
144
144
|
}
|
|
145
145
|
export interface Offset {
|
package/esm/Affix/Affix.js
CHANGED
|
@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
|
|
|
3
3
|
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import getOffset from 'dom-lib/getOffset';
|
|
6
|
-
import { mergeRefs, useClassNames, useElementResize, useEventListener } from '../utils';
|
|
6
|
+
import { mergeRefs, useClassNames, useElementResize, useEventListener, useMount } from '../utils';
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* Get the layout size and offset of the mount element
|
|
@@ -21,7 +21,9 @@ function useOffset(mountRef) {
|
|
|
21
21
|
return mountRef.current;
|
|
22
22
|
}, updateOffset); // Initialize after the first render
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
useMount(updateOffset); // Update after window size changes
|
|
25
|
+
|
|
26
|
+
useEventListener(window, 'resize', updateOffset, false);
|
|
25
27
|
return offset;
|
|
26
28
|
}
|
|
27
29
|
/**
|
|
@@ -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, { useMemo } from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import { useClassNames, useCustom } from '../utils';
|
|
6
6
|
export var AvatarGroupContext = /*#__PURE__*/React.createContext({});
|
|
@@ -26,13 +26,16 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
26
26
|
var classes = merge(className, withClassPrefix({
|
|
27
27
|
stack: stack
|
|
28
28
|
}));
|
|
29
|
+
var contextValue = useMemo(function () {
|
|
30
|
+
return {
|
|
31
|
+
size: size
|
|
32
|
+
};
|
|
33
|
+
}, [size]);
|
|
29
34
|
return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
|
|
30
35
|
ref: ref,
|
|
31
36
|
className: classes
|
|
32
37
|
}), /*#__PURE__*/React.createElement(AvatarGroupContext.Provider, {
|
|
33
|
-
value:
|
|
34
|
-
size: size
|
|
35
|
-
}
|
|
38
|
+
value: contextValue
|
|
36
39
|
}, spacing ? React.Children.map(children, function (child) {
|
|
37
40
|
var _extends2;
|
|
38
41
|
|
|
@@ -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, { useMemo } from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import { useClassNames } from '../utils';
|
|
6
6
|
import ButtonGroupContext from './ButtonGroupContext';
|
|
@@ -28,10 +28,13 @@ var ButtonGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
28
28
|
vertical: vertical,
|
|
29
29
|
justified: justified
|
|
30
30
|
}));
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
var contextValue = useMemo(function () {
|
|
32
|
+
return {
|
|
33
33
|
size: size
|
|
34
|
-
}
|
|
34
|
+
};
|
|
35
|
+
}, [size]);
|
|
36
|
+
return /*#__PURE__*/React.createElement(ButtonGroupContext.Provider, {
|
|
37
|
+
value: contextValue
|
|
35
38
|
}, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
|
|
36
39
|
role: role,
|
|
37
40
|
ref: ref,
|
package/esm/Calendar/Calendar.js
CHANGED
|
@@ -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, { useCallback } from 'react';
|
|
3
|
+
import React, { useCallback, useMemo } from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import pick from 'lodash/pick';
|
|
6
6
|
import MonthDropdown from './MonthDropdown';
|
|
@@ -56,11 +56,11 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
56
56
|
withClassPrefix = _useClassNames.withClassPrefix,
|
|
57
57
|
merge = _useClassNames.merge;
|
|
58
58
|
|
|
59
|
-
var isDisabledDate = function
|
|
59
|
+
var isDisabledDate = useCallback(function (date) {
|
|
60
60
|
var _disabledDate;
|
|
61
61
|
|
|
62
62
|
return (_disabledDate = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date)) !== null && _disabledDate !== void 0 ? _disabledDate : false;
|
|
63
|
-
};
|
|
63
|
+
}, [disabledDate]);
|
|
64
64
|
|
|
65
65
|
var isTimeDisabled = function isTimeDisabled(date) {
|
|
66
66
|
return DateUtils.disabledTime(props, date);
|
|
@@ -92,27 +92,28 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
92
92
|
'show-week-numbers': showWeekNumbers
|
|
93
93
|
}));
|
|
94
94
|
var timeDropdownProps = pick(rest, DateUtils.calendarOnlyProps);
|
|
95
|
-
var contextValue = {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
95
|
+
var contextValue = useMemo(function () {
|
|
96
|
+
return {
|
|
97
|
+
date: calendarDate,
|
|
98
|
+
dateRange: dateRange,
|
|
99
|
+
disabledDate: isDisabledDate,
|
|
100
|
+
format: format,
|
|
101
|
+
hoverRangeValue: hoverRangeValue,
|
|
102
|
+
inSameMonth: inSameMonth !== null && inSameMonth !== void 0 ? inSameMonth : inSameThisMonthDate,
|
|
103
|
+
isoWeek: isoWeek,
|
|
104
|
+
locale: locale,
|
|
105
|
+
onChangePageDate: onChangePageDate,
|
|
106
|
+
onChangePageTime: onChangePageTime,
|
|
107
|
+
onMouseMove: onMouseMove,
|
|
108
|
+
onSelect: onSelect,
|
|
109
|
+
renderCell: renderCell,
|
|
110
|
+
showWeekNumbers: showWeekNumbers,
|
|
111
|
+
inline: inline
|
|
112
|
+
};
|
|
113
|
+
}, [calendarDate, dateRange, format, hoverRangeValue, inSameMonth, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangePageDate, onChangePageTime, onMouseMove, onSelect, renderCell, showWeekNumbers]);
|
|
112
114
|
return /*#__PURE__*/React.createElement(CalendarProvider, {
|
|
113
115
|
value: contextValue
|
|
114
116
|
}, /*#__PURE__*/React.createElement(Component, _extends({}, DateUtils.omitHideDisabledProps(rest), {
|
|
115
|
-
role: "table",
|
|
116
117
|
className: calendarClasses,
|
|
117
118
|
ref: ref
|
|
118
119
|
}), /*#__PURE__*/React.createElement(Header, {
|
package/esm/Calendar/Header.js
CHANGED
|
@@ -117,9 +117,7 @@ var Header = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
117
117
|
'has-month': hasMonth,
|
|
118
118
|
'has-time': showTime
|
|
119
119
|
}));
|
|
120
|
-
return /*#__PURE__*/React.createElement(Component, _extends({
|
|
121
|
-
role: "row"
|
|
122
|
-
}, rest, {
|
|
120
|
+
return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
|
|
123
121
|
ref: ref,
|
|
124
122
|
className: classes
|
|
125
123
|
}), hasMonth && monthToolbar, showTime && /*#__PURE__*/React.createElement("div", {
|
package/esm/Calendar/Table.js
CHANGED
|
@@ -21,7 +21,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
21
21
|
|
|
22
22
|
var classes = merge(className, withClassPrefix());
|
|
23
23
|
return /*#__PURE__*/React.createElement(Component, _extends({
|
|
24
|
-
role: "
|
|
24
|
+
role: "grid"
|
|
25
25
|
}, rest, {
|
|
26
26
|
ref: ref,
|
|
27
27
|
className: classes
|
package/esm/Calendar/TableRow.js
CHANGED
|
@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
|
|
|
3
3
|
import React, { useCallback } from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import partial from 'lodash/partial';
|
|
6
|
-
import { DateUtils, useClassNames, DATERANGE_DISABLED_TARGET } from '../utils';
|
|
6
|
+
import { DateUtils, useClassNames, DATERANGE_DISABLED_TARGET, useCustom } from '../utils';
|
|
7
7
|
import { useCalendarContext } from './CalendarContext';
|
|
8
8
|
var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
9
9
|
var _props$as = props.as,
|
|
@@ -20,16 +20,19 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
20
20
|
selected = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d,
|
|
21
21
|
dateRange = _useCalendarContext.dateRange,
|
|
22
22
|
disabledDate = _useCalendarContext.disabledDate,
|
|
23
|
-
formatDate = _useCalendarContext.formatDate,
|
|
24
23
|
hoverRangeValue = _useCalendarContext.hoverRangeValue,
|
|
25
24
|
inSameMonth = _useCalendarContext.inSameMonth,
|
|
26
25
|
isoWeek = _useCalendarContext.isoWeek,
|
|
27
26
|
onMouseMove = _useCalendarContext.onMouseMove,
|
|
28
27
|
onSelect = _useCalendarContext.onSelect,
|
|
29
28
|
renderCell = _useCalendarContext.renderCell,
|
|
30
|
-
|
|
29
|
+
overrideLocale = _useCalendarContext.locale,
|
|
31
30
|
showWeekNumbers = _useCalendarContext.showWeekNumbers;
|
|
32
31
|
|
|
32
|
+
var _useCustom = useCustom('Calendar', overrideLocale),
|
|
33
|
+
locale = _useCustom.locale,
|
|
34
|
+
formatDate = _useCustom.formatDate;
|
|
35
|
+
|
|
33
36
|
var _useClassNames = useClassNames(classPrefix),
|
|
34
37
|
prefix = _useClassNames.prefix,
|
|
35
38
|
merge = _useClassNames.merge;
|
|
@@ -43,7 +46,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
43
46
|
}, [onSelect]);
|
|
44
47
|
|
|
45
48
|
var renderDays = function renderDays() {
|
|
46
|
-
var formatStr =
|
|
49
|
+
var formatStr = locale.formattedDayPattern;
|
|
47
50
|
var days = [];
|
|
48
51
|
|
|
49
52
|
var _ref = dateRange || [],
|
|
@@ -64,7 +67,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
64
67
|
var unSameMonth = !(inSameMonth !== null && inSameMonth !== void 0 && inSameMonth(thisDate));
|
|
65
68
|
var isStartSelected = !unSameMonth && selectedStartDate && DateUtils.isSameDay(thisDate, selectedStartDate);
|
|
66
69
|
var isEndSelected = !unSameMonth && selectedEndDate && DateUtils.isSameDay(thisDate, selectedEndDate);
|
|
67
|
-
var isSelected = isStartSelected || isEndSelected;
|
|
70
|
+
var isSelected = isRangeSelectionMode ? isStartSelected || isEndSelected : DateUtils.isSameDay(thisDate, selected);
|
|
68
71
|
var inRange = false; // for Selected
|
|
69
72
|
|
|
70
73
|
if (selectedStartDate && selectedEndDate) {
|
|
@@ -91,7 +94,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
91
94
|
var _classes = prefix('cell', {
|
|
92
95
|
'cell-un-same-month': unSameMonth,
|
|
93
96
|
'cell-is-today': isToday,
|
|
94
|
-
'cell-selected':
|
|
97
|
+
'cell-selected': isSelected,
|
|
95
98
|
'cell-selected-start': isStartSelected,
|
|
96
99
|
'cell-selected-end': isEndSelected,
|
|
97
100
|
'cell-in-range': !unSameMonth && inRange,
|
|
@@ -100,8 +103,10 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
100
103
|
|
|
101
104
|
var title = formatDate ? formatDate(thisDate, formatStr) : DateUtils.format(thisDate, formatStr);
|
|
102
105
|
days.push( /*#__PURE__*/React.createElement("div", {
|
|
103
|
-
role: "
|
|
106
|
+
role: "gridcell",
|
|
104
107
|
key: title,
|
|
108
|
+
"aria-label": title,
|
|
109
|
+
"aria-selected": isSelected || undefined,
|
|
105
110
|
className: _classes
|
|
106
111
|
}, /*#__PURE__*/React.createElement("div", {
|
|
107
112
|
role: "button",
|
|
@@ -125,7 +130,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
125
130
|
className: classes
|
|
126
131
|
}), showWeekNumbers && /*#__PURE__*/React.createElement("div", {
|
|
127
132
|
className: prefix('cell-week-number'),
|
|
128
|
-
role: "
|
|
133
|
+
role: "rowheader"
|
|
129
134
|
}, DateUtils.format(weekendDate, isoWeek ? 'I' : 'w')), renderDays());
|
|
130
135
|
});
|
|
131
136
|
TableRow.displayName = 'TableRow';
|
package/esm/Calendar/View.js
CHANGED
|
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
|
-
import { DateUtils, useClassNames } from '../utils';
|
|
5
|
+
import { DateUtils, useClassNames, useCustom } from '../utils';
|
|
6
6
|
import Table from './Table';
|
|
7
7
|
import { useCalendarContext } from './CalendarContext';
|
|
8
8
|
var View = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
@@ -16,7 +16,12 @@ var View = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
16
16
|
var _useCalendarContext = useCalendarContext(),
|
|
17
17
|
_useCalendarContext$d = _useCalendarContext.date,
|
|
18
18
|
date = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d,
|
|
19
|
-
isoWeek = _useCalendarContext.isoWeek
|
|
19
|
+
isoWeek = _useCalendarContext.isoWeek,
|
|
20
|
+
overrideLocale = _useCalendarContext.locale;
|
|
21
|
+
|
|
22
|
+
var _useCustom = useCustom('Calendar', overrideLocale),
|
|
23
|
+
locale = _useCustom.locale,
|
|
24
|
+
formatDate = _useCustom.formatDate;
|
|
20
25
|
|
|
21
26
|
var thisMonthDate = DateUtils.setDate(date, 1);
|
|
22
27
|
|
|
@@ -25,13 +30,12 @@ var View = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
25
30
|
withClassPrefix = _useClassNames.withClassPrefix;
|
|
26
31
|
|
|
27
32
|
var classes = merge(className, withClassPrefix());
|
|
28
|
-
return /*#__PURE__*/React.createElement(Component, _extends({
|
|
29
|
-
role: "row"
|
|
30
|
-
}, rest, {
|
|
33
|
+
return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
|
|
31
34
|
ref: ref,
|
|
32
35
|
className: classes
|
|
33
36
|
}), /*#__PURE__*/React.createElement(Table, {
|
|
34
|
-
rows: DateUtils.getMonthView(thisMonthDate, isoWeek)
|
|
37
|
+
rows: DateUtils.getMonthView(thisMonthDate, isoWeek),
|
|
38
|
+
"aria-label": formatDate(thisMonthDate, locale.formattedMonthPattern)
|
|
35
39
|
}));
|
|
36
40
|
});
|
|
37
41
|
View.displayName = 'View';
|
package/esm/Cascader/utils.d.ts
CHANGED
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
import { CascaderProps } from './Cascader';
|
|
3
3
|
import { ItemDataType } from '../@types/common';
|
|
4
4
|
export declare function getColumnsAndPaths<T extends ItemDataType>(data: T[], value: any, options: any): {
|
|
5
|
-
columns: ItemDataType[][];
|
|
5
|
+
columns: ItemDataType<string | number>[][];
|
|
6
6
|
paths: T[];
|
|
7
7
|
};
|
|
8
8
|
export declare function usePaths(props: CascaderProps): {
|
|
9
9
|
enforceUpdate: (nextValue: any, isAttachChildren?: boolean | undefined) => void;
|
|
10
|
-
columnData: ItemDataType[][];
|
|
11
|
-
valueToPaths: ItemDataType[];
|
|
12
|
-
selectedPaths: ItemDataType[];
|
|
13
|
-
setValueToPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType[]>>;
|
|
14
|
-
setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType[][]>>;
|
|
15
|
-
setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType[]>>;
|
|
10
|
+
columnData: ItemDataType<string | number>[][];
|
|
11
|
+
valueToPaths: ItemDataType<string | number>[];
|
|
12
|
+
selectedPaths: ItemDataType<string | number>[];
|
|
13
|
+
setValueToPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[]>>;
|
|
14
|
+
setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[][]>>;
|
|
15
|
+
setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[]>>;
|
|
16
16
|
addColumn: (column: ItemDataType[], index: number) => void;
|
|
17
17
|
};
|
|
@@ -1,13 +1,21 @@
|
|
|
1
|
+
import React, { Ref } from 'react';
|
|
1
2
|
import { PickerLocale } from '../locales';
|
|
2
|
-
import {
|
|
3
|
+
import { PickerInstance } from '../Picker';
|
|
3
4
|
import { ItemDataType, FormControlPickerProps } from '../@types/common';
|
|
4
|
-
import {
|
|
5
|
+
import type { MultipleSelectProps } from '../SelectPicker';
|
|
5
6
|
export declare type ValueType = (number | string)[];
|
|
6
|
-
export interface CheckPickerProps<T
|
|
7
|
+
export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>>, MultipleSelectProps<T> {
|
|
7
8
|
/** Top the selected option in the options */
|
|
8
9
|
sticky?: boolean;
|
|
9
10
|
/** A picker that can be counted */
|
|
10
11
|
countable?: boolean;
|
|
11
12
|
}
|
|
12
|
-
|
|
13
|
+
export interface CheckPickerComponent {
|
|
14
|
+
<T>(props: CheckPickerProps<T> & {
|
|
15
|
+
ref?: Ref<PickerInstance>;
|
|
16
|
+
}): JSX.Element | null;
|
|
17
|
+
displayName?: string;
|
|
18
|
+
propTypes?: React.WeakValidationMap<CheckPickerProps<any>>;
|
|
19
|
+
}
|
|
20
|
+
declare const CheckPicker: CheckPickerComponent;
|
|
13
21
|
export default CheckPicker;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { expectType } from 'ts-expect';
|
|
3
|
+
import CheckPicker from '../CheckPicker'; // Infer value and onChange types from data
|
|
4
|
+
|
|
5
|
+
var numberValuedData = [{
|
|
6
|
+
label: 'One',
|
|
7
|
+
value: 1
|
|
8
|
+
}];
|
|
9
|
+
|
|
10
|
+
/*#__PURE__*/
|
|
11
|
+
React.createElement(CheckPicker, {
|
|
12
|
+
data: numberValuedData,
|
|
13
|
+
value: [1]
|
|
14
|
+
}); // @ts-expect-error should not accept single value
|
|
15
|
+
|
|
16
|
+
/*#__PURE__*/
|
|
17
|
+
React.createElement(CheckPicker, {
|
|
18
|
+
data: numberValuedData,
|
|
19
|
+
value: 1
|
|
20
|
+
}); // @ts-expect-error should not accept string value
|
|
21
|
+
|
|
22
|
+
/*#__PURE__*/
|
|
23
|
+
React.createElement(CheckPicker, {
|
|
24
|
+
data: numberValuedData,
|
|
25
|
+
value: ['1']
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
/*#__PURE__*/
|
|
29
|
+
React.createElement(CheckPicker, {
|
|
30
|
+
data: numberValuedData,
|
|
31
|
+
onChange: function onChange(newValue) {
|
|
32
|
+
expectType(newValue);
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
var stringValuedData = [{
|
|
36
|
+
label: 'One',
|
|
37
|
+
value: 'One'
|
|
38
|
+
}];
|
|
39
|
+
|
|
40
|
+
/*#__PURE__*/
|
|
41
|
+
React.createElement(CheckPicker, {
|
|
42
|
+
data: stringValuedData,
|
|
43
|
+
value: ['1']
|
|
44
|
+
}); // @ts-expect-error should not accept single value
|
|
45
|
+
|
|
46
|
+
/*#__PURE__*/
|
|
47
|
+
React.createElement(CheckPicker, {
|
|
48
|
+
data: numberValuedData,
|
|
49
|
+
value: "1"
|
|
50
|
+
}); // @ts-expect-error should not accept number value
|
|
51
|
+
|
|
52
|
+
/*#__PURE__*/
|
|
53
|
+
React.createElement(CheckPicker, {
|
|
54
|
+
data: stringValuedData,
|
|
55
|
+
value: [1]
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
/*#__PURE__*/
|
|
59
|
+
React.createElement(CheckPicker, {
|
|
60
|
+
data: stringValuedData,
|
|
61
|
+
onChange: function onChange(newValue) {
|
|
62
|
+
expectType(newValue);
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
var pickerRef = /*#__PURE__*/React.createRef();
|
|
66
|
+
|
|
67
|
+
/*#__PURE__*/
|
|
68
|
+
React.createElement(CheckPicker, {
|
|
69
|
+
ref: pickerRef,
|
|
70
|
+
data: []
|
|
71
|
+
});
|
package/esm/CheckTree/index.js
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import React, {
|
|
2
|
+
import React, { useMemo } from 'react';
|
|
3
3
|
import CheckTreePicker from '../CheckTreePicker';
|
|
4
4
|
import TreeContext from '../Tree/TreeContext';
|
|
5
5
|
var CheckTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
6
|
-
var
|
|
6
|
+
var contextValue = useMemo(function () {
|
|
7
|
+
return {
|
|
8
|
+
inline: true
|
|
9
|
+
};
|
|
10
|
+
}, []);
|
|
7
11
|
return /*#__PURE__*/React.createElement(TreeContext.Provider, {
|
|
8
|
-
value:
|
|
9
|
-
inline: true,
|
|
10
|
-
dragNodeRef: dragNodeRef
|
|
11
|
-
}
|
|
12
|
+
value: contextValue
|
|
12
13
|
}, /*#__PURE__*/React.createElement(CheckTreePicker, _extends({
|
|
13
14
|
ref: ref
|
|
14
15
|
}, props)));
|
|
@@ -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, { useState } from 'react';
|
|
3
|
+
import React, { useState, useMemo } from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import { useClassNames } from '../utils';
|
|
6
6
|
export var ContainerContext = /*#__PURE__*/React.createContext({});
|
|
@@ -24,10 +24,13 @@ var Container = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
24
24
|
var classes = merge(className, withClassPrefix({
|
|
25
25
|
'has-sidebar': hasSidebar
|
|
26
26
|
}));
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
var contextValue = useMemo(function () {
|
|
28
|
+
return {
|
|
29
29
|
setHasSidebar: setHasSidebar
|
|
30
|
-
}
|
|
30
|
+
};
|
|
31
|
+
}, [setHasSidebar]);
|
|
32
|
+
return /*#__PURE__*/React.createElement(ContainerContext.Provider, {
|
|
33
|
+
value: contextValue
|
|
31
34
|
}, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
|
|
32
35
|
ref: ref,
|
|
33
36
|
className: classes
|
|
@@ -371,6 +371,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
371
371
|
top: top
|
|
372
372
|
};
|
|
373
373
|
return /*#__PURE__*/React.createElement(PickerOverlay, {
|
|
374
|
+
role: "dialog",
|
|
374
375
|
className: classes,
|
|
375
376
|
ref: mergeRefs(overlayRef, speakerRef),
|
|
376
377
|
style: styles,
|
|
@@ -408,7 +409,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
408
409
|
|
|
409
410
|
return (_renderValue = renderValue === null || renderValue === void 0 ? void 0 : renderValue(value, formatStr)) !== null && _renderValue !== void 0 ? _renderValue : formatDate(value, formatStr);
|
|
410
411
|
}, [formatStr, formatDate, placeholder, renderValue, value]);
|
|
411
|
-
var
|
|
412
|
+
var caretAs = useMemo(function () {
|
|
412
413
|
return DateUtils.shouldOnlyTime(formatStr) ? IconClockO : IconCalendar;
|
|
413
414
|
}, [formatStr]);
|
|
414
415
|
return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
|
|
@@ -444,7 +445,8 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
444
445
|
active: active,
|
|
445
446
|
placement: placement,
|
|
446
447
|
disabled: disabled,
|
|
447
|
-
|
|
448
|
+
caretAs: caretAs,
|
|
449
|
+
"aria-haspopup": "dialog"
|
|
448
450
|
}), renderDate())));
|
|
449
451
|
});
|
|
450
452
|
DatePicker.displayName = 'DatePicker';
|
|
@@ -185,7 +185,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
185
185
|
}
|
|
186
186
|
|
|
187
187
|
return isPlaintext ? '' : placeholder || rangeFormatStr;
|
|
188
|
-
}, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue
|
|
188
|
+
}, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue]);
|
|
189
189
|
/**
|
|
190
190
|
* preset hover range
|
|
191
191
|
*/
|
|
@@ -237,7 +237,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
237
237
|
if (closeOverlay !== false) {
|
|
238
238
|
handleCloseDropdown();
|
|
239
239
|
}
|
|
240
|
-
}, [formatStr, handleCloseDropdown, onChange,
|
|
240
|
+
}, [formatStr, handleCloseDropdown, onChange, setValue, value]);
|
|
241
241
|
/**
|
|
242
242
|
* Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.
|
|
243
243
|
* The MouseMove event is called between the first click and the second click to update the selection state.
|
|
@@ -267,7 +267,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
267
267
|
} else if (!isNil(nextHoverDateRange)) {
|
|
268
268
|
setHoverDateRange(nextHoverDateRange);
|
|
269
269
|
}
|
|
270
|
-
}, [getHoverRangeValue
|
|
270
|
+
}, [getHoverRangeValue]);
|
|
271
|
+
/**
|
|
272
|
+
* Callback for selecting a date cell in the calendar grid
|
|
273
|
+
*/
|
|
274
|
+
|
|
271
275
|
var handleSelectDate = useCallback(function (date, event) {
|
|
272
276
|
var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];
|
|
273
277
|
var hoverRangeValue = getHoverRangeValue(date);
|
|
@@ -303,7 +307,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
303
307
|
nextSelectDates.reverse();
|
|
304
308
|
}
|
|
305
309
|
|
|
306
|
-
setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates :
|
|
310
|
+
setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : [nextSelectDates[0], nextSelectDates[0]]);
|
|
307
311
|
setSelectedDates(nextSelectDates);
|
|
308
312
|
updateCalendarDate(nextSelectDates);
|
|
309
313
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
|
|
@@ -602,7 +606,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
602
606
|
hasValue: hasValue,
|
|
603
607
|
active: isPickerToggleActive,
|
|
604
608
|
placement: placement,
|
|
605
|
-
|
|
609
|
+
caretAs: IconCalendar,
|
|
606
610
|
disabled: disabled
|
|
607
611
|
}), getDisplayString(value))));
|
|
608
612
|
});
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import DisclosureButton from './DisclosureButton';
|
|
3
3
|
import DisclosureContent from './DisclosureContent';
|
|
4
|
-
export
|
|
4
|
+
export declare type DisclosureTrigger = 'click' | 'mouseover';
|
|
5
|
+
export interface DisclosureRenderProps extends Pick<React.HTMLAttributes<HTMLElement>, 'onMouseOver' | 'onMouseOut'> {
|
|
5
6
|
open: boolean;
|
|
6
7
|
}
|
|
7
8
|
export interface DisclosureProps {
|
|
@@ -13,10 +14,12 @@ export interface DisclosureProps {
|
|
|
13
14
|
hideOnClickOutside?: boolean;
|
|
14
15
|
/** Callback when disclosure button is being activated to update the open state */
|
|
15
16
|
onToggle?: (open: boolean, event: React.SyntheticEvent) => void;
|
|
17
|
+
/** What mouse events should disclosure reacts to */
|
|
18
|
+
trigger?: DisclosureTrigger[];
|
|
16
19
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var Content: typeof DisclosureContent;
|
|
20
|
+
export interface DisclosureComponent extends React.FC<DisclosureProps> {
|
|
21
|
+
Button: typeof DisclosureButton;
|
|
22
|
+
Content: typeof DisclosureContent;
|
|
21
23
|
}
|
|
24
|
+
declare const Disclosure: DisclosureComponent;
|
|
22
25
|
export default Disclosure;
|