rsuite 5.56.0 → 5.57.0

package/cjs/CascadeTree/utils.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { ItemDataType } from '../@types/common';
+declare type GetColumnsAndPathsOptions<T> = {
+    getParent: (item: T) => T | undefined;
+    getChildren: (item: T) => readonly T[] | undefined;
+};
+/**
+ * Calculate columns to be displayed:
+ *
+ * - Every ancestor level of activeItem should be displayed
+ * - The level that activeItem is at should be displayed
+ * - If activeItem is a parent node, its child level should be displayed
+ *
+ * @param items
+ * @param value
+ * @param options
+ * @returns
+ */
+export declare function getColumnsAndPaths<T extends Record<string, unknown>>(items: readonly T[], pathTarget: T | undefined, options: GetColumnsAndPathsOptions<T>): {
+    columns: (readonly T[])[];
+    path: T[];
+};
+/**
+ * Highlight the search keyword in the label
+ */
+export declare function highlightLabel<T>(props: {
+    item: ItemDataType<T>;
+    labelKey: string;
+    searchKeyword: string;
+    render: (patch: React.ReactNode, index: number) => React.ReactNode;
+}): import("react").ReactNode[];
+export {};

package/cjs/CascadeTree/utils.js

@@ -0,0 +1,66 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.getColumnsAndPaths = getColumnsAndPaths;
+exports.highlightLabel = highlightLabel;
+var _utils = require("../utils");
+/**
+ * Calculate columns to be displayed:
+ *
+ * - Every ancestor level of activeItem should be displayed
+ * - The level that activeItem is at should be displayed
+ * - If activeItem is a parent node, its child level should be displayed
+ *
+ * @param items
+ * @param value
+ * @param options
+ * @returns
+ */
+function getColumnsAndPaths(items, pathTarget, options) {
+  var getParent = options.getParent,
+    getChildren = options.getChildren;
+  if (!pathTarget) {
+    return {
+      columns: [items],
+      path: []
+    };
+  }
+  var columns = [];
+  var path = [pathTarget];
+  var children = getChildren(pathTarget);
+  if (children && children.length > 0) {
+    columns.unshift(children);
+  }
+  for (var parent = getParent(pathTarget); !!parent; parent = getParent(parent)) {
+    var _getChildren;
+    columns.unshift((_getChildren = getChildren(parent)) !== null && _getChildren !== void 0 ? _getChildren : []);
+    path.unshift(parent);
+  }
+  columns.unshift(items);
+  return {
+    columns: columns,
+    path: path
+  };
+}
+
+/**
+ * Highlight the search keyword in the label
+ */
+function highlightLabel(props) {
+  var item = props.item,
+    searchKeyword = props.searchKeyword,
+    labelKey = props.labelKey,
+    render = props.render;
+  var regx = new RegExp((0, _utils.getSafeRegExpString)(searchKeyword), 'ig');
+  var labelElements = [];
+  var strArr = item[labelKey].split(regx);
+  var highStrArr = item[labelKey].match(regx);
+  for (var i = 0; i < strArr.length; i++) {
+    labelElements.push(strArr[i]);
+    if (highStrArr !== null && highStrArr !== void 0 && highStrArr[i]) {
+      labelElements.push(render(highStrArr[i], i));
+    }
+  }
+  return labelElements;
+}

package/cjs/Cascader/Cascader.d.ts

@@ -1,35 +1,66 @@
 import React from 'react';
+import type { CascadeTreeProps } from '../CascadeTree/types';
 import { PickerLocale } from '../locales';
 import { PickerHandle, PickerToggleProps } from '../internals/Picker';
-import { ItemDataType, FormControlPickerProps } from '../@types/common';
-export declare type ValueType = number | string;
-export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T | null, PickerLocale, ItemDataType<T>>, Pick<PickerToggleProps, 'label' | 'caretAs' | 'loading'> {
-    /** Sets the width of the menu */
-    menuWidth?: number;
-    /** Sets the height of the menu */
-    menuHeight?: number | string;
-    /** Whether dispaly search input box */
-    searchable?: boolean;
-    /** The menu is displayed directly when the component is initialized */
+import { ItemDataType, DataItemValue, FormControlPickerProps } from '../@types/common';
+export interface CascaderProps<T = DataItemValue> extends FormControlPickerProps<T, PickerLocale, ItemDataType<T>>, CascadeTreeProps<T>, Pick<PickerToggleProps, 'label' | 'caretAs' | 'loading'> {
+    /**
+     * The panel is displayed directly when the component is initialized
+     * @deprecated Use CascadeTree instead
+     * @see CascadeTree https://rsuitejs.com/components/cascade-tree
+     */
     inline?: boolean;
-    /** When true, make the parent node selectable */
+    /**
+     * When true, make the parent node selectable
+     */
     parentSelectable?: boolean;
-    /** Custom render menu */
-    renderMenu?: (items: readonly ItemDataType[], menu: React.ReactNode, parentNode?: any, layer?: number) => React.ReactNode;
-    /** Custom render menu items */
-    renderMenuItem?: (itemLabel: React.ReactNode, item: ItemDataType) => React.ReactNode;
-    /** Custom render search items */
-    renderSearchItem?: (itemLabel: React.ReactNode, items: ItemDataType[]) => React.ReactNode;
-    /** Custom render selected items */
-    renderValue?: (value: T, selectedPaths: ItemDataType[], selectedElement: React.ReactNode) => React.ReactNode;
-    /** Called when the option is selected */
-    onSelect?: (value: ItemDataType, selectedPaths: ItemDataType[], event: React.SyntheticEvent) => void;
-    /** Called when clean */
+    /**
+     * Custom popup style
+     */
+    popupClassName?: string;
+    /**
+     * Custom popup style
+     */
+    popupStyle?: React.CSSProperties;
+    /**
+     * Custom menu class name
+     * @deprecated Use popupClassName instead
+     */
+    menuClassName?: string;
+    /**
+     * Custom menu style
+     * @deprecated Use popupStyle instead
+     */
+    menuStyle?: React.CSSProperties;
+    /**
+     * Sets the width of the menu.
+     *
+     * @deprecated Use columnWidth instead
+     */
+    menuWidth?: number;
+    /**
+     * Sets the height of the menu
+     * @deprecated Use columnHeight instead
+     */
+    menuHeight?: number | string;
+    /**
+     * Custom render menu
+     * @deprecated Use renderColumn instead
+     */
+    renderMenu?: (items: readonly ItemDataType<T>[], menu: React.ReactNode, parentNode?: any, layer?: number) => React.ReactNode;
+    /**
+     * Custom render menu item
+     * @deprecated Use renderTreeNode instead
+     */
+    renderMenuItem?: (node: React.ReactNode, item: ItemDataType<T>) => React.ReactNode;
+    /**
+     * Custom render selected items
+     */
+    renderValue?: (value: T, selectedPaths: ItemDataType<T>[], selectedElement: React.ReactNode) => React.ReactNode;
+    /**
+     * Called when clean
+     */
     onClean?: (event: React.SyntheticEvent) => void;
-    /** Called when searching */
-    onSearch?: (searchKeyword: string, event: React.SyntheticEvent) => void;
-    /** Asynchronously load the children of the tree node. */
-    getChildren?: (node: ItemDataType<T>) => ItemDataType<T>[] | Promise<ItemDataType<T>[]>;
 }
 export interface CascaderComponent {
     <T>(props: CascaderProps<T> & {