rsuite 5.60.2 → 5.62.0

package/esm/Tree/utils/focusableTree.js

@@ -0,0 +1,146 @@
+'use client';
+import { shallowEqual } from "../../internals/utils";
+// Active tree node selector
+var SELECTED_TREEITEM_SELECTOR = '[role="treeitem"][aria-selected="true"]';
+
+/**
+ * Retrieves the focusable items from the filtered data based on the provided props.
+ * Excludes nodes that are not visible or are disabled.
+ */
+export var getFocusableItems = function getFocusableItems(filteredData, props, isSearching) {
+  var disabledItemValues = props.disabledItemValues,
+    valueKey = props.valueKey,
+    childrenKey = props.childrenKey,
+    expandItemValues = props.expandItemValues;
+  var items = [];
+  var loop = function loop(nodes) {
+    nodes.forEach(function (node) {
+      var disabled = disabledItemValues.some(function (disabledItem) {
+        return shallowEqual(disabledItem, node[valueKey]);
+      });
+      if (!disabled && node.visible) {
+        items.push(node);
+      }
+      // always expand when searching
+      var expand = isSearching ? true : expandItemValues.includes(node[valueKey]);
+      if (node[childrenKey] && expand) {
+        loop(node[childrenKey]);
+      }
+    });
+  };
+  loop(filteredData);
+  return items;
+};
+
+/**
+ * Returns the index of the active item in the focusItems array.
+ *
+ */
+var getActiveIndex = function getActiveIndex(focusItemValue, focusItems, valueKey) {
+  var activeIndex = -1;
+  focusItems.forEach(function (item, index) {
+    if (shallowEqual(item[valueKey], focusItemValue)) {
+      activeIndex = index;
+    }
+  });
+  return activeIndex;
+};
+
+/**
+ * Retrieves the active item from the flattened nodes based on the provided focus item value.
+ */
+export var getActiveItem = function getActiveItem(focusItemValue, flattenedNodes, valueKey) {
+  var nodeData = null;
+  var activeNode = Object.values(flattenedNodes).find(function (node) {
+    return shallowEqual(node[valueKey], focusItemValue);
+  });
+  if (activeNode) {
+    nodeData = activeNode;
+  }
+  return nodeData;
+};
+
+/**
+ * Focuses on a specific tree node element.
+ *
+ */
+export var focusTreeNode = function focusTreeNode(refKey, treeNodeRefs) {
+  var _treeItem$focus;
+  var treeItem = treeNodeRefs[refKey];
+  treeItem === null || treeItem === void 0 ? void 0 : (_treeItem$focus = treeItem.focus) === null || _treeItem$focus === void 0 ? void 0 : _treeItem$focus.call(treeItem);
+};
+/**
+ * Focuses on the next item in a tree.
+ */
+export var focusNextItem = function focusNextItem(props) {
+  var focusItemValue = props.focusItemValue,
+    focusableItems = props.focusableItems,
+    treeNodesRefs = props.treeNodesRefs,
+    valueKey = props.valueKey;
+  var activeIndex = getActiveIndex(focusItemValue, focusableItems, valueKey);
+  if (focusableItems.length === 0) {
+    return;
+  }
+  var nextIndex = activeIndex === focusableItems.length - 1 ? 0 : activeIndex + 1;
+  var value = focusableItems[nextIndex][valueKey];
+  focusTreeNode(focusableItems[nextIndex].refKey, treeNodesRefs);
+  return value;
+};
+
+/**
+ * Focuses on the previous item in a tree.
+ */
+export var focusPreviousItem = function focusPreviousItem(props) {
+  var focusItemValue = props.focusItemValue,
+    focusableItems = props.focusableItems,
+    treeNodesRefs = props.treeNodesRefs,
+    valueKey = props.valueKey;
+  var activeIndex = getActiveIndex(focusItemValue, focusableItems, valueKey);
+  if (focusableItems.length === 0) {
+    return;
+  }
+  var prevIndex = activeIndex === 0 ? focusableItems.length - 1 : activeIndex - 1;
+  prevIndex = prevIndex >= 0 ? prevIndex : 0;
+  var value = focusableItems[prevIndex][valueKey];
+  focusTreeNode(focusableItems[prevIndex].refKey, treeNodesRefs);
+  return value;
+};
+
+/**
+ * Returns the index of the first visible node in the tree that matches the given value.
+ */
+var getScrollToIndex = function getScrollToIndex(nodes, value, valueKey) {
+  return nodes.filter(function (n) {
+    return n.visible;
+  }).findIndex(function (item) {
+    return item[valueKey] === value;
+  });
+};
+/**
+ * Scrolls the list to the active tree node.
+ *
+ * @param props - The props object containing the necessary parameters.
+ */
+export function scrollToActiveTreeNode(props) {
+  var list = props.list,
+    value = props.value,
+    valueKey = props.valueKey,
+    virtualized = props.virtualized,
+    formattedNodes = props.formattedNodes;
+  if (virtualized && value) {
+    var _list$scrollToItem;
+    var scrollIndex = getScrollToIndex(formattedNodes, value, valueKey);
+    list === null || list === void 0 ? void 0 : (_list$scrollToItem = list.scrollToItem) === null || _list$scrollToItem === void 0 ? void 0 : _list$scrollToItem.call(list, scrollIndex);
+  }
+}
+export var focusCurrentItem = function focusCurrentItem(props) {
+  var _props$selector = props.selector,
+    selector = _props$selector === void 0 ? SELECTED_TREEITEM_SELECTOR : _props$selector,
+    container = props.container;
+  var activeItem = container === null || container === void 0 ? void 0 : container.querySelector(selector);
+  if (activeItem) {
+    var _activeItem$focus, _activeItem$dataset;
+    activeItem === null || activeItem === void 0 ? void 0 : (_activeItem$focus = activeItem.focus) === null || _activeItem$focus === void 0 ? void 0 : _activeItem$focus.call(activeItem);
+    return (_activeItem$dataset = activeItem.dataset) === null || _activeItem$dataset === void 0 ? void 0 : _activeItem$dataset.key;
+  }
+};

package/esm/Tree/utils/formatNodeRefKey.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Formats the reference key for a tree node.
+ */
+export declare function formatNodeRefKey(value: string | number): string;

package/esm/Tree/utils/formatNodeRefKey.js

@@ -0,0 +1,7 @@
+'use client';
+/**
+ * Formats the reference key for a tree node.
+ */
+export function formatNodeRefKey(value) {
+  return "" + (typeof value === 'number' ? 'Number_' : 'String_') + value;
+}

package/esm/Tree/utils/getExpandItemValues.d.ts

@@ -0,0 +1,11 @@
+interface ExpandOptions<T> {
+    node: Record<string, unknown>;
+    isExpand: boolean;
+    expandItemValues: T[];
+    valueKey: string;
+}
+/**
+ * Returns an array of expanded item values.
+ */
+export declare function getExpandItemValues<T>({ node, isExpand, expandItemValues, valueKey }: ExpandOptions<T>): T[];
+export {};

package/esm/Tree/utils/getExpandItemValues.js

@@ -0,0 +1,17 @@
+'use client';
+/**
+ * Returns an array of expanded item values.
+ */
+export function getExpandItemValues(_ref) {
+  var node = _ref.node,
+    isExpand = _ref.isExpand,
+    expandItemValues = _ref.expandItemValues,
+    valueKey = _ref.valueKey;
+  var newExpandItemValues = new Set(expandItemValues);
+  if (isExpand) {
+    newExpandItemValues.add(node[valueKey]);
+  } else {
+    newExpandItemValues.delete(node[valueKey]);
+  }
+  return Array.from(newExpandItemValues);
+}

package/esm/Tree/utils/getNodeParentKeys.d.ts

@@ -0,0 +1,5 @@
+import type { TreeNode, TreeNodeMap } from '@/internals/Tree/types';
+/**
+ * Retrieves an array of parent keys for a given node in a tree.
+ */
+export declare function getNodeParentKeys<T>(nodes: TreeNodeMap, node: TreeNode, valueKey: string): T[];

package/esm/Tree/utils/getNodeParentKeys.js

@@ -0,0 +1,17 @@
+'use client';
+/**
+ * Retrieves an array of parent keys for a given node in a tree.
+ */
+export function getNodeParentKeys(nodes, node, valueKey) {
+  var parentKeys = [];
+  var traverse = function traverse(node) {
+    var _node$parent;
+    if (node !== null && node !== void 0 && (_node$parent = node.parent) !== null && _node$parent !== void 0 && _node$parent.refKey) {
+      var _node$parent2;
+      traverse(nodes[node.parent.refKey]);
+      parentKeys.push(node === null || node === void 0 ? void 0 : (_node$parent2 = node.parent) === null || _node$parent2 === void 0 ? void 0 : _node$parent2[valueKey]);
+    }
+  };
+  traverse(node);
+  return parentKeys;
+}

package/esm/Tree/utils/getTreeActiveNode.d.ts

@@ -0,0 +1,5 @@
+import type { TreeNodeMap } from '@/internals/Tree/types';
+/**
+ * Retrieves the active node from a tree based on the provided value and value key.
+ */
+export declare function getTreeActiveNode<T extends number | string | undefined | null>(nodes: TreeNodeMap, value: T, valueKey: string): import("@/internals/Tree/types").TreeNode | undefined;

package/esm/Tree/utils/getTreeActiveNode.js

@@ -0,0 +1,16 @@
+'use client';
+import { shallowEqual } from "../../internals/utils";
+/**
+ * Retrieves the active node from a tree based on the provided value and value key.
+ */
+export function getTreeActiveNode(nodes, value, valueKey) {
+  if (typeof value === 'undefined') {
+    return;
+  }
+  for (var refKey in nodes) {
+    var node = nodes[refKey];
+    if (shallowEqual(node[valueKey], value)) {
+      return node;
+    }
+  }
+}

package/esm/Tree/utils/hasVisibleChildren.d.ts

@@ -0,0 +1,5 @@
+import type { TreeNode } from '@/internals/Tree/types';
+/**
+ * Checks if a node has visible children.
+ */
+export declare function hasVisibleChildren(node: TreeNode, childrenKey: string): any;

package/esm/Tree/utils/hasVisibleChildren.js

@@ -0,0 +1,12 @@
+'use client';
+/**
+ * Checks if a node has visible children.
+ */
+export function hasVisibleChildren(node, childrenKey) {
+  if (!Array.isArray(node[childrenKey])) {
+    return false;
+  }
+  return node[childrenKey].some(function (child) {
+    return child.visible;
+  });
+}

package/esm/Tree/utils/indentTreeNode.d.ts

@@ -0,0 +1,3 @@
+export declare function indentTreeNode(rtl: any, layer: any, absolute?: boolean): {
+    [x: string]: number;
+};

package/esm/Tree/utils/indentTreeNode.js

@@ -0,0 +1,14 @@
+'use client';
+export function indentTreeNode(rtl, layer, absolute) {
+  var _ref2;
+  if (absolute === void 0) {
+    absolute = false;
+  }
+  // layer start from 1
+  var offset = layer * 26;
+  if (absolute) {
+    var _ref;
+    return _ref = {}, _ref[rtl ? 'right' : 'left'] = offset, _ref;
+  }
+  return _ref2 = {}, _ref2[rtl ? 'paddingRight' : 'paddingLeft'] = offset, _ref2;
+}

package/esm/Tree/utils/index.d.ts

@@ -0,0 +1,11 @@
+export { getNodeParentKeys } from './getNodeParentKeys';
+export { UNSAFE_flattenTree, flattenTree, WalkTreeStrategy } from './flattenTree';
+export { hasVisibleChildren } from './hasVisibleChildren';
+export { getExpandItemValues } from './getExpandItemValues';
+export { getTreeActiveNode } from './getTreeActiveNode';
+export { formatNodeRefKey } from './formatNodeRefKey';
+export { indentTreeNode } from './indentTreeNode';
+export { isSearching } from './isSearching';
+export { isExpand } from './isExpand';
+export { getFocusableItems, getActiveItem, focusNextItem, focusPreviousItem, focusTreeNode, focusCurrentItem } from './focusableTree';
+export { handleLeftArrow, handleRightArrow } from './treeKeyboardInteractions';

package/esm/Tree/utils/index.js

@@ -0,0 +1,14 @@
+'use client';
+export { getNodeParentKeys } from "./getNodeParentKeys";
+export { UNSAFE_flattenTree, flattenTree, WalkTreeStrategy } from "./flattenTree";
+export { hasVisibleChildren } from "./hasVisibleChildren";
+export { getExpandItemValues } from "./getExpandItemValues";
+export { getTreeActiveNode } from "./getTreeActiveNode";
+export { formatNodeRefKey } from "./formatNodeRefKey";
+export { indentTreeNode } from "./indentTreeNode";
+export { isSearching } from "./isSearching";
+export { isExpand } from "./isExpand";
+
+// Utility functions for managing focusable items in a tree.
+export { getFocusableItems, getActiveItem, focusNextItem, focusPreviousItem, focusTreeNode, focusCurrentItem } from "./focusableTree";
+export { handleLeftArrow, handleRightArrow } from "./treeKeyboardInteractions";

package/esm/Tree/utils/isExpand.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Determines whether the tree node should be expanded based on the search keyword and expand flag.
+ * If a search keyword is provided, the node is always expanded.
+ * Otherwise, the node is expanded if the expand flag is true.
+ */
+export declare function isExpand(searchKeyword: string, expand: boolean): boolean;

package/esm/Tree/utils/isExpand.js

@@ -0,0 +1,11 @@
+'use client';
+import { isSearching } from "./isSearching";
+
+/**
+ * Determines whether the tree node should be expanded based on the search keyword and expand flag.
+ * If a search keyword is provided, the node is always expanded.
+ * Otherwise, the node is expanded if the expand flag is true.
+ */
+export function isExpand(searchKeyword, expand) {
+  return isSearching(searchKeyword) ? true : expand;
+}

package/esm/Tree/utils/isSearching.d.ts

@@ -0,0 +1 @@
+export declare function isSearching(searchKeyword?: string): boolean;

package/esm/Tree/utils/isSearching.js

@@ -0,0 +1,5 @@
+'use client';
+import isEmpty from 'lodash/isEmpty';
+export function isSearching(searchKeyword) {
+  return !isEmpty(searchKeyword);
+}

package/esm/Tree/utils/treeKeyboardInteractions.d.ts

@@ -0,0 +1,21 @@
+import type { TreeNode } from '@/internals/Tree/types';
+export interface ArrowHandlerProps {
+    focusItem: TreeNode;
+    expand: boolean;
+    childrenKey: string;
+    onExpand?: (focusItem: TreeNode, expanded: boolean) => void;
+    onFocusItem: () => void;
+}
+/**
+ * Handles the left arrow key press event for tree navigation.
+ * If the focus item is expanded, it collapses it. If the focus item is not expanded and has a parent,
+ * it moves the focus to the parent item.
+ */
+export declare function handleLeftArrow(props: ArrowHandlerProps): void;
+/**
+ * Handles the right arrow key press event for tree navigation.
+ * If the focused item has children and is collapsed, it expands the item.
+ * If the focused item has children and is expanded, it moves the focus to the next sibling.
+ * If the focused item does not have children, it does nothing.
+ */
+export declare function handleRightArrow(props: ArrowHandlerProps): void;

package/esm/Tree/utils/treeKeyboardInteractions.js

@@ -0,0 +1,43 @@
+'use client';
+import isEmpty from 'lodash/isEmpty';
+/**
+ * Handles the left arrow key press event for tree navigation.
+ * If the focus item is expanded, it collapses it. If the focus item is not expanded and has a parent,
+ * it moves the focus to the parent item.
+ */
+export function handleLeftArrow(props) {
+  var focusItem = props.focusItem,
+    expand = props.expand,
+    onExpand = props.onExpand,
+    onFocusItem = props.onFocusItem;
+  if (isEmpty(focusItem)) {
+    return;
+  }
+  if (expand) {
+    onExpand === null || onExpand === void 0 ? void 0 : onExpand(focusItem, expand);
+  } else if (focusItem !== null && focusItem !== void 0 && focusItem.parent) {
+    onFocusItem();
+  }
+}
+
+/**
+ * Handles the right arrow key press event for tree navigation.
+ * If the focused item has children and is collapsed, it expands the item.
+ * If the focused item has children and is expanded, it moves the focus to the next sibling.
+ * If the focused item does not have children, it does nothing.
+ */
+export function handleRightArrow(props) {
+  var focusItem = props.focusItem,
+    expand = props.expand,
+    childrenKey = props.childrenKey,
+    onExpand = props.onExpand,
+    onFocusItem = props.onFocusItem;
+  if (isEmpty(focusItem) || !Array.isArray(focusItem[childrenKey])) {
+    return;
+  }
+  if (!expand) {
+    onExpand === null || onExpand === void 0 ? void 0 : onExpand(focusItem, expand);
+  } else {
+    onFocusItem();
+  }
+}

package/esm/TreePicker/TreePicker.d.ts

@@ -1,27 +1,33 @@
 import React from 'react';
 import { PickerLocale } from '../locales';
-import { PickerComponent, PickerToggleProps } from '../internals/Picker';
-import { TreeDragProps, TreeBaseProps } from '../Tree/Tree';
-import { FormControlPickerProps, ItemDataType } from '../@types/common';
-export interface TreePickerProps<T = number | string> extends TreeBaseProps<T, ItemDataType>, TreeDragProps, FormControlPickerProps<T, PickerLocale, ItemDataType>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
-    /** The height of Dropdown */
-    height?: number;
-    /** Tree node cascade */
-    cascade?: boolean;
-    /** A picker that can be counted */
-    countable?: boolean;
-    /** Whether display search input box */
-    searchable?: boolean;
-    /** Whether using virtualized list */
-    virtualized?: boolean;
-    /** Set the option value for the expand node */
-    defaultExpandItemValues?: ItemDataType[];
-    /** Set the option value for the expand node with controlled*/
-    expandItemValues?: ItemDataType[];
-    /** Custom render selected items */
-    renderValue?: (value: T, selectedItems: ItemDataType, selectedElement: React.ReactNode) => React.ReactNode;
-    /** Called when scrolling */
-    onScroll?: (event: React.SyntheticEvent) => void;
+import { PickerComponent, PickerToggleProps } from '@/internals/Picker';
+import { TreeNode } from '@/internals/Tree/types';
+import { type TreeViewProps } from '../Tree/TreeView';
+import type { FormControlPickerProps, DeprecatedPickerProps } from '@/internals/types';
+import type { TreeExtraProps } from '../Tree/types';
+export interface TreePickerProps<V = number | string | null> extends TreeViewProps<V>, TreeExtraProps, DeprecatedPickerProps, FormControlPickerProps<V, PickerLocale, TreeNode>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
+    /**
+     * Custom render selected items
+     */
+    renderValue?: (value: V, selectedNode: TreeNode, selectedElement: React.ReactNode) => React.ReactNode;
+    /**
+     * Custom popup style
+     */
+    popupClassName?: string;
+    /**
+     * Custom popup style
+     */
+    popupStyle?: React.CSSProperties;
+    /**
+     * The height of the tree
+     */
+    treeHeight?: number;
+    /**
+     * Popup auto width
+     *
+     * @default true
+     */
+    popupAutoWidth?: boolean;
 }
 /**
  * The `TreePicker` component is used for selecting single options which are organized in a tree structure.