rsuite 5.60.2 → 5.61.0

package/esm/Tree/TreeNode.js

@@ -0,0 +1,141 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { forwardRef, useMemo } from 'react';
+import { useClassNames, useEventCallback, mergeRefs, useCustom } from '../utils';
+import { stringifyReactNode } from '../internals/utils';
+import { useFoucsVirtualListItem } from '../internals/hooks';
+import TreeNodeToggle from './TreeNodeToggle';
+import { useTreeContextProps } from './TreeProvider';
+import { indentTreeNode } from './utils';
+
+/**
+ * Props for the TreeNode component.
+ */
+
+var TreeNode = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    label = props.label,
+    layer = props.layer,
+    active = props.active,
+    loading = props.loading,
+    nodeData = props.nodeData,
+    className = props.className,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'tree-node' : _props$classPrefix,
+    disabled = props.disabled,
+    _props$visible = props.visible,
+    visible = _props$visible === void 0 ? true : _props$visible,
+    draggable = props.draggable,
+    expanded = props.expanded,
+    focus = props.focus,
+    style = props.style,
+    hasChildren = props.hasChildren,
+    dragging = props.dragging,
+    dragStatus = props.dragStatus,
+    onSelect = props.onSelect,
+    onDragStart = props.onDragStart,
+    onDragOver = props.onDragOver,
+    onDragEnter = props.onDragEnter,
+    onDragLeave = props.onDragLeave,
+    onDragEnd = props.onDragEnd,
+    onDrop = props.onDrop,
+    onExpand = props.onExpand,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "label", "layer", "active", "loading", "nodeData", "className", "classPrefix", "disabled", "visible", "draggable", "expanded", "focus", "style", "hasChildren", "dragging", "dragStatus", "onSelect", "onDragStart", "onDragOver", "onDragEnter", "onDragLeave", "onDragEnd", "onDrop", "onExpand"]);
+  var _useCustom = useCustom(),
+    rtl = _useCustom.rtl;
+  var _useTreeContextProps = useTreeContextProps(),
+    renderTreeNode = _useTreeContextProps.renderTreeNode,
+    virtualized = _useTreeContextProps.virtualized;
+  var _useClassNames = useClassNames(classPrefix),
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge,
+    withClassPrefix = _useClassNames.withClassPrefix;
+  var labelStr = useMemo(function () {
+    return stringifyReactNode(label);
+  }, [label]);
+  var handleExpand = useEventCallback(function (event) {
+    var _event$nativeEvent, _event$nativeEvent$st;
+    // Stop propagation when using custom loading icon
+    event === null || event === void 0 ? void 0 : (_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : (_event$nativeEvent$st = _event$nativeEvent.stopImmediatePropagation) === null || _event$nativeEvent$st === void 0 ? void 0 : _event$nativeEvent$st.call(_event$nativeEvent);
+    event.stopPropagation();
+    onExpand === null || onExpand === void 0 ? void 0 : onExpand(nodeData, expanded);
+  });
+  var handleSelect = useEventCallback(function (event) {
+    if (disabled) {
+      return;
+    }
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeData, event);
+  });
+  var handleDragStart = useEventCallback(function (event) {
+    onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);
+  });
+  var handleDragEnter = useEventCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);
+  });
+  var handleDragOver = useEventCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(nodeData, event);
+  });
+  var handleDragLeave = useEventCallback(function (event) {
+    event.stopPropagation();
+    onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);
+  });
+  var handleDragEnd = useEventCallback(function (event) {
+    event.stopPropagation();
+    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);
+  });
+  var handleDrop = useEventCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onDrop === null || onDrop === void 0 ? void 0 : onDrop(nodeData, event);
+  });
+  var classes = merge(className, withClassPrefix({
+    disabled: disabled,
+    active: active,
+    'text-muted': disabled,
+    focus: focus
+  }));
+  var treeItemRef = useFoucsVirtualListItem(focus);
+  var styles = virtualized ? _extends({}, style, indentTreeNode(rtl, layer - 1)) : style;
+  return visible ? /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    ref: mergeRefs(treeItemRef, ref),
+    role: "treeitem",
+    tabIndex: -1,
+    "aria-expanded": expanded,
+    "aria-label": labelStr,
+    "aria-level": layer,
+    "aria-disabled": disabled,
+    "aria-selected": active,
+    "data-layer": layer,
+    "data-key": (nodeData === null || nodeData === void 0 ? void 0 : nodeData.refKey) || '',
+    title: labelStr,
+    className: classes,
+    style: styles,
+    draggable: draggable,
+    onClick: handleSelect,
+    onDragStart: handleDragStart,
+    onDragEnter: handleDragEnter,
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave,
+    onDragEnd: handleDragEnd,
+    onDrop: handleDrop
+  }), /*#__PURE__*/React.createElement(TreeNodeToggle, {
+    "aria-label": (expanded ? 'Collapse' : 'Expand') + (" " + labelStr),
+    data: nodeData,
+    loading: loading,
+    expanded: expanded,
+    hasChildren: hasChildren,
+    onClick: handleExpand
+  }), /*#__PURE__*/React.createElement("span", {
+    className: prefix('label', dragStatus, {
+      dragging: dragging
+    })
+  }, renderTreeNode ? renderTreeNode(nodeData) : label)) : null;
+});
+TreeNode.displayName = 'TreeNode';
+export default TreeNode;

package/esm/Tree/TreeNodeToggle.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface TreeNodeToggleProps extends React.HTMLAttributes<HTMLDivElement> {
+    data: any;
+    loading?: boolean;
+    expanded?: boolean;
+    hasChildren?: boolean;
+}
+declare function TreeNodeToggle(props: TreeNodeToggleProps): JSX.Element;
+export default TreeNodeToggle;

package/esm/Tree/TreeNodeToggle.js

@@ -0,0 +1,50 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import ArrowDownIcon from '@rsuite/icons/ArrowDown';
+import ArrowRightIcon from '@rsuite/icons/ArrowRight';
+import ArrowLeftIcon from '@rsuite/icons/ArrowLeft';
+import Spinner from '@rsuite/icons/legacy/Spinner';
+import { useClassNames, useCustom } from '../utils';
+import { useTreeCustomRenderer } from './TreeProvider';
+function TreeNodeToggle(props) {
+  var data = props.data,
+    loading = props.loading,
+    expanded = props.expanded,
+    hasChildren = props.hasChildren,
+    rest = _objectWithoutPropertiesLoose(props, ["data", "loading", "expanded", "hasChildren"]);
+  var _useCustom = useCustom(),
+    rtl = _useCustom.rtl;
+  var _useTreeCustomRendere = useTreeCustomRenderer(),
+    renderTreeIcon = _useTreeCustomRendere.renderTreeIcon;
+  var _useClassNames = useClassNames('tree-node'),
+    prefix = _useClassNames.prefix;
+  var IconElementType = expanded ? ArrowDownIcon : rtl ? ArrowLeftIcon : ArrowRightIcon;
+  var icon = /*#__PURE__*/React.createElement(IconElementType, {
+    className: prefix('toggle-icon')
+  });
+  if (loading) {
+    icon = /*#__PURE__*/React.createElement("div", {
+      className: prefix('loading-icon')
+    }, /*#__PURE__*/React.createElement(Spinner, {
+      spin: true
+    }));
+  }
+  if (data !== undefined && typeof renderTreeIcon === 'function') {
+    var customIcon = renderTreeIcon(data, expanded);
+    icon = customIcon !== null ? /*#__PURE__*/React.createElement("div", {
+      className: prefix('custom-icon')
+    }, customIcon) : icon;
+  }
+  return hasChildren ? /*#__PURE__*/React.createElement("div", _extends({
+    tabIndex: -1,
+    role: "button",
+    "aria-busy": loading ? true : undefined,
+    "data-ref": data.refKey,
+    className: prefix('toggle')
+  }, rest), icon) : /*#__PURE__*/React.createElement("div", {
+    className: prefix('toggle-placeholder')
+  });
+}
+export default TreeNodeToggle;

package/esm/Tree/TreeProvider.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { TreeNode } from './types';
+interface RegisterMethods {
+    /**
+     * Focuses on the first node in the tree.
+     */
+    focusTreeFirstNode: () => void;
+    /**
+     * Focuses on the active node in the tree.
+     */
+    focusTreeActiveNode: () => void;
+}
+declare type Unregister = () => void;
+interface TreeContextValue {
+    register?: (methods: RegisterMethods) => Unregister;
+    props: {
+        labelKey: string;
+        valueKey: string;
+        childrenKey: string;
+        virtualized?: boolean;
+        renderTreeNode?: (nodeData: TreeNode) => React.ReactNode;
+        renderTreeIcon?: (nodeData: TreeNode, expanded?: boolean) => React.ReactNode;
+    };
+}
+export declare const TreeProvider: React.Provider<TreeContextValue>;
+export declare const useRegisterTreeMethods: () => ((methods: RegisterMethods) => Unregister) | undefined;
+export declare const useTreeCustomRenderer: () => {
+    renderTreeIcon: ((nodeData: TreeNode, expanded?: boolean) => React.ReactNode) | undefined;
+    renderTreeNode: ((nodeData: TreeNode) => React.ReactNode) | undefined;
+};
+export declare const useItemDataKeys: () => {
+    labelKey: string;
+    valueKey: string;
+    childrenKey: string;
+};
+export declare const useTreeContextProps: () => {
+    labelKey: string;
+    valueKey: string;
+    childrenKey: string;
+    virtualized?: boolean | undefined;
+    renderTreeNode?: ((nodeData: TreeNode) => React.ReactNode) | undefined;
+    renderTreeIcon?: ((nodeData: TreeNode, expanded?: boolean) => React.ReactNode) | undefined;
+};
+/**
+ * Custom hook that provides imperative handle for the Tree component.
+ */
+export declare const useTreeImperativeHandle: () => {
+    register: ({ focusTreeFirstNode, focusTreeActiveNode }: any) => () => void;
+    focusFirstNode: () => void | undefined;
+    focusActiveNode: () => void | undefined;
+};
+export {};

package/esm/Tree/TreeProvider.js

@@ -0,0 +1,74 @@
+'use client';
+import { createContext, useContext, useRef, useCallback } from 'react';
+var defaultItemDataKeys = {
+  labelKey: 'label',
+  valueKey: 'value',
+  childrenKey: 'children',
+  virtualized: false
+};
+var TreeContext = /*#__PURE__*/createContext({
+  props: defaultItemDataKeys
+});
+export var TreeProvider = TreeContext.Provider;
+export var useRegisterTreeMethods = function useRegisterTreeMethods() {
+  var _useContext = useContext(TreeContext),
+    register = _useContext.register;
+  return register;
+};
+export var useTreeCustomRenderer = function useTreeCustomRenderer() {
+  var _useContext2 = useContext(TreeContext),
+    _useContext2$props = _useContext2.props,
+    renderTreeIcon = _useContext2$props.renderTreeIcon,
+    renderTreeNode = _useContext2$props.renderTreeNode;
+  return {
+    renderTreeIcon: renderTreeIcon,
+    renderTreeNode: renderTreeNode
+  };
+};
+export var useItemDataKeys = function useItemDataKeys() {
+  var _useContext3 = useContext(TreeContext),
+    _useContext3$props = _useContext3.props;
+  _useContext3$props = _useContext3$props === void 0 ? defaultItemDataKeys : _useContext3$props;
+  var labelKey = _useContext3$props.labelKey,
+    valueKey = _useContext3$props.valueKey,
+    childrenKey = _useContext3$props.childrenKey;
+  return {
+    labelKey: labelKey,
+    valueKey: valueKey,
+    childrenKey: childrenKey
+  };
+};
+export var useTreeContextProps = function useTreeContextProps() {
+  var _useContext4 = useContext(TreeContext),
+    props = _useContext4.props;
+  return props;
+};
+
+/**
+ * Custom hook that provides imperative handle for the Tree component.
+ */
+export var useTreeImperativeHandle = function useTreeImperativeHandle() {
+  var focusFirstNodeRef = useRef(null);
+  var focusActiveNodeRef = useRef(null);
+  var register = useCallback(function (_ref) {
+    var focusTreeFirstNode = _ref.focusTreeFirstNode,
+      focusTreeActiveNode = _ref.focusTreeActiveNode;
+    focusFirstNodeRef.current = focusTreeFirstNode;
+    focusActiveNodeRef.current = focusTreeActiveNode;
+    return function () {
+      focusFirstNodeRef.current = null;
+      focusActiveNodeRef.current = null;
+    };
+  }, []);
+  return {
+    register: register,
+    focusFirstNode: function focusFirstNode() {
+      var _focusFirstNodeRef$cu;
+      return (_focusFirstNodeRef$cu = focusFirstNodeRef.current) === null || _focusFirstNodeRef$cu === void 0 ? void 0 : _focusFirstNodeRef$cu.call(focusFirstNodeRef);
+    },
+    focusActiveNode: function focusActiveNode() {
+      var _focusActiveNodeRef$c;
+      return (_focusActiveNodeRef$c = focusActiveNodeRef.current) === null || _focusActiveNodeRef$c === void 0 ? void 0 : _focusActiveNodeRef$c.call(focusActiveNodeRef);
+    }
+  };
+};

package/esm/Tree/TreeView.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+import { type ListHandle } from '../internals/Windowing';
+import { RsRefForwardingComponent, DataProps, ToArray } from '../@types/common';
+import type { TreeNode, TreeNodeMap, TreeViewBaseProps, TreeDragProps } from './types';
+export interface TreeViewProps<V = number | string | null> extends TreeViewBaseProps<V, TreeNode>, DataProps<TreeNode>, TreeDragProps {
+    /**
+     * Selected value.
+     */
+    value?: V;
+    /**
+     * Whether display search input box.
+     */
+    searchable?: boolean;
+    /**
+     * Whether using virtualized list.
+     */
+    virtualized?: boolean;
+    /**
+     * Disabled tree node.
+     */
+    disabledItemValues?: ToArray<NonNullable<V>>;
+    /**
+     * Virtualized list ref object.
+     */
+    listRef?: React.RefObject<ListHandle>;
+    /**
+     * Searchbox input ref object.
+     */
+    searchInputRef?: React.RefObject<HTMLInputElement>;
+    /**
+     * Called when scrolling.
+     */
+    onScroll?: (event: React.SyntheticEvent) => void;
+    /**
+     * Called after the value has been changed.
+     */
+    onChange?: (value: V, event: React.SyntheticEvent) => void;
+}
+/**
+ * Props for the TreeViewInner component.
+ */
+/**
+ * Represents the props for the TreeView component.
+ */
+interface TreeViewInnerProps<V = string | number | null> extends Omit<TreeViewProps<V>, 'onExpand'> {
+    /**
+     * An array of values representing the loading nodes.
+     */
+    loadingNodeValues?: V[];
+    /**
+     * A map of flattened nodes.
+     */
+    flattenedNodes?: TreeNodeMap;
+    /**
+     * A callback function that is called when an item in the tree receives focus.
+     *
+     * @param value - The value of the focused item.
+     */
+    onFocusItem?: (value?: V) => void;
+    /**
+     * A callback function that is called when a node is expanded.
+     *
+     * @param nodeData - The data of the expanded node.
+     */
+    onExpand?: (nodeData: TreeNode, expanded?: boolean) => void;
+}
+declare const TreeView: RsRefForwardingComponent<'div', TreeViewInnerProps>;
+export default TreeView;