@rc-component/cascader 1.0.0

package/lib/OptionList/List.js

@@ -0,0 +1,224 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var React = _interopRequireWildcard(require("react"));
+var _context = _interopRequireDefault(require("../context"));
+var _commonUtil = require("../utils/commonUtil");
+var _treeUtil = require("../utils/treeUtil");
+var _CacheContent = _interopRequireDefault(require("./CacheContent"));
+var _Column = _interopRequireWildcard(require("./Column"));
+var _useActive = _interopRequireDefault(require("./useActive"));
+var _useKeyboard = _interopRequireDefault(require("./useKeyboard"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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); } /* eslint-disable default-case */
+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(_context.default);
+  const mergedPrefixCls = dropdownPrefixCls || prefixCls;
+
+  // ========================= loadData =========================
+  const [loadingKeys, setLoadingKeys] = React.useState([]);
+  const internalLoadData = valueCells => {
+    // Do not load when search
+    if (!loadData || searchValue) {
+      return;
+    }
+    const optionList = (0, _treeUtil.toPathOptions)(valueCells, options, fieldNames);
+    const rawOptions = optionList.map(({
+      option
+    }) => option);
+    const lastOption = rawOptions[rawOptions.length - 1];
+    if (lastOption && !(0, _commonUtil.isLeaf)(lastOption, fieldNames)) {
+      const pathKey = (0, _commonUtil.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 = (0, _commonUtil.toPathValueStr)(loadingKey);
+        const optionList = (0, _treeUtil.toPathOptions)(valueStrCells, options, fieldNames, true).map(({
+          option
+        }) => option);
+        const lastOption = optionList[optionList.length - 1];
+        if (!lastOption || lastOption[fieldNames.children] || (0, _commonUtil.isLeaf)(lastOption, fieldNames)) {
+          setLoadingKeys(keys => keys.filter(key => key !== loadingKey));
+        }
+      });
+    }
+  }, [options, loadingKeys, fieldNames]);
+
+  // ========================== Values ==========================
+  const checkedSet = React.useMemo(() => new Set((0, _commonUtil.toPathKeys)(values)), [values]);
+  const halfCheckedSet = React.useMemo(() => new Set((0, _commonUtil.toPathKeys)(halfValues)), [halfValues]);
+
+  // ====================== Accessibility =======================
+  const [activeValueCells, setActiveValueCells] = (0, _useActive.default)(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 = (0, _commonUtil.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 = (0, _commonUtil.getFullPathKeys)(currentList, fieldNames);
+    for (let i = 0; i < activeValueCells.length; i += 1) {
+      const activeValueCell = activeValueCells[i];
+      const currentOption = currentList.find((option, index) => (fullPathKeys[index] ? (0, _commonUtil.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, (0, _commonUtil.isLeaf)(option, fieldNames), true);
+    }
+  };
+  (0, _useKeyboard.default)(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 = (0, _commonUtil.toPathKey)(cellPath);
+      const ele = containerRef.current?.querySelector(`li[data-path-key="${cellKeyPath.replace(/\\{0,2}"/g, '\\"')}"]` // matches unescaped double quotes
+      );
+
+      if (ele) {
+        (0, _commonUtil.scrollIntoParentView)(ele);
+      }
+    }
+  }, [activeValueCells, searchValue]);
+
+  // ========================== Render ==========================
+  // >>>>> Empty
+  const isEmpty = !optionColumns[0]?.options?.length;
+  const emptyList = [{
+    [fieldNames.value]: '__EMPTY__',
+    [_Column.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.default, _extends({
+      key: index
+    }, columnProps, {
+      prefixCls: mergedPrefixCls,
+      options: col.options,
+      prevValuePath: prevValuePath,
+      activeValue: activeValue
+    }));
+  });
+
+  // >>>>> Render
+  return /*#__PURE__*/React.createElement(_CacheContent.default, {
+    open: open
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)(`${mergedPrefixCls}-menus`, {
+      [`${mergedPrefixCls}-menu-empty`]: isEmpty,
+      [`${mergedPrefixCls}-rtl`]: rtl
+    }),
+    ref: containerRef
+  }, columnNodes));
+});
+if (process.env.NODE_ENV !== 'production') {
+  RawOptionList.displayName = 'RawOptionList';
+}
+var _default = exports.default = RawOptionList;

package/lib/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/lib/OptionList/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _select = require("@rc-component/select");
+var React = _interopRequireWildcard(require("react"));
+var _List = _interopRequireDefault(require("./List"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
+const RefOptionList = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const baseProps = (0, _select.useBaseProps)();
+
+  // >>>>> Render
+  return /*#__PURE__*/React.createElement(_List.default, _extends({}, props, baseProps, {
+    ref: ref
+  }));
+});
+var _default = exports.default = RefOptionList;

package/lib/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/lib/OptionList/useActive.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _context = _interopRequireDefault(require("../context"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * Control the active open options path.
+ */
+const useActive = (multiple, open) => {
+  const {
+    values
+  } = React.useContext(_context.default);
+  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];
+};
+var _default = exports.default = useActive;

package/lib/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/lib/OptionList/useKeyboard.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _KeyCode = _interopRequireDefault(require("@rc-component/util/lib/KeyCode"));
+var React = _interopRequireWildcard(require("react"));
+var _useSearchOptions = require("../hooks/useSearchOptions");
+var _commonUtil = require("../utils/commonUtil");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _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 = (0, _commonUtil.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] ? (0, _commonUtil.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] ? (0, _commonUtil.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.default.UP:
+        case _KeyCode.default.DOWN:
+          {
+            let offset = 0;
+            if (which === _KeyCode.default.UP) {
+              offset = -1;
+            } else if (which === _KeyCode.default.DOWN) {
+              offset = 1;
+            }
+            if (offset !== 0) {
+              offsetActiveOption(offset);
+            }
+            break;
+          }
+        case _KeyCode.default.LEFT:
+          {
+            if (searchValue) {
+              break;
+            }
+            if (rtl) {
+              nextColumn();
+            } else {
+              prevColumn();
+            }
+            break;
+          }
+        case _KeyCode.default.RIGHT:
+          {
+            if (searchValue) {
+              break;
+            }
+            if (rtl) {
+              prevColumn();
+            } else {
+              nextColumn();
+            }
+            break;
+          }
+        case _KeyCode.default.BACKSPACE:
+          {
+            if (!searchValue) {
+              prevColumn();
+            }
+            break;
+          }
+
+        // >>> Select
+        case _KeyCode.default.ENTER:
+          {
+            if (validActiveValueCells.length) {
+              const option = lastActiveOptions[lastActiveIndex];
+
+              // Search option should revert back of origin options
+              const originOptions = option?.[_useSearchOptions.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.default.ESC:
+          {
+            toggleOpen(false);
+            if (open) {
+              event.stopPropagation();
+            }
+          }
+      }
+    },
+    onKeyUp: () => {}
+  }));
+};
+exports.default = _default;

package/lib/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/lib/Panel.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Panel;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _util = require("@rc-component/util");
+var React = _interopRequireWildcard(require("react"));
+var _context = _interopRequireDefault(require("./context"));
+var _useMissingValues = _interopRequireDefault(require("./hooks/useMissingValues"));
+var _useOptions = _interopRequireDefault(require("./hooks/useOptions"));
+var _useSelect = _interopRequireDefault(require("./hooks/useSelect"));
+var _useValues = _interopRequireDefault(require("./hooks/useValues"));
+var _List = _interopRequireDefault(require("./OptionList/List"));
+var _commonUtil = require("./utils/commonUtil");
+var _treeUtil = require("./utils/treeUtil");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function noop() {}
+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] = (0, _util.useMergedState)(defaultValue, {
+    value,
+    postState: _commonUtil.toRawValues
+  });
+
+  // ========================= FieldNames =========================
+  const mergedFieldNames = React.useMemo(() => (0, _commonUtil.fillFieldNames)(fieldNames), /* eslint-disable react-hooks/exhaustive-deps */
+  [JSON.stringify(fieldNames)]
+  /* eslint-enable react-hooks/exhaustive-deps */);
+
+  // =========================== Option ===========================
+  const [mergedOptions, getPathKeyEntities, getValueByKeyPath] = (0, _useOptions.default)(mergedFieldNames, options);
+
+  // ========================= Values =========================
+  const getMissingValues = (0, _useMissingValues.default)(mergedOptions, mergedFieldNames);
+
+  // Fill `rawValues` with checked conduction values
+  const [checkedValues, halfCheckedValues, missingCheckedValues] = (0, _useValues.default)(multiple, rawValues, getPathKeyEntities, getValueByKeyPath, getMissingValues);
+
+  // =========================== Change ===========================
+  const triggerChange = (0, _util.useEvent)(nextValues => {
+    setRawValues(nextValues);
+
+    // Save perf if no need trigger event
+    if (onChange) {
+      const nextRawValues = (0, _commonUtil.toRawValues)(nextValues);
+      const valueOptions = nextRawValues.map(valueCells => (0, _treeUtil.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 = (0, _useSelect.default)(multiple, triggerChange, checkedValues, halfCheckedValues, missingCheckedValues, getPathKeyEntities, getValueByKeyPath, showCheckedStrategy);
+  const onInternalSelect = (0, _util.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(_context.default.Provider, {
+    value: cascaderContext
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)(panelPrefixCls, {
+      [`${panelPrefixCls}-rtl`]: direction === 'rtl',
+      [`${panelPrefixCls}-empty`]: isEmpty
+    }, className),
+    style: style
+  }, isEmpty ? notFoundContent : /*#__PURE__*/React.createElement(_List.default, {
+    prefixCls: prefixCls,
+    searchValue: "",
+    multiple: multiple,
+    toggleOpen: noop,
+    open: true,
+    direction: direction,
+    disabled: disabled
+  })));
+}

package/lib/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/lib/context.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const CascaderContext = /*#__PURE__*/React.createContext({});
+var _default = exports.default = CascaderContext;

package/lib/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;