rsuite 5.2.0 → 5.2.4
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 +6 -0
- package/CHANGELOG.md +42 -0
- package/PanelGroup/styles/index.less +12 -12
- package/README.md +3 -44
- package/Sidenav/styles/index.less +4 -0
- package/Table/styles/index.less +0 -4
- package/cjs/Carousel/Carousel.d.ts +1 -1
- package/cjs/CheckTreePicker/CheckTreePicker.js +6 -3
- package/cjs/CheckTreePicker/utils.d.ts +1 -1
- package/cjs/CheckTreePicker/utils.js +7 -6
- package/cjs/CheckboxGroup/CheckboxGroup.js +2 -2
- package/cjs/DateRangePicker/Calendar.d.ts +2 -1
- package/cjs/DateRangePicker/Calendar.js +26 -5
- package/cjs/DateRangePicker/DateRangePicker.d.ts +2 -0
- package/cjs/DateRangePicker/DateRangePicker.js +25 -3
- package/cjs/Dropdown/DropdownItem.js +16 -19
- package/cjs/Dropdown/useRenderDropdownItem.d.ts +2 -0
- package/cjs/Dropdown/useRenderDropdownItem.js +26 -0
- package/cjs/InputPicker/InputPicker.js +1 -1
- package/cjs/MaskedInput/MaskedInput.d.ts +5 -42
- package/cjs/MaskedInput/MaskedInput.js +9 -63
- package/cjs/MaskedInput/TextMask.d.ts +43 -0
- package/cjs/MaskedInput/TextMask.js +80 -0
- package/cjs/Menu/Menu.js +46 -34
- package/cjs/Menu/MenuItem.js +16 -12
- package/cjs/Modal/utils.js +9 -10
- package/cjs/Overlay/Position.js +7 -4
- package/cjs/Picker/PickerToggle.js +7 -5
- package/cjs/Picker/VirtualizedList.d.ts +29 -2
- package/cjs/Picker/utils.d.ts +6 -14
- package/cjs/Picker/utils.js +54 -33
- package/cjs/RadioGroup/RadioGroup.js +2 -2
- package/cjs/Rate/Rate.js +3 -1
- package/cjs/Sidenav/SidenavDropdownItem.js +17 -10
- package/cjs/TreePicker/TreePicker.js +6 -3
- package/cjs/utils/useElementResize.d.ts +1 -1
- package/cjs/utils/useElementResize.js +11 -6
- package/dist/rsuite-rtl.css +48 -6
- package/dist/rsuite-rtl.min.css +1 -1
- package/dist/rsuite-rtl.min.css.map +1 -1
- package/dist/rsuite.css +48 -6
- package/dist/rsuite.js +349 -359
- 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.LICENSE.txt +9 -0
- package/dist/rsuite.min.js.map +1 -1
- package/esm/Carousel/Carousel.d.ts +1 -1
- package/esm/CheckTreePicker/CheckTreePicker.js +6 -3
- package/esm/CheckTreePicker/utils.d.ts +1 -1
- package/esm/CheckTreePicker/utils.js +7 -6
- package/esm/CheckboxGroup/CheckboxGroup.js +2 -2
- package/esm/DateRangePicker/Calendar.d.ts +2 -1
- package/esm/DateRangePicker/Calendar.js +27 -5
- package/esm/DateRangePicker/DateRangePicker.d.ts +2 -0
- package/esm/DateRangePicker/DateRangePicker.js +23 -3
- package/esm/Dropdown/DropdownItem.js +15 -19
- package/esm/Dropdown/useRenderDropdownItem.d.ts +2 -0
- package/esm/Dropdown/useRenderDropdownItem.js +18 -0
- package/esm/InputPicker/InputPicker.js +1 -1
- package/esm/MaskedInput/MaskedInput.d.ts +5 -42
- package/esm/MaskedInput/MaskedInput.js +9 -63
- package/esm/MaskedInput/TextMask.d.ts +43 -0
- package/esm/MaskedInput/TextMask.js +67 -0
- package/esm/Menu/Menu.js +46 -36
- package/esm/Menu/MenuItem.js +16 -12
- package/esm/Modal/utils.js +8 -7
- package/esm/Overlay/Position.js +6 -3
- package/esm/Picker/PickerToggle.js +7 -5
- package/esm/Picker/VirtualizedList.d.ts +29 -2
- package/esm/Picker/utils.d.ts +6 -14
- package/esm/Picker/utils.js +54 -33
- package/esm/RadioGroup/RadioGroup.js +2 -2
- package/esm/Rate/Rate.js +2 -1
- package/esm/Sidenav/SidenavDropdownItem.js +16 -10
- package/esm/TreePicker/TreePicker.js +6 -3
- package/esm/utils/useElementResize.d.ts +1 -1
- package/esm/utils/useElementResize.js +12 -5
- package/package.json +3 -3
|
@@ -1,80 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
4
|
|
|
7
5
|
exports.__esModule = true;
|
|
8
6
|
exports.default = void 0;
|
|
9
7
|
|
|
10
|
-
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
11
|
-
|
|
12
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
9
|
|
|
14
|
-
var _react =
|
|
15
|
-
|
|
16
|
-
var _omit = _interopRequireDefault(require("lodash/omit"));
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
17
11
|
|
|
18
|
-
var
|
|
12
|
+
var _TextMask = _interopRequireDefault(require("./TextMask"));
|
|
19
13
|
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
var _utils = require("../utils");
|
|
23
|
-
|
|
24
|
-
var defaultRender = function defaultRender(ref, props) {
|
|
25
|
-
return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
|
|
26
|
-
ref: ref
|
|
27
|
-
}, props));
|
|
28
|
-
};
|
|
14
|
+
var _Input = _interopRequireDefault(require("../Input"));
|
|
29
15
|
|
|
30
16
|
var MaskedInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
31
|
-
var
|
|
32
|
-
_props$
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
pipe = props.pipe,
|
|
38
|
-
_props$render = props.render,
|
|
39
|
-
render = _props$render === void 0 ? defaultRender : _props$render,
|
|
40
|
-
onChange = props.onChange,
|
|
41
|
-
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["mask", "guide", "placeholderChar", "value", "showMask", "pipe", "render", "onChange"]);
|
|
42
|
-
var inputRef = (0, _react.useRef)(null);
|
|
43
|
-
var textMaskInputElement = (0, _react.useRef)();
|
|
44
|
-
var initTextMask = (0, _react.useCallback)(function () {
|
|
45
|
-
var _textMaskInputElement;
|
|
46
|
-
|
|
47
|
-
textMaskInputElement.current = (0, _createTextMaskInputElement.default)((0, _extends2.default)({
|
|
48
|
-
inputElement: inputRef.current
|
|
49
|
-
}, props));
|
|
50
|
-
(_textMaskInputElement = textMaskInputElement.current) === null || _textMaskInputElement === void 0 ? void 0 : _textMaskInputElement.update(value);
|
|
51
|
-
}, [props, value]);
|
|
52
|
-
var handleChange = (0, _react.useCallback)(function (event) {
|
|
53
|
-
var _textMaskInputElement2;
|
|
54
|
-
|
|
55
|
-
(_textMaskInputElement2 = textMaskInputElement.current) === null || _textMaskInputElement2 === void 0 ? void 0 : _textMaskInputElement2.update();
|
|
56
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
57
|
-
}, [onChange]);
|
|
58
|
-
(0, _react.useEffect)(function () {
|
|
59
|
-
initTextMask();
|
|
60
|
-
}, [guide, placeholderChar, showMask, pipe, mask, value, initTextMask]);
|
|
61
|
-
return render((0, _utils.mergeRefs)(inputRef, ref), (0, _extends2.default)({
|
|
62
|
-
onChange: handleChange,
|
|
63
|
-
defaultValue: value
|
|
64
|
-
}, (0, _omit.default)(rest, ['keepCharPositions'])));
|
|
17
|
+
var _props$as = props.as,
|
|
18
|
+
inputAs = _props$as === void 0 ? _TextMask.default : _props$as;
|
|
19
|
+
return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, props, {
|
|
20
|
+
as: inputAs,
|
|
21
|
+
ref: ref
|
|
22
|
+
}));
|
|
65
23
|
});
|
|
66
24
|
|
|
67
|
-
MaskedInput.displayName = 'MaskedInput';
|
|
68
|
-
MaskedInput.propTypes = {
|
|
69
|
-
render: _propTypes.default.func,
|
|
70
|
-
onChange: _propTypes.default.func,
|
|
71
|
-
mask: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.func, _propTypes.default.bool]).isRequired,
|
|
72
|
-
guide: _propTypes.default.bool,
|
|
73
|
-
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
74
|
-
pipe: _propTypes.default.func,
|
|
75
|
-
placeholderChar: _propTypes.default.string,
|
|
76
|
-
keepCharPositions: _propTypes.default.bool,
|
|
77
|
-
showMask: _propTypes.default.bool
|
|
78
|
-
};
|
|
79
25
|
var _default = MaskedInput;
|
|
80
26
|
exports.default = _default;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { MaskType, MaskFunctionType, ConfigType } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#guide
|
|
5
|
+
*/
|
|
6
|
+
interface TextMaskBaseProps {
|
|
7
|
+
/**
|
|
8
|
+
* `guide` is a boolean that tells the component whether to be in guide or no guide mode.
|
|
9
|
+
*/
|
|
10
|
+
guide?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* `mask` is an array or a function that defines how the user input is going to be masked.
|
|
13
|
+
*/
|
|
14
|
+
mask?: MaskType | MaskFunctionType | boolean;
|
|
15
|
+
/**
|
|
16
|
+
* `showMask` is a boolean that tells the Text Mask component to display the mask as a placeholder
|
|
17
|
+
* in place of the regular placeholder when the input element value is empty.
|
|
18
|
+
*/
|
|
19
|
+
showMask?: boolean;
|
|
20
|
+
/** The placeholder character represents the fillable spot in the mask. The default placeholder character is underscore, _. */
|
|
21
|
+
placeholderChar?: string;
|
|
22
|
+
/** `keepCharPositions` changes the general behavior of the Text Mask component. */
|
|
23
|
+
keepCharPositions?: boolean;
|
|
24
|
+
/** You can provide a `pipe` function that will give you the opportunity to modify the conformed value before it is displayed on the screen. */
|
|
25
|
+
pipe?: (conformedValue: string, config: ConfigType) => string;
|
|
26
|
+
}
|
|
27
|
+
export declare type TextMaskProps = TextMaskBaseProps & React.HTMLAttributes<HTMLInputElement> & {
|
|
28
|
+
/** Custom rendering DOM */
|
|
29
|
+
render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
|
|
30
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
31
|
+
value?: string | number;
|
|
32
|
+
readOnly?: boolean;
|
|
33
|
+
disabled?: boolean;
|
|
34
|
+
};
|
|
35
|
+
declare const TextMask: React.ForwardRefExoticComponent<TextMaskBaseProps & React.HTMLAttributes<HTMLInputElement> & {
|
|
36
|
+
/** Custom rendering DOM */
|
|
37
|
+
render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
|
|
38
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
39
|
+
value?: string | number;
|
|
40
|
+
readOnly?: boolean;
|
|
41
|
+
disabled?: boolean;
|
|
42
|
+
} & React.RefAttributes<HTMLInputElement>>;
|
|
43
|
+
export default TextMask;
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
+
|
|
5
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
|
+
|
|
7
|
+
exports.__esModule = true;
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
11
|
+
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
15
|
+
|
|
16
|
+
var _omit = _interopRequireDefault(require("lodash/omit"));
|
|
17
|
+
|
|
18
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
19
|
+
|
|
20
|
+
var _createTextMaskInputElement = _interopRequireDefault(require("./createTextMaskInputElement"));
|
|
21
|
+
|
|
22
|
+
var _utils = require("../utils");
|
|
23
|
+
|
|
24
|
+
var defaultRender = function defaultRender(ref, props) {
|
|
25
|
+
return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
|
|
26
|
+
ref: ref
|
|
27
|
+
}, props));
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
var TextMask = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
31
|
+
var mask = props.mask,
|
|
32
|
+
_props$guide = props.guide,
|
|
33
|
+
guide = _props$guide === void 0 ? true : _props$guide,
|
|
34
|
+
placeholderChar = props.placeholderChar,
|
|
35
|
+
value = props.value,
|
|
36
|
+
showMask = props.showMask,
|
|
37
|
+
pipe = props.pipe,
|
|
38
|
+
_props$render = props.render,
|
|
39
|
+
render = _props$render === void 0 ? defaultRender : _props$render,
|
|
40
|
+
onChange = props.onChange,
|
|
41
|
+
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["mask", "guide", "placeholderChar", "value", "showMask", "pipe", "render", "onChange"]);
|
|
42
|
+
var inputRef = (0, _react.useRef)(null);
|
|
43
|
+
var textMaskInputElement = (0, _react.useRef)();
|
|
44
|
+
var initTextMask = (0, _react.useCallback)(function () {
|
|
45
|
+
var _textMaskInputElement;
|
|
46
|
+
|
|
47
|
+
textMaskInputElement.current = (0, _createTextMaskInputElement.default)((0, _extends2.default)({
|
|
48
|
+
inputElement: inputRef.current
|
|
49
|
+
}, props));
|
|
50
|
+
(_textMaskInputElement = textMaskInputElement.current) === null || _textMaskInputElement === void 0 ? void 0 : _textMaskInputElement.update(value);
|
|
51
|
+
}, [props, value]);
|
|
52
|
+
var handleChange = (0, _react.useCallback)(function (event) {
|
|
53
|
+
var _textMaskInputElement2;
|
|
54
|
+
|
|
55
|
+
(_textMaskInputElement2 = textMaskInputElement.current) === null || _textMaskInputElement2 === void 0 ? void 0 : _textMaskInputElement2.update();
|
|
56
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
57
|
+
}, [onChange]);
|
|
58
|
+
(0, _react.useEffect)(function () {
|
|
59
|
+
initTextMask();
|
|
60
|
+
}, [guide, placeholderChar, showMask, pipe, mask, value, initTextMask]);
|
|
61
|
+
return render((0, _utils.mergeRefs)(inputRef, ref), (0, _extends2.default)({
|
|
62
|
+
onChange: handleChange,
|
|
63
|
+
defaultValue: value
|
|
64
|
+
}, (0, _omit.default)(rest, ['keepCharPositions'])));
|
|
65
|
+
});
|
|
66
|
+
|
|
67
|
+
TextMask.displayName = 'TextMask';
|
|
68
|
+
TextMask.propTypes = {
|
|
69
|
+
render: _propTypes.default.func,
|
|
70
|
+
onChange: _propTypes.default.func,
|
|
71
|
+
mask: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.func, _propTypes.default.bool]).isRequired,
|
|
72
|
+
guide: _propTypes.default.bool,
|
|
73
|
+
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
74
|
+
pipe: _propTypes.default.func,
|
|
75
|
+
placeholderChar: _propTypes.default.string,
|
|
76
|
+
keepCharPositions: _propTypes.default.bool,
|
|
77
|
+
showMask: _propTypes.default.bool
|
|
78
|
+
};
|
|
79
|
+
var _default = TextMask;
|
|
80
|
+
exports.default = _default;
|
package/cjs/Menu/Menu.js
CHANGED
|
@@ -21,7 +21,7 @@ var _useUniqueId = _interopRequireDefault(require("../utils/useUniqueId"));
|
|
|
21
21
|
|
|
22
22
|
var _useMenu = _interopRequireDefault(require("./useMenu"));
|
|
23
23
|
|
|
24
|
-
var
|
|
24
|
+
var _useFocus2 = _interopRequireDefault(require("../utils/useFocus"));
|
|
25
25
|
|
|
26
26
|
var _useClickOutside = _interopRequireDefault(require("../utils/useClickOutside"));
|
|
27
27
|
|
|
@@ -60,7 +60,10 @@ function Menu(props) {
|
|
|
60
60
|
rtl = _useCustom.rtl;
|
|
61
61
|
|
|
62
62
|
var activeItem = (_items$activeItemInde = items[activeItemIndex]) === null || _items$activeItemInde === void 0 ? void 0 : _items$activeItemInde.element;
|
|
63
|
-
|
|
63
|
+
|
|
64
|
+
var _useFocus = (0, _useFocus2.default)(menuElementRef),
|
|
65
|
+
grabFocus = _useFocus.grab;
|
|
66
|
+
|
|
64
67
|
var openMenu = (0, _react.useCallback)(function (event) {
|
|
65
68
|
dispatch({
|
|
66
69
|
type: _MenuContext.MenuActionTypes.OpenMenu
|
|
@@ -74,8 +77,8 @@ function Menu(props) {
|
|
|
74
77
|
}
|
|
75
78
|
|
|
76
79
|
onToggleMenu === null || onToggleMenu === void 0 ? void 0 : onToggleMenu(true, event);
|
|
77
|
-
|
|
78
|
-
}, [dispatch, onToggleMenu,
|
|
80
|
+
grabFocus();
|
|
81
|
+
}, [dispatch, onToggleMenu, grabFocus]);
|
|
79
82
|
var closeMenu = (0, _react.useCallback)(function (event, returnFocusToButton) {
|
|
80
83
|
if (returnFocusToButton === void 0) {
|
|
81
84
|
returnFocusToButton = true;
|
|
@@ -170,39 +173,48 @@ function Menu(props) {
|
|
|
170
173
|
if (disabled) return;
|
|
171
174
|
openMenu(event);
|
|
172
175
|
}, [open, disabled, openMenu]);
|
|
173
|
-
var buttonEventHandlers = {
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
176
|
+
var buttonEventHandlers = (0, _react.useMemo)(function () {
|
|
177
|
+
var buttonEventHandlers = {
|
|
178
|
+
onKeyDown: handleButtonKeydown
|
|
179
|
+
};
|
|
180
|
+
/**
|
|
181
|
+
* Bind event of trigger,
|
|
182
|
+
* not used in in the expanded state of '<Sidenav>'
|
|
183
|
+
*/
|
|
184
|
+
|
|
185
|
+
if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('click')) {
|
|
186
|
+
buttonEventHandlers.onClick = handleButtonClick;
|
|
187
|
+
}
|
|
184
188
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
189
|
+
if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('contextmenu')) {
|
|
190
|
+
buttonEventHandlers.onContextMenu = handleButtonContextMenu;
|
|
191
|
+
}
|
|
188
192
|
|
|
193
|
+
return buttonEventHandlers;
|
|
194
|
+
}, [openMenuOn, handleButtonKeydown, handleButtonClick, handleButtonContextMenu]);
|
|
189
195
|
var buttonId = (0, _useUniqueId.default)('menubutton-');
|
|
190
|
-
var menuId = (0, _useUniqueId.default)('menu-');
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
196
|
+
var menuId = (0, _useUniqueId.default)('menu-');
|
|
197
|
+
var buttonAriaAttributes = (0, _react.useMemo)(function () {
|
|
198
|
+
// Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-14
|
|
199
|
+
return {
|
|
200
|
+
role: 'button',
|
|
201
|
+
'aria-haspopup': 'menu',
|
|
202
|
+
'aria-expanded': open || undefined,
|
|
203
|
+
// it's recommend to remove aria-expanded when menu is hidden
|
|
204
|
+
'aria-controls': menuId
|
|
205
|
+
};
|
|
206
|
+
}, [open, menuId]);
|
|
207
|
+
var buttonProps = (0, _react.useMemo)(function () {
|
|
208
|
+
return (0, _extends2.default)({
|
|
209
|
+
id: buttonId
|
|
210
|
+
}, buttonAriaAttributes, buttonEventHandlers, {
|
|
211
|
+
// render props
|
|
212
|
+
open: open
|
|
213
|
+
});
|
|
214
|
+
}, [buttonId, buttonAriaAttributes, buttonEventHandlers, open]);
|
|
215
|
+
var customMenuButton = (0, _react.useMemo)(function () {
|
|
216
|
+
return renderMenuButton === null || renderMenuButton === void 0 ? void 0 : renderMenuButton(buttonProps, buttonElementRef);
|
|
217
|
+
}, [renderMenuButton, buttonProps, buttonElementRef]);
|
|
206
218
|
var buttonElement = customMenuButton !== null && customMenuButton !== void 0 ? customMenuButton : /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
|
|
207
219
|
ref: buttonElementRef
|
|
208
220
|
}, buttonProps), menuButtonText);
|
package/cjs/Menu/MenuItem.js
CHANGED
|
@@ -44,20 +44,24 @@ function MenuItem(props) {
|
|
|
44
44
|
}, [disabled, onActivate]); // Gain/release focus on mousedown in `menubar`
|
|
45
45
|
|
|
46
46
|
var handleMouseDown = (0, _react.useCallback)(function () {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
47
|
+
if (!hasFocus) {
|
|
48
|
+
dispatch({
|
|
49
|
+
type: _MenuContext.MenuActionTypes.MoveFocus,
|
|
50
|
+
to: _MenuContext.MoveFocusTo.Specific,
|
|
51
|
+
id: menuitemRef.current.id
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
}, [hasFocus, dispatch]); // Gain/release focus on mouseenter/mouseleave in `menu`
|
|
53
55
|
|
|
54
56
|
var handleMouseMove = (0, _react.useCallback)(function () {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
57
|
+
if (!hasFocus) {
|
|
58
|
+
dispatch({
|
|
59
|
+
type: _MenuContext.MenuActionTypes.MoveFocus,
|
|
60
|
+
to: _MenuContext.MoveFocusTo.Specific,
|
|
61
|
+
id: menuitemRef.current.id
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
}, [hasFocus, dispatch]);
|
|
61
65
|
var handleMouseLeave = (0, _react.useCallback)(function () {
|
|
62
66
|
dispatch({
|
|
63
67
|
type: _MenuContext.MenuActionTypes.MoveFocus,
|
package/cjs/Modal/utils.js
CHANGED
|
@@ -2,19 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
6
|
-
|
|
7
5
|
exports.__esModule = true;
|
|
8
6
|
exports.useBodyStyles = void 0;
|
|
9
7
|
|
|
10
8
|
var _react = require("react");
|
|
11
9
|
|
|
12
|
-
var _elementResizeEvent = _interopRequireWildcard(require("element-resize-event"));
|
|
13
|
-
|
|
14
10
|
var _getHeight = _interopRequireDefault(require("dom-lib/getHeight"));
|
|
15
11
|
|
|
16
12
|
var _on = _interopRequireDefault(require("dom-lib/on"));
|
|
17
13
|
|
|
14
|
+
var _resizeObserver = require("@juggle/resize-observer");
|
|
15
|
+
|
|
18
16
|
var useBodyStyles = function useBodyStyles(ref, options) {
|
|
19
17
|
var _useState = (0, _react.useState)({}),
|
|
20
18
|
bodyStyles = _useState[0],
|
|
@@ -25,6 +23,7 @@ var useBodyStyles = function useBodyStyles(ref, options) {
|
|
|
25
23
|
prefix = options.prefix;
|
|
26
24
|
var windowResizeListener = (0, _react.useRef)();
|
|
27
25
|
var contentElement = (0, _react.useRef)();
|
|
26
|
+
var contentElementResizeObserver = (0, _react.useRef)();
|
|
28
27
|
var updateBodyStyles = (0, _react.useCallback)(function (_event, entering) {
|
|
29
28
|
var dialog = ref.current;
|
|
30
29
|
var scrollHeight = dialog ? dialog.scrollHeight : 0;
|
|
@@ -53,13 +52,10 @@ var useBodyStyles = function useBodyStyles(ref, options) {
|
|
|
53
52
|
setBodyStyles(styles);
|
|
54
53
|
}, [prefix, ref]);
|
|
55
54
|
var onDestroyEvents = (0, _react.useCallback)(function () {
|
|
56
|
-
var _windowResizeListener, _windowResizeListener2;
|
|
55
|
+
var _windowResizeListener, _windowResizeListener2, _contentElementResize;
|
|
57
56
|
|
|
58
57
|
(_windowResizeListener = windowResizeListener.current) === null || _windowResizeListener === void 0 ? void 0 : (_windowResizeListener2 = _windowResizeListener.off) === null || _windowResizeListener2 === void 0 ? void 0 : _windowResizeListener2.call(_windowResizeListener);
|
|
59
|
-
|
|
60
|
-
if (contentElement.current) {
|
|
61
|
-
(0, _elementResizeEvent.unbind)(contentElement.current);
|
|
62
|
-
}
|
|
58
|
+
(_contentElementResize = contentElementResizeObserver.current) === null || _contentElementResize === void 0 ? void 0 : _contentElementResize.disconnect();
|
|
63
59
|
}, []);
|
|
64
60
|
var onChangeBodyStyles = (0, _react.useCallback)(function (entering) {
|
|
65
61
|
if (overflow && !drawer) {
|
|
@@ -68,7 +64,10 @@ var useBodyStyles = function useBodyStyles(ref, options) {
|
|
|
68
64
|
updateBodyStyles(null, entering);
|
|
69
65
|
contentElement.current = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector("." + prefix('content'));
|
|
70
66
|
windowResizeListener.current = (0, _on.default)(window, 'resize', updateBodyStyles);
|
|
71
|
-
|
|
67
|
+
contentElementResizeObserver.current = new _resizeObserver.ResizeObserver(function () {
|
|
68
|
+
return updateBodyStyles();
|
|
69
|
+
});
|
|
70
|
+
contentElementResizeObserver.current.observe(contentElement.current);
|
|
72
71
|
}
|
|
73
72
|
}, [drawer, overflow, prefix, ref, updateBodyStyles]);
|
|
74
73
|
(0, _react.useEffect)(function () {
|
package/cjs/Overlay/Position.js
CHANGED
|
@@ -9,8 +9,6 @@ exports.default = void 0;
|
|
|
9
9
|
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
|
|
12
|
-
var _elementResizeEvent = _interopRequireDefault(require("element-resize-event"));
|
|
13
|
-
|
|
14
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
13
|
|
|
16
14
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
@@ -27,6 +25,8 @@ var _addClass = _interopRequireDefault(require("dom-lib/addClass"));
|
|
|
27
25
|
|
|
28
26
|
var _addStyle = _interopRequireDefault(require("dom-lib/addStyle"));
|
|
29
27
|
|
|
28
|
+
var _resizeObserver = require("@juggle/resize-observer");
|
|
29
|
+
|
|
30
30
|
var _isElement = _interopRequireDefault(require("../DOMHelper/isElement"));
|
|
31
31
|
|
|
32
32
|
var _positionUtils = _interopRequireDefault(require("./positionUtils"));
|
|
@@ -43,6 +43,7 @@ var usePosition = function usePosition(props, ref) {
|
|
|
43
43
|
triggerTarget = props.triggerTarget;
|
|
44
44
|
var containerRef = (0, _react.useRef)();
|
|
45
45
|
var lastTargetRef = (0, _react.useRef)();
|
|
46
|
+
var overlayResizeObserver = (0, _react.useRef)();
|
|
46
47
|
var defaultPosition = {
|
|
47
48
|
positionLeft: 0,
|
|
48
49
|
positionTop: 0,
|
|
@@ -129,17 +130,19 @@ var usePosition = function usePosition(props, ref) {
|
|
|
129
130
|
|
|
130
131
|
if (overlay) {
|
|
131
132
|
// Update the position when the size of the overlay changes
|
|
132
|
-
|
|
133
|
+
overlayResizeObserver.current = new _resizeObserver.ResizeObserver(function () {
|
|
133
134
|
return updatePosition(true, true);
|
|
134
135
|
});
|
|
136
|
+
overlayResizeObserver.current.observe(overlay);
|
|
135
137
|
}
|
|
136
138
|
|
|
137
139
|
return function () {
|
|
138
|
-
var _containerScrollListe;
|
|
140
|
+
var _containerScrollListe, _overlayResizeObserve;
|
|
139
141
|
|
|
140
142
|
lastTargetRef.current = null;
|
|
141
143
|
(_containerScrollListe = containerScrollListener) === null || _containerScrollListe === void 0 ? void 0 : _containerScrollListe.off();
|
|
142
144
|
resizeListener === null || resizeListener === void 0 ? void 0 : resizeListener.off();
|
|
145
|
+
(_overlayResizeObserve = overlayResizeObserver.current) === null || _overlayResizeObserve === void 0 ? void 0 : _overlayResizeObserve.disconnect();
|
|
143
146
|
};
|
|
144
147
|
}, [preventOverflow, ref, updatePosition]);
|
|
145
148
|
(0, _utils.useUpdateEffect)(function () {
|
|
@@ -29,7 +29,7 @@ var _Plaintext = _interopRequireDefault(require("../Plaintext"));
|
|
|
29
29
|
|
|
30
30
|
var _useToggleCaret = _interopRequireDefault(require("../utils/useToggleCaret"));
|
|
31
31
|
|
|
32
|
-
var
|
|
32
|
+
var _TextMask = _interopRequireDefault(require("../MaskedInput/TextMask"));
|
|
33
33
|
|
|
34
34
|
var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType"));
|
|
35
35
|
|
|
@@ -104,15 +104,17 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
104
104
|
onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
|
|
105
105
|
|
|
106
106
|
if (input) {
|
|
107
|
-
|
|
107
|
+
var _inputRef$current;
|
|
108
|
+
|
|
109
|
+
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
|
|
108
110
|
}
|
|
109
111
|
}, [input, onFocus]);
|
|
110
112
|
var handleBlur = (0, _react.useCallback)(function (event) {
|
|
111
113
|
if (document.activeElement !== inputRef.current) {
|
|
112
|
-
var _inputRef$
|
|
114
|
+
var _inputRef$current2;
|
|
113
115
|
|
|
114
116
|
setActive(false);
|
|
115
|
-
(_inputRef$
|
|
117
|
+
(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
|
|
116
118
|
}
|
|
117
119
|
|
|
118
120
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
@@ -167,7 +169,7 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
167
169
|
onFocus: !disabled ? handleFocus : null // The debounce is set to 200 to solve the flicker caused by the switch between input and div.
|
|
168
170
|
,
|
|
169
171
|
onBlur: !disabled ? (0, _debounce.default)(handleBlur, 200) : null
|
|
170
|
-
}), /*#__PURE__*/_react.default.createElement(
|
|
172
|
+
}), /*#__PURE__*/_react.default.createElement(_TextMask.default, {
|
|
171
173
|
mask: inputMask,
|
|
172
174
|
value: Array.isArray(inputValue) ? inputValue.toString() : inputValue,
|
|
173
175
|
onBlur: handleInputBlur,
|
|
@@ -1,9 +1,36 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ListProps, ListRowProps } from 'react-virtualized/dist/commonjs/List';
|
|
3
3
|
import { AutoSizerProps } from 'react-virtualized/dist/commonjs/AutoSizer';
|
|
4
|
+
import type { Alignment } from 'react-virtualized';
|
|
4
5
|
export interface ListInstance {
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
/**
|
|
7
|
+
* Forcefully re-render the inner Grid component.
|
|
8
|
+
*/
|
|
9
|
+
forceUpdateGrid(): void;
|
|
10
|
+
/**
|
|
11
|
+
* Gets offset for a given row and alignment.
|
|
12
|
+
*/
|
|
13
|
+
getOffsetForRow(params: {
|
|
14
|
+
alignment?: Alignment;
|
|
15
|
+
index?: number;
|
|
16
|
+
}): number;
|
|
17
|
+
/**
|
|
18
|
+
* Pre-measure all rows in a List.
|
|
19
|
+
*/
|
|
20
|
+
measureAllRows(): void;
|
|
21
|
+
/**
|
|
22
|
+
* Recompute row heights and offsets after the specified index (defaults to 0).
|
|
23
|
+
*/
|
|
24
|
+
recomputeRowHeights(index?: number): void;
|
|
25
|
+
/**
|
|
26
|
+
* Scroll to the specified offset. Useful for animating position changes.
|
|
27
|
+
*/
|
|
28
|
+
scrollToPosition(scrollTop?: number): void;
|
|
29
|
+
/**
|
|
30
|
+
* Ensure row is visible. This method can be used to safely scroll back to a cell
|
|
31
|
+
* that a user has scrolled away from even if it was previously scrolled to.
|
|
32
|
+
*/
|
|
33
|
+
scrollToRow(index?: number): void;
|
|
7
34
|
}
|
|
8
35
|
export type { ListProps, AutoSizerProps, ListRowProps };
|
|
9
36
|
export declare const List: React.ComponentType<ListProps>;
|
package/cjs/Picker/utils.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { OverlayTriggerInstance } from './PickerToggleTrigger';
|
|
3
3
|
import { TypeAttributes, ItemDataType } from '../@types/common';
|
|
4
|
+
import { ListInstance } from './VirtualizedList';
|
|
4
5
|
interface NodeKeys {
|
|
5
6
|
valueKey: string;
|
|
6
7
|
childrenKey: string;
|
|
@@ -103,25 +104,16 @@ export declare function useSearch(props: SearchProps): {
|
|
|
103
104
|
checkShouldDisplay: (item: ItemDataType, keyword?: string) => boolean;
|
|
104
105
|
handleSearch: (searchKeyword: string, event: React.SyntheticEvent) => void;
|
|
105
106
|
};
|
|
106
|
-
interface
|
|
107
|
+
interface PickerDependentParameters {
|
|
107
108
|
triggerRef?: React.RefObject<OverlayTriggerInstance>;
|
|
108
|
-
rootRef?: React.RefObject<
|
|
109
|
+
rootRef?: React.RefObject<any>;
|
|
109
110
|
overlayRef?: React.RefObject<HTMLElement>;
|
|
110
111
|
targetRef?: React.RefObject<HTMLElement>;
|
|
112
|
+
listRef?: React.RefObject<ListInstance>;
|
|
113
|
+
inline?: boolean;
|
|
111
114
|
}
|
|
112
115
|
/**
|
|
113
116
|
* A hook of the exposed method of Picker
|
|
114
|
-
*
|
|
115
|
-
* {
|
|
116
|
-
* root: Element;
|
|
117
|
-
* overlay: Element;
|
|
118
|
-
* target?: Element;
|
|
119
|
-
* updatePosition:() => void;
|
|
120
|
-
* open:() => void;
|
|
121
|
-
* close:() => void;
|
|
122
|
-
* }
|
|
123
|
-
* @param ref
|
|
124
|
-
* @param params
|
|
125
117
|
*/
|
|
126
|
-
export declare function usePublicMethods(ref: any,
|
|
118
|
+
export declare function usePublicMethods(ref: any, parmas: PickerDependentParameters): void;
|
|
127
119
|
export {};
|