rsuite 5.60.1 → 5.61.0

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

@@ -27,8 +27,10 @@ var _utils2 = require("./utils");
 var _propTypes2 = require("../internals/propTypes");
 var _DateRangePickerContext = _interopRequireDefault(require("./DateRangePickerContext"));
 var _DateRangeInput = _interopRequireDefault(require("../DateRangeInput"));
+var _Input = _interopRequireDefault(require("../Input"));
 var _InputGroup = _interopRequireDefault(require("../InputGroup"));
 var _Header = _interopRequireDefault(require("./Header"));
+var _useDateDisabled = _interopRequireDefault(require("./hooks/useDateDisabled"));
 var _templateObject;
 /**
  * A date range picker allows you to select a date range from a calendar.
@@ -54,7 +56,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     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,
@@ -96,7 +98,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     onSelect = props.onSelect,
     onShortcutClick = props.onShortcutClick,
     renderTitle = props.renderTitle,
-    restProps = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _utils.useUniqueId)('rs-', idProp);
   var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
@@ -150,6 +153,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    * so declare a Ref to temporarily store the `selectValue` of the first click.
    */
   var selectRangeValueRef = (0, _react.useRef)(null);
+
+  /**
+   *
+   * The key of the currently active calendar panel.
+   * Used to switch when only one calendar panel is displayed.
+   */
   var _useState5 = (0, _react.useState)(),
     activeCalendarKey = _useState5[0],
     setActiveCalendarKey = _useState5[1];
@@ -198,9 +207,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       setSelectedDates(nextCalendarDate);
     }
   };
-
-  // if valueProp changed then update selectValue/hoverValue
   (0, _react.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]);
@@ -481,41 +489,39 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     });
     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 = (0, _useDateDisabled.default)({
+    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 ((0, _dateUtils.isBefore)(start, end) || (0, _dateUtils.isSameDay)(start, end)) {
+        if (isDateDisabled(start, {
+          selectDate: selectedDates,
+          selectedDone: isSelectedIdle,
+          target: target
+        })) {
+          return true;
+        }
+        start = (0, _dateUtils.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 ((0, _dateUtils.isBefore)(start, end) || (0, _dateUtils.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 = (0, _dateUtils.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, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);
-  };
   var disableShortcut = function disableShortcut(value) {
     if (value === void 0) {
       value = [];
@@ -526,26 +532,33 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (!start || !end) {
       return true;
     }
-    return disableByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
+    return disableByRange(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
   };
   var handleClose = (0, _utils.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 = (0, _utils.useEventCallback)(function (event) {
     (0, _Picker.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,
@@ -566,13 +579,6 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       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,
@@ -584,12 +590,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       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() {
@@ -697,7 +703,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       selectedDone: isSelectedIdle,
       target: _utils.DATERANGE_DISABLED_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;
@@ -710,6 +716,19 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     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.default : _DateRangeInput.default;
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     trigger: "active",
     ref: trigger,
@@ -729,23 +748,24 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     plaintext: plaintext
   }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {
     inside: true,
+    disabled: disabled,
     size: size
   }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
     id: id + "-label"
-  }, label), /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, (0, _extends2.default)({
+  }, label), /*#__PURE__*/_react.default.createElement(TargetInput, (0, _extends2.default)({
     "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/cjs/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/cjs/DateRangePicker/hooks/useDateDisabled.js

@@ -0,0 +1,31 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("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 = (0, _react.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;
+}
+var _default = useDateDisabled;
+exports.default = _default;

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

@@ -0,0 +1,58 @@
+'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 _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("../utils");
+var _highlightText = require("./utils/highlightText");
+var _utils2 = require("../internals/utils");
+function defaultRenderMark(match, index) {
+  return /*#__PURE__*/_react.default.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.default.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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "children", "query", "renderMark"]);
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge;
+  var classes = merge(className, withClassPrefix());
+  var text = (0, _utils2.stringifyReactNode)(children);
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: ref,
+    className: classes
+  }, rest), (0, _highlightText.highlightText)(text, {
+    query: query,
+    renderMark: renderMark
+  }));
+});
+Highlight.displayName = 'Highlight';
+Highlight.propTypes = {
+  className: _propTypes.default.string,
+  classPrefix: _propTypes.default.string,
+  as: _propTypes.default.elementType
+};
+var _default = Highlight;
+exports.default = _default;

package/cjs/Highlight/index.d.ts

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

package/cjs/Highlight/index.js

@@ -0,0 +1,9 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Highlight = _interopRequireDefault(require("./Highlight"));
+var _default = _Highlight.default;
+exports.default = _default;

package/cjs/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/cjs/Highlight/utils/highlightText.js

@@ -0,0 +1,29 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.highlightText = highlightText;
+var _utils = require("../../internals/utils");
+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 (0, _utils.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;
+}