rsuite 5.48.1 → 5.50.0

package/cjs/MultiCascader/MultiCascader.js

@@ -120,15 +120,12 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _useState2 = (0, _react.useState)(),
     selectedPaths = _useState2[0],
     setSelectedPaths = _useState2[1];
-  var triggerRef = (0, _react.useRef)(null);
-  var overlayRef = (0, _react.useRef)(null);
-  var targetRef = (0, _react.useRef)(null);
-  var searchInputRef = (0, _react.useRef)(null);
-  (0, _Picker.usePublicMethods)(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef
-  });
+  var _usePickerRef = (0, _Picker.usePickerRef)(ref),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay,
+    searchInput = _usePickerRef.searchInput;
   var _useCustom = (0, _utils3.useCustom)('Picker', overrideLocale),
     locale = _useCustom.locale,
     rtl = _useCustom.rtl;
@@ -145,7 +142,7 @@ var MultiCascader = /*#__PURE__*/_react.default.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: (0, _react.useCallback)(function (value) {
         var _getColumnsAndPaths = (0, _utils2.getColumnsAndPaths)(data, flattenData.find(function (item) {
@@ -179,16 +176,16 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _useState3 = (0, _react.useState)(''),
     searchKeyword = _useState3[0],
     setSearchKeyword = _useState3[1];
-  var handleEntered = (0, _react.useCallback)(function () {
+  var handleEntered = (0, _utils3.useEventCallback)(function () {
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setActive(true);
-  }, [onOpen]);
-  var handleExited = (0, _react.useCallback)(function () {
+  });
+  var handleExited = (0, _utils3.useEventCallback)(function () {
     setActive(false);
     setSearchKeyword('');
-  }, []);
-  var handleSelect = (0, _react.useCallback)(function (node, cascadePaths, event) {
-    var _node$childrenKey, _node$childrenKey2, _triggerRef$current, _triggerRef$current$u;
+  });
+  var handleSelect = (0, _utils3.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;
@@ -201,7 +198,7 @@ var MultiCascader = /*#__PURE__*/_react.default.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);
           }
@@ -218,9 +215,9 @@ var MultiCascader = /*#__PURE__*/_react.default.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 = (0, _react.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 = (0, _utils3.useEventCallback)(function (node, event, checked) {
     var nodeValue = node[valueKey];
     var nextValue = [];
     if (cascade) {
@@ -238,38 +235,38 @@ var MultiCascader = /*#__PURE__*/_react.default.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 = (0, _react.useCallback)(function (event) {
-    if (disabled || !targetRef.current) {
+  });
+  var handleClean = (0, _utils3.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 = (0, _react.useCallback)(function (event) {
-    var _overlayRef$current;
+  });
+  var handleMenuPressEnter = (0, _utils3.useEventCallback)(function (event) {
+    var _overlay$current;
     var focusItem = (0, _treeUtils.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 = (0, _Picker.useToggleKeyDownEvent)((0, _extends3.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,
     onMenuPressEnter: handleMenuPressEnter
   }, rest));
-  var handleSearch = (0, _react.useCallback)(function (value, event) {
+  var handleSearch = (0, _utils3.useEventCallback)(function (value, event) {
     setSearchKeyword(value);
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);
     if (value) {
@@ -278,8 +275,8 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       setLayer(selectedPaths.length - 1);
     }
     setKeys([]);
-  }, [onSearch, selectedPaths, setKeys, setLayer]);
-  var getSearchResult = (0, _react.useCallback)(function () {
+  });
+  var getSearchResult = function getSearchResult() {
     var items = [];
     var result = flattenData.filter(function (item) {
       if (uncheckableItemValues.some(function (value) {
@@ -301,7 +298,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       }
     }
     return items;
-  }, [flattenData, labelKey, searchKeyword, uncheckableItemValues, valueKey]);
+  };
   var renderSearchRow = function renderSearchRow(item, key) {
     var _extends2;
     var nodes = (0, _treeUtils.getNodeParents)(item);
@@ -386,16 +383,16 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       inline: inline
     }));
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
-      ref: (0, _utils3.mergeRefs)(overlayRef, speakerRef),
+      ref: (0, _utils3.mergeRefs)(overlay, speakerRef),
       className: classes,
       style: styles,
-      target: triggerRef,
+      target: trigger,
       onKeyDown: onPickerKeyDown
     }, 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
     }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_DropdownMenu.default, {
       id: id ? id + "-listbox" : undefined,
       cascade: cascade,
@@ -451,7 +448,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onEnter: (0, _utils3.createChainedFunction)(handleEntered, onEnter),
     onExited: (0, _utils3.createChainedFunction)(handleExited, onExited),
@@ -459,13 +456,14 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     speaker: renderDropdownMenu
   }, /*#__PURE__*/_react.default.createElement(Component, {
     className: classes,
-    style: style
+    style: style,
+    ref: root
   }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends3.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {
     id: id,
     as: toggleAs,
     appearance: appearance,
     disabled: disabled,
-    ref: targetRef,
+    ref: target,
     onClean: (0, _utils3.createChainedFunction)(handleClean, onClean),
     onKeyDown: onPickerKeyDown,
     cleanable: cleanable && !disabled,

package/cjs/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/cjs/Overlay/OverlayTrigger.js

@@ -171,6 +171,11 @@ var OverlayTrigger = /*#__PURE__*/_react.default.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/cjs/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/cjs/Picker/PickerIndicator.js

@@ -0,0 +1,49 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icons = require("@rsuite/icons");
+var _utils = require("../utils");
+var _InputGroup = _interopRequireDefault(require("../InputGroup"));
+var _CloseButton = _interopRequireDefault(require("../CloseButton"));
+var _Loader = _interopRequireDefault(require("../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.default.Addon : _ref$as;
+  var _useCustom = (0, _utils.useCustom)(),
+    locale = _useCustom.locale;
+  var _useClassNames = (0, _utils.useClassNames)('picker'),
+    prefix = _useClassNames.prefix;
+  var addon = function addon() {
+    if (loading) {
+      return /*#__PURE__*/_react.default.createElement(_Loader.default, {
+        className: prefix('loader'),
+        "data-testid": "spinner"
+      });
+    }
+    if (showCleanButton) {
+      return /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
+        className: prefix('clean'),
+        tabIndex: -1,
+        locale: {
+          closeLabel: locale === null || locale === void 0 ? void 0 : locale.clear
+        },
+        onClick: onClose
+      });
+    }
+    return caretAs && /*#__PURE__*/_react.default.createElement(_icons.Icon, {
+      as: caretAs,
+      className: prefix('caret-icon')
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(Component, null, addon());
+};
+var _default = PickerIndicator;
+exports.default = _default;

package/cjs/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/cjs/Picker/PickerLabel.js

@@ -0,0 +1,23 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _InputGroup = _interopRequireDefault(require("../InputGroup"));
+var PickerLabel = function PickerLabel(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? _InputGroup.default.Addon : _ref$as,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["children", "className", "as"]);
+  return children ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    "data-testid": "picker-label",
+    className: className
+  }, rest), children) : null;
+};
+var _default = PickerLabel;
+exports.default = _default;

package/cjs/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;