tntd 2.8.0-beta.3 → 3.0.0-beta.1

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

@@ -7,179 +7,120 @@ 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);
-      }
-    }
-    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();
+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);
+            }
         }
-      },
-      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));
-  }));
-}
+        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

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

@@ -4,189 +4,138 @@ 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;
-    }
-    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));
+    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;
         }
-      });
-    }
-  }, [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);
+        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));
 });
-export default RefOptionList;
+export default RefOptionList;
+//# sourceMappingURL=index.js.map