rsuite 5.55.1 → 5.57.0

package/esm/CascadeTree/hooks/useSearch.js

@@ -0,0 +1,54 @@
+'use client';
+import { useState } from 'react';
+import { getSafeRegExpString, useEventCallback } from '../../utils';
+function useSearch(props) {
+  var _useState = useState(''),
+    searchKeyword = _useState[0],
+    setSearchKeyword = _useState[1];
+  var labelKey = props.labelKey,
+    childrenKey = props.childrenKey,
+    parentMap = props.parentMap,
+    flattenedData = props.flattenedData,
+    parentSelectable = props.parentSelectable,
+    onSearch = props.onSearch;
+  var someKeyword = function someKeyword(item, keyword) {
+    if (item[labelKey].match(new RegExp(getSafeRegExpString(keyword || searchKeyword), 'i'))) {
+      return true;
+    }
+    var parent = parentMap.get(item);
+    if (parent && someKeyword(parent)) {
+      return true;
+    }
+    return false;
+  };
+  var getSearchResult = function getSearchResult(keyword) {
+    var items = [];
+    var result = flattenedData.filter(function (item) {
+      if (!parentSelectable && item[childrenKey]) {
+        return false;
+      }
+      return someKeyword(item, keyword);
+    });
+    for (var i = 0; i < result.length; i++) {
+      items.push(result[i]);
+
+      // A maximum of 100 search results are returned.
+      if (i === 99) {
+        return items;
+      }
+    }
+    return items;
+  };
+  var handleSearch = useEventCallback(function (value, event) {
+    var items = getSearchResult(value);
+    setSearchKeyword(value);
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, items, event);
+  });
+  return {
+    searchKeyword: searchKeyword,
+    setSearchKeyword: setSearchKeyword,
+    items: getSearchResult(),
+    handleSearch: handleSearch
+  };
+}
+export default useSearch;

package/esm/CascadeTree/hooks/useSelect.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { type ItemDataType } from '../../@types/common';
+import { type SelectNode } from '../types';
+export interface UseSelectProps<T> {
+    value?: T | null;
+    valueKey: string;
+    childrenKey: string;
+    selectedItem?: ItemDataType<T>;
+    childrenMap: any;
+    onSelect?: (node: SelectNode<T>, event: React.SyntheticEvent) => void;
+    onChange?: (value: T, event: React.SyntheticEvent) => void;
+    getChildren?: (node: ItemDataType<T>) => readonly ItemDataType<T>[] | Promise<readonly ItemDataType<T>[]>;
+}
+/**
+ * Hook for handling the state after the option is selected
+ */
+declare const useSelect: <T>(props: UseSelectProps<T>) => {
+    loadingItemsSet: any;
+    activeItem: ItemDataType<T> | undefined;
+    setActiveItem: import("react").Dispatch<import("react").SetStateAction<ItemDataType<T> | undefined>>;
+    handleSelect: (...args: any[]) => any;
+};
+export default useSelect;

package/esm/CascadeTree/hooks/useSelect.js

@@ -0,0 +1,59 @@
+'use client';
+import { useState } from 'react';
+import { useSet } from 'react-use-set';
+import { useEventCallback, useIsMounted, shallowEqual } from '../../utils';
+/**
+ * Hook for handling the state after the option is selected
+ */
+var useSelect = function useSelect(props) {
+  var value = props.value,
+    onSelect = props.onSelect,
+    getChildren = props.getChildren,
+    valueKey = props.valueKey,
+    onChange = props.onChange,
+    childrenKey = props.childrenKey,
+    selectedItem = props.selectedItem,
+    childrenMap = props.childrenMap; // The item that focus is on
+  var _useState = useState(selectedItem),
+    activeItem = _useState[0],
+    setActiveItem = _useState[1];
+  var isMounted = useIsMounted();
+  var loadingItemsSet = useSet();
+  var handleSelect = useEventCallback(function (node, event) {
+    var _itemData$childrenKey;
+    var itemData = node.itemData,
+      isLeafNode = node.isLeafNode;
+    setActiveItem(itemData);
+
+    // Lazy load node's children
+    if (typeof getChildren === 'function' && ((_itemData$childrenKey = itemData[childrenKey]) === null || _itemData$childrenKey === void 0 ? void 0 : _itemData$childrenKey.length) === 0 && !childrenMap.has(itemData)) {
+      loadingItemsSet.add(itemData);
+      var children = getChildren(itemData);
+      if (children instanceof Promise) {
+        children.then(function (data) {
+          if (isMounted()) {
+            loadingItemsSet.delete(itemData);
+            childrenMap.set(itemData, data);
+          }
+        });
+      } else {
+        loadingItemsSet.delete(itemData);
+        childrenMap.set(itemData, children);
+      }
+    }
+    if (isLeafNode) {
+      var nextValue = itemData[valueKey];
+      if (!shallowEqual(value, nextValue)) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+      }
+    }
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, event);
+  });
+  return {
+    loadingItemsSet: loadingItemsSet,
+    activeItem: activeItem,
+    setActiveItem: setActiveItem,
+    handleSelect: handleSelect
+  };
+};
+export default useSelect;

package/esm/CascadeTree/index.d.ts

@@ -0,0 +1,4 @@
+import CascadeTree from './CascadeTree';
+export type { ItemDataType } from '../@types/common';
+export type { CascadeTreeProps } from './types';
+export default CascadeTree;

package/esm/CascadeTree/index.js

@@ -0,0 +1,3 @@
+'use client';
+import CascadeTree from './CascadeTree';
+export default CascadeTree;

package/esm/CascadeTree/types.d.ts

@@ -0,0 +1,66 @@
+/// <reference types="react" />
+import { ItemDataType, DataProps, WithAsProps, ToArray } from '../@types/common';
+export interface SelectNode<T> {
+    itemData: ItemDataType<T>;
+    cascadePaths: ItemDataType<T>[];
+    isLeafNode: boolean;
+}
+export interface CascadeColumn<T> {
+    items: readonly ItemDataType<T>[];
+    parentItem?: ItemDataType<T>;
+    layer?: number;
+}
+export interface CascadeTreeProps<T, V = T> extends WithAsProps, DataProps<ItemDataType<T>> {
+    /**
+     * Initial value
+     */
+    defaultValue?: V;
+    /**
+     * Selected value
+     */
+    value?: V;
+    /**
+     * Sets the width of the menu
+     */
+    columnWidth?: number;
+    /**
+     * Sets the height of the menu
+     */
+    columnHeight?: number;
+    /**
+     * Disabled items
+     */
+    disabledItemValues?: ToArray<NonNullable<T>>;
+    /**
+     * Whether dispaly search input box
+     */
+    searchable?: boolean;
+    /**
+     * Custom render columns
+     */
+    renderColumn?: (childNodes: React.ReactNode, column: CascadeColumn<T>) => React.ReactNode;
+    /**
+     * Custom render tree node
+     */
+    renderTreeNode?: (node: React.ReactNode, itemData: ItemDataType<T>) => React.ReactNode;
+    /**
+     * Custom render search items
+     */
+    renderSearchItem?: (node: React.ReactNode, items: ItemDataType<T>[]) => React.ReactNode;
+    /**
+     * Called when the option is selected
+     */
+    onSelect?: (value: ItemDataType<T>, selectedPaths: ItemDataType<T>[], event: React.SyntheticEvent) => void;
+    /**
+     * Called after the value has been changed
+     */
+    onChange?: (value: V, event: React.SyntheticEvent) => void;
+    /**
+     * Called when searching
+     */
+    onSearch?: (value: string, event: React.SyntheticEvent) => void;
+    /**
+     * Asynchronously load the children of the tree node.
+     */
+    getChildren?: (childNodes: ItemDataType<T>) => ItemDataType<T>[] | Promise<ItemDataType<T>[]>;
+}

package/esm/CascadeTree/types.js

@@ -0,0 +1 @@
+'use client';

package/esm/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/esm/CascadeTree/utils.js

@@ -0,0 +1,61 @@
+'use client';
+import { getSafeRegExpString } from '../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
+ */
+export 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
+ */
+export function highlightLabel(props) {
+  var item = props.item,
+    searchKeyword = props.searchKeyword,
+    labelKey = props.labelKey,
+    render = props.render;
+  var regx = new RegExp(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/esm/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> & {