rsuite 5.49.0 → 5.51.0

package/cjs/SelectPicker/SelectPicker.js

@@ -79,11 +79,13 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     renderMenuItem = props.renderMenuItem,
     renderExtraFooter = props.renderExtraFooter,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "appearance", "data", "valueKey", "labelKey", "value", "classPrefix", "placeholder", "defaultValue", "disabled", "cleanable", "placement", "menuClassName", "menuAutoWidth", "menuMaxHeight", "menuStyle", "groupBy", "locale", "toggleAs", "style", "searchable", "disabledItemValues", "virtualized", "listProps", "id", "onGroupTitleClick", "searchBy", "onEntered", "onExited", "onClean", "onChange", "onSelect", "onSearch", "onClose", "onOpen", "sort", "renderValue", "renderMenu", "renderMenuGroup", "renderMenuItem", "renderExtraFooter"]);
-  var triggerRef = (0, _react.useRef)(null);
-  var targetRef = (0, _react.useRef)(null);
-  var overlayRef = (0, _react.useRef)(null);
-  var searchInputRef = (0, _react.useRef)(null);
-  var listRef = (0, _react.useRef)(null);
+  var _usePickerRef = (0, _Picker.usePickerRef)(ref),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay,
+    list = _usePickerRef.list,
+    searchInput = _usePickerRef.searchInput;
   var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),
     locale = _useCustom.locale;
   var _ref = (0, _utils.useControlled)(valueProp, defaultValue),
@@ -93,7 +95,7 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       data: data,
       valueKey: valueKey,
       target: function target() {
-        return overlayRef.current;
+        return overlay.current;
       }
     }),
     focusItemValue = _useFocusItemValue.focusItemValue,
@@ -116,19 +118,19 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _useState = (0, _react.useState)(false),
     active = _useState[0],
     setActive = _useState[1];
-  var handleClose = (0, _react.useCallback)(function () {
-    var _triggerRef$current, _triggerRef$current$c;
-    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);
-  }, []);
-  var handleSelect = (0, _react.useCallback)(function (value, item, event) {
-    var _targetRef$current;
+  var handleClose = (0, _utils.useEventCallback)(function () {
+    var _trigger$current, _trigger$current$clos;
+    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);
+  });
+  var handleSelect = (0, _utils.useEventCallback)(function (value, item, event) {
+    var _target$current;
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);
-    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.focus();
-  }, [onSelect]);
-  var handleChangeValue = (0, _react.useCallback)(function (value, event) {
+    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
+  });
+  var handleChangeValue = (0, _utils.useEventCallback)(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
-  }, [onChange]);
-  var handleMenuPressEnter = (0, _react.useCallback)(function (event) {
+  });
+  var handleMenuPressEnter = (0, _utils.useEventCallback)(function (event) {
     if (!focusItemValue) {
       return;
     }
@@ -141,28 +143,28 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     handleSelect(focusItemValue, focusItem, event);
     handleChangeValue(focusItemValue, event);
     handleClose();
-  }, [data, focusItemValue, handleChangeValue, handleClose, handleSelect, setValue, valueKey]);
-  var handleItemSelect = (0, _react.useCallback)(function (value, item, event) {
+  });
+  var handleItemSelect = (0, _utils.useEventCallback)(function (value, item, event) {
     setValue(value);
     setFocusItemValue(value);
     handleSelect(value, item, event);
     handleChangeValue(value, event);
     handleClose();
-  }, [setValue, setFocusItemValue, handleSelect, handleChangeValue, handleClose]);
-  var handleClean = (0, _react.useCallback)(function (event) {
+  });
+  var handleClean = (0, _utils.useEventCallback)(function (event) {
     if (disabled || !cleanable) {
       return;
     }
     setValue(null);
     setFocusItemValue(value);
     handleChangeValue(null, event);
-  }, [value, disabled, cleanable, setValue, handleChangeValue, setFocusItemValue]);
+  });
   var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
     toggle: !focusItemValue || !active,
-    triggerRef: triggerRef,
-    targetRef: targetRef,
-    overlayRef: overlayRef,
-    searchInputRef: searchInputRef,
+    trigger: trigger,
+    target: target,
+    overlay: overlay,
+    searchInput: searchInput,
     active: active,
     onExit: handleClean,
     onMenuKeyDown: onFocusItem,
@@ -171,22 +173,16 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       setFocusItemValue(null);
     }
   }, rest));
-  var handleExited = (0, _react.useCallback)(function () {
+  var handleExited = (0, _utils.useEventCallback)(function () {
     resetSearch();
     setActive(false);
     onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose, resetSearch, onSearch]);
-  var handleEntered = (0, _react.useCallback)(function () {
+  });
+  var handleEntered = (0, _utils.useEventCallback)(function () {
     setActive(true);
     setFocusItemValue(value);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  }, [onOpen, setFocusItemValue, value]);
-  (0, _Picker.usePublicMethods)(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef,
-    listRef: listRef
   });
 
   // Find active `MenuItem` by `value`
@@ -213,7 +209,7 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       hasValue = false;
     }
   }
-  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
+  var renderPopup = function renderPopup(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
@@ -230,10 +226,9 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     } else if (typeof sort === 'function') {
       items = items.sort(sort(false));
     }
-    var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenu, {
-      id: id ? id + "-listbox" : undefined,
+    var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {
       listProps: listProps,
-      listRef: listRef,
+      listRef: list,
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
       labelKey: labelKey,
@@ -241,8 +236,8 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       renderMenuItem: renderMenuItem,
       maxHeight: menuMaxHeight,
       classPrefix: 'picker-select-menu',
-      dropdownMenuItemClassPrefix: 'picker-select-menu-item',
-      dropdownMenuItemAs: _Picker.DropdownMenuItem,
+      listItemClassPrefix: 'picker-select-menu-item',
+      listItemAs: _Picker.ListItem,
       activeItemValues: [value],
       focusItemValue: focusItemValue,
       data: items
@@ -257,18 +252,18 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }) : /*#__PURE__*/_react.default.createElement("div", {
       className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["none"])))
     }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
-    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
-      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
+    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
+      ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       autoWidth: menuAutoWidth,
       className: classes,
       style: styles,
       onKeyDown: onPickerKeyDown,
-      target: triggerRef
+      target: trigger
     }, searchable && /*#__PURE__*/_react.default.createElement(_Picker.SearchBar, {
       placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
       onChange: handleSearch,
       value: searchKeyword,
-      inputRef: searchInputRef
+      inputRef: searchInput
     }), renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
@@ -281,18 +276,19 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     classes = _usePickerClassName[0],
     usedClassNamePropKeys = _usePickerClassName[1];
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
+    id: id,
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),
     onExited: (0, _utils.createChainedFunction)(handleExited, onExited),
-    speaker: renderDropdownMenu
+    speaker: renderPopup
   }, /*#__PURE__*/_react.default.createElement(Component, {
     className: classes,
-    style: style
+    style: style,
+    ref: root
   }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {
-    id: id,
-    ref: targetRef,
+    ref: target,
     appearance: appearance,
     onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
     onKeyDown: onPickerKeyDown,
@@ -301,6 +297,7 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     cleanable: cleanable && !disabled,
     hasValue: hasValue,
     inputValue: value !== null && value !== void 0 ? value : '',
+    focusItemValue: focusItemValue,
     active: active,
     placement: placement
   }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));

package/cjs/TagInput/index.js

@@ -44,6 +44,10 @@ var TagInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement(_InputPickerContext.default.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(_InputPicker.default, (0, _extends2.default)({}, rest, {
+    "aria-haspopup": false,
+    "aria-expanded": undefined,
+    "aria-controls": undefined,
+    "aria-keyshortcuts": trigger,
     value: value,
     defaultValue: defaultValue,
     data: data,

package/cjs/TreePicker/TreeNode.d.ts

@@ -23,8 +23,8 @@ export interface TreeNodeProps extends WithAsProps {
     style?: React.CSSProperties;
     onExpand?: (nodeData: any) => void;
     onSelect?: (nodeData: any, event: React.SyntheticEvent) => void;
-    onRenderTreeIcon?: (nodeData: any) => React.ReactNode;
-    onRenderTreeNode?: (nodeData: any) => React.ReactNode;
+    renderTreeIcon?: (nodeData: any) => React.ReactNode;
+    renderTreeNode?: (nodeData: any) => React.ReactNode;
     onDragStart?: (data: any, event: React.DragEvent<any>) => void;
     onDragEnter?: (data: any, event: React.DragEvent<any>) => void;
     onDragOver?: (data: any, event: React.DragEvent<any>) => void;

package/cjs/TreePicker/TreeNode.js

@@ -8,7 +8,6 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hasClass = _interopRequireDefault(require("dom-lib/hasClass"));
 var _ArrowDown = _interopRequireDefault(require("@rsuite/icons/legacy/ArrowDown"));
 var _Spinner = _interopRequireDefault(require("@rsuite/icons/legacy/Spinner"));
@@ -46,20 +45,20 @@ var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onDragEnd = _ref.onDragEnd,
     onDrop = _ref.onDrop,
     onExpand = _ref.onExpand,
-    onRenderTreeIcon = _ref.onRenderTreeIcon,
-    onRenderTreeNode = _ref.onRenderTreeNode,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["as", "rtl", "label", "layer", "style", "active", "loading", "nodeData", "className", "classPrefix", "disabled", "visible", "draggable", "expand", "focus", "hasChildren", "dragging", "dragOver", "dragOverTop", "dragOverBottom", "onSelect", "onDragStart", "onDragOver", "onDragEnter", "onDragLeave", "onDragEnd", "onDrop", "onExpand", "onRenderTreeIcon", "onRenderTreeNode"]);
+    renderTreeIcon = _ref.renderTreeIcon,
+    renderTreeNode = _ref.renderTreeNode,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["as", "rtl", "label", "layer", "style", "active", "loading", "nodeData", "className", "classPrefix", "disabled", "visible", "draggable", "expand", "focus", "hasChildren", "dragging", "dragOver", "dragOverTop", "dragOverBottom", "onSelect", "onDragStart", "onDragOver", "onDragEnter", "onDragLeave", "onDragEnd", "onDrop", "onExpand", "renderTreeIcon", "renderTreeNode"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,
     withClassPrefix = _useClassNames.withClassPrefix;
-  var handleExpand = (0, _react.useCallback)(function (event) {
+  var handleExpand = (0, _utils.useEventCallback)(function (event) {
     var _event$nativeEvent, _event$nativeEvent$st;
     // stop propagation when using custom loading icon
     event === null || event === void 0 ? void 0 : (_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : (_event$nativeEvent$st = _event$nativeEvent.stopImmediatePropagation) === null || _event$nativeEvent$st === void 0 ? void 0 : _event$nativeEvent$st.call(_event$nativeEvent);
     onExpand === null || onExpand === void 0 ? void 0 : onExpand(nodeData);
-  }, [nodeData, onExpand]);
-  var handleSelect = (0, _react.useCallback)(function (event) {
+  });
+  var handleSelect = (0, _utils.useEventCallback)(function (event) {
     if (disabled) {
       return;
     }
@@ -69,33 +68,33 @@ var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       }
     }
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeData, event);
-  }, [nodeData, disabled, prefix, onSelect]);
-  var handleDragStart = (0, _react.useCallback)(function (event) {
+  });
+  var handleDragStart = (0, _utils.useEventCallback)(function (event) {
     onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);
-  }, [nodeData, onDragStart]);
-  var handleDragEnter = (0, _react.useCallback)(function (event) {
+  });
+  var handleDragEnter = (0, _utils.useEventCallback)(function (event) {
     event.preventDefault();
     event.stopPropagation();
     onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);
-  }, [nodeData, onDragEnter]);
-  var handleDragOver = (0, _react.useCallback)(function (event) {
+  });
+  var handleDragOver = (0, _utils.useEventCallback)(function (event) {
     event.preventDefault();
     event.stopPropagation();
     onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(nodeData, event);
-  }, [nodeData, onDragOver]);
-  var handleDragLeave = (0, _react.useCallback)(function (event) {
+  });
+  var handleDragLeave = (0, _utils.useEventCallback)(function (event) {
     event.stopPropagation();
     onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);
-  }, [nodeData, onDragLeave]);
-  var handleDragEnd = (0, _react.useCallback)(function (event) {
+  });
+  var handleDragEnd = (0, _utils.useEventCallback)(function (event) {
     event.stopPropagation();
     onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);
-  }, [nodeData, onDragEnd]);
-  var handleDrop = (0, _react.useCallback)(function (event) {
+  });
+  var handleDrop = (0, _utils.useEventCallback)(function (event) {
     event.preventDefault();
     event.stopPropagation();
     onDrop === null || onDrop === void 0 ? void 0 : onDrop(nodeData, event);
-  }, [nodeData, onDrop]);
+  });
   var renderIcon = function renderIcon() {
     var classes = prefix('expand-icon', 'icon', {
       expanded: expand
@@ -110,8 +109,8 @@ var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         spin: true
       }));
     }
-    if (nodeData !== undefined && typeof onRenderTreeIcon === 'function') {
-      var customIcon = onRenderTreeIcon(nodeData);
+    if (nodeData !== undefined && typeof renderTreeIcon === 'function') {
+      var customIcon = renderTreeIcon(nodeData);
       expandIcon = customIcon !== null ? /*#__PURE__*/_react.default.createElement("div", {
         className: prefix('custom-icon')
       }, customIcon) : expandIcon;
@@ -141,7 +140,7 @@ var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onClick: handleSelect
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: contentClasses
-    }, onRenderTreeNode ? onRenderTreeNode(nodeData) : label));
+    }, renderTreeNode ? renderTreeNode(nodeData) : label));
   };
   var classes = merge(className, withClassPrefix({
     disabled: disabled,
@@ -171,38 +170,5 @@ var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }), renderIcon(), renderLabel()) : null;
 });
 TreeNode.displayName = 'TreePickerNode';
-TreeNode.propTypes = {
-  as: _propTypes.default.elementType,
-  rtl: _propTypes.default.bool,
-  focus: _propTypes.default.bool,
-  layer: _propTypes.default.number,
-  value: _propTypes.default.any,
-  label: _propTypes.default.any,
-  expand: _propTypes.default.bool,
-  active: _propTypes.default.bool,
-  loading: _propTypes.default.bool,
-  visible: _propTypes.default.bool,
-  nodeData: _propTypes.default.any,
-  disabled: _propTypes.default.bool,
-  draggable: _propTypes.default.bool,
-  dragging: _propTypes.default.bool,
-  dragOver: _propTypes.default.bool,
-  dragOverTop: _propTypes.default.bool,
-  dragOverBottom: _propTypes.default.bool,
-  hasChildren: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  classPrefix: _propTypes.default.string,
-  style: _propTypes.default.object,
-  onExpand: _propTypes.default.func,
-  onSelect: _propTypes.default.func,
-  onRenderTreeIcon: _propTypes.default.func,
-  onRenderTreeNode: _propTypes.default.func,
-  onDragStart: _propTypes.default.func,
-  onDragEnter: _propTypes.default.func,
-  onDragOver: _propTypes.default.func,
-  onDragLeave: _propTypes.default.func,
-  onDragEnd: _propTypes.default.func,
-  onDrop: _propTypes.default.func
-};
 var _default = TreeNode;
 exports.default = _default;