@apdesign/web-react 1.0.0

package/lib/Badge/index.js

@@ -0,0 +1,138 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var classNames_1 = __importDefault(require("../_util/classNames"));
+var ConfigProvider_1 = require("../ConfigProvider");
+var is_1 = require("../_util/is");
+var count_1 = __importDefault(require("./count"));
+var useMergeProps_1 = __importDefault(require("../_util/hooks/useMergeProps"));
+var CSSTransition_1 = __importDefault(require("../_util/CSSTransition"));
+var InnerColors = [
+    'red',
+    'orangered',
+    'orange',
+    'gold',
+    'lime',
+    'green',
+    'cyan',
+    'arcoblue',
+    'purple',
+    'pinkpurple',
+    'magenta',
+    'gray',
+];
+var defaultProps = {
+    count: 0,
+    maxCount: 99,
+};
+function Badge(baseProps, ref) {
+    var _a;
+    var _b = (0, react_1.useContext)(ConfigProvider_1.ConfigContext), getPrefixCls = _b.getPrefixCls, componentConfig = _b.componentConfig, rtl = _b.rtl;
+    var props = (0, useMergeProps_1.default)(baseProps, defaultProps, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.Badge);
+    var count = props.count, text = props.text, className = props.className, dotClassName = props.dotClassName, dot = props.dot, maxCount = props.maxCount, color = props.color, propsDotStyle = props.dotStyle, offset = props.offset, style = props.style, status = props.status, children = props.children, restProps = __rest(props, ["count", "text", "className", "dotClassName", "dot", "maxCount", "color", "dotStyle", "offset", "style", "status", "children"]);
+    var prefixCls = getPrefixCls('badge');
+    var dotStyle = __assign({}, (propsDotStyle || {}));
+    var _c = __read(offset || [], 2), leftOffset = _c[0], topOffset = _c[1];
+    if (leftOffset) {
+        dotStyle.marginRight = -leftOffset;
+    }
+    if (topOffset) {
+        dotStyle.marginTop = topOffset;
+    }
+    var getDom = function () {
+        var _a, _b;
+        if ((0, is_1.isObject)(count)) {
+            return (react_1.default.createElement("span", { className: (0, classNames_1.default)(prefixCls + "-custom-dot", dotClassName), style: dotStyle }, count));
+        }
+        var colorStyle = !color || InnerColors.indexOf(color) > -1 ? {} : { backgroundColor: color };
+        // display a red dot if color and status are NOT set
+        if (text && !color && !status) {
+            return (react_1.default.createElement("span", { className: (0, classNames_1.default)(prefixCls + "-text", dotClassName), style: dotStyle }, text));
+        }
+        if (status || (color && count <= 0)) {
+            return (react_1.default.createElement("span", { className: prefixCls + "-status-wrapper" },
+                react_1.default.createElement("span", { className: (0, classNames_1.default)(prefixCls + "-status-dot", (_a = {},
+                        _a[prefixCls + "-status-" + status] = status,
+                        _a[prefixCls + "-color-" + color] = color,
+                        _a), dotClassName), style: __assign(__assign({}, colorStyle), dotStyle) }),
+                text && react_1.default.createElement("span", { className: prefixCls + "-status-text" }, text)));
+        }
+        if ((dot || color) && count > 0) {
+            return (react_1.default.createElement(CSSTransition_1.default, { classNames: "badge-zoom", in: dot || !!color, timeout: 200, appear: true, mountOnEnter: true, unmountOnExit: true },
+                react_1.default.createElement("span", { className: (0, classNames_1.default)(prefixCls + "-dot", (_b = {},
+                        _b[prefixCls + "-color-" + color] = color,
+                        _b), dotClassName), style: __assign(__assign({}, colorStyle), dotStyle) })));
+        }
+        return (react_1.default.createElement(count_1.default, { prefixCls: prefixCls, className: (0, classNames_1.default)(prefixCls + "-number", dotClassName), style: __assign(__assign({}, colorStyle), dotStyle), maxCount: maxCount, count: count }));
+    };
+    return (react_1.default.createElement("span", __assign({ className: (0, classNames_1.default)(prefixCls, (_a = {},
+            _a[prefixCls + "-status"] = status,
+            _a[prefixCls + "-no-children"] = !children,
+            _a[prefixCls + "-rtl"] = rtl,
+            _a), className), ref: ref, style: style }, restProps),
+        children,
+        getDom()));
+}
+var BadgeComponent = (0, react_1.forwardRef)(Badge);
+BadgeComponent.displayName = 'Badge';
+exports.default = BadgeComponent;

package/lib/Badge/interface.d.ts

@@ -0,0 +1,57 @@
+import { HTMLAttributes, CSSProperties, ReactNode } from 'react';
+import { Omit } from '../_util/type';
+/**
+ * @title Badge
+ */
+export interface BadgeProps extends Omit<HTMLAttributes<HTMLElement>, 'className'> {
+    style?: CSSProperties;
+    className?: string | string[];
+    /**
+     * @zh 徽标显示的数字
+     * @en Number to show in badge
+     * @defaultValue 0
+     */
+    count?: number | ReactNode;
+    /**
+     * @zh 自定义提示内容
+     * @en Set the display text of the status dot
+     */
+    text?: string;
+    /**
+     * @zh 显示为小红点
+     * @en Whether to display a red dot instead of `count`
+     */
+    dot?: boolean;
+    /**
+     * @zh 徽标的样式
+     * @en Customize Badge dot style
+     */
+    dotStyle?: CSSProperties;
+    /**
+     * @zh 徽标的类名
+     * @en Customize Badge dot className
+     */
+    dotClassName?: string | string[];
+    /**
+     * @zh 徽标最大显示数值，如果 count 超过这个数值会显示为 `${maxCount}+`
+     * @en Max count to show. If count is larger than this value, it will be displayed as `${maxCount}+`
+     * @defaultValue 99
+     */
+    maxCount?: number;
+    /**
+     * @zh 设置徽标位置的偏移
+     * @en Set offset of the badge dot
+     */
+    offset?: [number, number];
+    /**
+     * @zh 内置的一些颜色
+     * @en Customize dot color
+     */
+    color?: 'red' | 'orangered' | 'orange' | 'gold' | 'lime' | 'green' | 'cyan' | 'arcoblue' | 'purple' | 'pinkpurple' | 'magenta' | 'gray' | string;
+    /**
+     * @zh 徽标的状态类型
+     * @en Set badge as a status dot
+     */
+    status?: 'default' | 'processing' | 'success' | 'warning' | 'error';
+    children?: ReactNode;
+}

package/lib/Badge/interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/Badge/style/css.js

@@ -0,0 +1,2 @@
+require('../../style/index.css');
+require('./index.css');

package/lib/Badge/style/index.css

@@ -0,0 +1 @@
+.arco-badge{display:inline-block;position:relative;line-height:1}.arco-badge-rtl{direction:rtl}.arco-badge-custom-dot,.arco-badge-dot,.arco-badge-number,.arco-badge-text{position:absolute;z-index:2;transform:translate(50%,-50%);transform-origin:100% 0;border-radius:20px;box-sizing:border-box;text-align:center;top:2px;right:2px;overflow:hidden}.arco-badge-rtl .arco-badge-custom-dot,.arco-badge-rtl .arco-badge-dot,.arco-badge-rtl .arco-badge-number,.arco-badge-rtl .arco-badge-text{right:unset}.arco-badge-custom-dot{background-color:var(--color-bg-2)}.arco-badge-number,.arco-badge-text{height:20px;min-width:20px;line-height:20px;font-weight:500;padding:0 6px;font-size:12px;color:var(--color-white);background-color:rgb(var(--danger-6));box-shadow:0 0 0 2px var(--color-bg-2)}.arco-badge-dot{width:6px;height:6px;background-color:rgb(var(--danger-6));border-radius:var(--border-radius-circle);box-shadow:0 0 0 2px var(--color-bg-2)}.arco-badge-no-children .arco-badge-dot,.arco-badge-no-children .arco-badge-number,.arco-badge-no-children .arco-badge-text{position:relative;display:inline-block;transform:none;top:unset;right:unset}.arco-badge-status-wrapper{display:inline-flex;align-items:center}.arco-badge-status-dot{display:inline-block;width:6px;height:6px;border-radius:var(--border-radius-circle)}.arco-badge-status-default{background-color:var(--color-fill-4)}.arco-badge-status-processing{background-color:rgb(var(--primary-6))}.arco-badge-status-success{background-color:rgb(var(--success-6))}.arco-badge-status-warning{background-color:rgb(var(--warning-6))}.arco-badge-status-error{background-color:rgb(var(--danger-6))}.arco-badge-color-red{background-color:rgb(var(--danger-6))}.arco-badge-color-orangered{background-color:#f77234}.arco-badge-color-orange{background-color:rgb(var(--orange-6))}.arco-badge-color-gold{background-color:rgb(var(--gold-6))}.arco-badge-color-lime{background-color:rgb(var(--lime-6))}.arco-badge-color-green{background-color:rgb(var(--success-6))}.arco-badge-color-cyan{background-color:rgb(var(--cyan-6))}.arco-badge-color-arcoblue{background-color:rgb(var(--primary-6))}.arco-badge-color-purple{background-color:rgb(var(--purple-6))}.arco-badge-color-pinkpurple{background-color:rgb(var(--pinkpurple-6))}.arco-badge-color-magenta{background-color:rgb(var(--magenta-6))}.arco-badge-color-gray{background-color:rgb(var(--gray-4))}.arco-badge-status-text{color:var(--color-text-1);margin-left:8px;font-size:14px;line-height:1.5715}.arco-badge-rtl .arco-badge-status-text{margin-left:0;margin-right:8px}.arco-badge-number-text{display:inline-block;animation:arco-badge-scale .5s cubic-bezier(.3,1.3,.3,1)}@keyframes arco-badge-scale{from{transform:scale(0,0)}to{transform:scale(1,1)}}.badge-zoom-appear,.badge-zoom-enter{transform-origin:center;transform:translate(50%,-50%) scale(.2,.2)}.badge-zoom-appear-active,.badge-zoom-enter-active{opacity:1;transform-origin:center;transform:translate(50%,-50%) scale(1,1);transition:opacity .3s cubic-bezier(.3,1.3,.3,1),transform .3s cubic-bezier(.3,1.3,.3,1)}.badge-zoom-exit{opacity:1;transform-origin:center;transform:translate(50%,-50%) scale(1,1)}.badge-zoom-exit-active{opacity:0;transform-origin:center;transform:translate(50%,-50%) scale(.2,.2);transition:opacity .3s cubic-bezier(.3,1.3,.3,1),transform .3s cubic-bezier(.3,1.3,.3,1)}

package/lib/Badge/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/lib/Badge/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../style/index.less");
+require("./index.less");

package/lib/Badge/style/index.less

@@ -0,0 +1,176 @@
+@import './token.less';
+
+@badge-prefix-cls: ~'@{prefix}-badge';
+
+.@{badge-prefix-cls} {
+  display: inline-block;
+  position: relative;
+  line-height: 1;
+
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-number,
+  &-dot,
+  &-text,
+  &-custom-dot {
+    position: absolute;
+    z-index: 2;
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0%;
+    border-radius: @badge-size-count-height;
+    box-sizing: border-box;
+    text-align: center;
+    top: 2px;
+    right: 2px;
+    overflow: hidden;
+  }
+
+  &-rtl &-number,
+  &-rtl &-dot,
+  &-rtl &-text,
+  &-rtl &-custom-dot {
+    right: unset;
+  }
+
+  &-custom-dot {
+    background-color: var(~'@{arco-cssvars-prefix}-color-bg-2');
+  }
+
+  &-number,
+  &-text {
+    height: @badge-size-count-height;
+    min-width: @badge-size-count-height;
+    line-height: @badge-size-count-height;
+    font-weight: @badge-font-count-weight;
+    padding: 0 @badge-padding-count-horizontal;
+    font-size: @badge-font-count-size;
+    color: @badge-color-count-text;
+    background-color: @badge-color-count-bg;
+    box-shadow: 0 0 0 2px var(~'@{arco-cssvars-prefix}-color-bg-2');
+  }
+
+  &-dot {
+    width: @badge-size-dot-width;
+    height: @badge-size-dot-width;
+    background-color: @badge-color-count-bg;
+    border-radius: @radius-circle;
+    box-shadow: 0 0 0 2px var(~'@{arco-cssvars-prefix}-color-bg-2');
+  }
+
+  &-no-children &-dot,
+  &-no-children &-number,
+  &-no-children &-text {
+    position: relative;
+    display: inline-block;
+    transform: none;
+    top: unset;
+    right: unset;
+  }
+
+  &-status-wrapper {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &-status-dot {
+    display: inline-block;
+    width: @badge-size-dot-width;
+    height: @badge-size-dot-width;
+    border-radius: @radius-circle;
+  }
+
+  &-status-default {
+    background-color: @badge-color-dot-bg_default;
+  }
+
+  &-status-processing {
+    background-color: @badge-color-dot-bg_processing;
+  }
+
+  &-status-success {
+    background-color: @badge-color-dot-bg_success;
+  }
+
+  &-status-warning {
+    background-color: @badge-color-dot-bg_warning;
+  }
+
+  &-status-error {
+    background-color: @badge-color-dot-bg_error;
+  }
+
+  @colors: red, orangered, orange, gold, lime, green, cyan, arcoblue, purple, pinkpurple, magenta,
+    gray;
+
+  .for(@data, @i: 1) when(@i =< length(@data)) {
+    @color-name: extract(@data, @i);
+
+    @color: ~'badge-@{color-name}-color-dot-bg';
+
+    &-color-@{color-name} {
+      background-color: @@color;
+    }
+    .for(@data, (@i + 1));
+  }
+
+  .for(@colors);
+
+  &-status-text {
+    color: @badge-color-status-text;
+    margin-left: @badge-margin-status-text-left;
+    font-size: @badge-font-status-text-size;
+    line-height: @line-height-base;
+  }
+
+  &-rtl &-status-text {
+    margin-left: 0;
+    margin-right: @badge-margin-status-text-left;
+  }
+
+  &-number-text {
+    display: inline-block;
+    animation: ~'@{prefix}-badge-scale' @transition-duration-5 @transition-timing-function-overshoot;
+  }
+}
+
+@keyframes ~'@{prefix}-badge-scale' {
+  from {
+    transform: scale(0, 0);
+  }
+
+  to {
+    transform: scale(1, 1);
+  }
+}
+
+.badge-zoom-enter,
+.badge-zoom-appear {
+  // opacity: 0;
+  transform-origin: center;
+  transform: translate(50%, -50%) scale(0.2, 0.2);
+}
+
+.badge-zoom-enter-active,
+.badge-zoom-appear-active {
+  opacity: 1;
+  transform-origin: center;
+  transform: translate(50%, -50%) scale(1, 1);
+  transition: opacity @transition-duration-3 @transition-timing-function-overshoot,
+    transform @transition-duration-3 @transition-timing-function-overshoot;
+}
+
+.badge-zoom-exit {
+  opacity: 1;
+  transform-origin: center;
+  transform: translate(50%, -50%) scale(1, 1);
+}
+
+.badge-zoom-exit-active {
+  opacity: 0;
+  transform-origin: center;
+  transform: translate(50%, -50%) scale(0.2, 0.2);
+  transition: opacity @transition-duration-3 @transition-timing-function-overshoot,
+    transform @transition-duration-3 @transition-timing-function-overshoot;
+}

package/lib/Badge/style/token.less

@@ -0,0 +1,30 @@
+@import '../../style/theme/default.less';
+
+@badge-size-count-height: @size-5;
+@badge-padding-count-horizontal: @spacing-3;
+@badge-margin-status-text-left: @spacing-4;
+
+@badge-font-count-size: @font-size-body-1;
+@badge-font-status-text-size: @font-size-body-3;
+@badge-color-count-text: var(~'@{arco-cssvars-prefix}-color-white');
+@badge-color-status-text: var(~'@{arco-cssvars-prefix}-color-text-1');
+@badge-color-count-bg: @color-danger-6;
+@badge-size-dot-width: 6px;
+@badge-color-dot-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-4');
+@badge-color-dot-bg_processing: @color-primary-6;
+@badge-color-dot-bg_success: @color-success-6;
+@badge-color-dot-bg_warning: @color-warning-6;
+@badge-color-dot-bg_error: @color-danger-6;
+@badge-font-count-weight: @font-weight-500;
+@badge-red-color-dot-bg: @color-danger-6;
+@badge-orangered-color-dot-bg: @orangered-6;
+@badge-orange-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-orange-6'));
+@badge-lime-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-lime-6'));
+@badge-gold-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-gold-6'));
+@badge-green-color-dot-bg: @color-success-6;
+@badge-cyan-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-cyan-6'));
+@badge-arcoblue-color-dot-bg: @color-primary-6;
+@badge-pinkpurple-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-6'));
+@badge-purple-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-purple-6'));
+@badge-magenta-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-magenta-6'));
+@badge-gray-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-gray-4'));

package/lib/Breadcrumb/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import Item from './item';
+import { BreadcrumbProps } from './interface';
+declare const BreadcrumbComponent: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<unknown>> & {
+    Item: typeof Item;
+};
+export default BreadcrumbComponent;
+export { BreadcrumbProps };

package/lib/Breadcrumb/index.js

@@ -0,0 +1,119 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var classNames_1 = __importDefault(require("../_util/classNames"));
+var item_1 = __importDefault(require("./item"));
+var ConfigProvider_1 = require("../ConfigProvider");
+var Menu_1 = __importDefault(require("../Menu"));
+var IconObliqueLine_1 = __importDefault(require("../../icon/react-icon-cjs/IconObliqueLine"));
+var omit_1 = __importDefault(require("../_util/omit"));
+var useMergeProps_1 = __importDefault(require("../_util/hooks/useMergeProps"));
+var is_1 = require("../_util/is");
+var defaultItemRender = function (route, routes, paths) {
+    if (routes.indexOf(route) === routes.length - 1) {
+        return react_1.default.createElement("span", null, route.breadcrumbName);
+    }
+    return react_1.default.createElement("a", { href: "#/" + paths.join('/').replace(/^\//, '') }, route.breadcrumbName);
+};
+var defaultProps = {
+    separator: react_1.default.createElement(IconObliqueLine_1.default, null),
+};
+function Breadcrumb(baseProps, ref) {
+    var _a;
+    var _b = (0, react_1.useContext)(ConfigProvider_1.ConfigContext), getPrefixCls = _b.getPrefixCls, componentConfig = _b.componentConfig, rtl = _b.rtl;
+    var props = (0, useMergeProps_1.default)(baseProps, defaultProps, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.Breadcrumb);
+    var className = props.className, children = props.children, style = props.style, routes = props.routes, maxCount = props.maxCount, separator = props.separator, rest = __rest(props, ["className", "children", "style", "routes", "maxCount", "separator"]);
+    var prefixCls = getPrefixCls('breadcrumb');
+    var itemRender = 'itemRender' in props ? props.itemRender : defaultItemRender;
+    var Ellipses = (react_1.default.createElement("span", { "aria-label": "ellipses of breadcrumb items", className: prefixCls + "-item-ellipses" }, "..."));
+    var Separator = (react_1.default.createElement("span", { "aria-hidden": true, className: prefixCls + "-item-separator" }, separator));
+    var getValidChild = function (itemToRender, delta, index) {
+        var SeparatorWithKey = react_1.default.cloneElement(Separator, { key: index + "_separator" });
+        // Show ellipses
+        if (delta > 0) {
+            if (index === 0) {
+                return [itemToRender, SeparatorWithKey, Ellipses];
+            }
+            if (index > delta) {
+                return [SeparatorWithKey, itemToRender];
+            }
+            return null;
+        }
+        return index === 0 ? [itemToRender] : [SeparatorWithKey, itemToRender];
+    };
+    var getItemsByRoute = function () {
+        var paths = [];
+        var delta = routes.length - maxCount;
+        return routes.map(function (route, index) {
+            paths.push((route.path || '').replace(/^\//, ''));
+            var droplist = route.children ? (react_1.default.createElement(Menu_1.default, null, route.children.map(function (item) {
+                return (react_1.default.createElement(Menu_1.default.Item, { key: item.path || item.breadcrumbName }, itemRender(item, routes, paths)));
+            }))) : null;
+            return getValidChild(react_1.default.createElement(item_1.default, { prefixCls: prefixCls, key: route.path || route.breadcrumbName, droplist: droplist }, itemRender(route, routes, paths)), delta, index);
+        });
+    };
+    var getItemsByChildren = function () {
+        var _children = [];
+        react_1.default.Children.forEach(children, function (child) {
+            if (!(0, is_1.isEmptyReactNode)(child)) {
+                _children.push(child);
+            }
+        });
+        var delta = _children.length - maxCount;
+        return react_1.default.Children.map(_children, function (child, index) {
+            return getValidChild(react_1.default.cloneElement(child, {
+                prefixCls: prefixCls,
+            }), delta, index);
+        });
+    };
+    return (react_1.default.createElement("div", __assign({ role: "list", ref: ref, style: style, className: (0, classNames_1.default)(prefixCls, (_a = {}, _a[prefixCls + "-rtl"] = rtl, _a), className) }, (0, omit_1.default)(rest, ['itemRender'])), routes && routes.length ? getItemsByRoute() : getItemsByChildren()));
+}
+var ForwardRefBreadcrumb = (0, react_1.forwardRef)(Breadcrumb);
+var BreadcrumbComponent = ForwardRefBreadcrumb;
+BreadcrumbComponent.displayName = 'Breadcrumb';
+BreadcrumbComponent.Item = item_1.default;
+exports.default = BreadcrumbComponent;

package/lib/Breadcrumb/interface.d.ts

@@ -0,0 +1,78 @@
+import React, { CSSProperties, ReactNode, HTMLAttributes } from 'react';
+import { DropdownProps } from '../Dropdown';
+export interface RouteProps {
+    path: string;
+    breadcrumbName: string;
+    children?: Array<{
+        path: string;
+        breadcrumbName: string;
+    }>;
+}
+/**
+ * @title Breadcrumb
+ */
+export interface BreadcrumbProps {
+    style?: CSSProperties;
+    children?: ReactNode;
+    className?: string | string[];
+    /**
+     * @zh 指定分割符
+     * @en Custom separator
+     * @defaultValue <IconObliqueLine />
+     */
+    separator?: string | ReactNode;
+    /**
+     * @zh 直接设置下拉菜单
+     * @en Set drop-down menu
+     */
+    routes?: RouteProps[];
+    /**
+     * @zh 最多渲染的面包屑数量
+     * @en Max count of `Breadcrumb.Item` to show.
+     */
+    maxCount?: number;
+    /**
+     * @zh routes 时生效，自定义渲染面包屑
+     * @en Custom render function for `Breadcrumb.Item`
+     */
+    itemRender?: (route: RouteProps, routes: RouteProps[], paths: string[]) => ReactNode;
+}
+declare type CustomHTMLElement = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+/**
+ * @title Breadcrumb.Item
+ */
+export interface BreadCrumbItemProps extends CustomHTMLElement {
+    style?: CSSProperties;
+    className?: string | string[];
+    prefixCls?: string;
+    /**
+     * @zh 下拉菜单的内容，等同于下拉菜单组件的 droplist 属性
+     * @en The dropdown menu
+     */
+    droplist?: DropdownProps['droplist'];
+    /**
+     * @zh 下拉菜单的属性 [DropdownProps](/react/components/dropdown)
+     * @en The dropdown props [DropdownProps](/react/components/dropdown)
+     */
+    dropdownProps?: DropdownProps;
+    /**
+     * @zh 超链接地址
+     * @en href
+     * @version 2.40.0
+     */
+    href?: string;
+    /**
+     * @zh 点击回调
+     * @en click callback
+     * @version 2.40.0
+     */
+    onClick?: (e: any) => void;
+    /**
+     * @zh 标签名，可以是 html 标签或是组件
+     * @en Configure the outermost label, which can be an html label or a component
+     * @version 2.40.0
+     * @defaultValue div
+     */
+    tagName?: string | React.FC<any> | React.ComponentClass<any>;
+}
+export {};

package/lib/Breadcrumb/interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/Breadcrumb/item.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { BreadCrumbItemProps } from './interface';
+declare function Item(props: PropsWithChildren<BreadCrumbItemProps>): JSX.Element;
+declare namespace Item {
+    var displayName: string;
+}
+export default Item;
+export { BreadCrumbItemProps };