@996-design/996-components 1.0.0

package/lib/cascader/hooks/useBase.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _configProvider = require("../../config-provider");
+function useBase(customizePrefixCls, direction) {
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+    getPrefixCls = _React$useContext.getPrefixCls,
+    rootDirection = _React$useContext.direction,
+    renderEmpty = _React$useContext.renderEmpty;
+  var mergedDirection = direction || rootDirection;
+  var prefixCls = getPrefixCls('select', customizePrefixCls);
+  var cascaderPrefixCls = getPrefixCls('cascader', customizePrefixCls);
+  return [prefixCls, cascaderPrefixCls, mergedDirection, renderEmpty];
+}
+var _default = exports.default = useBase;

package/lib/cascader/hooks/useCheckable.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export default function useCheckable(cascaderPrefixCls: string, multiple?: boolean): false | React.JSX.Element;

package/lib/cascader/hooks/useCheckable.js

@@ -0,0 +1,16 @@
+"use strict";
+"use client";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useCheckable;
+var React = _interopRequireWildcard(require("react"));
+function useCheckable(cascaderPrefixCls, multiple) {
+  return React.useMemo(function () {
+    return multiple ? /*#__PURE__*/React.createElement("span", {
+      className: "".concat(cascaderPrefixCls, "-checkbox-inner")
+    }) : false;
+  }, [cascaderPrefixCls, multiple]);
+}

package/lib/cascader/hooks/useIcons.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface UseIconsOptions {
+    isRtl: boolean;
+    expandIcon: React.ReactNode;
+    loadingIcon: React.ReactNode;
+    contextExpandIcon: React.ReactNode;
+    contextLoadingIcon: React.ReactNode;
+}
+export default function useIcons({ contextExpandIcon, contextLoadingIcon, expandIcon, loadingIcon, isRtl, }: UseIconsOptions): {
+    expandIcon: string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element;
+    loadingIcon: string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element;
+};

package/lib/cascader/hooks/useIcons.js

@@ -0,0 +1,32 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useIcons;
+var React = _interopRequireWildcard(require("react"));
+var _RightOutlined = _interopRequireDefault(require("@996-design/996-icons/RightOutlined"));
+var _LoadingOutlined = _interopRequireDefault(require("@996-design/996-icons/LoadingOutlined"));
+var _LeftOutlined = _interopRequireDefault(require("@996-design/996-icons/LeftOutlined"));
+var defaultLoadingIcon = /*#__PURE__*/React.createElement(_LoadingOutlined.default, {
+  spin: true
+});
+var defaultExpandIcon = /*#__PURE__*/React.createElement(_RightOutlined.default, null);
+var defaultRtlExpandIcon = /*#__PURE__*/React.createElement(_LeftOutlined.default, null);
+function useIcons(_ref) {
+  var contextExpandIcon = _ref.contextExpandIcon,
+    contextLoadingIcon = _ref.contextLoadingIcon,
+    expandIcon = _ref.expandIcon,
+    loadingIcon = _ref.loadingIcon,
+    isRtl = _ref.isRtl;
+  return React.useMemo(function () {
+    var _ref2, _ref3;
+    return {
+      expandIcon: (_ref2 = expandIcon !== null && expandIcon !== void 0 ? expandIcon : contextExpandIcon) !== null && _ref2 !== void 0 ? _ref2 : isRtl ? defaultRtlExpandIcon : defaultExpandIcon,
+      loadingIcon: (_ref3 = loadingIcon !== null && loadingIcon !== void 0 ? loadingIcon : contextLoadingIcon) !== null && _ref3 !== void 0 ? _ref3 : defaultLoadingIcon
+    };
+  }, [contextExpandIcon, contextLoadingIcon, expandIcon, isRtl, loadingIcon]);
+}

package/lib/cascader/index.d.ts

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import type { BaseOptionType, DefaultOptionType, FieldNames, CascaderProps as RcCascaderProps, SearchConfig } from '@rc-component/cascader';
+import type { GenerateSemantic } from '../_util/hooks/useMergeSemantic/semanticType';
+import type { SelectCommonPlacement } from '../_util/motion';
+import type { InputStatus } from '../_util/statusUtils';
+import type { Variant } from '../config-provider';
+import type { SizeType } from '../config-provider/SizeContext';
+import type { SelectSemanticType } from '../select';
+import CascaderPanel from './Panel';
+export type { BaseOptionType, DefaultOptionType };
+export type FieldNamesType = FieldNames;
+export type FilledFieldNamesType = Required<FieldNamesType>;
+export type CascaderSemanticType = {
+    classNames?: {
+        root?: string;
+        prefix?: string;
+        suffix?: string;
+        input?: string;
+        placeholder?: string;
+        content?: string;
+        item?: string;
+        itemContent?: string;
+        itemRemove?: string;
+        popup?: NonNullable<SelectSemanticType['classNames']>['popup'];
+    };
+    styles?: {
+        root?: React.CSSProperties;
+        prefix?: React.CSSProperties;
+        suffix?: React.CSSProperties;
+        input?: React.CSSProperties;
+        placeholder?: React.CSSProperties;
+        content?: React.CSSProperties;
+        item?: React.CSSProperties;
+        itemContent?: React.CSSProperties;
+        itemRemove?: React.CSSProperties;
+        popup?: NonNullable<SelectSemanticType['styles']>['popup'];
+    };
+};
+export type CascaderSemanticAllType = GenerateSemantic<CascaderSemanticType, CascaderProps>;
+declare const SHOW_CHILD: "SHOW_CHILD", SHOW_PARENT: "SHOW_PARENT";
+export interface CascaderProps<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean = boolean> extends Omit<RcCascaderProps<OptionType, ValueField, Multiple>, 'checkable' | 'classNames' | 'styles'> {
+    multiple?: Multiple;
+    size?: SizeType;
+    /**
+     * @deprecated `showArrow` is deprecated which will be removed in next major version. It will be a
+     *   default behavior, you can hide it by setting `suffixIcon` to null.
+     */
+    showArrow?: boolean;
+    disabled?: boolean;
+    /** @deprecated Use `variant` instead. */
+    bordered?: boolean;
+    placement?: SelectCommonPlacement;
+    suffixIcon?: React.ReactNode;
+    showSearch?: boolean | (SearchConfig<OptionType, keyof OptionType> & {
+        searchIcon?: React.ReactNode;
+    });
+    options?: OptionType[];
+    status?: InputStatus;
+    rootClassName?: string;
+    /** @deprecated Please use `classNames.popup.root` instead */
+    popupClassName?: string;
+    /** @deprecated Please use `classNames.popup.root` instead */
+    dropdownClassName?: string;
+    /** @deprecated Please use `styles.popup.root` instead */
+    dropdownStyle?: React.CSSProperties;
+    /** @deprecated Please use `popupRender` instead */
+    dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
+    popupRender?: (menu: React.ReactElement) => React.ReactElement;
+    /** @deprecated Please use `styles.popup.listItem` instead */
+    dropdownMenuColumnStyle?: React.CSSProperties;
+    /** @deprecated Please use `styles.popup.listItem` instead */
+    popupMenuColumnStyle?: React.CSSProperties;
+    /** @deprecated Please use `onOpenChange` instead */
+    onDropdownVisibleChange?: (visible: boolean) => void;
+    /** @deprecated Please use `onOpenChange` instead */
+    onPopupVisibleChange?: (visible: boolean) => void;
+    onOpenChange?: (visible: boolean) => void;
+    /**
+     * @since 5.13.0
+     * @default "outlined"
+     */
+    variant?: Variant;
+    classNames?: CascaderSemanticAllType['classNamesAndFn'];
+    styles?: CascaderSemanticAllType['stylesAndFn'];
+}
+export type CascaderAutoProps<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType> = (CascaderProps<OptionType, ValueField> & {
+    multiple?: false;
+}) | (CascaderProps<OptionType, ValueField, true> & {
+    multiple: true;
+});
+export interface CascaderRef {
+    focus: () => void;
+    blur: () => void;
+}
+declare const Cascader: (<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType>(props: React.PropsWithChildren<CascaderAutoProps<OptionType, ValueField>> & React.RefAttributes<CascaderRef>) => React.ReactElement) & {
+    displayName: string;
+    SHOW_PARENT: typeof SHOW_PARENT;
+    SHOW_CHILD: typeof SHOW_CHILD;
+    Panel: typeof CascaderPanel;
+    _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
+};
+declare const PurePanel: (props: import("../_util/type").AnyObject) => React.JSX.Element;
+export default Cascader;

package/lib/cascader/index.js

@@ -0,0 +1,340 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var React = _interopRequireWildcard(require("react"));
+var _cascader = _interopRequireDefault(require("@rc-component/cascader"));
+var _util = require("@rc-component/util");
+var _clsx3 = require("clsx");
+var _hooks = require("../_util/hooks");
+var _useMergeSemantic3 = require("../_util/hooks/useMergeSemantic");
+var _is = require("../_util/is");
+var _motion = require("../_util/motion");
+var _PurePanel = _interopRequireDefault(require("../_util/PurePanel"));
+var _statusUtils = require("../_util/statusUtils");
+var _warning = require("../_util/warning");
+var _configProvider = require("../config-provider");
+var _context = require("../config-provider/context");
+var _defaultRenderEmpty = _interopRequireDefault(require("../config-provider/defaultRenderEmpty"));
+var _DisabledContext = _interopRequireDefault(require("../config-provider/DisabledContext"));
+var _useCSSVarCls = _interopRequireDefault(require("../config-provider/hooks/useCSSVarCls"));
+var _useSize = _interopRequireDefault(require("../config-provider/hooks/useSize"));
+var _context2 = require("../form/context");
+var _useVariants = _interopRequireDefault(require("../form/hooks/useVariants"));
+var _mergedBuiltinPlacements = _interopRequireDefault(require("../select/mergedBuiltinPlacements"));
+var _style = _interopRequireDefault(require("../select/style"));
+var _useIcons2 = _interopRequireDefault(require("../select/useIcons"));
+var _usePopupRender = _interopRequireDefault(require("../select/usePopupRender"));
+var _useShowArrow = _interopRequireDefault(require("../select/useShowArrow"));
+var _Compact = require("../space/Compact");
+var _useBase3 = _interopRequireDefault(require("./hooks/useBase"));
+var _useCheckable = _interopRequireDefault(require("./hooks/useCheckable"));
+var _useIcons3 = _interopRequireDefault(require("./hooks/useIcons"));
+var _Panel = _interopRequireDefault(require("./Panel"));
+var _style2 = _interopRequireDefault(require("./style"));
+var _excluded = ["prefixCls", "size", "disabled", "className", "rootClassName", "multiple", "bordered", "transitionName", "choiceTransitionName", "popupClassName", "expandIcon", "placement", "showSearch", "allowClear", "notFoundContent", "direction", "getPopupContainer", "status", "showArrow", "builtinPlacements", "style", "variant", "dropdownClassName", "dropdownRender", "onDropdownVisibleChange", "onPopupVisibleChange", "dropdownMenuColumnStyle", "popupRender", "dropdownStyle", "popupMenuColumnStyle", "onOpenChange", "styles", "classNames", "loadingIcon", "clearIcon", "removeIcon", "suffixIcon"];
+var SHOW_CHILD = _cascader.default.SHOW_CHILD,
+  SHOW_PARENT = _cascader.default.SHOW_PARENT;
+var highlightKeyword = function highlightKeyword(str, lowerKeyword, prefixCls) {
+  var cells = str.toLowerCase().split(lowerKeyword).reduce(function (list, cur, index) {
+    return index === 0 ? [cur] : [].concat((0, _toConsumableArray2.default)(list), [lowerKeyword, cur]);
+  }, []);
+  var fillCells = [];
+  var start = 0;
+  cells.forEach(function (cell, index) {
+    var end = start + cell.length;
+    var originWorld = str.slice(start, end);
+    start = end;
+    if (index % 2 === 1) {
+      originWorld =
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      React.createElement("span", {
+        className: "".concat(prefixCls, "-menu-item-keyword"),
+        key: "separator-".concat(index)
+      }, originWorld);
+    }
+    fillCells.push(originWorld);
+  });
+  return fillCells;
+};
+var defaultSearchRender = function defaultSearchRender(inputValue, path, prefixCls, fieldNames) {
+  var optionList = [];
+  // We do lower here to save perf
+  var lower = inputValue.toLowerCase();
+  path.forEach(function (node, index) {
+    if (index !== 0) {
+      optionList.push(' / ');
+    }
+    var label = node[fieldNames.label];
+    if ((0, _is.isString)(label) || (0, _is.isNumber)(label)) {
+      label = highlightKeyword(String(label), lower, prefixCls);
+    }
+    optionList.push(label);
+  });
+  return optionList;
+};
+var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var customizePrefixCls = props.prefixCls,
+    customizeSize = props.size,
+    customDisabled = props.disabled,
+    className = props.className,
+    rootClassName = props.rootClassName,
+    multiple = props.multiple,
+    _props$bordered = props.bordered,
+    bordered = _props$bordered === void 0 ? true : _props$bordered,
+    transitionName = props.transitionName,
+    _props$choiceTransiti = props.choiceTransitionName,
+    choiceTransitionName = _props$choiceTransiti === void 0 ? '' : _props$choiceTransiti,
+    popupClassName = props.popupClassName,
+    expandIcon = props.expandIcon,
+    placement = props.placement,
+    showSearch = props.showSearch,
+    _props$allowClear = props.allowClear,
+    allowClear = _props$allowClear === void 0 ? true : _props$allowClear,
+    notFoundContent = props.notFoundContent,
+    direction = props.direction,
+    getPopupContainer = props.getPopupContainer,
+    customStatus = props.status,
+    showArrow = props.showArrow,
+    builtinPlacements = props.builtinPlacements,
+    style = props.style,
+    customVariant = props.variant,
+    dropdownClassName = props.dropdownClassName,
+    dropdownRender = props.dropdownRender,
+    onDropdownVisibleChange = props.onDropdownVisibleChange,
+    onPopupVisibleChange = props.onPopupVisibleChange,
+    dropdownMenuColumnStyle = props.dropdownMenuColumnStyle,
+    popupRender = props.popupRender,
+    dropdownStyle = props.dropdownStyle,
+    popupMenuColumnStyle = props.popupMenuColumnStyle,
+    onOpenChange = props.onOpenChange,
+    styles = props.styles,
+    classNames = props.classNames,
+    loadingIcon = props.loadingIcon,
+    clearIcon = props.clearIcon,
+    removeIcon = props.removeIcon,
+    suffixIcon = props.suffixIcon,
+    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var _useComponentConfig = (0, _context.useComponentConfig)('cascader'),
+    getPrefixCls = _useComponentConfig.getPrefixCls,
+    getContextPopupContainer = _useComponentConfig.getPopupContainer,
+    contextClassName = _useComponentConfig.className,
+    contextStyle = _useComponentConfig.style,
+    contextClassNames = _useComponentConfig.classNames,
+    contextStyles = _useComponentConfig.styles,
+    contextExpandIcon = _useComponentConfig.expandIcon,
+    contextLoadingIcon = _useComponentConfig.loadingIcon,
+    contextClearIcon = _useComponentConfig.clearIcon,
+    contextRemoveIcon = _useComponentConfig.removeIcon,
+    contextSuffixIcon = _useComponentConfig.suffixIcon,
+    contextSearchIcon = _useComponentConfig.searchIcon;
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+    popupOverflow = _React$useContext.popupOverflow;
+  // =================== Form =====================
+  var _React$useContext2 = React.useContext(_context2.FormItemInputContext),
+    contextStatus = _React$useContext2.status,
+    hasFeedback = _React$useContext2.hasFeedback,
+    isFormItemInput = _React$useContext2.isFormItemInput,
+    feedbackIcon = _React$useContext2.feedbackIcon;
+  var mergedStatus = (0, _statusUtils.getMergedStatus)(contextStatus, customStatus);
+  // =================== Warning =====================
+  if (process.env.NODE_ENV !== 'production') {
+    var warning = (0, _warning.devUseWarning)('Cascader');
+    // v5 deprecated dropdown api
+    var deprecatedProps = {
+      dropdownClassName: 'classNames.popup.root',
+      dropdownStyle: 'styles.popup.root',
+      dropdownRender: 'popupRender',
+      dropdownMenuColumnStyle: 'styles.popup.listItem',
+      popupMenuColumnStyle: 'styles.popup.listItem',
+      onDropdownVisibleChange: 'onOpenChange',
+      onPopupVisibleChange: 'onOpenChange',
+      bordered: 'variant'
+    };
+    Object.entries(deprecatedProps).forEach(function (_ref) {
+      var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+        oldProp = _ref2[0],
+        newProp = _ref2[1];
+      warning.deprecated(!(oldProp in props), oldProp, newProp);
+    });
+    process.env.NODE_ENV !== "production" ? warning(!('showArrow' in props), 'deprecated', '`showArrow` is deprecated which will be removed in next major version. It will be a default behavior, you can hide it by setting `suffixIcon` to null.') : void 0;
+  }
+  // ==================== Prefix =====================
+  var _useBase = (0, _useBase3.default)(customizePrefixCls, direction),
+    _useBase2 = (0, _slicedToArray2.default)(_useBase, 4),
+    prefixCls = _useBase2[0],
+    cascaderPrefixCls = _useBase2[1],
+    mergedDirection = _useBase2[2],
+    renderEmpty = _useBase2[3];
+  var isRtl = mergedDirection === 'rtl';
+  var rootPrefixCls = getPrefixCls();
+  var rootCls = (0, _useCSSVarCls.default)(prefixCls);
+  var _useSelectStyle = (0, _style.default)(prefixCls, rootCls),
+    _useSelectStyle2 = (0, _slicedToArray2.default)(_useSelectStyle, 2),
+    hashId = _useSelectStyle2[0],
+    cssVarCls = _useSelectStyle2[1];
+  var cascaderRootCls = (0, _useCSSVarCls.default)(cascaderPrefixCls);
+  (0, _style2.default)(cascaderPrefixCls, cascaderRootCls);
+  var _useCompactItemContex = (0, _Compact.useCompactItemContext)(prefixCls, direction),
+    compactSize = _useCompactItemContex.compactSize,
+    compactItemClassnames = _useCompactItemContex.compactItemClassnames;
+  var _useVariant = (0, _useVariants.default)('cascader', customVariant, bordered),
+    _useVariant2 = (0, _slicedToArray2.default)(_useVariant, 2),
+    variant = _useVariant2[0],
+    enableVariantCls = _useVariant2[1];
+  // =================== No Found ====================
+  var mergedNotFoundContent = notFoundContent || (renderEmpty === null || renderEmpty === void 0 ? void 0 : renderEmpty('Cascader')) || (/*#__PURE__*/React.createElement(_defaultRenderEmpty.default, {
+    componentName: "Cascader"
+  }));
+  var mergedPopupRender = (0, _usePopupRender.default)(popupRender || dropdownRender);
+  var mergedPopupMenuColumnStyle = popupMenuColumnStyle || dropdownMenuColumnStyle;
+  var mergedOnOpenChange = onOpenChange || onPopupVisibleChange || onDropdownVisibleChange;
+  // ==================== Search =====================
+  var mergedShowSearch = React.useMemo(function () {
+    if (!showSearch) {
+      return showSearch;
+    }
+    var searchConfig = {
+      render: defaultSearchRender
+    };
+    if ((0, _is.isPlainObject)(showSearch)) {
+      searchConfig = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, searchConfig), showSearch);
+    }
+    return searchConfig;
+  }, [showSearch]);
+  // ===================== Size ======================
+  var mergedSize = (0, _useSize.default)(function (ctx) {
+    var _ref3;
+    return (_ref3 = customizeSize !== null && customizeSize !== void 0 ? customizeSize : compactSize) !== null && _ref3 !== void 0 ? _ref3 : ctx;
+  });
+  // ===================== Disabled =====================
+  var disabled = React.useContext(_DisabledContext.default);
+  var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
+  // ===================== Icon ======================
+  var _useIcons = (0, _useIcons3.default)({
+      contextExpandIcon: contextExpandIcon,
+      contextLoadingIcon: contextLoadingIcon,
+      expandIcon: expandIcon,
+      loadingIcon: loadingIcon,
+      isRtl: isRtl
+    }),
+    mergedExpandIcon = _useIcons.expandIcon,
+    mergedLoadingIcon = _useIcons.loadingIcon;
+  // =================== Multiple ====================
+  var checkable = (0, _useCheckable.default)(cascaderPrefixCls, multiple);
+  // ===================== Icons =====================
+  var showSuffixIcon = (0, _useShowArrow.default)(props.suffixIcon, showArrow);
+  var _useSelectIcons = (0, _useIcons2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      clearIcon: clearIcon,
+      contextClearIcon: contextClearIcon,
+      removeIcon: removeIcon,
+      contextRemoveIcon: contextRemoveIcon,
+      loadingIcon: mergedLoadingIcon,
+      suffixIcon: suffixIcon,
+      contextSuffixIcon: contextSuffixIcon,
+      searchIcon: (0, _is.isPlainObject)(showSearch) ? showSearch.searchIcon : undefined,
+      contextSearchIcon: contextSearchIcon,
+      hasFeedback: hasFeedback,
+      feedbackIcon: feedbackIcon,
+      showSuffixIcon: showSuffixIcon,
+      multiple: multiple,
+      prefixCls: prefixCls,
+      componentName: 'Cascader'
+    })),
+    mergedSuffixIcon = _useSelectIcons.suffixIcon,
+    mergedRemoveIcon = _useSelectIcons.removeIcon,
+    mergedClearIcon = _useSelectIcons.clearIcon;
+  // ===================== Placement =====================
+  var memoPlacement = React.useMemo(function () {
+    if (placement !== undefined) {
+      return placement;
+    }
+    return isRtl ? 'bottomRight' : 'bottomLeft';
+  }, [placement, isRtl]);
+  var mergedAllowClear = allowClear === true ? {
+    clearIcon: mergedClearIcon
+  } : allowClear;
+  // =========== Merged Props for Semantic ==========
+  var mergedProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    variant: variant,
+    size: mergedSize,
+    status: mergedStatus,
+    disabled: mergedDisabled
+  });
+  var contextStyleRoot = (0, _useMergeSemantic3.useSemanticRootStyle)(contextStyle);
+  var styleRoot = (0, _useMergeSemantic3.useSemanticRootStyle)(style);
+  var _useMergeSemantic = (0, _useMergeSemantic3.useMergeSemantic)([contextClassNames, classNames], [contextStyles, contextStyleRoot, styles, styleRoot], {
+      props: mergedProps
+    }, {
+      popup: {
+        _default: 'root'
+      }
+    }),
+    _useMergeSemantic2 = (0, _slicedToArray2.default)(_useMergeSemantic, 2),
+    mergedClassNames = _useMergeSemantic2[0],
+    mergedStyles = _useMergeSemantic2[1];
+  // =================== Dropdown ====================
+  var mergedPopupStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedStyles.popup.root), dropdownStyle);
+  // ============================ zIndex ============================
+  var _useZIndex = (0, _hooks.useZIndex)('SelectLike', mergedPopupStyle === null || mergedPopupStyle === void 0 ? void 0 : mergedPopupStyle.zIndex),
+    _useZIndex2 = (0, _slicedToArray2.default)(_useZIndex, 1),
+    zIndex = _useZIndex2[0];
+  var mergedPopupClassName = (0, _clsx3.clsx)(popupClassName || dropdownClassName, "".concat(cascaderPrefixCls, "-dropdown"), (0, _defineProperty2.default)({}, "".concat(cascaderPrefixCls, "-dropdown-rtl"), mergedDirection === 'rtl'), rootClassName, rootCls, mergedClassNames.popup.root, cascaderRootCls, hashId, cssVarCls);
+  // ==================== Render =====================
+  return /*#__PURE__*/React.createElement(_cascader.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    prefixCls: prefixCls,
+    className: (0, _clsx3.clsx)(!customizePrefixCls && cascaderPrefixCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-lg"), mergedSize === 'large'), "".concat(prefixCls, "-sm"), mergedSize === 'small'), "".concat(prefixCls, "-rtl"), isRtl), "".concat(prefixCls, "-").concat(variant), enableVariantCls), "".concat(prefixCls, "-in-form-item"), isFormItemInput), (0, _statusUtils.getStatusClassNames)(prefixCls, mergedStatus, hasFeedback), compactItemClassnames, contextClassName, className, rootClassName, mergedClassNames.root, rootCls, cascaderRootCls, hashId, cssVarCls),
+    disabled: mergedDisabled,
+    style: mergedStyles.root,
+    classNames: mergedClassNames,
+    styles: mergedStyles
+  }, restProps), {}, {
+    builtinPlacements: (0, _mergedBuiltinPlacements.default)(builtinPlacements, popupOverflow),
+    direction: mergedDirection,
+    placement: memoPlacement,
+    notFoundContent: mergedNotFoundContent,
+    allowClear: mergedAllowClear,
+    showSearch: mergedShowSearch,
+    expandIcon: mergedExpandIcon,
+    suffixIcon: mergedSuffixIcon,
+    removeIcon: mergedRemoveIcon,
+    loadingIcon: mergedLoadingIcon,
+    checkable: checkable,
+    popupClassName: mergedPopupClassName,
+    popupPrefixCls: customizePrefixCls || cascaderPrefixCls,
+    popupStyle: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedPopupStyle), {}, {
+      zIndex: zIndex
+    }),
+    popupRender: mergedPopupRender,
+    popupMenuColumnStyle: mergedPopupMenuColumnStyle,
+    onPopupVisibleChange: mergedOnOpenChange,
+    choiceTransitionName: (0, _motion.getTransitionName)(rootPrefixCls, '', choiceTransitionName),
+    transitionName: (0, _motion.getTransitionName)(rootPrefixCls, 'slide-up', transitionName),
+    getPopupContainer: getPopupContainer || getContextPopupContainer,
+    ref: ref
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  Cascader.displayName = 'Cascader';
+}
+// We don't care debug panel
+/* istanbul ignore next */
+var PurePanel = (0, _PurePanel.default)(Cascader, 'popupAlign', function (props) {
+  return (0, _util.omit)(props, ['visible']);
+});
+Cascader.SHOW_PARENT = SHOW_PARENT;
+Cascader.SHOW_CHILD = SHOW_CHILD;
+Cascader.Panel = _Panel.default;
+Cascader._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
+var _default = exports.default = Cascader;

package/lib/cascader/style/columns.d.ts

@@ -0,0 +1,5 @@
+import type { CSSInterpolation } from '@996-design/996-cssinjs';
+import type { CascaderToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+declare const getColumnsStyle: GenerateStyle<CascaderToken, CSSInterpolation>;
+export default getColumnsStyle;

package/lib/cascader/style/columns.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _cssinjs = require("@996-design/996-cssinjs");
+var _style = require("../../checkbox/style");
+var _style2 = require("../../style");
+var getColumnsStyle = function getColumnsStyle(token) {
+  var prefixCls = token.prefixCls,
+    componentCls = token.componentCls;
+  var cascaderMenuItemCls = "".concat(componentCls, "-menu-item");
+  var iconCls = "\n  &".concat(cascaderMenuItemCls, "-expand ").concat(cascaderMenuItemCls, "-expand-icon,\n  ").concat(cascaderMenuItemCls, "-loading-icon\n");
+  return [
+  // ==================== Checkbox ====================
+  (0, _style.getStyle)("".concat(prefixCls, "-checkbox"), token), (0, _defineProperty2.default)({}, componentCls, {
+    // ================== Checkbox ==================
+    '&-checkbox': {
+      top: 0,
+      marginInlineEnd: token.paddingXS,
+      pointerEvents: 'unset'
+    },
+    // ==================== Menu ====================
+    // >>> Menus
+    '&-menus': (0, _defineProperty2.default)({
+      display: 'flex',
+      flexWrap: 'nowrap',
+      alignItems: 'flex-start'
+    }, "&".concat(componentCls, "-menu-empty"), (0, _defineProperty2.default)({}, "".concat(componentCls, "-menu"), (0, _defineProperty2.default)({
+      width: '100%',
+      height: 'auto'
+    }, cascaderMenuItemCls, {
+      color: token.colorTextDisabled
+    }))),
+    // >>> Menu
+    '&-menu': {
+      flexGrow: 1,
+      flexShrink: 0,
+      minWidth: token.controlItemWidth,
+      height: token.dropdownHeight,
+      margin: 0,
+      padding: token.menuPadding,
+      overflow: 'auto',
+      verticalAlign: 'top',
+      listStyle: 'none',
+      '-ms-overflow-style': '-ms-autohiding-scrollbar',
+      // https://github.com/ant-design/ant-design/issues/11857
+      '&:not(:last-child)': {
+        borderInlineEnd: "".concat((0, _cssinjs.unit)(token.lineWidth), " ").concat(token.lineType, " ").concat(token.colorSplit)
+      },
+      '&-item': (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+        display: 'flex',
+        maxWidth: 400,
+        flexWrap: 'nowrap',
+        alignItems: 'center',
+        padding: token.optionPadding,
+        lineHeight: token.lineHeight,
+        cursor: 'pointer',
+        transition: "all ".concat(token.motionDurationMid),
+        borderRadius: token.borderRadiusSM,
+        '&:hover': {
+          background: token.controlItemBgHover
+        },
+        '&-disabled': (0, _defineProperty2.default)({
+          color: token.colorTextDisabled,
+          cursor: 'not-allowed',
+          '&:hover': {
+            background: 'transparent'
+          }
+        }, iconCls, {
+          color: token.colorTextDisabled
+        })
+      }, "&-active:not(".concat(cascaderMenuItemCls, "-disabled)"), {
+        '&, &:hover': {
+          color: token.optionSelectedColor,
+          fontWeight: token.optionSelectedFontWeight,
+          backgroundColor: token.optionSelectedBg
+        }
+      }), '&-content', (0, _objectSpread2.default)({
+        flex: 'auto',
+        minWidth: 0
+      }, _style2.textEllipsis)), iconCls, {
+        marginInlineStart: token.paddingXXS,
+        color: token.colorIcon,
+        fontSize: token.fontSizeIcon
+      }), '&-keyword', {
+        color: token.colorHighlight
+      })
+    }
+  })];
+};
+var _default = exports.default = getColumnsStyle;