@rc-component/cascader 1.0.0

package/es/OptionList/List.js

@@ -0,0 +1,216 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/* eslint-disable default-case */
+import classNames from 'classnames';
+import * as React from 'react';
+import CascaderContext from "../context";
+import { getFullPathKeys, isLeaf, scrollIntoParentView, toPathKey, toPathKeys, toPathValueStr } from "../utils/commonUtil";
+import { toPathOptions } from "../utils/treeUtil";
+import CacheContent from "./CacheContent";
+import Column, { FIX_LABEL } from "./Column";
+import useActive from "./useActive";
+import useKeyboard from "./useKeyboard";
+const RawOptionList = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    prefixCls,
+    multiple,
+    searchValue,
+    toggleOpen,
+    notFoundContent,
+    direction,
+    open,
+    disabled
+  } = props;
+  const containerRef = React.useRef(null);
+  const rtl = direction === 'rtl';
+  const {
+    options,
+    values,
+    halfValues,
+    fieldNames,
+    changeOnSelect,
+    onSelect,
+    searchOptions,
+    dropdownPrefixCls,
+    loadData,
+    expandTrigger
+  } = React.useContext(CascaderContext);
+  const mergedPrefixCls = dropdownPrefixCls || prefixCls;
+
+  // ========================= loadData =========================
+  const [loadingKeys, setLoadingKeys] = React.useState([]);
+  const internalLoadData = valueCells => {
+    // Do not load when search
+    if (!loadData || searchValue) {
+      return;
+    }
+    const optionList = toPathOptions(valueCells, options, fieldNames);
+    const rawOptions = optionList.map(({
+      option
+    }) => option);
+    const lastOption = rawOptions[rawOptions.length - 1];
+    if (lastOption && !isLeaf(lastOption, fieldNames)) {
+      const pathKey = toPathKey(valueCells);
+      setLoadingKeys(keys => [...keys, pathKey]);
+      loadData(rawOptions);
+    }
+  };
+
+  // zombieJ: This is bad. We should make this same as `rc-tree` to use Promise instead.
+  React.useEffect(() => {
+    if (loadingKeys.length) {
+      loadingKeys.forEach(loadingKey => {
+        const valueStrCells = toPathValueStr(loadingKey);
+        const optionList = toPathOptions(valueStrCells, options, fieldNames, true).map(({
+          option
+        }) => option);
+        const lastOption = optionList[optionList.length - 1];
+        if (!lastOption || lastOption[fieldNames.children] || isLeaf(lastOption, fieldNames)) {
+          setLoadingKeys(keys => keys.filter(key => key !== loadingKey));
+        }
+      });
+    }
+  }, [options, loadingKeys, fieldNames]);
+
+  // ========================== Values ==========================
+  const checkedSet = React.useMemo(() => new Set(toPathKeys(values)), [values]);
+  const halfCheckedSet = React.useMemo(() => new Set(toPathKeys(halfValues)), [halfValues]);
+
+  // ====================== Accessibility =======================
+  const [activeValueCells, setActiveValueCells] = useActive(multiple, open);
+
+  // =========================== Path ===========================
+  const onPathOpen = nextValueCells => {
+    setActiveValueCells(nextValueCells);
+
+    // Trigger loadData
+    internalLoadData(nextValueCells);
+  };
+  const isSelectable = option => {
+    if (disabled) {
+      return false;
+    }
+    const {
+      disabled: optionDisabled
+    } = option;
+    const isMergedLeaf = isLeaf(option, fieldNames);
+    return !optionDisabled && (isMergedLeaf || changeOnSelect || multiple);
+  };
+  const onPathSelect = (valuePath, leaf, fromKeyboard = false) => {
+    onSelect(valuePath);
+    if (!multiple && (leaf || changeOnSelect && (expandTrigger === 'hover' || fromKeyboard))) {
+      toggleOpen(false);
+    }
+  };
+
+  // ========================== Option ==========================
+  const mergedOptions = React.useMemo(() => {
+    if (searchValue) {
+      return searchOptions;
+    }
+    return options;
+  }, [searchValue, searchOptions, options]);
+
+  // ========================== Column ==========================
+  const optionColumns = React.useMemo(() => {
+    const optionList = [{
+      options: mergedOptions
+    }];
+    let currentList = mergedOptions;
+    const fullPathKeys = getFullPathKeys(currentList, fieldNames);
+    for (let i = 0; i < activeValueCells.length; i += 1) {
+      const activeValueCell = activeValueCells[i];
+      const currentOption = currentList.find((option, index) => (fullPathKeys[index] ? toPathKey(fullPathKeys[index]) : option[fieldNames.value]) === activeValueCell);
+      const subOptions = currentOption?.[fieldNames.children];
+      if (!subOptions?.length) {
+        break;
+      }
+      currentList = subOptions;
+      optionList.push({
+        options: subOptions
+      });
+    }
+    return optionList;
+  }, [mergedOptions, activeValueCells, fieldNames]);
+
+  // ========================= Keyboard =========================
+  const onKeyboardSelect = (selectValueCells, option) => {
+    if (isSelectable(option)) {
+      onPathSelect(selectValueCells, isLeaf(option, fieldNames), true);
+    }
+  };
+  useKeyboard(ref, mergedOptions, fieldNames, activeValueCells, onPathOpen, onKeyboardSelect, {
+    direction,
+    searchValue,
+    toggleOpen,
+    open
+  });
+
+  // >>>>> Active Scroll
+  React.useEffect(() => {
+    if (searchValue) {
+      return;
+    }
+    for (let i = 0; i < activeValueCells.length; i += 1) {
+      const cellPath = activeValueCells.slice(0, i + 1);
+      const cellKeyPath = toPathKey(cellPath);
+      const ele = containerRef.current?.querySelector(`li[data-path-key="${cellKeyPath.replace(/\\{0,2}"/g, '\\"')}"]` // matches unescaped double quotes
+      );
+
+      if (ele) {
+        scrollIntoParentView(ele);
+      }
+    }
+  }, [activeValueCells, searchValue]);
+
+  // ========================== Render ==========================
+  // >>>>> Empty
+  const isEmpty = !optionColumns[0]?.options?.length;
+  const emptyList = [{
+    [fieldNames.value]: '__EMPTY__',
+    [FIX_LABEL]: notFoundContent,
+    disabled: true
+  }];
+  const columnProps = {
+    ...props,
+    multiple: !isEmpty && multiple,
+    onSelect: onPathSelect,
+    onActive: onPathOpen,
+    onToggleOpen: toggleOpen,
+    checkedSet,
+    halfCheckedSet,
+    loadingKeys,
+    isSelectable
+  };
+
+  // >>>>> Columns
+  const mergedOptionColumns = isEmpty ? [{
+    options: emptyList
+  }] : optionColumns;
+  const columnNodes = mergedOptionColumns.map((col, index) => {
+    const prevValuePath = activeValueCells.slice(0, index);
+    const activeValue = activeValueCells[index];
+    return /*#__PURE__*/React.createElement(Column, _extends({
+      key: index
+    }, columnProps, {
+      prefixCls: mergedPrefixCls,
+      options: col.options,
+      prevValuePath: prevValuePath,
+      activeValue: activeValue
+    }));
+  });
+
+  // >>>>> Render
+  return /*#__PURE__*/React.createElement(CacheContent, {
+    open: open
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(`${mergedPrefixCls}-menus`, {
+      [`${mergedPrefixCls}-menu-empty`]: isEmpty,
+      [`${mergedPrefixCls}-rtl`]: rtl
+    }),
+    ref: containerRef
+  }, columnNodes));
+});
+if (process.env.NODE_ENV !== 'production') {
+  RawOptionList.displayName = 'RawOptionList';
+}
+export default RawOptionList;

package/es/OptionList/index.d.ts

@@ -0,0 +1,4 @@
+import type { RefOptionListProps } from '@rc-component/select/lib/OptionList';
+import * as React from 'react';
+declare const RefOptionList: React.ForwardRefExoticComponent<React.RefAttributes<RefOptionListProps>>;
+export default RefOptionList;

package/es/OptionList/index.js

@@ -0,0 +1,13 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { useBaseProps } from '@rc-component/select';
+import * as React from 'react';
+import RawOptionList from "./List";
+const RefOptionList = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const baseProps = useBaseProps();
+
+  // >>>>> Render
+  return /*#__PURE__*/React.createElement(RawOptionList, _extends({}, props, baseProps, {
+    ref: ref
+  }));
+});
+export default RefOptionList;

package/es/OptionList/useActive.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * Control the active open options path.
+ */
+declare const useActive: (multiple?: boolean, open?: boolean) => [React.Key[], (activeValueCells: React.Key[]) => void];
+export default useActive;

package/es/OptionList/useActive.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import CascaderContext from "../context";
+
+/**
+ * Control the active open options path.
+ */
+const useActive = (multiple, open) => {
+  const {
+    values
+  } = React.useContext(CascaderContext);
+  const firstValueCells = values[0];
+
+  // Record current dropdown active options
+  // This also control the open status
+  const [activeValueCells, setActiveValueCells] = React.useState([]);
+  React.useEffect(() => {
+    if (!multiple) {
+      setActiveValueCells(firstValueCells || []);
+    }
+  }, /* eslint-disable react-hooks/exhaustive-deps */
+  [open, firstValueCells]
+  /* eslint-enable react-hooks/exhaustive-deps */);
+
+  return [activeValueCells, setActiveValueCells];
+};
+export default useActive;

package/es/OptionList/useKeyboard.d.ts

@@ -0,0 +1,10 @@
+import type { RefOptionListProps } from '@rc-component/select/lib/OptionList';
+import * as React from 'react';
+import type { DefaultOptionType, InternalFieldNames, SingleValueType } from '../Cascader';
+declare const _default: (ref: React.Ref<RefOptionListProps>, options: DefaultOptionType[], fieldNames: InternalFieldNames, activeValueCells: React.Key[], setActiveValueCells: (activeValueCells: React.Key[]) => void, onKeyBoardSelect: (valueCells: SingleValueType, option: DefaultOptionType) => void, contextProps: {
+    direction?: "ltr" | "rtl" | undefined;
+    searchValue: string;
+    toggleOpen: (open?: boolean) => void;
+    open?: boolean | undefined;
+}) => void;
+export default _default;

package/es/OptionList/useKeyboard.js

@@ -0,0 +1,165 @@
+import KeyCode from "@rc-component/util/es/KeyCode";
+import * as React from 'react';
+import { SEARCH_MARK } from "../hooks/useSearchOptions";
+import { getFullPathKeys, toPathKey } from "../utils/commonUtil";
+export default ((ref, options, fieldNames, activeValueCells, setActiveValueCells, onKeyBoardSelect, contextProps) => {
+  const {
+    direction,
+    searchValue,
+    toggleOpen,
+    open
+  } = contextProps;
+  const rtl = direction === 'rtl';
+  const [validActiveValueCells, lastActiveIndex, lastActiveOptions, fullPathKeys] = React.useMemo(() => {
+    let activeIndex = -1;
+    let currentOptions = options;
+    const mergedActiveIndexes = [];
+    const mergedActiveValueCells = [];
+    const len = activeValueCells.length;
+    const pathKeys = getFullPathKeys(options, fieldNames);
+
+    // Fill validate active value cells and index
+    for (let i = 0; i < len && currentOptions; i += 1) {
+      // Mark the active index for current options
+      const nextActiveIndex = currentOptions.findIndex((option, index) => (pathKeys[index] ? toPathKey(pathKeys[index]) : option[fieldNames.value]) === activeValueCells[i]);
+      if (nextActiveIndex === -1) {
+        break;
+      }
+      activeIndex = nextActiveIndex;
+      mergedActiveIndexes.push(activeIndex);
+      mergedActiveValueCells.push(activeValueCells[i]);
+      currentOptions = currentOptions[activeIndex][fieldNames.children];
+    }
+
+    // Fill last active options
+    let activeOptions = options;
+    for (let i = 0; i < mergedActiveIndexes.length - 1; i += 1) {
+      activeOptions = activeOptions[mergedActiveIndexes[i]][fieldNames.children];
+    }
+    return [mergedActiveValueCells, activeIndex, activeOptions, pathKeys];
+  }, [activeValueCells, fieldNames, options]);
+
+  // Update active value cells and scroll to target element
+  const internalSetActiveValueCells = next => {
+    setActiveValueCells(next);
+  };
+
+  // Same options offset
+  const offsetActiveOption = offset => {
+    const len = lastActiveOptions.length;
+    let currentIndex = lastActiveIndex;
+    if (currentIndex === -1 && offset < 0) {
+      currentIndex = len;
+    }
+    for (let i = 0; i < len; i += 1) {
+      currentIndex = (currentIndex + offset + len) % len;
+      const option = lastActiveOptions[currentIndex];
+      if (option && !option.disabled) {
+        const nextActiveCells = validActiveValueCells.slice(0, -1).concat(fullPathKeys[currentIndex] ? toPathKey(fullPathKeys[currentIndex]) : option[fieldNames.value]);
+        internalSetActiveValueCells(nextActiveCells);
+        return;
+      }
+    }
+  };
+
+  // Different options offset
+  const prevColumn = () => {
+    if (validActiveValueCells.length > 1) {
+      const nextActiveCells = validActiveValueCells.slice(0, -1);
+      internalSetActiveValueCells(nextActiveCells);
+    } else {
+      toggleOpen(false);
+    }
+  };
+  const nextColumn = () => {
+    const nextOptions = lastActiveOptions[lastActiveIndex]?.[fieldNames.children] || [];
+    const nextOption = nextOptions.find(option => !option.disabled);
+    if (nextOption) {
+      const nextActiveCells = [...validActiveValueCells, nextOption[fieldNames.value]];
+      internalSetActiveValueCells(nextActiveCells);
+    }
+  };
+  React.useImperativeHandle(ref, () => ({
+    // scrollTo: treeRef.current?.scrollTo,
+    onKeyDown: event => {
+      const {
+        which
+      } = event;
+      switch (which) {
+        // >>> Arrow keys
+        case KeyCode.UP:
+        case KeyCode.DOWN:
+          {
+            let offset = 0;
+            if (which === KeyCode.UP) {
+              offset = -1;
+            } else if (which === KeyCode.DOWN) {
+              offset = 1;
+            }
+            if (offset !== 0) {
+              offsetActiveOption(offset);
+            }
+            break;
+          }
+        case KeyCode.LEFT:
+          {
+            if (searchValue) {
+              break;
+            }
+            if (rtl) {
+              nextColumn();
+            } else {
+              prevColumn();
+            }
+            break;
+          }
+        case KeyCode.RIGHT:
+          {
+            if (searchValue) {
+              break;
+            }
+            if (rtl) {
+              prevColumn();
+            } else {
+              nextColumn();
+            }
+            break;
+          }
+        case KeyCode.BACKSPACE:
+          {
+            if (!searchValue) {
+              prevColumn();
+            }
+            break;
+          }
+
+        // >>> Select
+        case KeyCode.ENTER:
+          {
+            if (validActiveValueCells.length) {
+              const option = lastActiveOptions[lastActiveIndex];
+
+              // Search option should revert back of origin options
+              const originOptions = option?.[SEARCH_MARK] || [];
+              if (originOptions.length) {
+                onKeyBoardSelect(originOptions.map(opt => opt[fieldNames.value]), originOptions[originOptions.length - 1]);
+              } else {
+                onKeyBoardSelect(validActiveValueCells, lastActiveOptions[lastActiveIndex]);
+              }
+            }
+            break;
+          }
+
+        // >>> Close
+        case KeyCode.ESC:
+          {
+            toggleOpen(false);
+            if (open) {
+              event.stopPropagation();
+            }
+          }
+      }
+    },
+    onKeyUp: () => {}
+  }));
+});

package/es/Panel.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { CascaderProps, DefaultOptionType } from './Cascader';
+export type PickType = 'value' | 'defaultValue' | 'changeOnSelect' | 'onChange' | 'options' | 'prefixCls' | 'checkable' | 'fieldNames' | 'showCheckedStrategy' | 'loadData' | 'expandTrigger' | 'expandIcon' | 'loadingIcon' | 'className' | 'style' | 'direction' | 'notFoundContent' | 'disabled';
+export type PanelProps<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean | React.ReactNode = false> = Pick<CascaderProps<OptionType, ValueField, Multiple>, PickType>;
+export default function Panel<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean | React.ReactNode = false>(props: PanelProps<OptionType, ValueField, Multiple>): React.JSX.Element;

package/es/Panel.js

@@ -0,0 +1,116 @@
+import classNames from 'classnames';
+import { useEvent, useMergedState } from '@rc-component/util';
+import * as React from 'react';
+import CascaderContext from "./context";
+import useMissingValues from "./hooks/useMissingValues";
+import useOptions from "./hooks/useOptions";
+import useSelect from "./hooks/useSelect";
+import useValues from "./hooks/useValues";
+import RawOptionList from "./OptionList/List";
+import { fillFieldNames, toRawValues } from "./utils/commonUtil";
+import { toPathOptions } from "./utils/treeUtil";
+function noop() {}
+export default function Panel(props) {
+  const {
+    prefixCls = 'rc-cascader',
+    style,
+    className,
+    options,
+    checkable,
+    defaultValue,
+    value,
+    fieldNames,
+    changeOnSelect,
+    onChange,
+    showCheckedStrategy,
+    loadData,
+    expandTrigger,
+    expandIcon = '>',
+    loadingIcon,
+    direction,
+    notFoundContent = 'Not Found',
+    disabled
+  } = props;
+
+  // ======================== Multiple ========================
+  const multiple = !!checkable;
+
+  // ========================= Values =========================
+  const [rawValues, setRawValues] = useMergedState(defaultValue, {
+    value,
+    postState: toRawValues
+  });
+
+  // ========================= FieldNames =========================
+  const mergedFieldNames = React.useMemo(() => fillFieldNames(fieldNames), /* eslint-disable react-hooks/exhaustive-deps */
+  [JSON.stringify(fieldNames)]
+  /* eslint-enable react-hooks/exhaustive-deps */);
+
+  // =========================== Option ===========================
+  const [mergedOptions, getPathKeyEntities, getValueByKeyPath] = useOptions(mergedFieldNames, options);
+
+  // ========================= Values =========================
+  const getMissingValues = useMissingValues(mergedOptions, mergedFieldNames);
+
+  // Fill `rawValues` with checked conduction values
+  const [checkedValues, halfCheckedValues, missingCheckedValues] = useValues(multiple, rawValues, getPathKeyEntities, getValueByKeyPath, getMissingValues);
+
+  // =========================== Change ===========================
+  const triggerChange = useEvent(nextValues => {
+    setRawValues(nextValues);
+
+    // Save perf if no need trigger event
+    if (onChange) {
+      const nextRawValues = toRawValues(nextValues);
+      const valueOptions = nextRawValues.map(valueCells => toPathOptions(valueCells, mergedOptions, mergedFieldNames).map(valueOpt => valueOpt.option));
+      const triggerValues = multiple ? nextRawValues : nextRawValues[0];
+      const triggerOptions = multiple ? valueOptions : valueOptions[0];
+      onChange(triggerValues, triggerOptions);
+    }
+  });
+
+  // =========================== Select ===========================
+  const handleSelection = useSelect(multiple, triggerChange, checkedValues, halfCheckedValues, missingCheckedValues, getPathKeyEntities, getValueByKeyPath, showCheckedStrategy);
+  const onInternalSelect = useEvent(valuePath => {
+    handleSelection(valuePath);
+  });
+
+  // ======================== Context =========================
+  const cascaderContext = React.useMemo(() => ({
+    options: mergedOptions,
+    fieldNames: mergedFieldNames,
+    values: checkedValues,
+    halfValues: halfCheckedValues,
+    changeOnSelect,
+    onSelect: onInternalSelect,
+    checkable,
+    searchOptions: [],
+    dropdownPrefixCls: undefined,
+    loadData,
+    expandTrigger,
+    expandIcon,
+    loadingIcon,
+    dropdownMenuColumnStyle: undefined
+  }), [mergedOptions, mergedFieldNames, checkedValues, halfCheckedValues, changeOnSelect, onInternalSelect, checkable, loadData, expandTrigger, expandIcon, loadingIcon]);
+
+  // ========================= Render =========================
+  const panelPrefixCls = `${prefixCls}-panel`;
+  const isEmpty = !mergedOptions.length;
+  return /*#__PURE__*/React.createElement(CascaderContext.Provider, {
+    value: cascaderContext
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(panelPrefixCls, {
+      [`${panelPrefixCls}-rtl`]: direction === 'rtl',
+      [`${panelPrefixCls}-empty`]: isEmpty
+    }, className),
+    style: style
+  }, isEmpty ? notFoundContent : /*#__PURE__*/React.createElement(RawOptionList, {
+    prefixCls: prefixCls,
+    searchValue: "",
+    multiple: multiple,
+    toggleOpen: noop,
+    open: true,
+    direction: direction,
+    disabled: disabled
+  })));
+}

package/es/context.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { CascaderProps, InternalFieldNames, DefaultOptionType, SingleValueType } from './Cascader';
+export interface CascaderContextProps {
+    options: NonNullable<CascaderProps['options']>;
+    fieldNames: InternalFieldNames;
+    values: SingleValueType[];
+    halfValues: SingleValueType[];
+    changeOnSelect?: boolean;
+    onSelect: (valuePath: SingleValueType) => void;
+    checkable?: boolean | React.ReactNode;
+    searchOptions: DefaultOptionType[];
+    dropdownPrefixCls?: string;
+    loadData?: (selectOptions: DefaultOptionType[]) => void;
+    expandTrigger?: 'hover' | 'click';
+    expandIcon?: React.ReactNode;
+    loadingIcon?: React.ReactNode;
+    dropdownMenuColumnStyle?: React.CSSProperties;
+    optionRender?: CascaderProps['optionRender'];
+}
+declare const CascaderContext: React.Context<CascaderContextProps>;
+export default CascaderContext;

package/es/context.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+const CascaderContext = /*#__PURE__*/React.createContext({});
+export default CascaderContext;

package/es/hooks/useDisplayValues.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { DefaultOptionType, SingleValueType, CascaderProps, InternalFieldNames } from '../Cascader';
+declare const _default: (rawValues: SingleValueType[], options: DefaultOptionType[], fieldNames: InternalFieldNames, multiple: boolean, displayRender: CascaderProps['displayRender']) => {
+    label: React.ReactNode;
+    value: string;
+    key: string;
+    valueCells: SingleValueType;
+    disabled: boolean | undefined;
+}[];
+export default _default;

package/es/hooks/useDisplayValues.js

@@ -0,0 +1,44 @@
+import { toPathOptions } from "../utils/treeUtil";
+import * as React from 'react';
+import { toPathKey } from "../utils/commonUtil";
+export default ((rawValues, options, fieldNames, multiple, displayRender) => {
+  return React.useMemo(() => {
+    const mergedDisplayRender = displayRender || (
+    // Default displayRender
+    labels => {
+      const mergedLabels = multiple ? labels.slice(-1) : labels;
+      const SPLIT = ' / ';
+      if (mergedLabels.every(label => ['string', 'number'].includes(typeof label))) {
+        return mergedLabels.join(SPLIT);
+      }
+
+      // If exist non-string value, use ReactNode instead
+      return mergedLabels.reduce((list, label, index) => {
+        const keyedLabel = /*#__PURE__*/React.isValidElement(label) ? /*#__PURE__*/React.cloneElement(label, {
+          key: index
+        }) : label;
+        if (index === 0) {
+          return [keyedLabel];
+        }
+        return [...list, SPLIT, keyedLabel];
+      }, []);
+    });
+    return rawValues.map(valueCells => {
+      const valueOptions = toPathOptions(valueCells, options, fieldNames);
+      const label = mergedDisplayRender(valueOptions.map(({
+        option,
+        value
+      }) => option?.[fieldNames.label] ?? value), valueOptions.map(({
+        option
+      }) => option));
+      const value = toPathKey(valueCells);
+      return {
+        label,
+        value,
+        key: value,
+        valueCells,
+        disabled: valueOptions[valueOptions.length - 1]?.option?.disabled
+      };
+    });
+  }, [rawValues, options, fieldNames, displayRender, multiple]);
+});

package/es/hooks/useEntities.d.ts

@@ -0,0 +1,10 @@
+import type { DefaultOptionType, InternalFieldNames } from '../Cascader';
+import type { DataEntity } from 'rc-tree/lib/interface';
+export interface OptionsInfo {
+    keyEntities: Record<string, DataEntity>;
+    pathKeyEntities: Record<string, DataEntity>;
+}
+export type GetEntities = () => OptionsInfo['pathKeyEntities'];
+/** Lazy parse options data into conduct-able info to avoid perf issue in single mode */
+declare const _default: (options: DefaultOptionType[], fieldNames: InternalFieldNames) => GetEntities;
+export default _default;