rsuite 5.48.1 → 5.50.0

package/esm/MultiCascader/MultiCascader.js

@@ -1,7 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import omit from 'lodash/omit';
@@ -12,8 +12,8 @@ import Checkbox from '../Checkbox';
 import { useCascadeValue, useColumnData, useFlattenData, isSomeChildChecked } from './utils';
 import { getNodeParents, findNodeOfTree } from '../utils/treeUtils';
 import { getColumnsAndPaths } from '../Cascader/utils';
-import { createChainedFunction, mergeRefs, getSafeRegExpString, useClassNames, useCustom, useUpdateEffect, useControlled } from '../utils';
-import { PickerToggle, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, usePickerClassName, usePublicMethods, useToggleKeyDownEvent, useFocusItemValue, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { createChainedFunction, mergeRefs, getSafeRegExpString, useClassNames, useCustom, useUpdateEffect, useControlled, useEventCallback } from '../utils';
+import { PickerToggle, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, usePickerClassName, usePickerRef, useToggleKeyDownEvent, useFocusItemValue, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 var emptyArray = [];
 
 /**
@@ -114,15 +114,12 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useState2 = useState(),
     selectedPaths = _useState2[0],
     setSelectedPaths = _useState2[1];
-  var triggerRef = useRef(null);
-  var overlayRef = useRef(null);
-  var targetRef = useRef(null);
-  var searchInputRef = useRef(null);
-  usePublicMethods(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef
-  });
+  var _usePickerRef = usePickerRef(ref),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay,
+    searchInput = _usePickerRef.searchInput;
   var _useCustom = useCustom('Picker', overrideLocale),
     locale = _useCustom.locale,
     rtl = _useCustom.rtl;
@@ -139,7 +136,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       valueKey: valueKey,
       defaultLayer: selectedPaths !== null && selectedPaths !== void 0 && selectedPaths.length ? selectedPaths.length - 1 : 0,
       target: function target() {
-        return overlayRef.current;
+        return overlay.current;
       },
       callback: useCallback(function (value) {
         var _getColumnsAndPaths = getColumnsAndPaths(data, flattenData.find(function (item) {
@@ -173,16 +170,16 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useState3 = useState(''),
     searchKeyword = _useState3[0],
     setSearchKeyword = _useState3[1];
-  var handleEntered = useCallback(function () {
+  var handleEntered = useEventCallback(function () {
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setActive(true);
-  }, [onOpen]);
-  var handleExited = useCallback(function () {
+  });
+  var handleExited = useEventCallback(function () {
     setActive(false);
     setSearchKeyword('');
-  }, []);
-  var handleSelect = useCallback(function (node, cascadePaths, event) {
-    var _node$childrenKey, _node$childrenKey2, _triggerRef$current, _triggerRef$current$u;
+  });
+  var handleSelect = useEventCallback(function (node, cascadePaths, event) {
+    var _node$childrenKey, _node$childrenKey2, _trigger$current, _trigger$current$upda;
     setSelectedPaths(cascadePaths);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);
     var columnIndex = cascadePaths.length;
@@ -195,7 +192,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
         children.then(function (data) {
           node.loading = false;
           node[childrenKey] = data;
-          if (targetRef.current || inline) {
+          if (target.current || inline) {
             addFlattenData(data, node);
             addColumn(data, columnIndex);
           }
@@ -212,9 +209,9 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       // Removes subsequent columns of the current column when the clicked node is a leaf node.
       removeColumnByIndex(columnIndex);
     }
-    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$u = _triggerRef$current.updatePosition) === null || _triggerRef$current$u === void 0 ? void 0 : _triggerRef$current$u.call(_triggerRef$current);
-  }, [onSelect, getChildren, childrenKey, inline, addFlattenData, addColumn, removeColumnByIndex]);
-  var handleCheck = useCallback(function (node, event, checked) {
+    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$upda = _trigger$current.updatePosition) === null || _trigger$current$upda === void 0 ? void 0 : _trigger$current$upda.call(_trigger$current);
+  });
+  var handleCheck = useEventCallback(function (node, event, checked) {
     var nodeValue = node[valueKey];
     var nextValue = [];
     if (cascade) {
@@ -232,38 +229,38 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setValue(nextValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
     onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextValue, node, checked, event);
-  }, [cascade, onChange, onCheck, setValue, splitValue, value, valueKey]);
-  var handleClean = useCallback(function (event) {
-    if (disabled || !targetRef.current) {
+  });
+  var handleClean = useEventCallback(function (event) {
+    if (disabled || !target.current) {
       return;
     }
     setSelectedPaths([]);
     setValue([]);
     setColumnData([data]);
     onChange === null || onChange === void 0 ? void 0 : onChange([], event);
-  }, [data, disabled, onChange, setColumnData, setValue]);
-  var handleMenuPressEnter = useCallback(function (event) {
-    var _overlayRef$current;
+  });
+  var handleMenuPressEnter = useEventCallback(function (event) {
+    var _overlay$current;
     var focusItem = findNodeOfTree(data, function (item) {
       return item[valueKey] === focusItemValue;
     });
-    var checkbox = (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.querySelector("[data-key=\"" + focusItemValue + "\"] [type=\"checkbox\"]");
+    var checkbox = (_overlay$current = overlay.current) === null || _overlay$current === void 0 ? void 0 : _overlay$current.querySelector("[data-key=\"" + focusItemValue + "\"] [type=\"checkbox\"]");
     if (checkbox) {
       handleCheck(focusItem, event, (checkbox === null || checkbox === void 0 ? void 0 : checkbox.getAttribute('aria-checked')) !== 'true');
     }
-  }, [data, focusItemValue, handleCheck, valueKey]);
+  });
   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,
     onMenuPressEnter: handleMenuPressEnter
   }, rest));
-  var handleSearch = useCallback(function (value, event) {
+  var handleSearch = useEventCallback(function (value, event) {
     setSearchKeyword(value);
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);
     if (value) {
@@ -272,8 +269,8 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setLayer(selectedPaths.length - 1);
     }
     setKeys([]);
-  }, [onSearch, selectedPaths, setKeys, setLayer]);
-  var getSearchResult = useCallback(function () {
+  });
+  var getSearchResult = function getSearchResult() {
     var items = [];
     var result = flattenData.filter(function (item) {
       if (uncheckableItemValues.some(function (value) {
@@ -295,7 +292,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }
     return items;
-  }, [flattenData, labelKey, searchKeyword, uncheckableItemValues, valueKey]);
+  };
   var renderSearchRow = function renderSearchRow(item, key) {
     var _extends2;
     var nodes = getNodeParents(item);
@@ -380,16 +377,16 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       inline: inline
     }));
     return /*#__PURE__*/React.createElement(PickerOverlay, {
-      ref: mergeRefs(overlayRef, speakerRef),
+      ref: mergeRefs(overlay, speakerRef),
       className: classes,
       style: styles,
-      target: triggerRef,
+      target: trigger,
       onKeyDown: onPickerKeyDown
     }, searchable && /*#__PURE__*/React.createElement(SearchBar, {
       placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
       onChange: handleSearch,
       value: searchKeyword,
-      inputRef: searchInputRef
+      inputRef: searchInput
     }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/React.createElement(DropdownMenu, {
       id: id ? id + "-listbox" : undefined,
       cascade: cascade,
@@ -445,7 +442,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     pickerProps: pick(props, pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onEnter: createChainedFunction(handleEntered, onEnter),
     onExited: createChainedFunction(handleExited, onExited),
@@ -453,13 +450,14 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     speaker: renderDropdownMenu
   }, /*#__PURE__*/React.createElement(Component, {
     className: classes,
-    style: style
+    style: style,
+    ref: root
   }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys)), {
     id: id,
     as: toggleAs,
     appearance: appearance,
     disabled: disabled,
-    ref: targetRef,
+    ref: target,
     onClean: createChainedFunction(handleClean, onClean),
     onKeyDown: onPickerKeyDown,
     cleanable: cleanable && !disabled,

package/esm/Overlay/OverlayTrigger.d.ts

@@ -77,6 +77,9 @@ export interface OverlayTriggerHandle {
     updatePosition: () => void;
     open: (delay?: number) => void;
     close: (delay?: number) => void;
+    getState: () => {
+        open?: boolean;
+    };
 }
 /**
  * OverlayTrigger is used to display floating elements on another component.

package/esm/Overlay/OverlayTrigger.js

@@ -165,6 +165,11 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
         var _overlayRef$current;
         return (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.child;
       },
+      getState: function getState() {
+        return {
+          open: open
+        };
+      },
       open: handleOpen,
       close: function close(delay) {
         return handleClose(delay, function () {

package/esm/Picker/PickerIndicator.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface PickerIndicatorProps {
+    loading?: boolean;
+    caretAs?: React.ElementType | null;
+    onClose?: (event: React.MouseEvent<HTMLElement>) => void;
+    showCleanButton?: boolean;
+    as?: React.ElementType;
+}
+declare const PickerIndicator: ({ loading, caretAs, onClose, showCleanButton, as: Component }: PickerIndicatorProps) => JSX.Element;
+export default PickerIndicator;

package/esm/Picker/PickerIndicator.js

@@ -0,0 +1,43 @@
+'use client';
+import React from 'react';
+import { Icon } from '@rsuite/icons';
+import { useCustom, useClassNames } from '../utils';
+import InputGroup from '../InputGroup';
+import CloseButton from '../CloseButton';
+import Loader from '../Loader';
+var PickerIndicator = function PickerIndicator(_ref) {
+  var loading = _ref.loading,
+    caretAs = _ref.caretAs,
+    onClose = _ref.onClose,
+    showCleanButton = _ref.showCleanButton,
+    _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? InputGroup.Addon : _ref$as;
+  var _useCustom = useCustom(),
+    locale = _useCustom.locale;
+  var _useClassNames = useClassNames('picker'),
+    prefix = _useClassNames.prefix;
+  var addon = function addon() {
+    if (loading) {
+      return /*#__PURE__*/React.createElement(Loader, {
+        className: prefix('loader'),
+        "data-testid": "spinner"
+      });
+    }
+    if (showCleanButton) {
+      return /*#__PURE__*/React.createElement(CloseButton, {
+        className: prefix('clean'),
+        tabIndex: -1,
+        locale: {
+          closeLabel: locale === null || locale === void 0 ? void 0 : locale.clear
+        },
+        onClick: onClose
+      });
+    }
+    return caretAs && /*#__PURE__*/React.createElement(Icon, {
+      as: caretAs,
+      className: prefix('caret-icon')
+    });
+  };
+  return /*#__PURE__*/React.createElement(Component, null, addon());
+};
+export default PickerIndicator;

package/esm/Picker/PickerLabel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface PickerLabelProps {
+    id?: string;
+    className?: string;
+    children?: React.ReactNode;
+    as?: React.ElementType;
+}
+declare const PickerLabel: ({ children, className, as: Component, ...rest }: PickerLabelProps) => JSX.Element | null;
+export default PickerLabel;

package/esm/Picker/PickerLabel.js

@@ -0,0 +1,17 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import InputGroup from '../InputGroup';
+var PickerLabel = function PickerLabel(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? InputGroup.Addon : _ref$as,
+    rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "as"]);
+  return children ? /*#__PURE__*/React.createElement(Component, _extends({
+    "data-testid": "picker-label",
+    className: className
+  }, rest), children) : null;
+};
+export default PickerLabel;

package/esm/Picker/PickerToggle.d.ts

@@ -4,38 +4,33 @@ import { RsRefForwardingComponent, TypeAttributes } from '../@types/common';
 import { IconProps } from '@rsuite/icons/lib/Icon';
 declare type ValueType = string | number;
 export interface PickerToggleProps extends ToggleButtonProps {
-    value?: ValueType | ValueType[];
-    inputValue?: ValueType | ValueType[];
-    id?: string;
+    active?: boolean;
     hasValue?: boolean;
     cleanable?: boolean;
     caret?: boolean;
-    active?: boolean;
-    disabled?: boolean;
-    readOnly?: boolean;
-    plaintext?: boolean;
-    tabIndex?: number;
-    /** Whether to display an loading indicator on toggle button */
-    loading?: boolean;
-    editable?: boolean;
-    name?: string;
-    inputPlaceholder?: string;
-    inputMask?: (string | RegExp)[];
-    onInputChange?: (value: string, event: React.ChangeEvent) => void;
-    onInputPressEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onInputBackspace?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onInputBlur?: (event: React.FocusEvent<HTMLElement>) => void;
-    onInputFocus?: (event: React.FocusEvent<HTMLElement>) => void;
-    placement?: TypeAttributes.Placement;
     /**
      * Custom caret component
      * @deprecated Use `caretAs` instead
      */
     caretComponent?: React.FC<IconProps>;
-    /** Custom caret component */
+    /**
+     * Custom caret component
+     */
     caretAs?: React.ElementType;
-    onClean?: (event: React.MouseEvent) => void;
+    disabled?: boolean;
+    placement?: TypeAttributes.Placement;
+    readOnly?: boolean;
+    plaintext?: boolean;
+    tabIndex?: number;
+    /**
+     * Whether to display an loading indicator on toggle button
+     */
+    loading?: boolean;
     label?: React.ReactNode;
+    name?: string;
+    id?: string;
+    inputValue?: ValueType | ValueType[];
+    onClean?: (event: React.MouseEvent) => void;
 }
 declare const PickerToggle: RsRefForwardingComponent<typeof ToggleButton, PickerToggleProps>;
 export default PickerToggle;