npm - rsuite - Versions diffs - 5.56.0 → 5.57.0 - Mend

rsuite 5.56.0 → 5.57.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (179) hide show

package/CHANGELOG.md +16 -0
package/CascadeTree/package.json +7 -0
package/CascadeTree/styles/index.css +273 -0
package/CascadeTree/styles/index.less +77 -0
package/CascadeTree/styles/search.less +45 -0
package/Cascader/styles/index.css +187 -192
package/Cascader/styles/index.less +1 -122
package/MultiCascadeTree/package.json +7 -0
package/MultiCascadeTree/styles/index.css +3701 -0
package/MultiCascadeTree/styles/index.less +37 -0
package/MultiCascader/styles/index.css +72 -69
package/MultiCascader/styles/index.less +11 -31
package/cjs/@types/common.d.ts +12 -14
package/cjs/CascadeTree/CascadeTree.d.ts +16 -0
package/cjs/CascadeTree/CascadeTree.js +174 -0
package/cjs/CascadeTree/SearchView.d.ts +17 -0
package/cjs/CascadeTree/SearchView.js +106 -0
package/cjs/CascadeTree/TreeView.d.ts +20 -0
package/cjs/{Cascader → CascadeTree}/TreeView.js +42 -33
package/cjs/CascadeTree/hooks/index.d.ts +3 -0
package/cjs/CascadeTree/hooks/index.js +12 -0
package/cjs/{Cascader/utils.d.ts → CascadeTree/hooks/usePaths.d.ts} +3 -25
package/cjs/CascadeTree/hooks/usePaths.js +42 -0
package/cjs/CascadeTree/hooks/useSearch.d.ts +17 -0
package/cjs/CascadeTree/hooks/useSearch.js +59 -0
package/cjs/CascadeTree/hooks/useSelect.d.ts +23 -0
package/cjs/CascadeTree/hooks/useSelect.js +64 -0
package/cjs/CascadeTree/index.d.ts +4 -0
package/cjs/CascadeTree/index.js +9 -0
package/cjs/CascadeTree/types.d.ts +66 -0
package/cjs/CascadeTree/types.js +2 -0
package/cjs/CascadeTree/utils.d.ts +32 -0
package/cjs/CascadeTree/utils.js +66 -0
package/cjs/Cascader/Cascader.d.ts +57 -26
package/cjs/Cascader/Cascader.js +180 -247
package/cjs/Cascader/useActive.d.ts +15 -0
package/cjs/Cascader/useActive.js +43 -0
package/cjs/InlineEdit/InlineEdit.d.ts +1 -1
package/cjs/Loader/Loader.js +5 -4
package/cjs/MultiCascadeTree/MultiCascadeTree.d.ts +9 -0
package/cjs/MultiCascadeTree/MultiCascadeTree.js +131 -0
package/cjs/MultiCascadeTree/SearchView.d.ts +17 -0
package/cjs/MultiCascadeTree/SearchView.js +117 -0
package/cjs/MultiCascadeTree/TreeView.d.ts +22 -0
package/cjs/{MultiCascader → MultiCascadeTree}/TreeView.js +20 -20
package/cjs/MultiCascadeTree/hooks/index.d.ts +5 -0
package/cjs/MultiCascadeTree/hooks/index.js +16 -0
package/cjs/MultiCascadeTree/hooks/useCascadeValue.d.ts +18 -0
package/cjs/MultiCascadeTree/hooks/useCascadeValue.js +202 -0
package/cjs/MultiCascadeTree/hooks/useColumnData.d.ts +16 -0
package/cjs/MultiCascadeTree/hooks/useColumnData.js +52 -0
package/cjs/MultiCascadeTree/hooks/useFlattenData.d.ts +9 -0
package/cjs/MultiCascadeTree/hooks/useFlattenData.js +33 -0
package/cjs/MultiCascadeTree/hooks/useSearch.d.ts +17 -0
package/cjs/MultiCascadeTree/hooks/useSearch.js +52 -0
package/cjs/MultiCascadeTree/hooks/useSelect.d.ts +19 -0
package/cjs/MultiCascadeTree/hooks/useSelect.js +83 -0
package/cjs/MultiCascadeTree/index.d.ts +4 -0
package/cjs/MultiCascadeTree/index.js +9 -0
package/cjs/MultiCascadeTree/types.d.ts +26 -0
package/cjs/MultiCascadeTree/types.js +2 -0
package/cjs/MultiCascadeTree/utils.d.ts +37 -0
package/cjs/MultiCascadeTree/utils.js +140 -0
package/cjs/MultiCascader/MultiCascader.d.ts +57 -29
package/cjs/MultiCascader/MultiCascader.js +175 -287
package/cjs/Tree/Tree.d.ts +4 -4
package/cjs/index.d.ts +6 -1
package/cjs/index.js +8 -3
package/cjs/internals/Picker/PickerToggle.d.ts +4 -5
package/cjs/toaster/ToastContainer.d.ts +9 -2
package/cjs/toaster/index.d.ts +0 -1
package/cjs/toaster/index.js +1 -3
package/cjs/useToaster/index.d.ts +2 -0
package/cjs/useToaster/index.js +9 -0
package/cjs/{toaster → useToaster}/useToaster.d.ts +4 -4
package/cjs/{toaster → useToaster}/useToaster.js +4 -4
package/cjs/utils/index.d.ts +1 -0
package/cjs/utils/index.js +5 -2
package/dist/rsuite-no-reset-rtl.css +64 -61
package/dist/rsuite-no-reset-rtl.min.css +1 -1
package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
package/dist/rsuite-no-reset.css +64 -61
package/dist/rsuite-no-reset.min.css +1 -1
package/dist/rsuite-no-reset.min.css.map +1 -1
package/dist/rsuite-rtl.css +64 -61
package/dist/rsuite-rtl.min.css +1 -1
package/dist/rsuite-rtl.min.css.map +1 -1
package/dist/rsuite.css +64 -61
package/dist/rsuite.js +242 -44
package/dist/rsuite.js.map +1 -1
package/dist/rsuite.min.css +1 -1
package/dist/rsuite.min.css.map +1 -1
package/dist/rsuite.min.js +1 -1
package/dist/rsuite.min.js.map +1 -1
package/esm/@types/common.d.ts +12 -14
package/esm/CascadeTree/CascadeTree.d.ts +16 -0
package/esm/CascadeTree/CascadeTree.js +167 -0
package/esm/CascadeTree/SearchView.d.ts +17 -0
package/esm/CascadeTree/SearchView.js +100 -0
package/esm/CascadeTree/TreeView.d.ts +20 -0
package/esm/{Cascader → CascadeTree}/TreeView.js +42 -33
package/esm/CascadeTree/hooks/index.d.ts +3 -0
package/esm/CascadeTree/hooks/index.js +4 -0
package/esm/{Cascader/utils.d.ts → CascadeTree/hooks/usePaths.d.ts} +3 -25
package/esm/CascadeTree/hooks/usePaths.js +36 -0
package/esm/CascadeTree/hooks/useSearch.d.ts +17 -0
package/esm/CascadeTree/hooks/useSearch.js +54 -0
package/esm/CascadeTree/hooks/useSelect.d.ts +23 -0
package/esm/CascadeTree/hooks/useSelect.js +59 -0
package/esm/CascadeTree/index.d.ts +4 -0
package/esm/CascadeTree/index.js +3 -0
package/esm/CascadeTree/types.d.ts +66 -0
package/esm/CascadeTree/types.js +1 -0
package/esm/CascadeTree/utils.d.ts +32 -0
package/esm/CascadeTree/utils.js +61 -0
package/esm/Cascader/Cascader.d.ts +57 -26
package/esm/Cascader/Cascader.js +167 -233
package/esm/Cascader/useActive.d.ts +15 -0
package/esm/Cascader/useActive.js +37 -0
package/esm/InlineEdit/InlineEdit.d.ts +1 -1
package/esm/Loader/Loader.js +6 -5
package/esm/MultiCascadeTree/MultiCascadeTree.d.ts +9 -0
package/esm/MultiCascadeTree/MultiCascadeTree.js +125 -0
package/esm/MultiCascadeTree/SearchView.d.ts +17 -0
package/esm/MultiCascadeTree/SearchView.js +111 -0
package/esm/MultiCascadeTree/TreeView.d.ts +22 -0
package/esm/{MultiCascader → MultiCascadeTree}/TreeView.js +20 -20
package/esm/MultiCascadeTree/hooks/index.d.ts +5 -0
package/esm/MultiCascadeTree/hooks/index.js +6 -0
package/esm/MultiCascadeTree/hooks/useCascadeValue.d.ts +18 -0
package/esm/MultiCascadeTree/hooks/useCascadeValue.js +197 -0
package/esm/MultiCascadeTree/hooks/useColumnData.d.ts +16 -0
package/esm/MultiCascadeTree/hooks/useColumnData.js +46 -0
package/esm/MultiCascadeTree/hooks/useFlattenData.d.ts +9 -0
package/esm/MultiCascadeTree/hooks/useFlattenData.js +28 -0
package/esm/MultiCascadeTree/hooks/useSearch.d.ts +17 -0
package/esm/MultiCascadeTree/hooks/useSearch.js +47 -0
package/esm/MultiCascadeTree/hooks/useSelect.d.ts +19 -0
package/esm/MultiCascadeTree/hooks/useSelect.js +77 -0
package/esm/MultiCascadeTree/index.d.ts +4 -0
package/esm/MultiCascadeTree/index.js +3 -0
package/esm/MultiCascadeTree/types.d.ts +26 -0
package/esm/MultiCascadeTree/types.js +1 -0
package/esm/MultiCascadeTree/utils.d.ts +37 -0
package/esm/MultiCascadeTree/utils.js +130 -0
package/esm/MultiCascader/MultiCascader.d.ts +57 -29
package/esm/MultiCascader/MultiCascader.js +168 -279
package/esm/Tree/Tree.d.ts +4 -4
package/esm/index.d.ts +6 -1
package/esm/index.js +5 -1
package/esm/internals/Picker/PickerToggle.d.ts +4 -5
package/esm/toaster/ToastContainer.d.ts +9 -2
package/esm/toaster/index.d.ts +0 -1
package/esm/toaster/index.js +0 -1
package/esm/useToaster/index.d.ts +2 -0
package/esm/useToaster/index.js +3 -0
package/esm/{toaster → useToaster}/useToaster.d.ts +4 -4
package/esm/{toaster → useToaster}/useToaster.js +4 -4
package/esm/utils/index.d.ts +1 -0
package/esm/utils/index.js +2 -1
package/package.json +1 -1
package/styles/index.less +2 -0
package/useToaster/package.json +7 -0
package/useToaster/styles/index.css +239 -0
package/useToaster/styles/index.less +1 -0
package/cjs/Cascader/DropdownMenu.d.ts +0 -24
package/cjs/Cascader/DropdownMenu.js +0 -175
package/cjs/Cascader/TreeView.d.ts +0 -24
package/cjs/Cascader/utils.js +0 -79
package/cjs/MultiCascader/TreeView.d.ts +0 -25
package/cjs/MultiCascader/utils.d.ts +0 -71
package/cjs/MultiCascader/utils.js +0 -382
package/esm/Cascader/DropdownMenu.d.ts +0 -24
package/esm/Cascader/DropdownMenu.js +0 -168
package/esm/Cascader/TreeView.d.ts +0 -24
package/esm/Cascader/utils.js +0 -74
package/esm/MultiCascader/TreeView.d.ts +0 -25
package/esm/MultiCascader/utils.d.ts +0 -71
package/esm/MultiCascader/utils.js +0 -369

package/esm/@types/common.d.ts CHANGED Viewed

@@ -35,10 +35,10 @@ export interface AnimationEventProps {
     onExited?: (node: HTMLElement) => void;
 }
 export declare type PickerAppearance = 'default' | 'subtle';
-export interface PickerBaseProps<LocaleType = any> extends WithAsProps, AnimationEventProps {
+export interface PickerBaseProps<L = any> extends WithAsProps, AnimationEventProps {
     id?: string;
     /** Custom locale */
-    locale?: Partial<LocaleType>;
+    locale?: Partial<L>;
     /** A picker can have different appearances. */
     appearance?: PickerAppearance;
     /** Format picker to appear inside a content block */
@@ -108,24 +108,22 @@ export interface FormControlBaseProps<ValueType = React.InputHTMLAttributes<HTML
     /** Make the control readonly */
     readOnly?: boolean;
 }
-declare type ToArray<V> = V extends any[] ? V : V[];
-export interface FormControlPickerProps<ValueType = any, LocaleType = any, DataType = Record<string, any>> extends PickerBaseProps<LocaleType>, FormControlBaseProps<ValueType> {
+export declare type ToArray<V> = V extends any[] ? V : V[];
+export interface DataProps<TData> {
     /** The data of component */
-    data: DataType[];
+    data: TData[];
     /** Set option value 'key' in 'data' */
     valueKey?: string;
     /** Set options to display the 'key' in 'data' */
     labelKey?: string;
     /** Set children key in data */
     childrenKey?: string;
-    /** Disabled items */
-    disabledItemValues?: ToArray<NonNullable<ValueType>>;
-    /** Initial value */
-    defaultValue?: ValueType;
-    /** Current value of the component. Creates a controlled component */
-    value?: ValueType;
-    /** Called after the value has been changed */
-    onChange?: (value: ValueType, event: React.SyntheticEvent) => void;
+}
+export interface FormControlPickerProps<T = any, L = any, D = Record<string, any>, I = T> extends PickerBaseProps<L>, FormControlBaseProps<T>, DataProps<D> {
+    /**
+     * Disabled items
+     */
+    disabledItemValues?: ToArray<NonNullable<I>>;
 }
 export declare namespace TypeAttributes {
     type Size = 'lg' | 'md' | 'sm' | 'xs';
@@ -150,6 +148,7 @@ export interface ItemDataType<T = number | string> extends Record<string, any> {
     children?: ItemDataType<T>[];
     loading?: boolean;
 }
+export declare type DataItemValue = number | string | null;
 export interface Offset {
     top: number;
     left: number;
@@ -163,4 +162,3 @@ export declare type CursorPosition = {
     clientTop: number;
     clientLeft: number;
 };
-export {};

package/esm/CascadeTree/CascadeTree.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CascadeTreeProps } from './types';
+export interface CascadeTreeComponent {
+    <T>(props: CascadeTreeProps<T> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }): JSX.Element | null;
+    displayName?: string;
+    propTypes?: React.WeakValidationMap<CascadeTreeProps<any>>;
+}
+/**
+ * CascadeTree is a component that displays tree-structured data in columns.
+ *
+ * @see https://rsuitejs.com/components/cascade-tree
+ */
+declare const CascadeTree: CascadeTreeComponent;
+export default CascadeTree;

package/esm/CascadeTree/CascadeTree.js ADDED Viewed

@@ -0,0 +1,167 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useCallback, useMemo } from 'react';
+import { getParentMap, flattenTree } from '../utils/treeUtils';
+import { useControlled, useClassNames, useEventCallback } from '../utils';
+import { useMap } from '../utils/useMap';
+import TreeView from './TreeView';
+import SearchView from './SearchView';
+import { useSearch, useSelect, usePaths } from './hooks';
+/**
+ * CascadeTree is a component that displays tree-structured data in columns.
+ *
+ * @see https://rsuitejs.com/components/cascade-tree
+ */
+var CascadeTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    defaultValue = props.defaultValue,
+    className = props.className,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'cascade-tree' : _props$classPrefix,
+    _props$childrenKey = props.childrenKey,
+    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
+    _props$valueKey = props.valueKey,
+    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
+    _props$labelKey = props.labelKey,
+    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+    valueProp = props.value,
+    _props$disabledItemVa = props.disabledItemValues,
+    disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,
+    columnWidth = props.columnWidth,
+    columnHeight = props.columnHeight,
+    searchable = props.searchable,
+    renderTreeNode = props.renderTreeNode,
+    renderColumn = props.renderColumn,
+    onSelect = props.onSelect,
+    onSearch = props.onSearch,
+    onChange = props.onChange,
+    getChildren = props.getChildren,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "data", "defaultValue", "className", "classPrefix", "childrenKey", "valueKey", "labelKey", "value", "disabledItemValues", "columnWidth", "columnHeight", "searchable", "renderTreeNode", "renderColumn", "onSelect", "onSearch", "onChange", "getChildren"]);
+  var _ref = useControlled(valueProp, defaultValue),
+    value = _ref[0],
+    setValue = _ref[1]; // Store the children of each node
+  var childrenMap = useMap();
+  // Store the parent of each node
+  var parentMap = useMemo(function () {
+    return getParentMap(data, function (item) {
+      var _childrenMap$get;
+      return (_childrenMap$get = childrenMap.get(item)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : item[childrenKey];
+    });
+  }, [childrenMap, childrenKey, data]);
+  // Flatten the tree data
+  var flattenedData = useMemo(function () {
+    return flattenTree(data, function (item) {
+      var _childrenMap$get2;
+      return (_childrenMap$get2 = childrenMap.get(item)) !== null && _childrenMap$get2 !== void 0 ? _childrenMap$get2 : item[childrenKey];
+    });
+  }, [childrenMap, childrenKey, data]);
+  // The selected item
+  var selectedItem = flattenedData.find(function (item) {
+    return item[valueKey] === value;
+  });
+  // Callback function after selecting the node
+  var onSelectCallback = function onSelectCallback(node, event) {
+    var isLeafNode = node.isLeafNode,
+      cascadePaths = node.cascadePaths,
+      itemData = node.itemData;
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(itemData, cascadePaths, event);
+    if (isLeafNode) {
+      var nextValue = itemData[valueKey];
+      setValue(nextValue);
+    }
+  };
+  var _useSelect = useSelect({
+      value: value,
+      valueKey: valueKey,
+      childrenKey: childrenKey,
+      childrenMap: childrenMap,
+      selectedItem: selectedItem,
+      getChildren: getChildren,
+      onChange: onChange,
+      onSelect: onSelectCallback
+    }),
+    activeItem = _useSelect.activeItem,
+    loadingItemsSet = _useSelect.loadingItemsSet,
+    handleSelect = _useSelect.handleSelect;
+  var _usePaths = usePaths({
+      data: data,
+      activeItem: activeItem,
+      selectedItem: selectedItem,
+      getParent: function getParent(item) {
+        return parentMap.get(item);
+      },
+      getChildren: function getChildren(item) {
+        var _childrenMap$get3;
+        return (_childrenMap$get3 = childrenMap.get(item)) !== null && _childrenMap$get3 !== void 0 ? _childrenMap$get3 : item[childrenKey];
+      }
+    }),
+    columns = _usePaths.columns,
+    pathTowardsActiveItem = _usePaths.pathTowardsActiveItem;
+  var _useClassNames = useClassNames(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge;
+  var classes = merge(className, withClassPrefix());
+  var onSearchCallback = useCallback(function (value, _items, event) {
+    return onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);
+  }, [onSearch]);
+  var _useSearch = useSearch({
+      labelKey: labelKey,
+      childrenKey: childrenKey,
+      parentMap: parentMap,
+      flattenedData: flattenedData,
+      onSearch: onSearchCallback
+    }),
+    items = _useSearch.items,
+    searchKeyword = _useSearch.searchKeyword,
+    setSearchKeyword = _useSearch.setSearchKeyword,
+    handleSearch = _useSearch.handleSearch;
+  var handleSearchRowSelect = useEventCallback(function (item, items, event) {
+    var _item$childrenKey;
+    var node = {
+      itemData: item,
+      cascadePaths: items,
+      isLeafNode: !((_item$childrenKey = item[childrenKey]) !== null && _item$childrenKey !== void 0 && _item$childrenKey.length)
+    };
+    handleSelect(node, event);
+    setSearchKeyword('');
+  });
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: classes
+  }, rest, {
+    ref: ref
+  }), searchable && /*#__PURE__*/React.createElement(SearchView, {
+    data: items,
+    searchKeyword: searchKeyword,
+    valueKey: valueKey,
+    labelKey: labelKey,
+    parentMap: parentMap,
+    disabledItemValues: disabledItemValues,
+    onSelect: handleSearchRowSelect,
+    onSearch: handleSearch
+  }), !searchKeyword && /*#__PURE__*/React.createElement(TreeView, {
+    columnWidth: columnWidth,
+    columnHeight: columnHeight,
+    disabledItemValues: disabledItemValues,
+    loadingItemsSet: loadingItemsSet,
+    valueKey: valueKey,
+    labelKey: labelKey,
+    childrenKey: childrenKey,
+    classPrefix: classPrefix,
+    data: columns,
+    cascadePaths: pathTowardsActiveItem,
+    activeItemValue: value,
+    onSelect: handleSelect,
+    renderColumn: renderColumn,
+    renderTreeNode: renderTreeNode
+  }));
+});
+CascadeTree.displayName = 'CascadeTree';
+export default CascadeTree;

package/esm/CascadeTree/SearchView.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ItemDataType, WithAsProps } from '../@types/common';
+interface SearchViewProps<T> extends WithAsProps {
+    searchKeyword: string;
+    labelKey: string;
+    valueKey: string;
+    parentMap: WeakMap<ItemDataType<T>, ItemDataType<T>>;
+    data: ItemDataType<T>[];
+    focusItemValue?: T | null;
+    disabledItemValues: any[];
+    renderSearchItem?: (label: React.ReactNode, items: ItemDataType<T>[]) => React.ReactNode;
+    onSelect: (item: ItemDataType<T>, items: ItemDataType<T>[], event: React.MouseEvent) => void;
+    onSearch: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    inputRef?: React.RefObject<HTMLInputElement>;
+}
+declare function SearchView<T>(props: SearchViewProps<T>): JSX.Element;
+export default SearchView;

package/esm/CascadeTree/SearchView.js ADDED Viewed

@@ -0,0 +1,100 @@
+'use client';
+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 { getPathTowardsItem } from '../utils/treeUtils';
+import { highlightLabel } from './utils';
+import SearchBox from '../internals/SearchBox';
+function SearchView(props) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'cascade-search-view' : _props$classPrefix,
+    className = props.className,
+    searchKeyword = props.searchKeyword,
+    labelKey = props.labelKey,
+    valueKey = props.valueKey,
+    parentMap = props.parentMap,
+    data = props.data,
+    focusItemValue = props.focusItemValue,
+    disabledItemValues = props.disabledItemValues,
+    inputRef = props.inputRef,
+    renderSearchItem = props.renderSearchItem,
+    onSearch = props.onSearch,
+    onSelect = props.onSelect,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "searchKeyword", "labelKey", "valueKey", "parentMap", "data", "focusItemValue", "disabledItemValues", "inputRef", "renderSearchItem", "onSearch", "onSelect"]);
+  var _useClassNames = useClassNames(classPrefix),
+    merge = _useClassNames.merge,
+    prefix = _useClassNames.prefix,
+    withClassPrefix = _useClassNames.withClassPrefix,
+    rootPrefix = _useClassNames.rootPrefix;
+  var classes = merge(className, withClassPrefix());
+  var _useCustom = useCustom('Picker'),
+    locale = _useCustom.locale;
+  var renderSearchRow = function renderSearchRow(item, key) {
+    var items = getPathTowardsItem(item, function (item) {
+      return parentMap.get(item);
+    });
+    var formattedNodes = items.map(function (itemData) {
+      var _extends2;
+      var label = highlightLabel({
+        item: itemData,
+        labelKey: labelKey,
+        searchKeyword: searchKeyword,
+        render: function render(patch, index) {
+          return /*#__PURE__*/React.createElement("span", {
+            key: index,
+            className: prefix('match')
+          }, patch);
+        }
+      });
+      return _extends({}, itemData, (_extends2 = {}, _extends2[labelKey] = label, _extends2));
+    });
+    var disabled = disabledItemValues.some(function (value) {
+      return formattedNodes.some(function (itemData) {
+        return itemData[valueKey] === value;
+      });
+    });
+    var itemClasses = prefix('row', {
+      'row-disabled': disabled,
+      'row-focus': item[valueKey] === focusItemValue
+    });
+    var label = formattedNodes.map(function (itemData, index) {
+      return /*#__PURE__*/React.createElement("span", {
+        key: "col-" + index,
+        className: prefix('col')
+      }, itemData[labelKey]);
+    });
+    var handleCheck = function handleCheck(event) {
+      if (!disabled) {
+        onSelect(item, items, event);
+      }
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      role: "treeitem",
+      "aria-disabled": disabled,
+      "aria-label": item[labelKey],
+      key: key,
+      "data-key": item[valueKey],
+      className: itemClasses,
+      tabIndex: -1,
+      onClick: handleCheck
+    }, renderSearchItem ? renderSearchItem(label, items) : label);
+  };
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: classes
+  }, rest), /*#__PURE__*/React.createElement(SearchBox, {
+    placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
+    onChange: onSearch,
+    value: searchKeyword,
+    inputRef: inputRef
+  }), searchKeyword !== '' && /*#__PURE__*/React.createElement("div", {
+    className: prefix('panel'),
+    "data-layer": 0,
+    role: "tree"
+  }, data.length ? data.map(renderSearchRow) : /*#__PURE__*/React.createElement("div", {
+    className: merge(prefix('none'), rootPrefix('picker-none'))
+  }, locale.noResultsText)));
+}
+export default SearchView;

package/esm/CascadeTree/TreeView.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ItemDataType, WithAsProps, RsRefForwardingComponent, DataProps, ToArray } from '../@types/common';
+import { SelectNode, CascadeColumn } from './types';
+declare type SetLike<T = unknown> = {
+    has(value: T): boolean;
+};
+export interface TreeViewProps<T = any> extends WithAsProps, Omit<DataProps<ItemDataType<T>>, 'data'> {
+    data?: (readonly ItemDataType<T>[])[];
+    disabledItemValues?: ToArray<NonNullable<T>>;
+    activeItemValue?: T | null;
+    loadingItemsSet?: SetLike<ItemDataType<T>>;
+    cascadePaths?: ItemDataType<T>[];
+    columnWidth?: number;
+    columnHeight?: number | string;
+    renderTreeNode?: (node: React.ReactNode, itemData: ItemDataType<T>) => React.ReactNode;
+    renderColumn?: (childNodes: React.ReactNode, column: CascadeColumn<T>) => React.ReactNode;
+    onSelect?: (node: SelectNode<T>, event: React.MouseEvent) => void;
+}
+declare const TreeView: RsRefForwardingComponent<'div', TreeViewProps>;
+export default TreeView;

package/esm/{Cascader → CascadeTree}/TreeView.js RENAMED Viewed

@@ -16,30 +16,31 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     activeItemValue = props.activeItemValue,
-    classPrefix = props.classPrefix,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'tree' : _props$classPrefix,
     className = props.className,
     _props$childrenKey = props.childrenKey,
     childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
     _props$disabledItemVa = props.disabledItemValues,
     disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
-    _props$menuWidth = props.menuWidth,
-    menuWidth = _props$menuWidth === void 0 ? 120 : _props$menuWidth,
-    _props$menuHeight = props.menuHeight,
-    menuHeight = _props$menuHeight === void 0 ? 200 : _props$menuHeight,
+    _props$columnWidth = props.columnWidth,
+    columnWidth = _props$columnWidth === void 0 ? 140 : _props$columnWidth,
+    _props$columnHeight = props.columnHeight,
+    columnHeight = _props$columnHeight === void 0 ? 200 : _props$columnHeight,
     _props$valueKey = props.valueKey,
     valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
-    _props$cascadeData = props.cascadeData,
-    cascadeData = _props$cascadeData === void 0 ? emptyArray : _props$cascadeData,
+    _props$data = props.data,
+    data = _props$data === void 0 ? emptyArray : _props$data,
     _props$cascadePaths = props.cascadePaths,
     cascadePaths = _props$cascadePaths === void 0 ? emptyArray : _props$cascadePaths,
     loadingItemsSet = props.loadingItemsSet,
     _props$labelKey = props.labelKey,
     labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
     style = props.style,
-    renderMenu = props.renderMenu,
-    renderMenuItem = props.renderMenuItem,
+    renderColumn = props.renderColumn,
+    renderTreeNode = props.renderTreeNode,
     onSelect = props.onSelect,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "activeItemValue", "classPrefix", "className", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "valueKey", "cascadeData", "cascadePaths", "loadingItemsSet", "labelKey", "style", "renderMenu", "renderMenuItem", "onSelect"]);
+    rest = _objectWithoutPropertiesLoose(props, ["as", "activeItemValue", "classPrefix", "className", "childrenKey", "disabledItemValues", "columnWidth", "columnHeight", "valueKey", "data", "cascadePaths", "loadingItemsSet", "labelKey", "style", "renderColumn", "renderTreeNode", "onSelect"]);
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
@@ -73,7 +74,7 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [prefix]);
   var getCascadePaths = function getCascadePaths(layer, node) {
     var paths = [];
-    for (var i = 0; i < cascadeData.length && i < layer; i += 1) {
+    for (var i = 0; i < data.length && i < layer; i += 1) {
       if (i < layer - 1 && cascadePaths) {
         paths.push(cascadePaths[i]);
       }
@@ -81,25 +82,29 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
     paths.push(node);
     return paths;
   };
-  var handleSelect = useEventCallback(function (layer, node, event) {
-    var isLeafNode = isNil(node[childrenKey]);
-    var cascadePaths = getCascadePaths(layer + 1, node);
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, isLeafNode, event);
+  var handleSelect = useEventCallback(function (layer, itemData, event) {
+    var isLeafNode = isNil(itemData[childrenKey]);
+    var cascadePaths = getCascadePaths(layer + 1, itemData);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect({
+      itemData: itemData,
+      cascadePaths: cascadePaths,
+      isLeafNode: isLeafNode
+    }, event);
   });
   var renderCascadeNode = function renderCascadeNode(nodeProps) {
     var _loadingItemsSet$has;
-    var node = nodeProps.node,
+    var itemData = nodeProps.itemData,
       index = nodeProps.index,
       layer = nodeProps.layer,
       focus = nodeProps.focus,
       size = nodeProps.size;
-    var children = node[childrenKey];
-    var value = node[valueKey];
-    var label = node[labelKey];
+    var children = itemData[childrenKey];
+    var value = itemData[valueKey];
+    var label = itemData[labelKey];
     var disabled = disabledItemValues.some(function (disabledValue) {
       return shallowEqual(disabledValue, value);
     });
-    var loading = (_loadingItemsSet$has = loadingItemsSet === null || loadingItemsSet === void 0 ? void 0 : loadingItemsSet.has(node)) !== null && _loadingItemsSet$has !== void 0 ? _loadingItemsSet$has : false;
+    var loading = (_loadingItemsSet$has = loadingItemsSet === null || loadingItemsSet === void 0 ? void 0 : loadingItemsSet.has(itemData)) !== null && _loadingItemsSet$has !== void 0 ? _loadingItemsSet$has : false;
     // Use `value` in keys when If `value` is string or number
     var onlyKey = typeof value === 'number' || typeof value === 'string' ? value : index;
@@ -111,7 +116,7 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
       "aria-setsize": size,
       "aria-posinset": index + 1,
       "aria-label": typeof label === 'string' ? label : undefined,
-      classPrefix: "picker-cascader-menu-item",
+      classPrefix: "cascade-tree-item",
       key: layer + "-" + onlyKey,
       disabled: disabled,
       active: !isUndefined(activeItemValue) && shallowEqual(activeItemValue, value),
@@ -119,21 +124,21 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
       value: value,
       className: children ? prefix('has-children') : undefined,
       onSelect: function onSelect(_value, event) {
-        return handleSelect(layer, node, event);
+        return handleSelect(layer, itemData, event);
       }
-    }, renderMenuItem ? renderMenuItem(label, node) : label, children ? /*#__PURE__*/React.createElement(Icon, {
+    }, renderTreeNode ? renderTreeNode(label, itemData) : label, children ? /*#__PURE__*/React.createElement(Icon, {
       className: prefix('caret'),
       spin: loading,
       "data-testid": "spinner"
     }) : null);
   };
-  var cascadeNodes = cascadeData.map(function (children, layer) {
+  var cascadeNodes = data.map(function (children, layer) {
     var onlyKey = layer + "_" + children.length;
-    var parentNode = cascadePaths[layer - 1];
-    var menu = /*#__PURE__*/React.createElement(React.Fragment, null, children.map(function (item, index) {
-      var focus = cascadePaths[layer] && shallowEqual(cascadePaths[layer][valueKey], item[valueKey]);
+    var parentItem = cascadePaths[layer - 1];
+    var childNodes = /*#__PURE__*/React.createElement(React.Fragment, null, children.map(function (itemData, index) {
+      var focus = cascadePaths[layer] && shallowEqual(cascadePaths[layer][valueKey], itemData[valueKey]);
       return renderCascadeNode({
-        node: item,
+        itemData: itemData,
         index: index,
         layer: layer,
         focus: focus,
@@ -147,17 +152,21 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
       key: onlyKey,
       className: prefix('column'),
       style: {
-        height: menuHeight,
-        width: menuWidth
+        height: columnHeight,
+        width: columnWidth
       }
-    }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);
+    }, renderColumn ? renderColumn(childNodes, {
+      items: children,
+      parentItem: parentItem,
+      layer: layer
+    }) : childNodes);
   });
   var styles = _extends({}, style, {
-    width: cascadeData.length * menuWidth
+    width: data.length * columnWidth
   });
   return /*#__PURE__*/React.createElement(Component, _extends({
     role: "tree",
-    id: id + "-" + popupType,
+    id: id ? id + "-" + popupType : undefined,
     "aria-labelledby": labelId
   }, rest, {
     ref: mergeRefs(rootRef, ref),

package/esm/CascadeTree/hooks/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { default as usePaths } from './usePaths';
+export { default as useSelect } from './useSelect';
+export { default as useSearch } from './useSearch';

package/esm/CascadeTree/hooks/index.js ADDED Viewed

@@ -0,0 +1,4 @@
+'use client';
+export { default as usePaths } from './usePaths';
+export { default as useSelect } from './useSelect';
+export { default as useSearch } from './useSearch';

package/esm/{Cascader/utils.d.ts → CascadeTree/hooks/usePaths.d.ts} RENAMED Viewed

@@ -1,23 +1,3 @@
-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[];
-};
 declare type UsePathsParams<T> = {
     data: T[];
     /**
@@ -32,18 +12,16 @@ declare type UsePathsParams<T> = {
     getChildren: (item: T) => readonly T[] | undefined;
 };
 /**
- * Caculate following 3 things
+ * A Hook to get the selected path of Tree.
  *
  * - The columns of items to be displayed
  * - The path towards the current focused item
  * - The path towards the current selected item (referred to by Cascader's value)
  *
- * @param params
- * @returns
  */
 export declare function usePaths<T extends Record<string, unknown>>({ data, activeItem, selectedItem, getParent, getChildren }: UsePathsParams<T>): {
-    columnsToDisplay: (readonly T[])[];
+    columns: (readonly T[])[];
     pathTowardsSelectedItem: T[];
     pathTowardsActiveItem: T[];
 };
-export {};
+export default usePaths;

package/esm/CascadeTree/hooks/usePaths.js ADDED Viewed

@@ -0,0 +1,36 @@
+'use client';
+import { useMemo } from 'react';
+import { getPathTowardsItem } from '../../utils/treeUtils';
+import { getColumnsAndPaths } from '../utils';
+/**
+ * A Hook to get the selected path of Tree.
+ *
+ * - The columns of items to be displayed
+ * - The path towards the current focused item
+ * - The path towards the current selected item (referred to by Cascader's value)
+ *
+ */
+export function usePaths(_ref) {
+  var data = _ref.data,
+    activeItem = _ref.activeItem,
+    selectedItem = _ref.selectedItem,
+    getParent = _ref.getParent,
+    getChildren = _ref.getChildren;
+  var pathTowardsSelectedItem = useMemo(function () {
+    return getPathTowardsItem(selectedItem, getParent);
+  }, [getParent, selectedItem]);
+  var _useMemo = useMemo(function () {
+      return getColumnsAndPaths(data, activeItem, {
+        getParent: getParent,
+        getChildren: getChildren
+      });
+    }, [data, activeItem, getParent, getChildren]),
+    columns = _useMemo.columns,
+    pathTowardsActiveItem = _useMemo.path;
+  return {
+    columns: columns,
+    pathTowardsSelectedItem: pathTowardsSelectedItem,
+    pathTowardsActiveItem: pathTowardsActiveItem
+  };
+}
+export default usePaths;

package/esm/CascadeTree/hooks/useSearch.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ItemDataType } from '../../@types/common';
+interface SearchPanelProps<T> {
+    labelKey: string;
+    childrenKey: string;
+    parentMap: WeakMap<ItemDataType<T>, ItemDataType<T>>;
+    flattenedData: ItemDataType<T>[];
+    parentSelectable?: boolean;
+    onSearch: (value: string, items: ItemDataType<T>[], event: React.SyntheticEvent) => void;
+}
+declare function useSearch<T>(props: SearchPanelProps<T>): {
+    searchKeyword: string;
+    setSearchKeyword: import("react").Dispatch<import("react").SetStateAction<string>>;
+    items: ItemDataType<T>[];
+    handleSearch: (...args: any[]) => any;
+};
+export default useSearch;