rsuite 5.49.0 → 5.51.0

package/esm/SelectPicker/SelectPicker.js

@@ -3,16 +3,16 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _templateObject;
-import React, { useRef, useState, useCallback } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import isUndefined from 'lodash/isUndefined';
 import isNil from 'lodash/isNil';
 import isFunction from 'lodash/isFunction';
 import omit from 'lodash/omit';
-import { createChainedFunction, useCustom, useClassNames, useControlled, mergeRefs, shallowEqual } from '../utils';
+import { createChainedFunction, useCustom, useClassNames, useControlled, useEventCallback, mergeRefs, shallowEqual } from '../utils';
 import { getDataGroupBy } from '../utils/getDataGroupBy';
-import { DropdownMenu, DropdownMenuItem, PickerToggle, PickerToggleTrigger, PickerOverlay, SearchBar, useFocusItemValue, usePickerClassName, useSearch, usePublicMethods, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { Listbox, ListItem, PickerToggle, PickerToggleTrigger, PickerPopup, SearchBar, useFocusItemValue, usePickerClassName, useSearch, useToggleKeyDownEvent, usePickerRef, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 var emptyArray = [];
 /**
  * The `SelectPicker` component is used to select an item from a list of data.
@@ -73,11 +73,13 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     renderMenuItem = props.renderMenuItem,
     renderExtraFooter = props.renderExtraFooter,
     rest = _objectWithoutPropertiesLoose(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 = useRef(null);
-  var targetRef = useRef(null);
-  var overlayRef = useRef(null);
-  var searchInputRef = useRef(null);
-  var listRef = useRef(null);
+  var _usePickerRef = usePickerRef(ref),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay,
+    list = _usePickerRef.list,
+    searchInput = _usePickerRef.searchInput;
   var _useCustom = useCustom('Picker', overrideLocale),
     locale = _useCustom.locale;
   var _ref = useControlled(valueProp, defaultValue),
@@ -87,7 +89,7 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       data: data,
       valueKey: valueKey,
       target: function target() {
-        return overlayRef.current;
+        return overlay.current;
       }
     }),
     focusItemValue = _useFocusItemValue.focusItemValue,
@@ -110,19 +112,19 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useState = useState(false),
     active = _useState[0],
     setActive = _useState[1];
-  var handleClose = 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 = useCallback(function (value, item, event) {
-    var _targetRef$current;
+  var handleClose = 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 = 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 = useCallback(function (value, event) {
+    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
+  });
+  var handleChangeValue = useEventCallback(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
-  }, [onChange]);
-  var handleMenuPressEnter = useCallback(function (event) {
+  });
+  var handleMenuPressEnter = useEventCallback(function (event) {
     if (!focusItemValue) {
       return;
     }
@@ -135,28 +137,28 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     handleSelect(focusItemValue, focusItem, event);
     handleChangeValue(focusItemValue, event);
     handleClose();
-  }, [data, focusItemValue, handleChangeValue, handleClose, handleSelect, setValue, valueKey]);
-  var handleItemSelect = useCallback(function (value, item, event) {
+  });
+  var handleItemSelect = useEventCallback(function (value, item, event) {
     setValue(value);
     setFocusItemValue(value);
     handleSelect(value, item, event);
     handleChangeValue(value, event);
     handleClose();
-  }, [setValue, setFocusItemValue, handleSelect, handleChangeValue, handleClose]);
-  var handleClean = useCallback(function (event) {
+  });
+  var handleClean = useEventCallback(function (event) {
     if (disabled || !cleanable) {
       return;
     }
     setValue(null);
     setFocusItemValue(value);
     handleChangeValue(null, event);
-  }, [value, disabled, cleanable, setValue, handleChangeValue, setFocusItemValue]);
+  });
   var onPickerKeyDown = useToggleKeyDownEvent(_extends({
     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,
@@ -165,22 +167,16 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setFocusItemValue(null);
     }
   }, rest));
-  var handleExited = useCallback(function () {
+  var handleExited = 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 = useCallback(function () {
+  });
+  var handleEntered = useEventCallback(function () {
     setActive(true);
     setFocusItemValue(value);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  }, [onOpen, setFocusItemValue, value]);
-  usePublicMethods(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef,
-    listRef: listRef
   });
 
   // Find active `MenuItem` by `value`
@@ -207,7 +203,7 @@ var SelectPicker = /*#__PURE__*/React.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;
@@ -224,10 +220,9 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } else if (typeof sort === 'function') {
       items = items.sort(sort(false));
     }
-    var menu = items.length ? /*#__PURE__*/React.createElement(DropdownMenu, {
-      id: id ? id + "-listbox" : undefined,
+    var menu = items.length ? /*#__PURE__*/React.createElement(Listbox, {
       listProps: listProps,
-      listRef: listRef,
+      listRef: list,
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
       labelKey: labelKey,
@@ -235,8 +230,8 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderMenuItem: renderMenuItem,
       maxHeight: menuMaxHeight,
       classPrefix: 'picker-select-menu',
-      dropdownMenuItemClassPrefix: 'picker-select-menu-item',
-      dropdownMenuItemAs: DropdownMenuItem,
+      listItemClassPrefix: 'picker-select-menu-item',
+      listItemAs: ListItem,
       activeItemValues: [value],
       focusItemValue: focusItemValue,
       data: items
@@ -251,18 +246,18 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }) : /*#__PURE__*/React.createElement("div", {
       className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["none"])))
     }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
-    return /*#__PURE__*/React.createElement(PickerOverlay, {
-      ref: mergeRefs(overlayRef, speakerRef),
+    return /*#__PURE__*/React.createElement(PickerPopup, {
+      ref: mergeRefs(overlay, speakerRef),
       autoWidth: menuAutoWidth,
       className: classes,
       style: styles,
       onKeyDown: onPickerKeyDown,
-      target: triggerRef
+      target: trigger
     }, searchable && /*#__PURE__*/React.createElement(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 = usePickerClassName(_extends({}, props, {
@@ -275,18 +270,19 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     classes = _usePickerClassName[0],
     usedClassNamePropKeys = _usePickerClassName[1];
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    id: id,
     pickerProps: pick(props, pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onEntered: createChainedFunction(handleEntered, onEntered),
     onExited: createChainedFunction(handleExited, onExited),
-    speaker: renderDropdownMenu
+    speaker: renderPopup
   }, /*#__PURE__*/React.createElement(Component, {
     className: classes,
-    style: style
+    style: style,
+    ref: root
   }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys)), {
-    id: id,
-    ref: targetRef,
+    ref: target,
     appearance: appearance,
     onClean: createChainedFunction(handleClean, onClean),
     onKeyDown: onPickerKeyDown,
@@ -295,6 +291,7 @@ var SelectPicker = /*#__PURE__*/React.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/esm/TagInput/index.js

@@ -38,6 +38,10 @@ var TagInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(InputPickerContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(InputPicker, _extends({}, rest, {
+    "aria-haspopup": false,
+    "aria-expanded": undefined,
+    "aria-controls": undefined,
+    "aria-keyshortcuts": trigger,
     value: value,
     defaultValue: defaultValue,
     data: data,

package/esm/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/esm/TreePicker/TreeNode.js

@@ -1,12 +1,11 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { forwardRef, useCallback } from 'react';
-import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
 import hasClass from 'dom-lib/hasClass';
 import ArrowDown from '@rsuite/icons/legacy/ArrowDown';
 import Spinner from '@rsuite/icons/legacy/Spinner';
-import { useClassNames } from '../utils';
+import { useClassNames, useEventCallback } from '../utils';
 import { getTreeNodeIndent, stringifyTreeNodeLabel } from '../utils/treeUtils';
 var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$as = _ref.as,
@@ -40,20 +39,20 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onDragEnd = _ref.onDragEnd,
     onDrop = _ref.onDrop,
     onExpand = _ref.onExpand,
-    onRenderTreeIcon = _ref.onRenderTreeIcon,
-    onRenderTreeNode = _ref.onRenderTreeNode,
-    rest = _objectWithoutPropertiesLoose(_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 = _objectWithoutPropertiesLoose(_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 = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,
     withClassPrefix = _useClassNames.withClassPrefix;
-  var handleExpand = useCallback(function (event) {
+  var handleExpand = 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 = useCallback(function (event) {
+  });
+  var handleSelect = useEventCallback(function (event) {
     if (disabled) {
       return;
     }
@@ -63,33 +62,33 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     }
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeData, event);
-  }, [nodeData, disabled, prefix, onSelect]);
-  var handleDragStart = useCallback(function (event) {
+  });
+  var handleDragStart = useEventCallback(function (event) {
     onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);
-  }, [nodeData, onDragStart]);
-  var handleDragEnter = useCallback(function (event) {
+  });
+  var handleDragEnter = useEventCallback(function (event) {
     event.preventDefault();
     event.stopPropagation();
     onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);
-  }, [nodeData, onDragEnter]);
-  var handleDragOver = useCallback(function (event) {
+  });
+  var handleDragOver = useEventCallback(function (event) {
     event.preventDefault();
     event.stopPropagation();
     onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(nodeData, event);
-  }, [nodeData, onDragOver]);
-  var handleDragLeave = useCallback(function (event) {
+  });
+  var handleDragLeave = useEventCallback(function (event) {
     event.stopPropagation();
     onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);
-  }, [nodeData, onDragLeave]);
-  var handleDragEnd = useCallback(function (event) {
+  });
+  var handleDragEnd = useEventCallback(function (event) {
     event.stopPropagation();
     onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);
-  }, [nodeData, onDragEnd]);
-  var handleDrop = useCallback(function (event) {
+  });
+  var handleDrop = 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
@@ -104,8 +103,8 @@ var TreeNode = /*#__PURE__*/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.createElement("div", {
         className: prefix('custom-icon')
       }, customIcon) : expandIcon;
@@ -135,7 +134,7 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onClick: handleSelect
     }, /*#__PURE__*/React.createElement("span", {
       className: contentClasses
-    }, onRenderTreeNode ? onRenderTreeNode(nodeData) : label));
+    }, renderTreeNode ? renderTreeNode(nodeData) : label));
   };
   var classes = merge(className, withClassPrefix({
     disabled: disabled,
@@ -165,37 +164,4 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }), renderIcon(), renderLabel()) : null;
 });
 TreeNode.displayName = 'TreePickerNode';
-TreeNode.propTypes = {
-  as: PropTypes.elementType,
-  rtl: PropTypes.bool,
-  focus: PropTypes.bool,
-  layer: PropTypes.number,
-  value: PropTypes.any,
-  label: PropTypes.any,
-  expand: PropTypes.bool,
-  active: PropTypes.bool,
-  loading: PropTypes.bool,
-  visible: PropTypes.bool,
-  nodeData: PropTypes.any,
-  disabled: PropTypes.bool,
-  draggable: PropTypes.bool,
-  dragging: PropTypes.bool,
-  dragOver: PropTypes.bool,
-  dragOverTop: PropTypes.bool,
-  dragOverBottom: PropTypes.bool,
-  hasChildren: PropTypes.bool,
-  className: PropTypes.string,
-  classPrefix: PropTypes.string,
-  style: PropTypes.object,
-  onExpand: PropTypes.func,
-  onSelect: PropTypes.func,
-  onRenderTreeIcon: PropTypes.func,
-  onRenderTreeNode: PropTypes.func,
-  onDragStart: PropTypes.func,
-  onDragEnter: PropTypes.func,
-  onDragOver: PropTypes.func,
-  onDragLeave: PropTypes.func,
-  onDragEnd: PropTypes.func,
-  onDrop: PropTypes.func
-};
 export default TreeNode;