rsuite 5.60.1 → 5.61.0

package/esm/DateRangePicker/DateRangePicker.d.ts

@@ -4,33 +4,38 @@ import { DateRangePickerLocale } from '../locales';
 import { PickerComponent } from '../internals/Picker';
 import { DisabledDateFunction, RangeType, DateRange } from './types';
 export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLocale>, FormControlBaseProps<DateRange | null> {
-    /** Custom caret component */
+    /**
+     * Custom caret component
+     */
     caretAs?: React.ElementType | null;
     /** Predefined date ranges */
     ranges?: RangeType[];
     /**
      * Format of the date displayed in the input box
-     *
      * @default 'yyyy-MM-dd'
      */
     format?: string;
     /**
      * Rendered as an input, the date can be entered via the keyboard.
-     *
      * @default true
      */
     editable?: boolean;
-    /** The date range that will be selected when you click on the date */
+    /**
+     * The date range that will be selected when you click on the date
+     */
     hoverRange?: 'week' | 'month' | ((date: Date) => DateRange);
-    /** Whether to click once on selected date range，Can be used with hoverRange */
+    /**
+     * Whether to click once on selected date range，Can be used with hoverRange
+     */
     oneTap?: boolean;
     /**
      * ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
-     *
      * @see https://en.wikipedia.org/wiki/ISO_week_date
      */
     isoWeek?: boolean;
-    /** A label displayed at the beginning of toggle button */
+    /**
+     * A label displayed at the beginning of toggle button
+     */
     label?: React.ReactNode;
     /**
      * Set the upper limit of the available year relative to the current selection date.
@@ -38,15 +43,25 @@ export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLoc
      * @default 1000
      */
     limitEndYear?: number;
-    /** Set the lower limit of the available year relative to the current selection date */
+    /**
+     * Set the lower limit of the available year relative to the current selection date
+     */
     limitStartYear?: number;
-    /** Whether to display a loading state indicator */
+    /**
+     * Whether to display a loading state indicator
+     */
     loading?: boolean;
-    /** Whether to show week numbers */
+    /**
+     *  to show week numbers
+     */
     showWeekNumbers?: boolean;
-    /** Show only one calendar select */
+    /**
+     * Show only one calendar select
+     */
     showOneCalendar?: boolean;
-    /** Meridian format */
+    /**
+     * Meridian format
+     */
     showMeridian?: boolean;
     /**
      * Whether to display the formatted date range at the header of the calendar
@@ -54,13 +69,17 @@ export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLoc
      * @version 5.52.0
      */
     showHeader?: boolean;
-    /** Set default date for calendar */
+    /**
+     * Set default date for calendar
+     */
     defaultCalendarValue?: DateRange;
-    /** The character that separates two dates */
+    /**
+     * The character that separates two dates
+     * @default ' ~ '
+     */
     character?: string;
     /**
      * Disabled date
-     *
      * @deprecated Use {@link shouldDisableDate} instead
      */
     disabledDate?: DisabledDateFunction;
@@ -68,20 +87,29 @@ export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLoc
      * Whether a date cell is disabled
      */
     shouldDisableDate?: DisabledDateFunction;
-    /** Called when the option is selected */
+    /**
+     * Called when the option is selected
+     */
     onSelect?: (date: Date, event?: React.SyntheticEvent) => void;
-    /** Called after clicking the OK button */
+    /**
+     * Called after clicking the OK button
+     */
     onOk?: (date: DateRange, event: React.SyntheticEvent) => void;
-    /** Called after clicking the shortcut button */
+    /**
+     * Called after clicking the shortcut button
+     */
     onShortcutClick?: (range: RangeType, event: React.MouseEvent) => void;
-    /** Called when clean */
+    /**
+     * Called when the value is cleared
+     */
     onClean?: (event: React.MouseEvent) => void;
     /**
-     * Custom render value
-     * @deprecated
+     * Custom rendering of the selected date range.
+     */
+    renderValue?: (value: DateRange, format: string) => string;
+    /**
+     * Custom render for calendar title
      */
-    renderValue?: (value: DateRange, format: string) => React.ReactNode;
-    /** Custom render for calendar title */
     renderTitle?: (date: Date) => React.ReactNode;
 }
 export interface DateRangePickerComponent extends PickerComponent<DateRangePickerProps> {

package/esm/DateRangePicker/DateRangePicker.js

@@ -22,8 +22,10 @@ import { getSafeCalendarDate, getMonthHoverRange, getWeekHoverRange, isSameRange
 import { deprecatePropTypeNew, oneOf } from '../internals/propTypes';
 import DateRangePickerContext from './DateRangePickerContext';
 import DateRangeInput from '../DateRangeInput';
+import Input from '../Input';
 import InputGroup from '../InputGroup';
 import Header from './Header';
+import useDateDisabled from './hooks/useDateDisabled';
 /**
  * A date range picker allows you to select a date range from a calendar.
  *
@@ -48,7 +50,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     defaultValue = props.defaultValue,
     plaintext = props.plaintext,
     disabled = props.disabled,
-    DEPRECATED_disabledDateProp = props.disabledDate,
+    DEPRECATED_disabledDate = props.disabledDate,
     shouldDisableDate = props.shouldDisableDate,
     _props$format = props.format,
     formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
@@ -90,7 +92,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onSelect = props.onSelect,
     onShortcutClick = props.onShortcutClick,
     renderTitle = props.renderTitle,
-    restProps = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "showHeader", "style", "size", "caretAs", "value", "onChange", "onClean", "onEnter", "onEntered", "onExited", "onOk", "onSelect", "onShortcutClick", "renderTitle"]);
+    renderValue = props.renderValue,
+    restProps = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "showHeader", "style", "size", "caretAs", "value", "onChange", "onClean", "onEnter", "onEntered", "onExited", "onOk", "onSelect", "onShortcutClick", "renderTitle", "renderValue"]);
   var id = useUniqueId('rs-', idProp);
   var _usePickerRef = usePickerRef(ref),
     trigger = _usePickerRef.trigger,
@@ -144,6 +147,12 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * so declare a Ref to temporarily store the `selectValue` of the first click.
    */
   var selectRangeValueRef = useRef(null);
+
+  /**
+   *
+   * The key of the currently active calendar panel.
+   * Used to switch when only one calendar panel is displayed.
+   */
   var _useState5 = useState(),
     activeCalendarKey = _useState5[0],
     setActiveCalendarKey = _useState5[1];
@@ -192,9 +201,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setSelectedDates(nextCalendarDate);
     }
   };
-
-  // if valueProp changed then update selectValue/hoverValue
   useEffect(function () {
+    // If value changes, update the selected and hover date values on the calendar panel.
     setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);
     setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);
   }, [valueProp]);
@@ -475,41 +483,39 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
     setDateRange(event, selectValue);
   });
-  var isDateDisabled = function isDateDisabled(date, options) {
-    var selectDate = options.selectDate,
-      selectedDone = options.selectedDone,
-      target = options.target;
-    if (typeof shouldDisableDate === 'function') {
-      return shouldDisableDate(date, selectDate, selectedDone, target);
-    }
-    if (typeof DEPRECATED_disabledDateProp === 'function') {
-      return DEPRECATED_disabledDateProp(date, selectDate, selectedDone, target);
+  var isDateDisabled = useDateDisabled({
+    shouldDisableDate: shouldDisableDate,
+    DEPRECATED_disabledDate: DEPRECATED_disabledDate
+  });
+  var disableByRange = function disableByRange(start, end, target) {
+    if (isDateDisabled) {
+      // If the date is between the start and the end the button is disabled
+      while (isBefore(start, end) || isSameDay(start, end)) {
+        if (isDateDisabled(start, {
+          selectDate: selectedDates,
+          selectedDone: isSelectedIdle,
+          target: target
+        })) {
+          return true;
+        }
+        start = addDays(start, 1);
+      }
     }
     return false;
   };
-  var disableByBetween = function disableByBetween(start, end, type) {
-    // If the date is between the start and the end
-    // the button is disabled
-    while (isBefore(start, end) || isSameDay(start, end)) {
-      if (isDateDisabled(start, {
-        selectDate: selectedDates,
-        selectedDone: isSelectedIdle,
-        target: type
-      })) {
+  var disableOkButton = function disableOkButton() {
+    var _trigger$current;
+    var _ref4 = ((_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : _trigger$current.getState()) || {},
+      open = _ref4.open;
+    if (open) {
+      var start = selectedDates[0],
+        end = selectedDates[1];
+      if (!start || !end || !isSelectedIdle) {
         return true;
       }
-      start = addDays(start, 1);
     }
     return false;
   };
-  var disableOkButton = function disableOkButton() {
-    var start = selectedDates[0],
-      end = selectedDates[1];
-    if (!start || !end || !isSelectedIdle) {
-      return true;
-    }
-    return disableByBetween(start, end, TARGET.TOOLBAR_BUTTON_OK);
-  };
   var disableShortcut = function disableShortcut(value) {
     if (value === void 0) {
       value = [];
@@ -520,26 +526,33 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (!start || !end) {
       return true;
     }
-    return disableByBetween(start, end, TARGET.TOOLBAR_SHORTCUT);
+    return disableByRange(start, end, TARGET.TOOLBAR_SHORTCUT);
   };
   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 _trigger$current2, _trigger$current2$clo;
+    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$clo = _trigger$current2.close) === null || _trigger$current2$clo === void 0 ? void 0 : _trigger$current2$clo.call(_trigger$current2);
   });
   var handleInputKeyDown = useEventCallback(function (event) {
     onMenuKeyDown(event, {
       esc: handleClose,
       enter: function enter() {
-        var _trigger$current2;
-        var _ref4 = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},
-          open = _ref4.open;
+        var _trigger$current3;
+        var _ref5 = ((_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.getState()) || {},
+          open = _ref5.open;
         if (!open) {
-          var _trigger$current3;
-          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.open();
+          var _trigger$current4;
+          (_trigger$current4 = trigger.current) === null || _trigger$current4 === void 0 ? void 0 : _trigger$current4.open();
         }
       }
     });
   });
+  var disableCalendarDate = isDateDisabled ? function (date, values, type) {
+    return isDateDisabled(date, {
+      selectDate: values,
+      selectedDone: isSelectedIdle,
+      target: type
+    });
+  } : undefined;
   var renderCalendarOverlay = function renderCalendarOverlay(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
@@ -560,13 +573,6 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       left: left,
       top: top
     });
-    var disabledDate = function disabledDate(date, values, type) {
-      return isDateDisabled(date, {
-        selectDate: values,
-        selectedDone: isSelectedIdle,
-        target: type
-      });
-    };
     var calendarProps = {
       locale: locale,
       isoWeek: isoWeek,
@@ -578,12 +584,12 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       format: formatStr,
       value: selectedDates,
       hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,
+      disabledDate: disableCalendarDate,
       onSelect: handleSelectDate,
       onChangeCalendarMonth: onChangeCalendarMonth,
       onChangeCalendarTime: onChangeCalendarTime,
       onToggleMeridian: onToggleMeridian,
       onMouseMove: onMouseMove,
-      disabledDate: disabledDate,
       renderTitle: renderTitle
     };
     var getCalendars = function getCalendars() {
@@ -691,7 +697,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       selectedDone: isSelectedIdle,
       target: TARGET.INPUT
     };
-    if (isDateDisabled(startDate, disabledOptions) || isDateDisabled(endDate, disabledOptions)) {
+    if (isDateDisabled !== null && isDateDisabled !== void 0 && isDateDisabled(startDate, disabledOptions) || isDateDisabled !== null && isDateDisabled !== void 0 && isDateDisabled(endDate, disabledOptions)) {
       return true;
     }
     return false;
@@ -704,6 +710,19 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     rest = _partitionHTMLProps[1];
   var showCleanButton = cleanable && hasValue && !readOnly;
   var invalidValue = value && isErrorValue(value);
+
+  // Custom rendering of the selected value
+  var customValue = null;
+
+  // Input box is read-only when the component is uneditable or loading state
+  var inputReadOnly = readOnly || !editable || loading || false;
+  if (typeof renderValue === 'function' && value) {
+    customValue = renderValue(value, formatStr);
+
+    // If the custom rendering value, the input box is read-only
+    inputReadOnly = true;
+  }
+  var TargetInput = customValue ? Input : DateRangeInput;
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     trigger: "active",
     ref: trigger,
@@ -723,23 +742,24 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     plaintext: plaintext
   }) : /*#__PURE__*/React.createElement(InputGroup, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys, calendarOnlyProps)), {
     inside: true,
+    disabled: disabled,
     size: size
   }), /*#__PURE__*/React.createElement(PickerLabel, {
     className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["label"]))),
     id: id + "-label"
-  }, label), /*#__PURE__*/React.createElement(DateRangeInput, _extends({
+  }, label), /*#__PURE__*/React.createElement(TargetInput, _extends({
     "aria-haspopup": "dialog",
     "aria-invalid": invalidValue,
     "aria-labelledby": label ? id + "-label" : undefined
   }, ariaProps, {
     ref: target,
     id: id,
-    value: value,
+    value: customValue || value,
     character: character,
     format: formatStr,
     placeholder: placeholder ? placeholder : rangeFormatStr,
     disabled: disabled,
-    readOnly: readOnly || !editable || loading,
+    readOnly: inputReadOnly,
     plaintext: plaintext,
     htmlSize: getInputHtmlSize(),
     onChange: handleInputChange,

package/esm/DateRangePicker/hooks/useDateDisabled.d.ts

@@ -0,0 +1,16 @@
+import { DATERANGE_DISABLED_TARGET as TARGET } from '../../utils';
+import { DisabledDateFunction, SelectedDatesState } from '../types';
+interface UseDateDisabledProps {
+    shouldDisableDate?: DisabledDateFunction;
+    DEPRECATED_disabledDate?: DisabledDateFunction;
+}
+interface DateDisabledOptions {
+    selectDate?: SelectedDatesState;
+    selectedDone?: boolean;
+    target?: TARGET;
+}
+/**
+ * Returns a function that determines whether a date is disabled and is compatible with the deprecated `disabledDate` prop.
+ */
+declare function useDateDisabled(props: UseDateDisabledProps): ((date: Date, options: DateDisabledOptions) => boolean) | undefined;
+export default useDateDisabled;

package/esm/DateRangePicker/hooks/useDateDisabled.js

@@ -0,0 +1,26 @@
+'use client';
+import { useCallback } from 'react';
+/**
+ * Returns a function that determines whether a date is disabled and is compatible with the deprecated `disabledDate` prop.
+ */
+function useDateDisabled(props) {
+  var shouldDisableDate = props.shouldDisableDate,
+    DEPRECATED_disabledDate = props.DEPRECATED_disabledDate;
+  var isDateDisabled = useCallback(function (date, options) {
+    var selectDate = options.selectDate,
+      selectedDone = options.selectedDone,
+      target = options.target;
+    if (typeof shouldDisableDate === 'function') {
+      return shouldDisableDate(date, selectDate, selectedDone, target);
+    }
+    if (typeof DEPRECATED_disabledDate === 'function') {
+      return DEPRECATED_disabledDate(date, selectDate, selectedDone, target);
+    }
+    return false;
+  }, [shouldDisableDate, DEPRECATED_disabledDate]);
+  if (shouldDisableDate || DEPRECATED_disabledDate) {
+    return isDateDisabled;
+  }
+  return undefined;
+}
+export default useDateDisabled;

package/esm/DateRangePicker/types.d.ts

@@ -26,3 +26,4 @@ selectedDone?: boolean,
  * Call the target of the `shouldDisableDate` function.
  */
 target?: DATERANGE_DISABLED_TARGET) => boolean;
+export declare type SelectedDatesState = [] | [Date] | [Date, Date];

package/esm/Highlight/Highlight.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+export interface HighlightProps extends WithAsProps {
+    query?: string | string[];
+    renderMark?: (match: string, index: number) => React.ReactNode;
+}
+/**
+ *
+ * Highlight the matching text in the content.
+ *
+ * @see https://rsuitejs.com/components/highlight
+ */
+declare const Highlight: RsRefForwardingComponent<'div', HighlightProps>;
+export default Highlight;

package/esm/Highlight/Highlight.js

@@ -0,0 +1,52 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useClassNames } from '../utils';
+import { highlightText } from './utils/highlightText';
+import { stringifyReactNode } from '../internals/utils';
+function defaultRenderMark(match, index) {
+  return /*#__PURE__*/React.createElement("mark", {
+    key: index,
+    className: "rs-highlight-mark"
+  }, match);
+}
+
+/**
+ *
+ * Highlight the matching text in the content.
+ *
+ * @see https://rsuitejs.com/components/highlight
+ */
+var Highlight = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'highlight' : _props$classPrefix,
+    className = props.className,
+    children = props.children,
+    query = props.query,
+    _props$renderMark = props.renderMark,
+    renderMark = _props$renderMark === void 0 ? defaultRenderMark : _props$renderMark,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "children", "query", "renderMark"]);
+  var _useClassNames = useClassNames(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge;
+  var classes = merge(className, withClassPrefix());
+  var text = stringifyReactNode(children);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    className: classes
+  }, rest), highlightText(text, {
+    query: query,
+    renderMark: renderMark
+  }));
+});
+Highlight.displayName = 'Highlight';
+Highlight.propTypes = {
+  className: PropTypes.string,
+  classPrefix: PropTypes.string,
+  as: PropTypes.elementType
+};
+export default Highlight;

package/esm/Highlight/index.d.ts

@@ -0,0 +1,3 @@
+import Highlight from './Highlight';
+export type { HighlightProps } from './Highlight';
+export default Highlight;

package/esm/Highlight/index.js

@@ -0,0 +1,3 @@
+'use client';
+import Highlight from './Highlight';
+export default Highlight;

package/esm/Highlight/utils/highlightText.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function highlightText(text: string, props: {
+    query?: string | string[];
+    renderMark: (patch: string, index: number) => React.ReactNode;
+}): string | React.ReactNode[];

package/esm/Highlight/utils/highlightText.js

@@ -0,0 +1,25 @@
+'use client';
+import { getSafeRegExpString } from '../../internals/utils';
+export function highlightText(text, props) {
+  var query = props.query,
+    renderMark = props.renderMark;
+  if (!query || !text) {
+    return text;
+  }
+  var queries = Array.isArray(query) ? query : [query];
+  var regx = new RegExp(queries.map(function (q) {
+    return getSafeRegExpString(q);
+  }).join('|'), 'ig');
+  var texts = [];
+  var strArr = text.split(regx);
+  var highStrArr = text.match(regx);
+  for (var i = 0; i < strArr.length; i++) {
+    if (strArr[i]) {
+      texts.push(strArr[i]);
+    }
+    if (highStrArr !== null && highStrArr !== void 0 && highStrArr[i]) {
+      texts.push(renderMark(highStrArr[i], i));
+    }
+  }
+  return texts;
+}

package/esm/InputPicker/InputPicker.js

@@ -5,7 +5,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import isUndefined from 'lodash/isUndefined';
 import isNil from 'lodash/isNil';
 import isFunction from 'lodash/isFunction';
 import remove from 'lodash/remove';
@@ -14,7 +13,7 @@ import isArray from 'lodash/isArray';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import shallowEqual from '../utils/shallowEqual';
-import { filterNodesOfTree } from '../utils/treeUtils';
+import { filterNodesOfTree } from '../internals/Tree/utils';
 import Plaintext from '../internals/Plaintext';
 import { createChainedFunction, tplTransform, useClassNames, useCustom, useControlled, useEventCallback, mergeRefs, isOneOf, KEY_VALUES } from '../utils';
 import { oneOf } from '../internals/propTypes';
@@ -553,11 +552,8 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       activeItemValues: multi ? value : [value],
       focusItemValue: focusItemValue,
       maxHeight: menuMaxHeight,
-      data: items
-      // FIXME-Doma
-      // `group` is redundant so long as `groupBy` exists
-      ,
-      group: !isUndefined(groupBy),
+      data: items,
+      query: searchKeyword,
       groupBy: groupBy,
       onSelect: multi ? handleCheckTag : handleSelectItem,
       renderMenuGroup: renderMenuGroup,

package/esm/MultiCascadeTree/SearchView.js

@@ -3,11 +3,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
 import { useClassNames, useCustom } from '../utils';
-import { getNodeParents } from '../utils/treeUtils';
 import SearchBox from '../internals/SearchBox';
 import Checkbox from '../Checkbox';
-import { isSomeChildChecked } from './utils';
-import { highlightLabel } from '../CascadeTree/utils';
+import Highlight from '../Highlight';
+import { isSomeChildChecked, getNodeParents } from './utils';
 function SearchView(props) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -37,17 +36,10 @@ function SearchView(props) {
   var renderSearchRow = function renderSearchRow(item, key) {
     var _extends2;
     var nodes = getNodeParents(item);
-    var label = highlightLabel({
-      item: item,
-      labelKey: labelKey,
-      searchKeyword: searchKeyword,
-      render: function render(patch, index) {
-        return /*#__PURE__*/React.createElement("span", {
-          key: index,
-          className: prefix('match')
-        }, patch);
-      }
-    });
+    var label = /*#__PURE__*/React.createElement(Highlight, {
+      as: "span",
+      query: searchKeyword
+    }, item[labelKey]);
     nodes.push(_extends({}, item, (_extends2 = {}, _extends2[labelKey] = label, _extends2)));
     var active = value.some(function (value) {
       if (cascade) {

package/esm/MultiCascadeTree/hooks/useCascadeValue.js

@@ -3,7 +3,21 @@ import { useState, useEffect, useCallback } from 'react';
 import uniq from 'lodash/uniq';
 import remove from 'lodash/remove';
 import { useEventCallback } from '../../utils';
-import { getParents, removeAllChildrenValue, getOtherItemValuesByUnselectChild } from '../utils';
+import { removeAllChildrenValue, getOtherItemValuesByUnselectChild } from '../utils';
+
+/**
+ * Get all parents of a node
+ * @param node
+ */
+var getParents = function getParents(node) {
+  var parents = [];
+  if (!node.parent) {
+    return parents;
+  }
+  parents.push(node.parent);
+  parents = parents.concat(getParents(node.parent));
+  return parents;
+};
 
 /**
  * A hook that converts the value into a cascading value

package/esm/MultiCascadeTree/hooks/useColumnData.js

@@ -1,7 +1,7 @@
 'use client';
 import { useState } from 'react';
 import slice from 'lodash/slice';
-import { UNSAFE_flattenTree } from '../../utils/treeUtils';
+import { UNSAFE_flattenTree } from '../../Tree/utils';
 /**
  * A hook for column data
  * @param flattenData

package/esm/MultiCascadeTree/hooks/useFlattenData.js

@@ -1,6 +1,6 @@
 'use client';
 import { useState, useCallback, useEffect } from 'react';
-import { UNSAFE_flattenTree } from '../../utils/treeUtils';
+import { UNSAFE_flattenTree } from '../../Tree/utils';
 import { attachParent } from '../../utils/attachParent';
 /**
  * A hook to flatten tree structure data