@kdcloudjs/kdesign 1.7.45 → 1.7.47

package/es/_utils/usePopper.js

@@ -80,7 +80,7 @@ var getBorderWidth = function getBorderWidth(el) {
     var _context, _context2;
     var parentBorder = getBorderWidth(el.offsetParent);
     border.top += parentBorder.top + parseInt(_sliceInstanceProperty(_context = getComputedStyle(el.offsetParent, null).borderTopWidth).call(_context, 0, -2));
-    border.left += parentBorder.left + parseInt(_sliceInstanceProperty(_context2 = getComputedStyle(el.offsetParent, null).borderTopWidth).call(_context2, 0, -2));
+    border.left += parentBorder.left + parseInt(_sliceInstanceProperty(_context2 = getComputedStyle(el.offsetParent, null).borderLeftWidth).call(_context2, 0, -2));
   }
   return border;
 };

package/es/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponentElement } from 'react';
+import { IBreadcrumbProps } from './interface';
+declare const Breadcrumb: {
+    (props: IBreadcrumbProps): FunctionComponentElement<IBreadcrumbProps>;
+    displayName: string;
+};
+export default Breadcrumb;

package/es/breadcrumb/breadcrumb.js

@@ -0,0 +1,204 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _JSON$stringify from "@babel/runtime-corejs3/core-js-stable/json/stringify";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+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;
+};
+import React, { useContext, useEffect, useRef } from 'react';
+import classNames from 'classnames';
+import ConfigContext from '../config-provider/ConfigContext';
+import { getCompProps } from '../_utils';
+import BreadcrumbItem from './breadcrumbItem';
+import Icon from '../icon';
+import Tooltip from '../tooltip';
+var Breadcrumb = function Breadcrumb(props) {
+  // prefixCls 是默认提供的类名前缀，默认值是'kd';
+  // compDefaultProps存放了所有组件全局化配置的默认值，用户可以通过ConfigProvider这个组件区去做修改；
+  var _useContext = useContext(ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps;
+  // 这里将用户传入的 props 和 Breadcrumb 组件的全局化默认配置 userDefaultProps 做了合并处理，得到最终 Breadcrumb 组件渲染的prop
+  var breadcrumbProps = getCompProps('Breadcrumb', userDefaultProps, props);
+  // 解构获取需要的操作的属性值 customPrefixcls最终组件的默认类名前缀，如果用户不通过ConfigProvider全局化配置传入，则默认为‘kd’，否则为用户传入值
+  var className = breadcrumbProps.className,
+    customPrefixcls = breadcrumbProps.prefixCls,
+    items = breadcrumbProps.items,
+    separator = breadcrumbProps.separator,
+    colorModel = breadcrumbProps.colorModel,
+    onItemClick = breadcrumbProps.onItemClick,
+    others = __rest(breadcrumbProps, ["className", "prefixCls", "items", "separator", "colorModel", "onItemClick"]);
+  var breadcrumbRef = useRef(null);
+  var breadcrumbHideIconRef = useRef(null);
+  var _React$useState = React.useState(items),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    itemsConfig = _React$useState2[0],
+    setItemsConfig = _React$useState2[1];
+  var _React$useState3 = React.useState(),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    itemsArray = _React$useState4[0],
+    setItemsArray = _React$useState4[1];
+  var _React$useState5 = React.useState(),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    breadcrumbWidth = _React$useState6[0],
+    setBreadcrumbWidth = _React$useState6[1];
+  var _React$useState7 = React.useState(false),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    openEllipsis = _React$useState8[0],
+    setOpenEllipsis = _React$useState8[1];
+  // 获取组件的基类样式前缀，此时breadcrumbPrefixCls的值为 kd-breadcrumb ，后续的Breadcrumb组件的样式名都以此开头，使用中划线连接
+  var breadcrumbPrefixCls = getPrefixCls(prefixCls, 'breadcrumb', customPrefixcls);
+  // 混合用户传入的类名 与 组件内部定义的样式名
+  var breadcrumbClass = classNames(breadcrumbPrefixCls, className);
+  var breadcrumbPopperClass = classNames("".concat(breadcrumbPrefixCls, "-popper"));
+  var breadcrumbMorePanelClass = classNames("".concat(breadcrumbPrefixCls, "-more-panel"));
+  var breadcrumbSeparatorClass = classNames("".concat(breadcrumbPrefixCls, "-item-separator"));
+  var breadcrumbHideIconClass = classNames("".concat(breadcrumbPrefixCls, "-hide-icon"));
+  var getBreadcrumbItemClass = function getBreadcrumbItemClass(item, isLast) {
+    var _context, _context2, _classNames;
+    return classNames(item.className, "".concat(breadcrumbPrefixCls, "-item"), (_classNames = {}, _defineProperty(_classNames, "".concat(breadcrumbPrefixCls, "-item-link"), (item === null || item === void 0 ? void 0 : item.path) || (item === null || item === void 0 ? void 0 : item.href)), _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(breadcrumbPrefixCls, "-item-")).call(_context, colorModel || 'emphasize', "-model-current"), isLast), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(breadcrumbPrefixCls, "-item-")).call(_context2, colorModel || 'emphasize', "-model"), !isLast), _classNames));
+  };
+  var minItem = 3; // 加上more只显示3个元素的时候，末尾元素开启省略号
+  var isLastItem = function isLastItem(index, items) {
+    return index === (items === null || items === void 0 ? void 0 : items.length) - 1;
+  };
+  var getSeparator = function getSeparator(index, items) {
+    if (isLastItem(index, items)) {
+      return null;
+    } else {
+      return /*#__PURE__*/React.createElement("span", {
+        className: breadcrumbSeparatorClass
+      }, separator);
+    }
+  };
+  var getMoreIconContent = function getMoreIconContent(items) {
+    var MoreItems = function MoreItems() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: breadcrumbMorePanelClass
+      }, _mapInstanceProperty(items).call(items, function (item, index) {
+        return /*#__PURE__*/React.createElement(BreadcrumbItem, {
+          key: index,
+          index: index,
+          item: _extends(_extends({}, item), {
+            className: getBreadcrumbItemClass(item, false)
+          }),
+          separator: getSeparator(index, items)
+        });
+      }));
+    };
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+      popperClassName: breadcrumbPopperClass,
+      arrow: false,
+      tip: /*#__PURE__*/React.createElement(MoreItems, null),
+      trigger: "hover",
+      placement: "bottomLeft"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "more"
+    })));
+  };
+  var getElementWidth = function getElementWidth(ref) {
+    if (ref.current) {
+      return ref.current.offsetWidth;
+    } else {
+      return 0;
+    }
+  };
+  var getItemsConfig = function getItemsConfig(widthArr, breadcrumbWidth) {
+    var difference = getElementWidth(breadcrumbRef) - breadcrumbWidth;
+    if (difference < 0) {
+      var number = -difference;
+      var removeItem = widthArr === null || widthArr === void 0 ? void 0 : widthArr.reduce(function (acc, cur, ind) {
+        if (ind > 0 && ind < widthArr.length - 1) {
+          if (acc.width < number + getElementWidth(breadcrumbHideIconRef)) {
+            acc.width += cur.width;
+            acc.index = ind;
+            return acc;
+          } else {
+            return acc;
+          }
+        } else {
+          return acc;
+        }
+      }, {
+        width: 0,
+        index: 0
+      });
+      if (removeItem.index > 0 && removeItem.index < itemsConfig.length - 1) {
+        var _context3;
+        var newItemsConfig = JSON.parse(_JSON$stringify(itemsConfig));
+        _spliceInstanceProperty(newItemsConfig).call(newItemsConfig, 1, removeItem.index, {
+          title: getMoreIconContent(_spliceInstanceProperty(_context3 = JSON.parse(_JSON$stringify(itemsConfig))).call(_context3, 1, removeItem.index))
+        });
+        setItemsConfig(newItemsConfig);
+      }
+    } else {
+      setItemsConfig(items);
+    }
+  };
+  useEffect(function () {
+    var isMore = itemsConfig === null || itemsConfig === void 0 ? void 0 : itemsConfig.some(function (item) {
+      var _a, _b;
+      return ((_b = (_a = item === null || item === void 0 ? void 0 : item.title) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.children.type.displayName) === 'Tooltip';
+    });
+    setOpenEllipsis(isMore && itemsConfig.length === minItem);
+  }, [itemsConfig]);
+  useEffect(function () {
+    if (breadcrumbRef === null || breadcrumbRef === void 0 ? void 0 : breadcrumbRef.current) {
+      var _itemsArray = _Array$from(breadcrumbRef.current.children, function (item, index) {
+        return {
+          width: item.offsetWidth,
+          index: index
+        };
+      });
+      var _breadcrumbWidth = _itemsArray.reduce(function (acc, cur) {
+        return acc + cur.width;
+      }, 0);
+      setItemsArray(_itemsArray);
+      setBreadcrumbWidth(_breadcrumbWidth);
+      getItemsConfig(_itemsArray, _breadcrumbWidth);
+    }
+  }, []);
+  useEffect(function () {
+    if (itemsArray && breadcrumbWidth) {
+      window.addEventListener('resize', function () {
+        getItemsConfig(itemsArray, breadcrumbWidth);
+      });
+    }
+  }, [itemsArray, breadcrumbWidth]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+    className: breadcrumbClass
+  }, others, {
+    ref: breadcrumbRef
+  }), (itemsConfig === null || itemsConfig === void 0 ? void 0 : itemsConfig.length) > 0 && _mapInstanceProperty(itemsConfig).call(itemsConfig, function (item, index) {
+    return /*#__PURE__*/React.createElement(BreadcrumbItem, {
+      key: index,
+      item: _extends(_extends({}, item), {
+        className: getBreadcrumbItemClass(item, isLastItem(index, itemsConfig))
+      }),
+      onItemClick: onItemClick,
+      index: index,
+      separator: getSeparator(index, itemsConfig),
+      openEllipsis: isLastItem(index, itemsConfig) ? openEllipsis : false
+    });
+  })), /*#__PURE__*/React.createElement("div", {
+    className: breadcrumbHideIconClass,
+    ref: breadcrumbHideIconRef
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "more"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: breadcrumbSeparatorClass
+  }, separator)));
+};
+Breadcrumb.displayName = 'Breadcrumb';
+export default Breadcrumb;

package/es/breadcrumb/breadcrumbItem.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IBreadcrumbItems } from './interface';
+declare const BreadcrumbItem: FC<IBreadcrumbItems>;
+export default BreadcrumbItem;

package/es/breadcrumb/breadcrumbItem.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import React, { useContext } from 'react';
+import Dropdown from '../dropdown';
+import Icon from '../icon';
+import devWarning from '../_utils/devwarning';
+import ConfigContext from '../config-provider/ConfigContext';
+var BreadcrumbItem = function BreadcrumbItem(props) {
+  var _useContext = useContext(ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls;
+  var item = props.item,
+    index = props.index,
+    separator = props.separator,
+    openEllipsis = props.openEllipsis,
+    onItemClick = props.onItemClick;
+  var title = item.title,
+    className = item.className,
+    dropdownProps = item.dropdownProps,
+    href = item.href,
+    path = item.path,
+    icon = item.icon;
+  var breadcrumbPrefixCls = getPrefixCls(prefixCls, 'breadcrumb');
+  var itemTextCls = "".concat(breadcrumbPrefixCls, "-item-text");
+  var itemIconCls = "".concat(breadcrumbPrefixCls, "-item-icon");
+  var handleItemClick = function handleItemClick() {
+    if (href && !path) {
+      window.open(href, '_self');
+    } else if (!href && path) {
+      window.location.pathname = path + (title && "/".concat(title));
+    } else if (href && path) {
+      devWarning(true, 'breadcrumb', '`href` and `path` not coexist  within the `item` object');
+    }
+    onItemClick && onItemClick(item, index);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: className,
+    onClick: handleItemClick
+  }, icon && /*#__PURE__*/React.createElement("div", {
+    className: itemIconCls
+  }, icon), /*#__PURE__*/React.createElement("div", {
+    className: itemTextCls,
+    title: typeof title === 'string' ? title : '',
+    style: {
+      maxWidth: openEllipsis ? '170px' : 'unset',
+      overflow: openEllipsis ? 'hidden' : 'inherit'
+    }
+  }, title), dropdownProps && 'menu' in dropdownProps && /*#__PURE__*/React.createElement(Dropdown, _extends({
+    placement: "bottomRight"
+  }, dropdownProps), /*#__PURE__*/React.createElement(Icon, {
+    type: "arrow-down"
+  })), separator));
+};
+export default BreadcrumbItem;

package/es/breadcrumb/index.d.ts

@@ -0,0 +1,3 @@
+import Breadcrumb from './breadcrumb';
+export * from './breadcrumb';
+export default Breadcrumb;

package/es/breadcrumb/index.js

@@ -0,0 +1,3 @@
+import Breadcrumb from './breadcrumb';
+export * from './breadcrumb';
+export default Breadcrumb;

package/es/breadcrumb/interface.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { DropDownProps } from '../dropdown';
+export declare const ColorModelTypes: ["emphasize", "weaken"];
+export declare type ColorModelType = typeof ColorModelTypes[number];
+export interface IBreadcrumbProps {
+    style?: Record<string, unknown>;
+    className?: string;
+    colorModel?: ColorModelType;
+    prefixCls?: string;
+    items: Array<IBreadcrumbItem>;
+    separator?: ReactNode;
+    children?: ReactNode;
+    onItemClick?: (item: IBreadcrumbItem, index: number) => void;
+}
+export interface IBreadcrumbItems {
+    item: IBreadcrumbItem;
+    index: number;
+    separator?: ReactNode;
+    openEllipsis?: boolean;
+    onItemClick?: (item: IBreadcrumbItem, index: number) => void;
+}
+export interface IBreadcrumbItem {
+    className?: string;
+    title?: ReactNode;
+    dropdownProps?: DropDownProps;
+    href?: string;
+    path?: string;
+    icon?: ReactNode;
+}
+export interface IItemsWidth {
+    width: number;
+    index: number;
+}

package/es/breadcrumb/interface.js

@@ -0,0 +1,2 @@
+import { tuple } from '../_utils/type';
+export var ColorModelTypes = tuple('emphasize', 'weaken');

package/es/breadcrumb/style/css.js

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

package/es/breadcrumb/style/index.css

@@ -0,0 +1,174 @@
+/* -----------  color  ——————---- start */
+/* -----------  color  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  font  ——————---- start */
+/* -----------  font  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+/* -----------  Button  ——————---- start */
+/* -----------  Button  ——————---- end */
+/* -----------  Collapse  ——————---- start */
+/* -----------  Collapse  ——————---- end */
+/* -----------  Card  ——————---- start */
+/* -----------  Card  ——————---- end */
+/* -----------  Carousel  ——————---- start */
+/* -----------  Carousel  ——————---- end */
+/* -----------  Cascader  ——————---- start */
+/* -----------  Cascader  ——————---- end */
+/* -----------  Switch  ——————---- start */
+/* -----------  Switch  ——————---- end */
+/* -----------  Input  ——————---- start */
+/* -----------  Input  ——————---- end */
+/* -----------  InputNumber  ——————---- start */
+/* -----------  InputNumber  ——————---- end */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- end */
+/* -----------  Radio  ——————---- start */
+/* -----------  Radio  ——————---- end */
+/* -----------  icon  ——————---- start */
+/* -----------  icon  ——————---- end */
+/* -----------  Popconfirm  ——————---- start */
+/* -----------  Popconfirm  ——————---- end */
+/* -----------  Progress  ——————---- start */
+/* -----------  Progress  ——————---- end */
+/* -----------  Pagination  ——————---- start */
+/* -----------  Pagination  ——————---- end */
+/* -----------  Timeline  ——————---- start */
+/* -----------  Timeline  ——————---- end */
+/* -----------  Tabs  ——————---- start */
+/* -----------  Tabs  ——————---- end */
+/* -----------  Select  ——————---- start */
+/* -----------  Select  ——————---- end */
+/* -----------  Rate  ——————---- start */
+/* -----------  Rate  ——————---- end */
+/* -----------  Dropdown  ——————---- start */
+/* -----------  Dropdown  ——————---- end */
+/* -----------  Tooltip  ——————---- start */
+/* -----------  Tooltip  ——————---- end */
+/* -----------  Transfer  ——————---- start */
+/* -----------  Transfer  ——————---- end */
+/* -----------  DatePicker  ——————---- start */
+/* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
+/* -----------  Tree  ——————---- start */
+/* -----------  Tree  ——————---- end */
+/* -----------  Alert  ——————---- start */
+/* -----------  Alert  ——————---- end */
+/* -----------  Split-Panel ——————---- start */
+/* -----------  Split-Panel ——————---- end */
+/* -----------  Modal  ——————---- start */
+/* -----------  Modal  ——————---- end */
+/* -----------  Steps  ——————---- start */
+/* -----------  Steps  ——————---- end */
+/* -----------  Form  ——————---- start */
+/* -----------  Form  ——————---- end */
+/* -----------  Tag ——————---- start */
+/* -----------  Tag ——————---- end */
+/* -----------  Menu  ——————---- start */
+/* -----------  Menu  ——————---- end */
+/* -----------  notice  ——————---- start */
+/* -----------  message  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Layout  ——————---- start */
+/* -----------  Layout  ——————---- end */
+/* -----------  Typography  ——————---- start */
+/* -----------  Typography  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Badge  ——————---- start */
+/* -----------  Badge  ——————---- end */
+/* -----------  Anchor  ——————---- start */
+/* -----------  Anchor  ——————---- end */
+/* -----------  Avatar  ——————---- start */
+/* -----------  Avatar  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- start */
+/* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+.kd-breadcrumb,
+.kd-breadcrumb-more-panel {
+  color: var(--kd-c-breadcrumb-color-text, #737373);
+  font-size: var(--kd-c-breadcrumb-font-size, var(--kd-g-font-size-middle, 14px));
+  font-weight: var(--kd-c-breadcrumb-font-weight, var(--kd-g-font-weight, 400));
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 22px;
+}
+.kd-breadcrumb-hide-icon,
+.kd-breadcrumb-more-panel-hide-icon {
+  position: absolute;
+  z-index: -999999;
+  top: -999999px;
+  visibility: hidden;
+}
+.kd-breadcrumb-item,
+.kd-breadcrumb-more-panel-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+}
+.kd-breadcrumb-item-separator,
+.kd-breadcrumb-more-panel-item-separator {
+  padding: 0 var(--kd-c-breadcrumb-separator-spacing-padding-horizontal, 8px);
+  color: var(--kd-c-breadcrumb-separator-color-text, #b2b2b2);
+}
+.kd-breadcrumb-item-link:hover,
+.kd-breadcrumb-more-panel-item-link:hover {
+  color: #3987ed;
+  cursor: pointer;
+}
+.kd-breadcrumb-item-emphasize-model,
+.kd-breadcrumb-more-panel-item-emphasize-model {
+  color: var(--kd-c-breadcrumb-color-text, #737373);
+}
+.kd-breadcrumb-item-emphasize-model-current,
+.kd-breadcrumb-more-panel-item-emphasize-model-current {
+  color: var(--kd-c-breadcrumb-active-color-text, #111111);
+}
+.kd-breadcrumb-item-weaken-model,
+.kd-breadcrumb-more-panel-item-weaken-model {
+  color: var(--kd-c-breadcrumb-active-color-text, #111111);
+}
+.kd-breadcrumb-item-weaken-model-current,
+.kd-breadcrumb-more-panel-item-weaken-model-current {
+  color: var(--kd-c-breadcrumb-color-text, #737373);
+}
+.kd-breadcrumb-item-text,
+.kd-breadcrumb-more-panel-item-text {
+  white-space: nowrap;
+}
+.kd-breadcrumb-item-text:last-child,
+.kd-breadcrumb-more-panel-item-text:last-child {
+  text-overflow: ellipsis;
+}
+.kd-breadcrumb-item-icon,
+.kd-breadcrumb-more-panel-item-icon {
+  margin-right: 4px;
+}
+.kd-breadcrumb .kd-dropdown-trigger,
+.kd-breadcrumb-more-panel .kd-dropdown-trigger {
+  margin-left: 4px;
+}
+.kd-breadcrumb-popper {
+  max-width: none !important;
+}

package/es/breadcrumb/style/index.d.ts

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

package/es/breadcrumb/style/index.js

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

package/es/breadcrumb/style/index.less

@@ -0,0 +1,71 @@
+@import '../../style/themes/index';
+@import './mixin.less';
+@breadcrumb-prefix-cls: ~'@{kd-prefix}-breadcrumb';
+
+.@{breadcrumb-prefix-cls},
+.@{breadcrumb-prefix-cls}-more-panel {
+  .breadcrumb;
+
+  display: flex;
+  height: 22px;
+
+  &-hide-icon {
+    position: absolute;
+    z-index: -999999;
+    top: -999999px;
+    visibility: hidden;
+  }
+
+  &-item {
+    display: flex;
+    cursor: text;
+
+    &-separator {
+      padding: 0 @breadcrumb-separator-spacing-padding-horizontal;
+      color: @breadcrumb-separator-color-text;
+    }
+
+    &-link {
+      &:hover {
+        color: #3987ed;
+        cursor: pointer;
+      }
+    }
+
+    &-emphasize-model {
+      color: @breadcrumb-color-text;
+    }
+
+    &-emphasize-model-current {
+      color: @breadcrumb-active-color-text;
+    }
+
+    &-weaken-model {
+      color: @breadcrumb-active-color-text;
+    }
+
+    &-weaken-model-current {
+      color: @breadcrumb-color-text;
+    }
+
+    &-text {
+      white-space: nowrap;
+
+      &:last-child {
+        text-overflow: ellipsis;
+      }
+    }
+
+    &-icon {
+      margin-right: 4px;
+    }
+  }
+
+  .kd-dropdown-trigger {
+    margin-left: 4px;
+  }
+}
+
+.@{breadcrumb-prefix-cls}-popper {
+  max-width: none !important;
+}

package/es/breadcrumb/style/mixin.less

@@ -0,0 +1,7 @@
+@import './token.less';
+
+.breadcrumb() {
+  color: @breadcrumb-color-text;
+  font-size: @breadcrumb-font-size;
+  font-weight: @breadcrumb-font-weight;
+}

package/es/breadcrumb/style/token.less

@@ -0,0 +1,27 @@
+@import '../../style/themes/token.less';
+
+@breadcrumb-custom-prefix: ~'--@{kd-prefix}-c-breadcrumb';
+
+// color
+@breadcrumb-color-text: var(~'@{breadcrumb-custom-prefix}-color-text', #737373);
+@breadcrumb-active-color-text: var(~'@{breadcrumb-custom-prefix}-active-color-text', #111111);
+@breadcrumb-separator-color-text: var(~'@{breadcrumb-custom-prefix}-separator-color-text', #b2b2b2);
+
+// font
+@breadcrumb-font-size: var(~'@{breadcrumb-custom-prefix}-font-size', @font-size-middle);
+@breadcrumb-font-weight: var(~'@{breadcrumb-custom-prefix}-font-weight', @font-weight-light);
+
+// line-height
+
+// motion
+
+// radius
+
+// shadow
+
+// sizing
+
+// spacing
+@breadcrumb-separator-spacing-padding-horizontal: var(~'@{breadcrumb-custom-prefix}-separator-spacing-padding-horizontal', 8px);
+
+// z-index

package/es/city-picker/city-picker.js

@@ -232,7 +232,9 @@ var InternalSelect = function InternalSelect(props, ref) {
   var handleOption = function handleOption(city) {
     var _a;
     handleVisibleChange(false);
-    city.type = tabsValue === 'domestic' ? 'domestic' : 'foreign';
+    if (!city.type) {
+      city.type = tabsValue === 'domestic' ? 'domestic' : 'foreign';
+    }
     (city === null || city === void 0 ? void 0 : city.id) !== initValue && (onChange === null || onChange === void 0 ? void 0 : onChange(city === null || city === void 0 ? void 0 : city.id, city));
     (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     setAfterChangeFocus(true);

package/es/config-provider/compDefaultProps.d.ts

@@ -14,6 +14,10 @@ declare const compDefaultProps: {
         banner: boolean;
         bannerOffset: number[];
     };
+    Breadcrumb: {
+        colorModel: string;
+        separator: string;
+    };
     Button: {
         type: string;
         iconPlace: string;
@@ -114,6 +118,12 @@ declare const compDefaultProps: {
         minuteStep: number;
         secondStep: number;
     };
+    Divider: {
+        orientation: string;
+        orientationMargin: string;
+        type: string;
+        borderStyle: string;
+    };
     Drawer: {
         closable: boolean;
         destroyOnClose: boolean;
@@ -338,6 +348,7 @@ declare const compDefaultProps: {
         switcherIcon: () => JSX.Element;
         estimatedItemSize: number;
         expandOnClickNode: boolean;
+        expandOnFilterNode: boolean;
     };
     TreeNode: {};
     ToolTip: {