rsuite 5.50.0 → 5.51.0

package/cjs/Picker/utils.js

@@ -1,26 +1,15 @@
 'use client';
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.createConcatChildrenFunction = createConcatChildrenFunction;
 exports.shouldDisplay = shouldDisplay;
-exports.usePickerClassName = usePickerClassName;
 exports.onMenuKeyDown = onMenuKeyDown;
-exports.useSearch = useSearch;
-exports.useToggleKeyDownEvent = exports.useFocusItemValue = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _react = _interopRequireWildcard(require("react"));
-var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
+var _react = _interopRequireDefault(require("react"));
 var _trim = _interopRequireDefault(require("lodash/trim"));
-var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
-var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
-var _omit = _interopRequireDefault(require("lodash/omit"));
-var _find = _interopRequireDefault(require("lodash/find"));
 var _treeUtils = require("../utils/treeUtils");
 var _utils = require("../utils");
-var _domLib = require("dom-lib");
 var defaultNodeKeys = {
   valueKey: 'value',
   childrenKey: 'children'
@@ -55,33 +44,6 @@ function shouldDisplay(label, searchKeyword) {
   }
   return false;
 }
-/**
- * The className of the assembled Toggle is on the Picker.
- */
-function usePickerClassName(props) {
-  var _withClassPrefix;
-  var name = props.name,
-    classPrefix = props.classPrefix,
-    className = props.className,
-    placement = props.placement,
-    appearance = props.appearance,
-    cleanable = props.cleanable,
-    block = props.block,
-    disabled = props.disabled,
-    countable = props.countable,
-    readOnly = props.readOnly,
-    plaintext = props.plaintext,
-    hasValue = props.hasValue,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["name", "classPrefix", "className", "placement", "appearance", "cleanable", "block", "disabled", "countable", "readOnly", "plaintext", "hasValue"]);
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    merge = _useClassNames.merge;
-  var classes = merge(className, withClassPrefix(name, appearance, 'toggle-wrapper', (_withClassPrefix = {}, _withClassPrefix["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _withClassPrefix['read-only'] = readOnly, _withClassPrefix['has-value'] = hasValue, _withClassPrefix.cleanable = cleanable, _withClassPrefix.block = block, _withClassPrefix.disabled = disabled, _withClassPrefix.countable = countable, _withClassPrefix.plaintext = plaintext, _withClassPrefix)));
-
-  // Those props that're used for composing the className
-  var usedClassNamePropKeys = Object.keys((0, _omit.default)(props, [].concat(Object.keys(rest || {}), ['disabled', 'readOnly', 'plaintext', 'name'])));
-  return [classes, usedClassNamePropKeys];
-}
 /**
  * Handling keyboard events...
  * @param event Keyboard event object
@@ -130,371 +92,4 @@ function onMenuKeyDown(event, events) {
       break;
     default:
   }
-}
-/**
- * Checks if the element has a vertical scrollbar.
- */
-function hasVerticalScroll(element) {
-  var scrollHeight = element.scrollHeight,
-    clientHeight = element.clientHeight;
-  return scrollHeight > clientHeight;
-}
-
-/**
- * Checks if the element is within the visible area of the container
- */
-function isVisible(element, container, direction) {
-  if (!hasVerticalScroll(container)) {
-    return true;
-  }
-  var _element$getBoundingC = element.getBoundingClientRect(),
-    top = _element$getBoundingC.top,
-    bottom = _element$getBoundingC.bottom,
-    height = _element$getBoundingC.height;
-  var _container$getBoundin = container.getBoundingClientRect(),
-    containerTop = _container$getBoundin.top,
-    containerBottom = _container$getBoundin.bottom;
-  if (direction === 'top') {
-    return top + height > containerTop;
-  }
-  return bottom - height < containerBottom;
-}
-function scrollTo(container, direction, step) {
-  var scrollTop = container.scrollTop;
-  container.scrollTop = direction === 'top' ? scrollTop - step : scrollTop + step;
-}
-
-/**
- * A hook that manages the focus state of the option.
- * @param defaultFocusItemValue
- * @param props
- */
-var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props) {
-  var _props$valueKey = props.valueKey,
-    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
-    _props$focusableQuery = props.focusableQueryKey,
-    focusableQueryKey = _props$focusableQuery === void 0 ? '[data-key][aria-disabled="false"]' : _props$focusableQuery,
-    _props$defaultLayer = props.defaultLayer,
-    defaultLayer = _props$defaultLayer === void 0 ? 0 : _props$defaultLayer,
-    data = props.data,
-    target = props.target,
-    rtl = props.rtl,
-    callback = props.callback,
-    _props$getParent = props.getParent,
-    getParent = _props$getParent === void 0 ? function (item) {
-      return item === null || item === void 0 ? void 0 : item.parent;
-    } : _props$getParent;
-  var _useState = (0, _react.useState)(defaultFocusItemValue),
-    focusItemValue = _useState[0],
-    setFocusItemValue = _useState[1];
-  var _useState2 = (0, _react.useState)(defaultLayer),
-    layer = _useState2[0],
-    setLayer = _useState2[1];
-  var _useState3 = (0, _react.useState)([]),
-    keys = _useState3[0],
-    setKeys = _useState3[1];
-  var focusCallback = (0, _react.useCallback)(function (value, event) {
-    var menu = (0, _isFunction.default)(target) ? target() : target;
-    var focusElement = menu === null || menu === void 0 ? void 0 : menu.querySelector("[data-key=\"" + value + "\"]");
-    focusElement === null || focusElement === void 0 ? void 0 : focusElement.focus();
-    callback === null || callback === void 0 ? void 0 : callback(value, event);
-  }, [callback, target]);
-  var getScrollContainer = (0, _react.useCallback)(function () {
-    var menu = (0, _isFunction.default)(target) ? target() : target;
-
-    // For Cascader and MutiCascader
-    var subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector("[data-layer=\"" + layer + "\"]");
-    if (subMenu) {
-      return subMenu;
-    }
-
-    // For SelectPicker、CheckPicker、Autocomplete、InputPicker、TagPicker
-    return menu === null || menu === void 0 ? void 0 : menu.querySelector('[role="listbox"]');
-  }, [layer, target]);
-
-  /**
-   * Get the elements visible in all options.
-   */
-  var getFocusableMenuItems = (0, _react.useCallback)(function () {
-    if (!target) {
-      return [];
-    }
-    var currentKeys = keys;
-    if (layer < 1) {
-      var popup = (0, _isFunction.default)(target) ? target() : target;
-      var rootMenu = popup === null || popup === void 0 ? void 0 : popup.querySelector('[data-layer="0"]');
-      if (rootMenu) {
-        var _rootMenu$querySelect;
-        currentKeys = Array.from((_rootMenu$querySelect = rootMenu.querySelectorAll(focusableQueryKey)) !== null && _rootMenu$querySelect !== void 0 ? _rootMenu$querySelect : []).map(function (item) {
-          var _item$dataset;
-          return (_item$dataset = item.dataset) === null || _item$dataset === void 0 ? void 0 : _item$dataset.key;
-        });
-      } else {
-        var _popup$querySelectorA;
-        currentKeys = Array.from((_popup$querySelectorA = popup === null || popup === void 0 ? void 0 : popup.querySelectorAll(focusableQueryKey)) !== null && _popup$querySelectorA !== void 0 ? _popup$querySelectorA : []).map(function (item) {
-          var _item$dataset2;
-          return (_item$dataset2 = item.dataset) === null || _item$dataset2 === void 0 ? void 0 : _item$dataset2.key;
-        });
-      }
-    }
-
-    // 1. It is necessary to traverse the `keys` instead of `data` here to preserve the order of the array.
-    // 2. The values ​​in `keys` are all string, so the corresponding value of `data` should also be converted to string
-    return currentKeys.map(function (key) {
-      return (0, _find.default)(data, function (i) {
-        return "" + i[valueKey] === key;
-      });
-    });
-  }, [data, focusableQueryKey, keys, target, valueKey, layer]);
-
-  /**
-   * Get the index of the focus item.
-   */
-  var findFocusItemIndex = (0, _react.useCallback)(function (callback) {
-    var items = getFocusableMenuItems();
-    for (var i = 0; i < items.length; i += 1) {
-      var _items$i;
-      if ((0, _utils.shallowEqual)(focusItemValue, (_items$i = items[i]) === null || _items$i === void 0 ? void 0 : _items$i[valueKey])) {
-        callback(items, i);
-        return;
-      }
-    }
-    callback(items, -1);
-  }, [focusItemValue, getFocusableMenuItems, valueKey]);
-  var scrollListItem = (0, _react.useCallback)(function (direction, itemValue, willOverflow) {
-    var container = getScrollContainer();
-    var item = container === null || container === void 0 ? void 0 : container.querySelector("[data-key=\"" + itemValue + "\"]");
-    if (willOverflow && container) {
-      var scrollHeight = container.scrollHeight,
-        clientHeight = container.clientHeight;
-      container.scrollTop = direction === 'top' ? scrollHeight - clientHeight : 0;
-      return;
-    }
-    if (item && container) {
-      if (!isVisible(item, container, direction)) {
-        var height = (0, _domLib.getHeight)(item);
-        scrollTo(container, direction, height);
-      }
-    }
-  }, [getScrollContainer]);
-  var focusNextMenuItem = (0, _react.useCallback)(function (event) {
-    findFocusItemIndex(function (items, index) {
-      var willOverflow = index + 2 > items.length;
-      var nextIndex = willOverflow ? 0 : index + 1;
-      var focusItem = items[nextIndex];
-      if (!(0, _isUndefined.default)(focusItem)) {
-        setFocusItemValue(focusItem[valueKey]);
-        focusCallback(focusItem[valueKey], event);
-        scrollListItem('bottom', focusItem[valueKey], willOverflow);
-      }
-    });
-  }, [focusCallback, findFocusItemIndex, scrollListItem, valueKey]);
-  var focusPrevMenuItem = (0, _react.useCallback)(function (event) {
-    findFocusItemIndex(function (items, index) {
-      var willOverflow = index === 0;
-      var nextIndex = willOverflow ? items.length - 1 : index - 1;
-      var focusItem = items[nextIndex];
-      if (!(0, _isUndefined.default)(focusItem)) {
-        setFocusItemValue(focusItem[valueKey]);
-        focusCallback(focusItem[valueKey], event);
-        scrollListItem('top', focusItem[valueKey], willOverflow);
-      }
-    });
-  }, [focusCallback, findFocusItemIndex, scrollListItem, valueKey]);
-  var getSubMenuKeys = (0, _react.useCallback)(function (nextLayer) {
-    var menu = (0, _isFunction.default)(target) ? target() : target;
-    var subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector("[data-layer=\"" + nextLayer + "\"]");
-    if (subMenu) {
-      var _Array$from;
-      return (_Array$from = Array.from(subMenu.querySelectorAll(focusableQueryKey))) === null || _Array$from === void 0 ? void 0 : _Array$from.map(function (item) {
-        var _item$dataset3;
-        return (_item$dataset3 = item.dataset) === null || _item$dataset3 === void 0 ? void 0 : _item$dataset3.key;
-      });
-    }
-    return null;
-  }, [focusableQueryKey, target]);
-  var focusNextLevelMenu = (0, _react.useCallback)(function (event) {
-    var nextLayer = layer + 1;
-    var nextKeys = getSubMenuKeys(nextLayer);
-    if (nextKeys) {
-      setKeys(nextKeys);
-      setLayer(nextLayer);
-      setFocusItemValue(nextKeys[0]);
-      focusCallback(nextKeys[0], event);
-    }
-  }, [focusCallback, getSubMenuKeys, layer]);
-  var focusPrevLevelMenu = (0, _react.useCallback)(function (event) {
-    var nextLayer = layer - 1;
-    var nextKeys = getSubMenuKeys(nextLayer);
-    if (nextKeys) {
-      var _getParent;
-      setKeys(nextKeys);
-      setLayer(nextLayer);
-      var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {
-        return item[valueKey] === focusItemValue;
-      });
-      var parentItemValue = (_getParent = getParent(focusItem)) === null || _getParent === void 0 ? void 0 : _getParent[valueKey];
-      if (parentItemValue) {
-        setFocusItemValue(parentItemValue);
-        focusCallback(parentItemValue, event);
-      }
-    }
-  }, [focusCallback, data, focusItemValue, getParent, getSubMenuKeys, layer, valueKey]);
-  var handleKeyDown = (0, _react.useCallback)(function (event) {
-    var _onMenuKeyDown;
-    onMenuKeyDown(event, (_onMenuKeyDown = {
-      down: focusNextMenuItem,
-      up: focusPrevMenuItem
-    }, _onMenuKeyDown[rtl ? 'left' : 'right'] = focusNextLevelMenu, _onMenuKeyDown[rtl ? 'right' : 'left'] = focusPrevLevelMenu, _onMenuKeyDown));
-  }, [focusNextLevelMenu, focusNextMenuItem, focusPrevLevelMenu, focusPrevMenuItem, rtl]);
-  return {
-    focusItemValue: focusItemValue,
-    setFocusItemValue: setFocusItemValue,
-    layer: layer,
-    setLayer: setLayer,
-    keys: keys,
-    setKeys: setKeys,
-    onKeyDown: handleKeyDown
-  };
-};
-exports.useFocusItemValue = useFocusItemValue;
-/**
- * A hook to control the toggle keyboard operation
- * @param props
- */
-var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
-  var _props$toggle = props.toggle,
-    toggle = _props$toggle === void 0 ? true : _props$toggle,
-    trigger = props.trigger,
-    target = props.target,
-    overlay = props.overlay,
-    searchInput = props.searchInput,
-    active = props.active,
-    readOnly = props.readOnly,
-    disabled = props.disabled,
-    loading = props.loading,
-    onExit = props.onExit,
-    onOpen = props.onOpen,
-    onClose = props.onClose,
-    onKeyDown = props.onKeyDown,
-    onMenuKeyDown = props.onMenuKeyDown,
-    onMenuPressEnter = props.onMenuPressEnter,
-    onMenuPressBackspace = props.onMenuPressBackspace;
-  var handleClose = (0, _utils.useEventCallback)(function () {
-    var _trigger$current, _trigger$current$clos, _trigger$current2, _trigger$current2$foc;
-    (_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);
-
-    // The focus is on the trigger button after closing
-    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$foc = _trigger$current2.focus) === null || _trigger$current2$foc === void 0 ? void 0 : _trigger$current2$foc.call(_trigger$current2);
-    onClose === null || onClose === void 0 ? void 0 : onClose();
-  });
-  var handleOpen = (0, _utils.useEventCallback)(function () {
-    var _trigger$current3, _trigger$current3$ope;
-    (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : (_trigger$current3$ope = _trigger$current3.open) === null || _trigger$current3$ope === void 0 ? void 0 : _trigger$current3$ope.call(_trigger$current3);
-    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  });
-  var handleToggleDropdown = (0, _utils.useEventCallback)(function () {
-    if (active) {
-      handleClose();
-      return;
-    }
-    handleOpen();
-  });
-  var onToggle = (0, _utils.useEventCallback)(function (event) {
-    // Keyboard events should not be processed when readOnly and disabled are set.
-    if (readOnly || disabled || loading) {
-      return;
-    }
-    if (event.target === (target === null || target === void 0 ? void 0 : target.current)) {
-      // enter
-      if (toggle && event.key === _utils.KEY_VALUES.ENTER) {
-        handleToggleDropdown();
-      }
-
-      // delete
-      if (event.key === _utils.KEY_VALUES.BACKSPACE) {
-        onExit === null || onExit === void 0 ? void 0 : onExit(event);
-      }
-    }
-    if (overlay !== null && overlay !== void 0 && overlay.current) {
-      // The keyboard operation callback on the menu.
-      onMenuKeyDown === null || onMenuKeyDown === void 0 ? void 0 : onMenuKeyDown(event);
-      if (event.key === _utils.KEY_VALUES.ENTER) {
-        onMenuPressEnter === null || onMenuPressEnter === void 0 ? void 0 : onMenuPressEnter(event);
-      }
-
-      /**
-       * There is no callback when typing the Backspace key in the search box.
-       * The default is to remove search keywords
-       */
-      if (event.key === _utils.KEY_VALUES.BACKSPACE && event.target !== (searchInput === null || searchInput === void 0 ? void 0 : searchInput.current)) {
-        onMenuPressBackspace === null || onMenuPressBackspace === void 0 ? void 0 : onMenuPressBackspace(event);
-      }
-
-      // The search box gets focus when typing characters and numbers.
-      if (event.key.length === 1 && /\w/.test(event.key)) {
-        var _event$target;
-        // Exclude Input
-        // eg: <SelectPicker renderExtraFooter={() => <Input />} />
-        if (((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName) !== 'INPUT') {
-          var _searchInput$current;
-          searchInput === null || searchInput === void 0 ? void 0 : (_searchInput$current = searchInput.current) === null || _searchInput$current === void 0 ? void 0 : _searchInput$current.focus();
-        }
-      }
-    }
-    if (event.key === _utils.KEY_VALUES.ESC || event.key === _utils.KEY_VALUES.TAB) {
-      handleClose();
-    }
-
-    // Native event callback
-    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-  });
-  return onToggle;
-};
-exports.useToggleKeyDownEvent = useToggleKeyDownEvent;
-/**
- * A hook that handles search filter options
- */
-function useSearch(data, props) {
-  var labelKey = props.labelKey,
-    searchBy = props.searchBy,
-    callback = props.callback; // Use search keywords to filter options.
-  var _useState4 = (0, _react.useState)(''),
-    searchKeyword = _useState4[0],
-    setSearchKeyword = _useState4[1];
-  var resetSearch = (0, _react.useCallback)(function () {
-    setSearchKeyword('');
-  }, []);
-
-  /**
-   * Index of keyword  in `label`
-   * @param {node} label
-   */
-  var checkShouldDisplay = (0, _react.useCallback)(function (item, keyword) {
-    var checkValue = typeof item === 'object' ? item === null || item === void 0 ? void 0 : item[labelKey] : String(item);
-    var _keyword = (0, _isUndefined.default)(keyword) ? searchKeyword : keyword;
-    if (typeof searchBy === 'function') {
-      return searchBy(_keyword, checkValue, item);
-    }
-    return shouldDisplay(checkValue, _keyword);
-  }, [labelKey, searchBy, searchKeyword]);
-  var filteredData = (0, _react.useMemo)(function () {
-    return data.filter(function (item) {
-      return checkShouldDisplay(item, searchKeyword);
-    });
-  }, [checkShouldDisplay, data, searchKeyword]);
-  var handleSearch = function handleSearch(searchKeyword, event) {
-    var filteredData = data.filter(function (item) {
-      return checkShouldDisplay(item, searchKeyword);
-    });
-    setSearchKeyword(searchKeyword);
-    callback === null || callback === void 0 ? void 0 : callback(searchKeyword, filteredData, event);
-  };
-  return {
-    searchKeyword: searchKeyword,
-    filteredData: filteredData,
-    checkShouldDisplay: checkShouldDisplay,
-    handleSearch: handleSearch,
-    resetSearch: resetSearch
-  };
 }

package/cjs/SelectPicker/SelectPicker.js

@@ -209,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;
@@ -226,8 +226,7 @@ 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: list,
       disabledItemValues: disabledItemValues,
@@ -237,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
@@ -253,7 +252,7 @@ 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, {
+    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       autoWidth: menuAutoWidth,
       className: classes,
@@ -277,18 +276,18 @@ 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: 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,
     ref: root
   }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {
-    id: id,
     ref: target,
     appearance: appearance,
     onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
@@ -298,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;