rsuite 5.60.2 → 5.61.0

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

package/esm/MultiCascadeTree/hooks/useSearch.js

@@ -1,6 +1,7 @@
 'use client';
 import { useState } from 'react';
-import { getSafeRegExpString, useEventCallback } from '../../utils';
+import { useEventCallback } from '../../utils';
+import { getSafeRegExpString } from '../../internals/utils';
 function useSearch(props) {
   var _useState = useState(''),
     searchKeyword = _useState[0],

package/esm/MultiCascadeTree/utils.d.ts

@@ -7,14 +7,14 @@ interface ItemKeys {
     labelKey: string;
     childrenKey: string;
 }
-declare type MayHasParent<T extends Record<string, unknown>> = T & {
+export declare type MayHasParent<T extends Record<string, unknown>> = T & {
     parent?: MayHasParent<T>;
 };
 /**
- * Get all parents of a node
- * @param node
+ * get all ancestor nodes of given node
+ * @param {*} node
  */
-export declare const getParents: <T extends Record<string, unknown>>(node: MayHasParent<T>) => MayHasParent<T>[];
+export declare function getNodeParents(node: any, parentKey?: string, valueKey?: string): any[];
 /**
  * Check if any child nodes are selected.
  * @param node

package/esm/MultiCascadeTree/utils.js

@@ -1,18 +1,27 @@
 'use client';
 import remove from 'lodash/remove';
 /**
- * Get all parents of a node
- * @param node
+ * get all ancestor nodes of given node
+ * @param {*} node
  */
-export var getParents = function getParents(node) {
-  var parents = [];
-  if (!node.parent) {
-    return parents;
+export function getNodeParents(node, parentKey, valueKey) {
+  if (parentKey === void 0) {
+    parentKey = 'parent';
   }
-  parents.push(node.parent);
-  parents = parents.concat(getParents(node.parent));
+  var parents = [];
+  var traverse = function traverse(node) {
+    if (node !== null && node !== void 0 && node[parentKey]) {
+      traverse(node[parentKey]);
+      if (valueKey) {
+        parents.push(node[parentKey][valueKey]);
+      } else {
+        parents.push(node[parentKey]);
+      }
+    }
+  };
+  traverse(node);
   return parents;
-};
+}
 
 /**
  * Check if any child nodes are selected.

package/esm/MultiCascader/MultiCascader.js

@@ -7,7 +7,7 @@ import pick from 'lodash/pick';
 import omit from 'lodash/omit';
 import isFunction from 'lodash/isFunction';
 import isNil from 'lodash/isNil';
-import { findNodeOfTree } from '../utils/treeUtils';
+import { findNodeOfTree } from '../internals/Tree/utils';
 import { getColumnsAndPaths } from '../CascadeTree/utils';
 import { createChainedFunction, mergeRefs, useClassNames, useCustom, useControlled, useEventCallback } from '../utils';
 import { PickerToggle, PickerPopup, SelectedElement, PickerToggleTrigger, usePickerClassName, usePickerRef, useToggleKeyDownEvent, useFocusItemValue, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../internals/Picker';

package/esm/SelectPicker/SelectPicker.js

@@ -6,7 +6,6 @@ var _templateObject;
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
-import isUndefined from 'lodash/isUndefined';
 import isNil from 'lodash/isNil';
 import isFunction from 'lodash/isFunction';
 import omit from 'lodash/omit';
@@ -230,11 +229,8 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       listItemAs: ListItem,
       activeItemValues: [value],
       focusItemValue: focusItemValue,
-      data: items
-      // FIXME-Doma
-      // `group` is redundant so long as `groupBy` exists
-      ,
-      group: !isUndefined(groupBy),
+      data: items,
+      query: searchKeyword,
       groupBy: groupBy,
       onSelect: handleItemSelect,
       onGroupTitleClick: onGroupTitleClick,

package/esm/Tree/IndentLine.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const IndentLine: () => JSX.Element;
+export default IndentLine;

package/esm/Tree/IndentLine.js

@@ -0,0 +1,12 @@
+'use client';
+import React from 'react';
+import { useClassNames } from '../utils';
+var IndentLine = function IndentLine() {
+  var _useClassNames = useClassNames('tree'),
+    prefix = _useClassNames.prefix;
+  return /*#__PURE__*/React.createElement("span", {
+    className: prefix('indent-line'),
+    "data-testid": "indent-line"
+  });
+};
+export default IndentLine;

package/esm/Tree/Tree.d.ts

@@ -1,95 +1,7 @@
-import React from 'react';
-import { StandardProps, ItemDataType, RsRefForwardingComponent } from '../@types/common';
-import { ListProps } from '../internals/Windowing';
-/**
- * Tree Node Drag Type
- */
-export declare enum TREE_NODE_DROP_POSITION {
-    DRAG_OVER = 0,
-    DRAG_OVER_TOP = 1,
-    DRAG_OVER_BOTTOM = 2
-}
-export interface DropData<ItemDataType> {
-    /** drag node data */
-    dragNode: ItemDataType;
-    /** dropNode data */
-    dropNode: ItemDataType;
-    /** node drop position */
-    dropNodePosition: TREE_NODE_DROP_POSITION;
-    /** Update Data when drop node */
-    createUpdateDataFunction: (data: ItemDataType[]) => ItemDataType[];
-}
-export interface TreeDragProps<ItemDataType = Record<string, any>> {
-    /** Whether the node can  be dragged */
-    draggable?: boolean;
-    /** Called when scrolling */
-    onScroll?: (event: React.SyntheticEvent) => void;
-    /** Called when node drag start */
-    onDragStart?: (nodeData: ItemDataType, e: React.DragEvent) => void;
-    /** Called when node drag enter */
-    onDragEnter?: (nodeData: ItemDataType, e: React.DragEvent) => void;
-    /** Called when node drag over */
-    onDragOver?: (nodeData: ItemDataType, e: React.DragEvent) => void;
-    /** Called when node drag leave */
-    onDragLeave?: (nodeData: ItemDataType, e: React.DragEvent) => void;
-    /** Called when node drag end */
-    onDragEnd?: (nodeData: ItemDataType, e: React.DragEvent) => void;
-    /** Called when node drop */
-    onDrop?: (dropData: DropData<ItemDataType>, e: React.DragEvent) => void;
-}
-export interface TreeBaseProps<ValueType = string | number, ItemDataType = Record<string, any>> extends StandardProps {
-    /** The height of Dropdown */
-    height?: number;
-    /** Whether display search input box */
-    searchable?: boolean;
-    /** Display an auxiliary line when the tree node is indented. */
-    showIndentLine?: boolean;
-    /** Whether using virtualized list */
-    virtualized?: boolean;
-    /** Virtualized List props */
-    listProps?: Partial<ListProps>;
-    /** Expand all nodes By default */
-    defaultExpandAll?: boolean;
-    /** searchKeyword (Controlled) */
-    searchKeyword?: string;
-    /** Set the option value for the expand node */
-    defaultExpandItemValues?: any[];
-    /** Set the option value for the expand node with controlled*/
-    expandItemValues?: any[];
-    /** Callback function for data change */
-    onExpand?: (expandItemValues: ItemDataType[], activeNode: ItemDataType, concat: (data: ItemDataType[], children: ItemDataType[]) => ItemDataType[]) => void;
-    /** Callback function after selecting tree node */
-    onSelect?: (activeNode: ItemDataType, value: ValueType, event: React.SyntheticEvent) => void;
-    /** Callback when a tree item is clicked */
-    onSelectItem?: (item: ItemDataType, path: ItemDataType[]) => void;
-    /** Custom Render tree Node */
-    renderTreeNode?: (nodeData: ItemDataType) => React.ReactNode;
-    /** Custom Render icon */
-    renderTreeIcon?: (nodeData: ItemDataType) => React.ReactNode;
-    /** callback fired when search */
-    onSearch?: (searchKeyword: string, event: React.KeyboardEvent<HTMLInputElement>) => void;
-    /** Called when clean */
-    onClean?: (event: React.SyntheticEvent) => void;
-    /** Custom search rules. */
-    searchBy?: (keyword: string, label: React.ReactNode, item: any) => boolean;
-    /** Customizing the Rendering Menu list */
-    renderMenu?: (menu: React.ReactNode) => React.ReactNode;
-    /** load node children data asynchronously */
-    getChildren?: (activeNode: ItemDataType) => ItemDataType[] | Promise<ItemDataType>;
-}
-export interface TreeProps<T = string | number> extends TreeBaseProps<T, ItemDataType<T>>, TreeDragProps<ItemDataType<T>> {
-    /** Tree Data */
-    data: ItemDataType<T>[];
-    /** Selected value */
-    value?: T;
-    /** Whether using virtualized list */
-    virtualized?: boolean;
-    /** Tree data structure Label property name */
-    labelKey?: string;
-    /** Tree data Structure Value property name */
-    valueKey?: string;
-    /** Tree data structure Children property name */
-    childrenKey?: string;
+import { RsRefForwardingComponent } from '../@types/common';
+import { type TreeViewProps } from './TreeView';
+import type { TreeExtraProps } from './types';
+export interface TreeProps<T = string | number | null> extends TreeViewProps<T>, TreeExtraProps {
     /** Default selected Value  */
     defaultValue?: T;
 }

package/esm/Tree/Tree.js

@@ -1,33 +1,93 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useMemo } from 'react';
-import TreePicker from '../TreePicker';
-import TreeContext from './TreeContext';
-/**
- * Tree Node Drag Type
- */
-export var TREE_NODE_DROP_POSITION;
-(function (TREE_NODE_DROP_POSITION) {
-  TREE_NODE_DROP_POSITION[TREE_NODE_DROP_POSITION["DRAG_OVER"] = 0] = "DRAG_OVER";
-  TREE_NODE_DROP_POSITION[TREE_NODE_DROP_POSITION["DRAG_OVER_TOP"] = 1] = "DRAG_OVER_TOP";
-  TREE_NODE_DROP_POSITION[TREE_NODE_DROP_POSITION["DRAG_OVER_BOTTOM"] = 2] = "DRAG_OVER_BOTTOM";
-})(TREE_NODE_DROP_POSITION || (TREE_NODE_DROP_POSITION = {}));
+import TreeView from './TreeView';
+import { useControlled, useEventCallback } from '../utils';
+import useFlattenTree from './hooks/useFlattenTree';
+import useTreeWithChildren from './hooks/useTreeWithChildren';
+import useExpandTree from './hooks/useExpandTree';
+import { TreeProvider } from './TreeProvider';
 /**
  * The `Tree` component is used to display hierarchical data.
  *
  * @see https://rsuitejs.com/components/tree
  */
 var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var contextValue = useMemo(function () {
+  var controlledValue = props.value,
+    defaultValue = props.defaultValue,
+    _props$childrenKey = props.childrenKey,
+    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
+    _props$labelKey = props.labelKey,
+    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+    _props$valueKey = props.valueKey,
+    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
+    data = props.data,
+    _props$defaultExpandA = props.defaultExpandAll,
+    defaultExpandAll = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,
+    _props$defaultExpandI = props.defaultExpandItemValues,
+    defaultExpandItemValues = _props$defaultExpandI === void 0 ? [] : _props$defaultExpandI,
+    controlledExpandItemValues = props.expandItemValues,
+    virtualized = props.virtualized,
+    renderTreeIcon = props.renderTreeIcon,
+    renderTreeNode = props.renderTreeNode,
+    getChildren = props.getChildren,
+    onChange = props.onChange,
+    onExpand = props.onExpand,
+    rest = _objectWithoutPropertiesLoose(props, ["value", "defaultValue", "childrenKey", "labelKey", "valueKey", "data", "defaultExpandAll", "defaultExpandItemValues", "expandItemValues", "virtualized", "renderTreeIcon", "renderTreeNode", "getChildren", "onChange", "onExpand"]);
+  var _useControlled = useControlled(controlledValue, defaultValue),
+    value = _useControlled[0],
+    setValue = _useControlled[1];
+  var itemDataKeys = {
+    childrenKey: childrenKey,
+    labelKey: labelKey,
+    valueKey: valueKey
+  };
+  var _useTreeWithChildren = useTreeWithChildren(data, itemDataKeys),
+    treeData = _useTreeWithChildren.treeData,
+    loadingNodeValues = _useTreeWithChildren.loadingNodeValues,
+    appendChild = _useTreeWithChildren.appendChild;
+  var flattenedNodes = useFlattenTree(treeData, _extends({}, itemDataKeys));
+  var _useExpandTree = useExpandTree(data, _extends({}, itemDataKeys, {
+      defaultExpandAll: defaultExpandAll,
+      defaultExpandItemValues: defaultExpandItemValues,
+      controlledExpandItemValues: controlledExpandItemValues,
+      onExpand: onExpand,
+      getChildren: getChildren,
+      appendChild: appendChild
+    })),
+    expandItemValues = _useExpandTree.expandItemValues,
+    handleExpandTreeNode = _useExpandTree.handleExpandTreeNode;
+  var handleChange = useEventCallback(function (nextValue, event) {
+    setValue(nextValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+  });
+  var treeContext = useMemo(function () {
     return {
-      inline: true
+      props: {
+        childrenKey: childrenKey,
+        labelKey: labelKey,
+        valueKey: valueKey,
+        virtualized: virtualized,
+        renderTreeIcon: renderTreeIcon,
+        renderTreeNode: renderTreeNode
+      }
     };
-  }, []);
-  return /*#__PURE__*/React.createElement(TreeContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/React.createElement(TreePicker, _extends({
+  }, [childrenKey, labelKey, valueKey, virtualized, renderTreeIcon, renderTreeNode]);
+  return /*#__PURE__*/React.createElement(TreeProvider, {
+    value: treeContext
+  }, /*#__PURE__*/React.createElement(TreeView, _extends({
     ref: ref
-  }, props)));
+  }, rest, {
+    value: value,
+    data: treeData,
+    virtualized: virtualized,
+    loadingNodeValues: loadingNodeValues,
+    flattenedNodes: flattenedNodes,
+    expandItemValues: expandItemValues,
+    onChange: handleChange,
+    onExpand: handleExpandTreeNode
+  })));
 });
 Tree.displayName = 'Tree';
 export default Tree;

package/esm/Tree/TreeNode.d.ts

@@ -0,0 +1,101 @@
+import React from 'react';
+import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import type { TreeNode as TreeNodeData } from './types';
+export declare type DragStatus = 'drag-over' | 'drag-over-top' | 'drag-over-bottom';
+interface TreeDragEventProps {
+    /**
+     * Callback function called when the drag operation starts.
+     */
+    onDragStart?: (nodeData: TreeNodeData, event: React.DragEvent<any>) => void;
+    /**
+     * Callback function called when a dragged item enters the node.
+     */
+    onDragEnter?: (nodeData: TreeNodeData, event: React.DragEvent<any>) => void;
+    /**
+     * Callback function called when a dragged item is over the node.
+     */
+    onDragOver?: (nodeData: TreeNodeData, event: React.DragEvent<any>) => void;
+    /**
+     * Callback function called when a dragged item leaves the node.
+     */
+    onDragLeave?: (nodeData: TreeNodeData, event: React.DragEvent<any>) => void;
+    /**
+     * Callback function called when the drag operation ends.
+     */
+    onDragEnd?: (nodeData: TreeNodeData, event: React.DragEvent<any>) => void;
+    /**
+     * Callback function called when a dragged item is dropped on the node.
+     */
+    onDrop?: (nodeData: TreeNodeData, event: React.DragEvent<any>) => void;
+}
+/**
+ * Props for the TreeNode component.
+ */
+export interface TreeNodeProps extends WithAsProps, TreeDragEventProps {
+    /**
+     * The layer of the node in the tree hierarchy.
+     */
+    layer: number;
+    /**
+     * The value of the node.
+     */
+    value?: TreeNodeData['value'];
+    /**
+     * The label of the node.
+     */
+    label?: TreeNodeData['label'];
+    /**
+     * Whether the node should be focused.
+     */
+    focus?: boolean;
+    /**
+     * Whether the node is in a loading state.
+     */
+    loading?: boolean;
+    /**
+     * Whether the node is expanded.
+     */
+    expanded?: boolean;
+    /**
+     * Whether the node is active.
+     */
+    active?: boolean;
+    /**
+     * Whether the node is visible.
+     */
+    visible: boolean;
+    /**
+     * The data associated with the node.
+     */
+    nodeData: any;
+    /**
+     * Whether the node is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the node is draggable.
+     */
+    draggable?: boolean;
+    /**
+     * Whether the node is being dragged.
+     */
+    dragging?: boolean;
+    /**
+     * Drag status of the node.
+     */
+    dragStatus?: DragStatus;
+    /**
+     * Whether the node has children.
+     */
+    hasChildren?: boolean;
+    /**
+     * Callback function called when the node is expanded.
+     */
+    onExpand?: (nodeData: TreeNodeData, expanded?: boolean) => void;
+    /**
+     * Callback function called when the node is selected.
+     */
+    onSelect?: (nodeData: TreeNodeData, event: React.SyntheticEvent) => void;
+}
+declare const TreeNode: RsRefForwardingComponent<'div', TreeNodeProps>;
+export default TreeNode;