@chaoswise/ui 2.2.9 → 2.3.0

package/lib/CWCascader/rc-cascader/OptionList/Checkbox.js

@@ -0,0 +1,22 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import * as React from "react";
+import classNames from "classnames";
+import CascaderContext from "../context";
+export default function Checkbox(_ref) {
+  var _classNames;
+  var prefixCls = _ref.prefixCls,
+    checked = _ref.checked,
+    halfChecked = _ref.halfChecked,
+    disabled = _ref.disabled,
+    onClick = _ref.onClick;
+  var _React$useContext = React.useContext(CascaderContext),
+    checkable = _React$useContext.checkable;
+  var customCheckbox = typeof checkable !== "boolean" ? checkable : null;
+  return /*#__PURE__*/React.createElement("span", {
+    className: classNames("".concat(prefixCls), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-checked"), checked), _defineProperty(_classNames, "".concat(prefixCls, "-indeterminate"), !checked && halfChecked), _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _classNames)),
+    onClick: onClick
+  }, customCheckbox);
+}

package/lib/CWCascader/rc-cascader/OptionList/Column.js

@@ -0,0 +1,209 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+import "@chaoswise/ui/lib/Input/index.less";
+import _Input from "@chaoswise/ui/lib/Input";
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import * as React from "react";
+import classNames from "classnames";
+import { isLeaf, toPathKey } from "../utils/commonUtil";
+import CascaderContext from "../context";
+import Checkbox from "./Checkbox";
+import { SEARCH_MARK } from "../hooks/useSearchOptions";
+export var FIX_LABEL = "__cascader_fix_label__";
+export default function Column(_ref) {
+  var prefixCls = _ref.prefixCls,
+    multiple = _ref.multiple,
+    options = _ref.options,
+    activeValue = _ref.activeValue,
+    prevValuePath = _ref.prevValuePath,
+    onToggleOpen = _ref.onToggleOpen,
+    onSelect = _ref.onSelect,
+    onActive = _ref.onActive,
+    checkedSet = _ref.checkedSet,
+    halfCheckedSet = _ref.halfCheckedSet,
+    loadingKeys = _ref.loadingKeys,
+    isSelectable = _ref.isSelectable;
+  var menuPrefixCls = "".concat(prefixCls, "-menu");
+  var menuItemPrefixCls = "".concat(prefixCls, "-menu-item");
+  var _React$useContext = React.useContext(CascaderContext),
+    fieldNames = _React$useContext.fieldNames,
+    changeOnSelect = _React$useContext.changeOnSelect,
+    expandTrigger = _React$useContext.expandTrigger,
+    expandIcon = _React$useContext.expandIcon,
+    loadingIcon = _React$useContext.loadingIcon,
+    dropdownMenuColumnStyle = _React$useContext.dropdownMenuColumnStyle,
+    _React$useContext$onS = _React$useContext.onScroll,
+    _onScroll = _React$useContext$onS === void 0 ? function () {} : _React$useContext$onS,
+    _React$useContext$onS2 = _React$useContext.onSrollBottom,
+    onSrollBottom = _React$useContext$onS2 === void 0 ? function () {} : _React$useContext$onS2,
+    _React$useContext$onI = _React$useContext.onInputChange,
+    onInputChange = _React$useContext$onI === void 0 ? function () {} : _React$useContext$onI,
+    showColumnSearch = _React$useContext.showColumnSearch,
+    dropdownColumnRender = _React$useContext.dropdownColumnRender;
+  var hoverOpen = expandTrigger === "hover";
+  var _React$useState = React.useState(""),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    inputValue = _React$useState2[0],
+    setInputValue = _React$useState2[1];
+  // ============================ Option ============================
+  var optionInfoList = React.useMemo(function () {
+    return options.map(function (option) {
+      var _option$FIX_LABEL;
+      var disabled = option.disabled;
+      var searchOptions = option[SEARCH_MARK];
+      var label = (_option$FIX_LABEL = option[FIX_LABEL]) !== null && _option$FIX_LABEL !== void 0 ? _option$FIX_LABEL : option[fieldNames.label];
+      var value = option[fieldNames.value];
+      var isMergedLeaf = isLeaf(option, fieldNames);
+      // Get real value of option. Search option is different way.
+      var fullPath = searchOptions ? searchOptions.map(function (opt) {
+        return opt[fieldNames.value];
+      }) : [].concat(_toConsumableArray(prevValuePath), [value]);
+      var fullPathKey = toPathKey(fullPath);
+      var isLoading = loadingKeys.includes(fullPathKey);
+      // >>>>> checked
+      var checked = checkedSet.has(fullPathKey);
+      // >>>>> halfChecked
+      var halfChecked = halfCheckedSet.has(fullPathKey);
+      return {
+        disabled: disabled,
+        label: label,
+        value: value,
+        isLeaf: isMergedLeaf,
+        isLoading: isLoading,
+        checked: checked,
+        halfChecked: halfChecked,
+        option: option,
+        fullPath: fullPath,
+        fullPathKey: fullPathKey
+      };
+    });
+  }, [options, checkedSet, fieldNames, halfCheckedSet, loadingKeys, prevValuePath]);
+  var scrollColumnId = prevValuePath.length ? prevValuePath[prevValuePath.length - 1] : undefined;
+  var onChange = function onChange(e) {
+    setInputValue(e.target.value);
+    onInputChange(e, scrollColumnId);
+  };
+  // ============================ Render ============================
+  var renderColumnDom = /*#__PURE__*/React.createElement("ul", {
+    className: menuPrefixCls,
+    role: "menu",
+    style: {
+      flex: 1
+    },
+    onScroll: function onScroll(e) {
+      // scrollColumnId，一级为undefind,非一级为上一次的value
+      _onScroll(e, scrollColumnId);
+      function isScrollBottom() {
+        var element = e.target;
+        return element.scrollHeight - element.scrollTop <= element.clientHeight;
+      }
+      if (isScrollBottom()) {
+        onSrollBottom(e, scrollColumnId);
+      }
+    }
+  }, optionInfoList.map(function (_ref2) {
+    var _classNames;
+    var disabled = _ref2.disabled,
+      label = _ref2.label,
+      value = _ref2.value,
+      isMergedLeaf = _ref2.isLeaf,
+      isLoading = _ref2.isLoading,
+      checked = _ref2.checked,
+      halfChecked = _ref2.halfChecked,
+      option = _ref2.option,
+      fullPath = _ref2.fullPath,
+      fullPathKey = _ref2.fullPathKey;
+    // >>>>> Open
+    var triggerOpenPath = function triggerOpenPath() {
+      if (!disabled && (!hoverOpen || !isMergedLeaf)) {
+        onActive(fullPath);
+      }
+    };
+
+    // >>>>> Selection
+    var triggerSelect = function triggerSelect() {
+      if (isSelectable(option)) {
+        onSelect(fullPath, isMergedLeaf);
+      }
+    };
+
+    // >>>>> Title
+    var title;
+    if (typeof option.title === "string") {
+      title = option.title;
+    } else if (typeof label === "string") {
+      title = label;
+    }
+
+    // >>>>> Render
+    return /*#__PURE__*/React.createElement("li", {
+      key: fullPathKey,
+      className: classNames(menuItemPrefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(menuItemPrefixCls, "-expand"), !isMergedLeaf), _defineProperty(_classNames, "".concat(menuItemPrefixCls, "-active"), activeValue === value), _defineProperty(_classNames, "".concat(menuItemPrefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(menuItemPrefixCls, "-loading"), isLoading), _classNames)),
+      style: dropdownMenuColumnStyle,
+      role: "menuitemcheckbox",
+      title: title,
+      "aria-checked": checked,
+      "data-path-key": fullPathKey,
+      onClick: function onClick() {
+        triggerOpenPath();
+        if (!multiple || isMergedLeaf) {
+          triggerSelect();
+        }
+      },
+      onDoubleClick: function onDoubleClick() {
+        if (changeOnSelect) {
+          onToggleOpen(false);
+        }
+      },
+      onMouseEnter: function onMouseEnter() {
+        if (hoverOpen) {
+          triggerOpenPath();
+        }
+      },
+      onMouseDown: function onMouseDown(e) {
+        // Prevent selector from blurring
+        // e.preventDefault();
+      }
+    }, multiple && /*#__PURE__*/React.createElement(Checkbox, {
+      prefixCls: "".concat(prefixCls, "-checkbox"),
+      checked: checked,
+      halfChecked: halfChecked,
+      disabled: disabled,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        triggerSelect();
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(menuItemPrefixCls, "-content")
+    }, label), !isLoading && expandIcon && !isMergedLeaf && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(menuItemPrefixCls, "-expand-icon")
+    }, expandIcon), isLoading && loadingIcon && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(menuItemPrefixCls, "-loading-icon")
+    }, loadingIcon));
+  }));
+  // ============================ Render ============================
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      flex: 1
+    }
+  }, showColumnSearch && /*#__PURE__*/React.createElement(_Input, {
+    style: {
+      width: "100%"
+    },
+    value: inputValue,
+    onChange: onChange
+  }), dropdownColumnRender ? dropdownColumnRender(renderColumnDom, scrollColumnId) : renderColumnDom);
+}

package/lib/CWCascader/rc-cascader/OptionList/index.js

@@ -0,0 +1,215 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/* eslint-disable default-case */
+import classNames from 'classnames';
+import { useBaseProps } from 'rc-cascader/node_modules/rc-select';
+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 Column, { FIX_LABEL } from './Column';
+import useActive from './useActive';
+import useKeyboard from './useKeyboard';
+var RefOptionList = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _optionColumns$, _optionColumns$$optio, _ref3, _classNames;
+  var _useBaseProps = useBaseProps(),
+    prefixCls = _useBaseProps.prefixCls,
+    multiple = _useBaseProps.multiple,
+    searchValue = _useBaseProps.searchValue,
+    toggleOpen = _useBaseProps.toggleOpen,
+    notFoundContent = _useBaseProps.notFoundContent,
+    direction = _useBaseProps.direction;
+  var containerRef = React.useRef();
+  var rtl = direction === 'rtl';
+  var _React$useContext = React.useContext(CascaderContext),
+    options = _React$useContext.options,
+    values = _React$useContext.values,
+    halfValues = _React$useContext.halfValues,
+    fieldNames = _React$useContext.fieldNames,
+    changeOnSelect = _React$useContext.changeOnSelect,
+    onSelect = _React$useContext.onSelect,
+    searchOptions = _React$useContext.searchOptions,
+    dropdownPrefixCls = _React$useContext.dropdownPrefixCls,
+    loadData = _React$useContext.loadData,
+    expandTrigger = _React$useContext.expandTrigger;
+  var mergedPrefixCls = dropdownPrefixCls || prefixCls;
+  // ========================= loadData =========================
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    loadingKeys = _React$useState2[0],
+    setLoadingKeys = _React$useState2[1];
+  var internalLoadData = function internalLoadData(valueCells) {
+    // Do not load when search
+    if (!loadData || searchValue) {
+      return;
+    }
+    var optionList = toPathOptions(valueCells, options, fieldNames);
+    var rawOptions = optionList.map(function (_ref) {
+      var option = _ref.option;
+      return option;
+    });
+    var lastOption = rawOptions[rawOptions.length - 1];
+    if (lastOption && !isLeaf(lastOption, fieldNames)) {
+      var pathKey = toPathKey(valueCells);
+      setLoadingKeys(function (keys) {
+        return [].concat(_toConsumableArray(keys), [pathKey]);
+      });
+      loadData(rawOptions);
+    }
+  };
+  // zombieJ: This is bad. We should make this same as `rc-tree` to use Promise instead.
+  React.useEffect(function () {
+    if (loadingKeys.length) {
+      loadingKeys.forEach(function (loadingKey) {
+        var valueStrCells = toPathValueStr(loadingKey);
+        var optionList = toPathOptions(valueStrCells, options, fieldNames, true).map(function (_ref2) {
+          var option = _ref2.option;
+          return option;
+        });
+        var lastOption = optionList[optionList.length - 1];
+        if (!lastOption || lastOption[fieldNames.children] || isLeaf(lastOption, fieldNames)) {
+          setLoadingKeys(function (keys) {
+            return keys.filter(function (key) {
+              return key !== loadingKey;
+            });
+          });
+        }
+      });
+    }
+  }, [options, loadingKeys, fieldNames]);
+  // ========================== Values ==========================
+  var checkedSet = React.useMemo(function () {
+    return new Set(toPathKeys(values));
+  }, [values]);
+  var halfCheckedSet = React.useMemo(function () {
+    return new Set(toPathKeys(halfValues));
+  }, [halfValues]);
+  // ====================== Accessibility =======================
+  var _useActive = useActive(),
+    _useActive2 = _slicedToArray(_useActive, 2),
+    activeValueCells = _useActive2[0],
+    setActiveValueCells = _useActive2[1];
+  // =========================== Path ===========================
+  var onPathOpen = function onPathOpen(nextValueCells) {
+    setActiveValueCells(nextValueCells);
+    // Trigger loadData
+    internalLoadData(nextValueCells);
+  };
+  var isSelectable = function isSelectable(option) {
+    var disabled = option.disabled;
+    var isMergedLeaf = isLeaf(option, fieldNames);
+    return !disabled && (isMergedLeaf || changeOnSelect || multiple);
+  };
+  var onPathSelect = function onPathSelect(valuePath, leaf) {
+    var fromKeyboard = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    onSelect(valuePath);
+    if (!multiple && (leaf || changeOnSelect && (expandTrigger === 'hover' || fromKeyboard))) {
+      toggleOpen(false);
+    }
+  };
+  // ========================== Option ==========================
+  var mergedOptions = React.useMemo(function () {
+    if (searchValue) {
+      return searchOptions;
+    }
+    return options;
+  }, [searchValue, searchOptions, options]);
+  // ========================== Column ==========================
+  var optionColumns = React.useMemo(function () {
+    var optionList = [{
+      options: mergedOptions
+    }];
+    var currentList = mergedOptions;
+    var fullPathKeys = getFullPathKeys(currentList, fieldNames);
+    var _loop = function _loop() {
+      var activeValueCell = activeValueCells[i];
+      var currentOption = currentList.find(function (option, index) {
+        return (fullPathKeys[index] ? toPathKey(fullPathKeys[index]) : option[fieldNames.value]) === activeValueCell;
+      });
+      var subOptions = currentOption === null || currentOption === void 0 ? void 0 : currentOption[fieldNames.children];
+      if (!(subOptions !== null && subOptions !== void 0 && subOptions.length)) {
+        return "break";
+      }
+      currentList = subOptions;
+      optionList.push({
+        options: subOptions
+      });
+    };
+    for (var i = 0; i < activeValueCells.length; i += 1) {
+      var _ret = _loop();
+      if (_ret === "break") break;
+    }
+    return optionList;
+  }, [mergedOptions, activeValueCells, fieldNames]);
+  // ========================= Keyboard =========================
+  var onKeyboardSelect = function onKeyboardSelect(selectValueCells, option) {
+    if (isSelectable(option)) {
+      onPathSelect(selectValueCells, isLeaf(option, fieldNames), true);
+    }
+  };
+  useKeyboard(ref, mergedOptions, fieldNames, activeValueCells, onPathOpen, onKeyboardSelect);
+  // >>>>> Active Scroll
+  React.useEffect(function () {
+    for (var i = 0; i < activeValueCells.length; i += 1) {
+      var _containerRef$current;
+      var cellPath = activeValueCells.slice(0, i + 1);
+      var cellKeyPath = toPathKey(cellPath);
+      var ele = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector("li[data-path-key=\"".concat(cellKeyPath.replace(/\\{0,2}"/g, '\\"'), "\"]"));
+      if (ele) {
+        scrollIntoParentView(ele);
+      }
+    }
+  }, [activeValueCells]);
+  // ========================== Render ==========================
+  // >>>>> Empty
+  var isEmpty = !((_optionColumns$ = optionColumns[0]) !== null && _optionColumns$ !== void 0 && (_optionColumns$$optio = _optionColumns$.options) !== null && _optionColumns$$optio !== void 0 && _optionColumns$$optio.length);
+  var emptyList = [(_ref3 = {}, _defineProperty(_ref3, fieldNames.value, '__EMPTY__'), _defineProperty(_ref3, FIX_LABEL, notFoundContent), _defineProperty(_ref3, "disabled", true), _ref3)];
+  var columnProps = _objectSpread(_objectSpread({}, props), {}, {
+    multiple: !isEmpty && multiple,
+    onSelect: onPathSelect,
+    onActive: onPathOpen,
+    onToggleOpen: toggleOpen,
+    checkedSet: checkedSet,
+    halfCheckedSet: halfCheckedSet,
+    loadingKeys: loadingKeys,
+    isSelectable: isSelectable
+  });
+  // >>>>> Columns
+  var mergedOptionColumns = isEmpty ? [{
+    options: emptyList
+  }] : optionColumns;
+  var columnNodes = mergedOptionColumns.map(function (col, index) {
+    var prevValuePath = activeValueCells.slice(0, index);
+    var 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("div", {
+    className: classNames("".concat(mergedPrefixCls, "-menus"), (_classNames = {}, _defineProperty(_classNames, "".concat(mergedPrefixCls, "-menu-empty"), isEmpty), _defineProperty(_classNames, "".concat(mergedPrefixCls, "-rtl"), rtl), _classNames)),
+    ref: containerRef
+  }, columnNodes);
+});
+export default RefOptionList;

package/lib/CWCascader/rc-cascader/OptionList/useActive.js

@@ -0,0 +1,33 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import * as React from 'react';
+import CascaderContext from '../context';
+import { useBaseProps } from 'rc-cascader/node_modules/rc-select';
+/**
+ * Control the active open options path.
+ */
+export default (function () {
+  var _useBaseProps = useBaseProps(),
+    multiple = _useBaseProps.multiple,
+    open = _useBaseProps.open;
+  var _React$useContext = React.useContext(CascaderContext),
+    values = _React$useContext.values;
+  // Record current dropdown active options
+  // This also control the open status
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    activeValueCells = _React$useState2[0],
+    setActiveValueCells = _React$useState2[1];
+  React.useEffect(function () {
+    if (open && !multiple) {
+      var firstValueCells = values[0];
+      setActiveValueCells(firstValueCells || []);
+    }
+  }, /* eslint-disable react-hooks/exhaustive-deps */
+  [open]);
+  return [activeValueCells, setActiveValueCells];
+});

package/lib/CWCascader/rc-cascader/OptionList/useKeyboard.js

@@ -0,0 +1,177 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useBaseProps } from 'rc-cascader/node_modules/rc-select';
+import KeyCode from 'rc-util/lib/KeyCode';
+import * as React from 'react';
+import { SEARCH_MARK } from '../hooks/useSearchOptions';
+import { getFullPathKeys, toPathKey } from '../utils/commonUtil';
+export default (function (ref, options, fieldNames, activeValueCells, setActiveValueCells, onKeyBoardSelect) {
+  var _useBaseProps = useBaseProps(),
+    direction = _useBaseProps.direction,
+    searchValue = _useBaseProps.searchValue,
+    toggleOpen = _useBaseProps.toggleOpen,
+    open = _useBaseProps.open;
+  var rtl = direction === 'rtl';
+  var _React$useMemo = React.useMemo(function () {
+      var activeIndex = -1;
+      var currentOptions = options;
+      var mergedActiveIndexes = [];
+      var mergedActiveValueCells = [];
+      var len = activeValueCells.length;
+      var pathKeys = getFullPathKeys(options, fieldNames);
+      // Fill validate active value cells and index
+      var _loop = function _loop(i) {
+        // Mark the active index for current options
+        var nextActiveIndex = currentOptions.findIndex(function (option, index) {
+          return (pathKeys[index] ? toPathKey(pathKeys[index]) : option[fieldNames.value]) === activeValueCells[i];
+        });
+        if (nextActiveIndex === -1) {
+          return "break";
+        }
+        activeIndex = nextActiveIndex;
+        mergedActiveIndexes.push(activeIndex);
+        mergedActiveValueCells.push(activeValueCells[i]);
+        currentOptions = currentOptions[activeIndex][fieldNames.children];
+      };
+      for (var i = 0; i < len && currentOptions; i += 1) {
+        var _ret = _loop(i);
+        if (_ret === "break") break;
+      }
+      // Fill last active options
+      var activeOptions = options;
+      for (var _i2 = 0; _i2 < mergedActiveIndexes.length - 1; _i2 += 1) {
+        activeOptions = activeOptions[mergedActiveIndexes[_i2]][fieldNames.children];
+      }
+      return [mergedActiveValueCells, activeIndex, activeOptions, pathKeys];
+    }, [activeValueCells, fieldNames, options]),
+    _React$useMemo2 = _slicedToArray(_React$useMemo, 4),
+    validActiveValueCells = _React$useMemo2[0],
+    lastActiveIndex = _React$useMemo2[1],
+    lastActiveOptions = _React$useMemo2[2],
+    fullPathKeys = _React$useMemo2[3];
+  // Update active value cells and scroll to target element
+  var internalSetActiveValueCells = function internalSetActiveValueCells(next) {
+    setActiveValueCells(next);
+  };
+  // Same options offset
+  var offsetActiveOption = function offsetActiveOption(offset) {
+    var len = lastActiveOptions.length;
+    var currentIndex = lastActiveIndex;
+    if (currentIndex === -1 && offset < 0) {
+      currentIndex = len;
+    }
+    for (var i = 0; i < len; i += 1) {
+      currentIndex = (currentIndex + offset + len) % len;
+      var option = lastActiveOptions[currentIndex];
+      if (option && !option.disabled) {
+        var nextActiveCells = validActiveValueCells.slice(0, -1).concat(fullPathKeys[currentIndex] ? toPathKey(fullPathKeys[currentIndex]) : option[fieldNames.value]);
+        internalSetActiveValueCells(nextActiveCells);
+        return;
+      }
+    }
+  };
+  // Different options offset
+  var prevColumn = function prevColumn() {
+    if (validActiveValueCells.length > 1) {
+      var nextActiveCells = validActiveValueCells.slice(0, -1);
+      internalSetActiveValueCells(nextActiveCells);
+    } else {
+      toggleOpen(false);
+    }
+  };
+  var nextColumn = function nextColumn() {
+    var _lastActiveOptions$la;
+    var nextOptions = ((_lastActiveOptions$la = lastActiveOptions[lastActiveIndex]) === null || _lastActiveOptions$la === void 0 ? void 0 : _lastActiveOptions$la[fieldNames.children]) || [];
+    var nextOption = nextOptions.find(function (option) {
+      return !option.disabled;
+    });
+    if (nextOption) {
+      var nextActiveCells = [].concat(_toConsumableArray(validActiveValueCells), [nextOption[fieldNames.value]]);
+      internalSetActiveValueCells(nextActiveCells);
+    }
+  };
+  React.useImperativeHandle(ref, function () {
+    return {
+      // scrollTo: treeRef.current?.scrollTo,
+      onKeyDown: function onKeyDown(event) {
+        var which = event.which;
+        switch (which) {
+          // >>> Arrow keys
+          case KeyCode.UP:
+          case KeyCode.DOWN:
+            {
+              var 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 (rtl) {
+                nextColumn();
+              } else {
+                prevColumn();
+              }
+              break;
+            }
+          case KeyCode.RIGHT:
+            {
+              if (rtl) {
+                prevColumn();
+              } else {
+                nextColumn();
+              }
+              break;
+            }
+          case KeyCode.BACKSPACE:
+            {
+              if (!searchValue) {
+                prevColumn();
+              }
+              break;
+            }
+          // >>> Select
+          case KeyCode.ENTER:
+            {
+              if (validActiveValueCells.length) {
+                var option = lastActiveOptions[lastActiveIndex];
+                // Search option should revert back of origin options
+                var originOptions = (option === null || option === void 0 ? void 0 : option[SEARCH_MARK]) || [];
+                if (originOptions.length) {
+                  onKeyBoardSelect(originOptions.map(function (opt) {
+                    return opt[fieldNames.value];
+                  }), originOptions[originOptions.length - 1]);
+                } else {
+                  onKeyBoardSelect(validActiveValueCells, lastActiveOptions[lastActiveIndex]);
+                }
+              }
+              break;
+            }
+          // >>> Close
+          case KeyCode.ESC:
+            {
+              toggleOpen(false);
+              if (open) {
+                event.stopPropagation();
+              }
+            }
+        }
+      },
+      onKeyUp: function onKeyUp() {}
+    };
+  });
+});