rsuite 5.56.0 → 5.58.0

package/cjs/CascadeTree/SearchView.js

@@ -0,0 +1,106 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("../utils");
+var _treeUtils = require("../utils/treeUtils");
+var _utils2 = require("./utils");
+var _SearchBox = _interopRequireDefault(require("../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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "searchKeyword", "labelKey", "valueKey", "parentMap", "data", "focusItemValue", "disabledItemValues", "inputRef", "renderSearchItem", "onSearch", "onSelect"]);
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+    merge = _useClassNames.merge,
+    prefix = _useClassNames.prefix,
+    withClassPrefix = _useClassNames.withClassPrefix,
+    rootPrefix = _useClassNames.rootPrefix;
+  var classes = merge(className, withClassPrefix());
+  var _useCustom = (0, _utils.useCustom)('Picker'),
+    locale = _useCustom.locale;
+  var renderSearchRow = function renderSearchRow(item, key) {
+    var items = (0, _treeUtils.getPathTowardsItem)(item, function (item) {
+      return parentMap.get(item);
+    });
+    var formattedNodes = items.map(function (itemData) {
+      var _extends2;
+      var label = (0, _utils2.highlightLabel)({
+        item: itemData,
+        labelKey: labelKey,
+        searchKeyword: searchKeyword,
+        render: function render(patch, index) {
+          return /*#__PURE__*/_react.default.createElement("span", {
+            key: index,
+            className: prefix('match')
+          }, patch);
+        }
+      });
+      return (0, _extends3.default)({}, 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.default.createElement("span", {
+        key: "col-" + index,
+        className: prefix('col')
+      }, itemData[labelKey]);
+    });
+    var handleCheck = function handleCheck(event) {
+      if (!disabled) {
+        onSelect(item, items, event);
+      }
+    };
+    return /*#__PURE__*/_react.default.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.default.createElement(Component, (0, _extends3.default)({
+    className: classes
+  }, rest), /*#__PURE__*/_react.default.createElement(_SearchBox.default, {
+    placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
+    onChange: onSearch,
+    value: searchKeyword,
+    inputRef: inputRef
+  }), searchKeyword !== '' && /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix('panel'),
+    "data-layer": 0,
+    role: "tree"
+  }, data.length ? data.map(renderSearchRow) : /*#__PURE__*/_react.default.createElement("div", {
+    className: merge(prefix('none'), rootPrefix('picker-none'))
+  }, locale.noResultsText)));
+}
+var _default = SearchView;
+exports.default = _default;

package/cjs/CascadeTree/TreeView.d.ts

@@ -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/cjs/{Cascader → CascadeTree}/TreeView.js

@@ -22,30 +22,31 @@ var TreeView = /*#__PURE__*/_react.default.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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "activeItemValue", "classPrefix", "className", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "valueKey", "cascadeData", "cascadePaths", "loadingItemsSet", "labelKey", "style", "renderMenu", "renderMenuItem", "onSelect"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "activeItemValue", "classPrefix", "className", "childrenKey", "disabledItemValues", "columnWidth", "columnHeight", "valueKey", "data", "cascadePaths", "loadingItemsSet", "labelKey", "style", "renderColumn", "renderTreeNode", "onSelect"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
@@ -79,7 +80,7 @@ var TreeView = /*#__PURE__*/_react.default.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]);
       }
@@ -87,25 +88,29 @@ var TreeView = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     paths.push(node);
     return paths;
   };
-  var handleSelect = (0, _utils.useEventCallback)(function (layer, node, event) {
-    var isLeafNode = (0, _isNil.default)(node[childrenKey]);
-    var cascadePaths = getCascadePaths(layer + 1, node);
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, isLeafNode, event);
+  var handleSelect = (0, _utils.useEventCallback)(function (layer, itemData, event) {
+    var isLeafNode = (0, _isNil.default)(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 (0, _utils.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;
@@ -117,7 +122,7 @@ var TreeView = /*#__PURE__*/_react.default.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: !(0, _isUndefined.default)(activeItemValue) && (0, _utils.shallowEqual)(activeItemValue, value),
@@ -125,21 +130,21 @@ var TreeView = /*#__PURE__*/_react.default.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.default.createElement(Icon, {
+    }, renderTreeNode ? renderTreeNode(label, itemData) : label, children ? /*#__PURE__*/_react.default.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.default.createElement(_react.default.Fragment, null, children.map(function (item, index) {
-      var focus = cascadePaths[layer] && (0, _utils.shallowEqual)(cascadePaths[layer][valueKey], item[valueKey]);
+    var parentItem = cascadePaths[layer - 1];
+    var childNodes = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.map(function (itemData, index) {
+      var focus = cascadePaths[layer] && (0, _utils.shallowEqual)(cascadePaths[layer][valueKey], itemData[valueKey]);
       return renderCascadeNode({
-        node: item,
+        itemData: itemData,
         index: index,
         layer: layer,
         focus: focus,
@@ -153,17 +158,21 @@ var TreeView = /*#__PURE__*/_react.default.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 = (0, _extends2.default)({}, style, {
-    width: cascadeData.length * menuWidth
+    width: data.length * columnWidth
   });
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     role: "tree",
-    id: id + "-" + popupType,
+    id: id ? id + "-" + popupType : undefined,
     "aria-labelledby": labelId
   }, rest, {
     ref: (0, _utils.mergeRefs)(rootRef, ref),

package/cjs/CascadeTree/hooks/index.d.ts

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

package/cjs/CascadeTree/hooks/index.js

@@ -0,0 +1,12 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.useSearch = exports.useSelect = exports.usePaths = void 0;
+var _usePaths = _interopRequireDefault(require("./usePaths"));
+exports.usePaths = _usePaths.default;
+var _useSelect = _interopRequireDefault(require("./useSelect"));
+exports.useSelect = _useSelect.default;
+var _useSearch = _interopRequireDefault(require("./useSearch"));
+exports.useSearch = _useSearch.default;

package/cjs/{Cascader/utils.d.ts → CascadeTree/hooks/usePaths.d.ts}

@@ -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/cjs/CascadeTree/hooks/usePaths.js

@@ -0,0 +1,42 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.usePaths = usePaths;
+exports.default = void 0;
+var _react = require("react");
+var _treeUtils = require("../../utils/treeUtils");
+var _utils = require("../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)
+ *
+ */
+function usePaths(_ref) {
+  var data = _ref.data,
+    activeItem = _ref.activeItem,
+    selectedItem = _ref.selectedItem,
+    getParent = _ref.getParent,
+    getChildren = _ref.getChildren;
+  var pathTowardsSelectedItem = (0, _react.useMemo)(function () {
+    return (0, _treeUtils.getPathTowardsItem)(selectedItem, getParent);
+  }, [getParent, selectedItem]);
+  var _useMemo = (0, _react.useMemo)(function () {
+      return (0, _utils.getColumnsAndPaths)(data, activeItem, {
+        getParent: getParent,
+        getChildren: getChildren
+      });
+    }, [data, activeItem, getParent, getChildren]),
+    columns = _useMemo.columns,
+    pathTowardsActiveItem = _useMemo.path;
+  return {
+    columns: columns,
+    pathTowardsSelectedItem: pathTowardsSelectedItem,
+    pathTowardsActiveItem: pathTowardsActiveItem
+  };
+}
+var _default = usePaths;
+exports.default = _default;

package/cjs/CascadeTree/hooks/useSearch.d.ts

@@ -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;

package/cjs/CascadeTree/hooks/useSearch.js

@@ -0,0 +1,59 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _utils = require("../../utils");
+function useSearch(props) {
+  var _useState = (0, _react.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((0, _utils.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 = (0, _utils.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
+  };
+}
+var _default = useSearch;
+exports.default = _default;

package/cjs/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/cjs/CascadeTree/hooks/useSelect.js

@@ -0,0 +1,64 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _reactUseSet = require("react-use-set");
+var _utils = require("../../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 = (0, _react.useState)(selectedItem),
+    activeItem = _useState[0],
+    setActiveItem = _useState[1];
+  var isMounted = (0, _utils.useIsMounted)();
+  var loadingItemsSet = (0, _reactUseSet.useSet)();
+  var handleSelect = (0, _utils.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 (!(0, _utils.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
+  };
+};
+var _default = useSelect;
+exports.default = _default;

package/cjs/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/cjs/CascadeTree/index.js

@@ -0,0 +1,9 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _CascadeTree = _interopRequireDefault(require("./CascadeTree"));
+var _default = _CascadeTree.default;
+exports.default = _default;

package/cjs/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/cjs/CascadeTree/types.js

@@ -0,0 +1,2 @@
+'use client';
+"use strict";