tntd 2.6.7 → 2.6.8

package/es/tntd-cascader/rc-cascader/OptionList/Column.js

@@ -7,120 +7,179 @@ import Checkbox from './Checkbox';
 import { SEARCH_MARK } from '../hooks/useSearchOptions';
 import List from 'rc-virtual-list';
 export const FIX_LABEL = '__cascader_fix_label__';
-export default function Column({ prefixCls, multiple, options, activeValue, prevValuePath, onToggleOpen, onSelect, onActive, checkedSet, halfCheckedSet, loadingKeys, isSelectable, renderItem, searchValue, level, dropdownVisible, optionHeight, }) {
-    const ref = React.useRef(null);
-    const menuPrefixCls = `${prefixCls}-menu ${prefixCls}-menu-${level}`;
-    const menuItemPrefixCls = `${prefixCls}-menu-item`;
-    const { fieldNames, changeOnSelect, expandTrigger, expandIcon, loadingIcon, dropdownMenuColumnStyle, } = React.useContext(CascaderContext);
-    const hoverOpen = expandTrigger === 'hover';
-    /** 单选情况下滚动到相应的位置 */
-    React.useEffect(() => {
-        let timer = null;
-        if (ref.current && ref.current.scrollTo && !multiple && dropdownVisible) {
-            const index = options.findIndex((it) => it[fieldNames.value] === activeValue);
-            if (index > 0 && !isNaN(index)) {
-                timer = window.setTimeout(() => {
-                    ref.current.scrollTo((optionHeight || 36) * index);
-                }, 5);
-            }
+export default function Column({
+  prefixCls,
+  multiple,
+  options,
+  activeValue,
+  prevValuePath,
+  onToggleOpen,
+  onSelect,
+  onActive,
+  checkedSet,
+  halfCheckedSet,
+  loadingKeys,
+  isSelectable,
+  renderItem,
+  searchValue,
+  level,
+  dropdownVisible,
+  optionHeight
+}) {
+  const ref = React.useRef(null);
+  const menuPrefixCls = `${prefixCls}-menu ${prefixCls}-menu-${level}`;
+  const menuItemPrefixCls = `${prefixCls}-menu-item`;
+  const {
+    fieldNames,
+    changeOnSelect,
+    expandTrigger,
+    expandIcon,
+    loadingIcon,
+    dropdownMenuColumnStyle
+  } = React.useContext(CascaderContext);
+  const hoverOpen = expandTrigger === 'hover';
+  /** 单选情况下滚动到相应的位置 */
+  React.useEffect(() => {
+    let timer = null;
+    if (ref.current && ref.current.scrollTo && !multiple && dropdownVisible) {
+      const index = options.findIndex(it => it[fieldNames.value] === activeValue);
+      if (index > 0 && !isNaN(index)) {
+        timer = window.setTimeout(() => {
+          ref.current.scrollTo((optionHeight || 36) * index);
+        }, 5);
+      }
+    }
+    return () => {
+      if (timer) {
+        window.clearTimeout(timer);
+      }
+      timer = null;
+    };
+  }, [multiple, activeValue, options, fieldNames, dropdownVisible, optionHeight]);
+  // ============================ Option ============================
+  const optionInfoList = React.useMemo(() => options.map(option => {
+    var _a;
+    const {
+      disabled
+    } = option;
+    const searchOptions = option[SEARCH_MARK];
+    const label = (_a = option[FIX_LABEL]) !== null && _a !== void 0 ? _a : option[fieldNames.label];
+    const value = option[fieldNames.value];
+    const isMergedLeaf = isLeaf(option, fieldNames);
+    // Get real value of option. Search option is different way.
+    const fullPath = searchOptions ?
+    // @ts-ignore
+    searchOptions.map(opt => opt[fieldNames.value]) : [...prevValuePath, value];
+    const fullPathKey = toPathKey(fullPath);
+    const isLoading = loadingKeys.includes(fullPathKey);
+    // >>>>> checked
+    const checked = checkedSet.has(fullPathKey);
+    // >>>>> halfChecked
+    const halfChecked = halfCheckedSet.has(fullPathKey);
+    return {
+      disabled,
+      label,
+      value,
+      isLeaf: isMergedLeaf,
+      isLoading,
+      checked,
+      halfChecked,
+      option,
+      fullPath,
+      fullPathKey
+    };
+  }), [options, checkedSet, fieldNames, halfCheckedSet, loadingKeys, prevValuePath]);
+  // ============================ Render ============================
+  return React.createElement("ul", {
+    className: menuPrefixCls,
+    role: "menu"
+  }, React.createElement(List, {
+    className: optionInfoList[0].fullPathKey === '__EMPTY__' || !!searchValue ? 'rc-virtual-list-full' : '',
+    data: optionInfoList,
+    height: 180,
+    itemHeight: optionHeight || 36,
+    itemKey: "value",
+    ref: ref
+  }, ({
+    disabled,
+    label,
+    value,
+    isLeaf: isMergedLeaf,
+    isLoading,
+    checked,
+    halfChecked,
+    option,
+    fullPath,
+    fullPathKey
+  }) => {
+    // >>>>> Open
+    const triggerOpenPath = () => {
+      if (!disabled && (!hoverOpen || !isMergedLeaf)) {
+        onActive(fullPath);
+      }
+    };
+    // >>>>> Selection
+    const triggerSelect = () => {
+      if (isSelectable(option)) {
+        onSelect(fullPath, isMergedLeaf);
+      }
+    };
+    // >>>>> Title
+    let title;
+    if (typeof option.title === 'string') {
+      title = option.title;
+    } else if (typeof label === 'string') {
+      title = label;
+    }
+    return React.createElement("li", {
+      key: fullPathKey,
+      className: classNames(menuItemPrefixCls, {
+        [`${menuItemPrefixCls}-expand`]: !isMergedLeaf,
+        [`${menuItemPrefixCls}-active`]: activeValue === value,
+        [`${menuItemPrefixCls}-disabled`]: disabled,
+        [`${menuItemPrefixCls}-loading`]: isLoading
+      }),
+      style: dropdownMenuColumnStyle,
+      role: "menuitemcheckbox",
+      // @ts-ignore
+      title: title,
+      "aria-checked": checked,
+      "data-path-key": fullPathKey,
+      onClick: () => {
+        triggerOpenPath();
+        if (!multiple || isMergedLeaf) {
+          triggerSelect();
         }
-        return () => {
-            if (timer) {
-                window.clearTimeout(timer);
-            }
-            timer = null;
-        };
-    }, [multiple, activeValue, options, fieldNames, dropdownVisible, optionHeight]);
-    // ============================ Option ============================
-    const optionInfoList = React.useMemo(() => options.map((option) => {
-        var _a;
-        const { disabled } = option;
-        const searchOptions = option[SEARCH_MARK];
-        const label = (_a = option[FIX_LABEL]) !== null && _a !== void 0 ? _a : option[fieldNames.label];
-        const value = option[fieldNames.value];
-        const isMergedLeaf = isLeaf(option, fieldNames);
-        // Get real value of option. Search option is different way.
-        const fullPath = searchOptions
-            ? // @ts-ignore
-                searchOptions.map((opt) => opt[fieldNames.value])
-            : [...prevValuePath, value];
-        const fullPathKey = toPathKey(fullPath);
-        const isLoading = loadingKeys.includes(fullPathKey);
-        // >>>>> checked
-        const checked = checkedSet.has(fullPathKey);
-        // >>>>> halfChecked
-        const halfChecked = halfCheckedSet.has(fullPathKey);
-        return {
-            disabled,
-            label,
-            value,
-            isLeaf: isMergedLeaf,
-            isLoading,
-            checked,
-            halfChecked,
-            option,
-            fullPath,
-            fullPathKey,
-        };
-    }), [options, checkedSet, fieldNames, halfCheckedSet, loadingKeys, prevValuePath]);
-    // ============================ Render ============================
-    return (React.createElement("ul", { className: menuPrefixCls, role: "menu" },
-        React.createElement(List, { className: optionInfoList[0].fullPathKey === '__EMPTY__' || !!searchValue
-                ? 'rc-virtual-list-full'
-                : '', data: optionInfoList, height: 180, itemHeight: optionHeight || 36, itemKey: "value", ref: ref }, ({ disabled, label, value, isLeaf: isMergedLeaf, isLoading, checked, halfChecked, option, fullPath, fullPathKey, }) => {
-            // >>>>> Open
-            const triggerOpenPath = () => {
-                if (!disabled && (!hoverOpen || !isMergedLeaf)) {
-                    onActive(fullPath);
-                }
-            };
-            // >>>>> Selection
-            const triggerSelect = () => {
-                if (isSelectable(option)) {
-                    onSelect(fullPath, isMergedLeaf);
-                }
-            };
-            // >>>>> Title
-            let title;
-            if (typeof option.title === 'string') {
-                title = option.title;
-            }
-            else if (typeof label === 'string') {
-                title = label;
-            }
-            return (React.createElement("li", { key: fullPathKey, className: classNames(menuItemPrefixCls, {
-                    [`${menuItemPrefixCls}-expand`]: !isMergedLeaf,
-                    [`${menuItemPrefixCls}-active`]: activeValue === value,
-                    [`${menuItemPrefixCls}-disabled`]: disabled,
-                    [`${menuItemPrefixCls}-loading`]: isLoading,
-                }), style: dropdownMenuColumnStyle, role: "menuitemcheckbox", 
-                // @ts-ignore
-                title: title, "aria-checked": checked, "data-path-key": fullPathKey, onClick: () => {
-                    triggerOpenPath();
-                    if (!multiple || isMergedLeaf) {
-                        triggerSelect();
-                    }
-                }, onDoubleClick: () => {
-                    if (changeOnSelect) {
-                        onToggleOpen(false);
-                    }
-                }, onMouseEnter: () => {
-                    if (hoverOpen) {
-                        triggerOpenPath();
-                    }
-                }, onMouseDown: (e) => {
-                    // Prevent selector from blurring
-                    e.preventDefault();
-                } },
-                multiple && (React.createElement(Checkbox, { prefixCls: `${prefixCls}-checkbox`, checked: checked, halfChecked: halfChecked, disabled: disabled, onClick: (e) => {
-                        e.stopPropagation();
-                        triggerSelect();
-                    } })),
-                React.createElement("div", { className: `${menuItemPrefixCls}-content` }, optionInfoList[0].fullPathKey !== '__EMPTY__' && renderItem
-                    ? renderItem(option, level)
-                    : label),
-                !isLoading && expandIcon && !isMergedLeaf && (React.createElement("div", { className: `${menuItemPrefixCls}-expand-icon` }, expandIcon)),
-                isLoading && loadingIcon && (React.createElement("div", { className: `${menuItemPrefixCls}-loading-icon` }, loadingIcon))));
-        })));
-}
-//# sourceMappingURL=Column.js.map
+      },
+      onDoubleClick: () => {
+        if (changeOnSelect) {
+          onToggleOpen(false);
+        }
+      },
+      onMouseEnter: () => {
+        if (hoverOpen) {
+          triggerOpenPath();
+        }
+      },
+      onMouseDown: e => {
+        // Prevent selector from blurring
+        e.preventDefault();
+      }
+    }, multiple && React.createElement(Checkbox, {
+      prefixCls: `${prefixCls}-checkbox`,
+      checked: checked,
+      halfChecked: halfChecked,
+      disabled: disabled,
+      onClick: e => {
+        e.stopPropagation();
+        triggerSelect();
+      }
+    }), React.createElement("div", {
+      className: `${menuItemPrefixCls}-content`
+    }, optionInfoList[0].fullPathKey !== '__EMPTY__' && renderItem ? renderItem(option, level) : label), !isLoading && expandIcon && !isMergedLeaf && React.createElement("div", {
+      className: `${menuItemPrefixCls}-expand-icon`
+    }, expandIcon), isLoading && loadingIcon && React.createElement("div", {
+      className: `${menuItemPrefixCls}-loading-icon`
+    }, loadingIcon));
+  }));
+}

package/es/tntd-cascader/rc-cascader/OptionList/index.js

@@ -4,138 +4,190 @@ import classNames from 'classnames';
 import { useBaseProps } from 'rc-select';
 import * as React from 'react';
 import CascaderContext from '../context';
-import { isLeaf, scrollIntoParentView, toPathKey, toPathKeys, toPathValueStr, } from '../utils/commonUtil';
+import { isLeaf, scrollIntoParentView, toPathKey, toPathKeys, toPathValueStr } from '../utils/commonUtil';
 import { toPathOptions } from '../utils/treeUtil';
 import Column, { FIX_LABEL } from './Column';
 import useActive from './useActive';
 import useKeyboard from './useKeyboard';
 const RefOptionList = React.forwardRef((props, ref) => {
-    var _a, _b;
-    const { prefixCls, multiple, searchValue, toggleOpen, notFoundContent, direction, optionHeight } = useBaseProps();
-    const containerRef = React.useRef();
-    const rtl = direction === 'rtl';
-    const { options, values, halfValues, fieldNames, changeOnSelect, onSelect, searchOptions, dropdownPrefixCls, loadData, expandTrigger, renderItem, dropdownVisible, } = 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;
+  var _a, _b;
+  const {
+    prefixCls,
+    multiple,
+    searchValue,
+    toggleOpen,
+    notFoundContent,
+    direction,
+    optionHeight
+  } = useBaseProps();
+  const containerRef = React.useRef();
+  const rtl = direction === 'rtl';
+  const {
+    options,
+    values,
+    halfValues,
+    fieldNames,
+    changeOnSelect,
+    onSelect,
+    searchOptions,
+    dropdownPrefixCls,
+    loadData,
+    expandTrigger,
+    renderItem,
+    dropdownVisible
+  } = 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));
         }
-        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();
-    // =========================== Path ===========================
-    const onPathOpen = (nextValueCells) => {
-        setActiveValueCells(nextValueCells);
-        // Trigger loadData
-        internalLoadData(nextValueCells);
-    };
-    const isSelectable = (option) => {
-        const { disabled } = option;
-        const isMergedLeaf = isLeaf(option, fieldNames);
-        return !disabled && (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;
-        for (let i = 0; i < activeValueCells.length; i += 1) {
-            const activeValueCell = activeValueCells[i];
-            const currentOption = currentList.find((option) => option[fieldNames.value] === activeValueCell);
-            const subOptions = currentOption === null || currentOption === void 0 ? void 0 : currentOption[fieldNames.children];
-            if (!(subOptions === null || subOptions === void 0 ? void 0 : 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);
-    // >>>>> Active Scroll
-    React.useEffect(() => {
-        var _a;
-        for (let i = 0; i < activeValueCells.length; i += 1) {
-            const cellPath = activeValueCells.slice(0, i + 1);
-            const cellKeyPath = toPathKey(cellPath);
-            const ele = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`li[data-path-key="${cellKeyPath.replace(/\\{0,2}"/g, '\\"')}"]` // matches unescaped double quotes
-            );
-            if (ele) {
-                scrollIntoParentView(ele);
-            }
-        }
-    }, [activeValueCells]);
-    // ========================== Render ==========================
-    // >>>>> Empty
-    const isEmpty = !((_b = (_a = optionColumns[0]) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length);
-    const emptyList = [
-        {
-            [fieldNames.value]: '__EMPTY__',
-            [FIX_LABEL]: notFoundContent,
-            disabled: true,
-        },
-    ];
-    const columnProps = Object.assign(Object.assign({}, 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 (React.createElement(Column, Object.assign({ key: index, level: index, optionHeight: optionHeight, dropdownVisible: dropdownVisible }, columnProps, { prefixCls: mergedPrefixCls, options: col.options, searchValue: searchValue, prevValuePath: prevValuePath, activeValue: activeValue, renderItem: renderItem })));
-    });
-    // >>>>> Render
-    return (React.createElement("div", { className: classNames(`${mergedPrefixCls}-menus`, {
-            [`${mergedPrefixCls}-menu-empty`]: isEmpty,
-            [`${mergedPrefixCls}-rtl`]: rtl,
-        }), ref: containerRef }, columnNodes));
+      });
+    }
+  }, [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();
+  // =========================== Path ===========================
+  const onPathOpen = nextValueCells => {
+    setActiveValueCells(nextValueCells);
+    // Trigger loadData
+    internalLoadData(nextValueCells);
+  };
+  const isSelectable = option => {
+    const {
+      disabled
+    } = option;
+    const isMergedLeaf = isLeaf(option, fieldNames);
+    return !disabled && (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;
+    for (let i = 0; i < activeValueCells.length; i += 1) {
+      const activeValueCell = activeValueCells[i];
+      const currentOption = currentList.find(option => option[fieldNames.value] === activeValueCell);
+      const subOptions = currentOption === null || currentOption === void 0 ? void 0 : currentOption[fieldNames.children];
+      if (!(subOptions === null || subOptions === void 0 ? void 0 : 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);
+  // >>>>> Active Scroll
+  React.useEffect(() => {
+    var _a;
+    for (let i = 0; i < activeValueCells.length; i += 1) {
+      const cellPath = activeValueCells.slice(0, i + 1);
+      const cellKeyPath = toPathKey(cellPath);
+      const ele = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`li[data-path-key="${cellKeyPath.replace(/\\{0,2}"/g, '\\"')}"]` // matches unescaped double quotes
+      );
+
+      if (ele) {
+        scrollIntoParentView(ele);
+      }
+    }
+  }, [activeValueCells]);
+  // ========================== Render ==========================
+  // >>>>> Empty
+  const isEmpty = !((_b = (_a = optionColumns[0]) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length);
+  const emptyList = [{
+    [fieldNames.value]: '__EMPTY__',
+    [FIX_LABEL]: notFoundContent,
+    disabled: true
+  }];
+  const columnProps = Object.assign(Object.assign({}, 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 React.createElement(Column, Object.assign({
+      key: index,
+      level: index,
+      optionHeight: optionHeight,
+      dropdownVisible: dropdownVisible
+    }, columnProps, {
+      prefixCls: mergedPrefixCls,
+      options: col.options,
+      searchValue: searchValue,
+      prevValuePath: prevValuePath,
+      activeValue: activeValue,
+      renderItem: renderItem
+    }));
+  });
+  // >>>>> Render
+  return React.createElement("div", {
+    className: classNames(`${mergedPrefixCls}-menus`, {
+      [`${mergedPrefixCls}-menu-empty`]: isEmpty,
+      [`${mergedPrefixCls}-rtl`]: rtl
+    }),
+    ref: containerRef
+  }, columnNodes);
 });
-export default RefOptionList;
-//# sourceMappingURL=index.js.map
+export default RefOptionList;