@fle-ui/next 3.0.0-alpha.3 → 3.0.0-beta.1

package/lib/tour/panelRender.js

@@ -1,132 +1,133 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-
+"use client";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
+exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons/CloseOutlined"));
-
-var _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));
-
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
 var _button = _interopRequireDefault(require("../button"));
-
+var _locale = require("../locale");
 var _en_US = _interopRequireDefault(require("../locale/en_US"));
-
-var panelRender = function panelRender(props, current, type) {
-  var prefixCls = props.prefixCls,
-      _props$total = props.total,
-      total = _props$total === void 0 ? 1 : _props$total,
-      title = props.title,
-      onClose = props.onClose,
-      onPrev = props.onPrev,
-      onNext = props.onNext,
-      onFinish = props.onFinish,
-      cover = props.cover,
-      description = props.description,
-      nextButtonProps = props.nextButtonProps,
-      prevButtonProps = props.prevButtonProps,
-      stepRender = props.stepRender;
+var _useClosable = _interopRequireDefault(require("../_util/hooks/useClosable"));
+function isValidNode(node) {
+  return node !== undefined && node !== null;
+}
+// Due to the independent design of Panel, it will be too coupled to put in rc-tour,
+// so a set of Panel logic is implemented separately in antd.
+var TourPanel = function TourPanel(_ref) {
+  var stepProps = _ref.stepProps,
+    current = _ref.current,
+    type = _ref.type,
+    indicatorsRender = _ref.indicatorsRender,
+    closeIcon = _ref.closeIcon;
+  var _a, _b;
+  var prefixCls = stepProps.prefixCls,
+    _stepProps$total = stepProps.total,
+    total = _stepProps$total === void 0 ? 1 : _stepProps$total,
+    title = stepProps.title,
+    onClose = stepProps.onClose,
+    onPrev = stepProps.onPrev,
+    onNext = stepProps.onNext,
+    onFinish = stepProps.onFinish,
+    cover = stepProps.cover,
+    description = stepProps.description,
+    nextButtonProps = stepProps.nextButtonProps,
+    prevButtonProps = stepProps.prevButtonProps,
+    stepType = stepProps.type,
+    stepCloseIcon = stepProps.closeIcon;
+  var mergedType = stepType !== null && stepType !== void 0 ? stepType : type;
+  var mergedCloseIcon = stepCloseIcon !== null && stepCloseIcon !== void 0 ? stepCloseIcon : closeIcon;
+  var mergedClosable = mergedCloseIcon !== false && mergedCloseIcon !== null;
+  var _ref2 = (0, _useClosable.default)(mergedClosable, mergedCloseIcon, function (icon) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        onClick: onClose,
+        "aria-label": "Close",
+        className: "".concat(prefixCls, "-close")
+      }, icon);
+    }, /*#__PURE__*/_react.default.createElement(_CloseOutlined.default, {
+      className: "".concat(prefixCls, "-close-icon")
+    }), true),
+    _ref3 = _slicedToArray(_ref2, 2),
+    closable = _ref3[0],
+    mergedDisplayCloseIcon = _ref3[1];
   var isLastStep = current === total - 1;
-
   var prevBtnClick = function prevBtnClick() {
+    var _a;
     onPrev === null || onPrev === void 0 ? void 0 : onPrev();
-
-    if (typeof (prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.onClick) === 'function') {
-      prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.onClick();
-    }
+    (_a = prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(prevButtonProps);
   };
-
   var nextBtnClick = function nextBtnClick() {
+    var _a;
     if (isLastStep) {
       onFinish === null || onFinish === void 0 ? void 0 : onFinish();
     } else {
       onNext === null || onNext === void 0 ? void 0 : onNext();
     }
-
-    if (typeof (nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.onClick) === 'function') {
-      nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.onClick();
-    }
+    (_a = nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(nextButtonProps);
   };
-
-  var headerNode;
-
-  if (title) {
-    headerNode = /*#__PURE__*/_react["default"].createElement("div", {
-      className: prefixCls + "-header"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: prefixCls + "-title"
-    }, title));
-  }
-
-  var descriptionNode;
-
-  if (description) {
-    descriptionNode = /*#__PURE__*/_react["default"].createElement("div", {
-      className: prefixCls + "-description"
-    }, description);
-  }
-
-  var coverNode;
-
-  if (cover) {
-    coverNode = /*#__PURE__*/_react["default"].createElement("div", {
-      className: prefixCls + "-cover"
-    }, cover);
-  }
-
-  var mergedSlickNode = typeof stepRender === 'function' && stepRender(current, total) || (0, _toConsumableArray2["default"])(Array.from({
-    length: total
-  }).keys()).map(function (stepItem, index) {
-    return /*#__PURE__*/_react["default"].createElement("span", {
-      key: stepItem,
-      className: (0, _classnames["default"])(index === current && prefixCls + "-slider-active", prefixCls + "-slider")
+  var headerNode = isValidNode(title) ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-header")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-title")
+  }, title)) : null;
+  var descriptionNode = isValidNode(description) ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-description")
+  }, description) : null;
+  var coverNode = isValidNode(cover) ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-cover")
+  }, cover) : null;
+  var mergeIndicatorNode;
+  if (indicatorsRender) {
+    mergeIndicatorNode = indicatorsRender(current, total);
+  } else {
+    mergeIndicatorNode = (0, _toConsumableArray2.default)(Array.from({
+      length: total
+    }).keys()).map(function (stepItem, index) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        key: stepItem,
+        className: (0, _classnames.default)(index === current && "".concat(prefixCls, "-indicator-active"), "".concat(prefixCls, "-indicator"))
+      });
     });
-  });
-  var slickNode = total > 1 ? mergedSlickNode : null;
-  var mainBtnType = type === 'primary' ? 'default' : 'primary';
+  }
+  var mainBtnType = mergedType === 'primary' ? 'default' : 'primary';
   var secondaryBtnProps = {
     type: 'default',
-    ghost: type === 'primary'
+    ghost: mergedType === 'primary'
   };
-  return /*#__PURE__*/_react["default"].createElement(_LocaleReceiver["default"], {
-    componentName: "Tour",
-    defaultLocale: _en_US["default"].Tour
-  }, function (contextLocale) {
-    var _a, _b;
-
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_CloseOutlined["default"], {
-      className: prefixCls + "-close",
-      onClick: onClose
-    }), coverNode, headerNode, descriptionNode, /*#__PURE__*/_react["default"].createElement("div", {
-      className: prefixCls + "-footer"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: prefixCls + "-sliders"
-    }, slickNode), /*#__PURE__*/_react["default"].createElement("div", {
-      className: prefixCls + "-buttons"
-    }, current !== 0 ? /*#__PURE__*/_react["default"].createElement(_button["default"], (0, _extends2["default"])({}, secondaryBtnProps, prevButtonProps, {
-      onClick: prevBtnClick,
-      size: "small",
-      className: prefixCls + "-prev-btn"
-    }), (_a = prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.children) !== null && _a !== void 0 ? _a : contextLocale.Previous) : null, /*#__PURE__*/_react["default"].createElement(_button["default"], (0, _extends2["default"])({
-      type: mainBtnType
-    }, nextButtonProps, {
-      onClick: nextBtnClick,
-      size: "small",
-      className: prefixCls + "-next-btn"
-    }), (_b = nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.children) !== null && _b !== void 0 ? _b : isLastStep ? contextLocale.Finish : contextLocale.Next))));
-  });
+  var _ref4 = (0, _locale.useLocale)('Tour', _en_US.default.Tour),
+    _ref5 = _slicedToArray(_ref4, 1),
+    contextLocale = _ref5[0];
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-content")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-inner")
+  }, closable && mergedDisplayCloseIcon, coverNode, headerNode, descriptionNode, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-footer")
+  }, total > 1 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-indicators")
+  }, mergeIndicatorNode), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-buttons")
+  }, current !== 0 ? /*#__PURE__*/_react.default.createElement(_button.default, Object.assign({}, secondaryBtnProps, prevButtonProps, {
+    onClick: prevBtnClick,
+    size: "small",
+    className: (0, _classnames.default)("".concat(prefixCls, "-prev-btn"), prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.className)
+  }), (_a = prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.children) !== null && _a !== void 0 ? _a : contextLocale === null || contextLocale === void 0 ? void 0 : contextLocale.Previous) : null, /*#__PURE__*/_react.default.createElement(_button.default, Object.assign({
+    type: mainBtnType
+  }, nextButtonProps, {
+    onClick: nextBtnClick,
+    size: "small",
+    className: (0, _classnames.default)("".concat(prefixCls, "-next-btn"), nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.className)
+  }), (_b = nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.children) !== null && _b !== void 0 ? _b : isLastStep ? contextLocale === null || contextLocale === void 0 ? void 0 : contextLocale.Finish : contextLocale === null || contextLocale === void 0 ? void 0 : contextLocale.Next)))));
 };
-
-var _default = panelRender;
-exports["default"] = _default;
+var _default = exports.default = TourPanel;

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

@@ -1,4 +1,29 @@
-export interface ComponentToken {
+/// <reference types="react" />
+import type { ArrowOffsetToken } from '../../style/placementArrow';
+import type { GetDefaultToken } from '../../theme/internal';
+import type { ArrowToken } from '../../style/roundedArrow';
+export interface ComponentToken extends ArrowOffsetToken, ArrowToken {
+    /**
+     * @desc 弹层 z-index
+     * @descEN Tour popup z-index
+     */
+    zIndexPopup: number;
+    /**
+     * @desc 关闭按钮尺寸
+     * @descEN Close button size
+     */
+    closeBtnSize: number;
+    /**
+     * @desc Primary 模式上一步按钮背景色
+     * @descEN Background color of previous button in primary type
+     */
+    primaryPrevBtnBg: string;
+    /**
+     * @desc Primary 模式下一步按钮悬浮背景色
+     * @descEN Hover background color of next button in primary type
+     */
+    primaryNextBtnHoverBg: string;
 }
-declare const _default: (prefixCls: string) => import("../../theme/internal").UseComponentStyleResult;
+export declare const prepareComponentToken: GetDefaultToken<'Tour'>;
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, string, string | undefined];
 export default _default;

package/lib/tour/style/index.js

@@ -1,54 +1,49 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
+exports.prepareComponentToken = exports.default = void 0;
 var _tinycolor = require("@ctrl/tinycolor");
-
-var _internal = require("../../theme/internal");
-
 var _style = require("../../style");
-
-var _placementArrow = _interopRequireWildcard(require("../../style/placementArrow")); // =============================== Base ===============================
-
-
+var _placementArrow = _interopRequireWildcard(require("../../style/placementArrow"));
+var _internal = require("../../theme/internal");
+var _roundedArrow = require("../../style/roundedArrow");
+var _cssinjs = require("@ant-design/cssinjs");
+// =============================== Base ===============================
 var genBaseStyle = function genBaseStyle(token) {
-  var _ref3, _ref4, _ref6, _extends2, _ref9;
-
+  var _$concat4, _$concat5, _$concat7, _Object$assign, _ref;
   var componentCls = token.componentCls,
-      lineHeight = token.lineHeight,
-      padding = token.padding,
-      paddingXS = token.paddingXS,
-      borderRadius = token.borderRadius,
-      borderRadiusXS = token.borderRadiusXS,
-      colorPrimary = token.colorPrimary,
-      colorText = token.colorText,
-      colorFill = token.colorFill,
-      sliderHeight = token.sliderHeight,
-      sliderWidth = token.sliderWidth,
-      boxShadow = token.boxShadow,
-      tourZIndexPopup = token.tourZIndexPopup,
-      fontSize = token.fontSize,
-      colorBgContainer = token.colorBgContainer,
-      fontWeightStrong = token.fontWeightStrong,
-      marginXS = token.marginXS,
-      colorTextLightSolid = token.colorTextLightSolid,
-      tourBorderRadius = token.tourBorderRadius,
-      colorWhite = token.colorWhite,
-      colorBgTextHover = token.colorBgTextHover,
-      tourCloseSize = token.tourCloseSize,
-      motionDurationSlow = token.motionDurationSlow;
-  return [(_ref9 = {}, (0, _defineProperty2["default"])(_ref9, componentCls, (0, _extends3["default"])((0, _extends3["default"])({}, (0, _style.resetComponent)(token)), (_extends2 = {
+    lineHeight = token.lineHeight,
+    padding = token.padding,
+    paddingXS = token.paddingXS,
+    borderRadius = token.borderRadius,
+    borderRadiusXS = token.borderRadiusXS,
+    colorPrimary = token.colorPrimary,
+    colorText = token.colorText,
+    colorFill = token.colorFill,
+    indicatorHeight = token.indicatorHeight,
+    indicatorWidth = token.indicatorWidth,
+    boxShadowTertiary = token.boxShadowTertiary,
+    tourZIndexPopup = token.tourZIndexPopup,
+    fontSize = token.fontSize,
+    colorBgElevated = token.colorBgElevated,
+    fontWeightStrong = token.fontWeightStrong,
+    marginXS = token.marginXS,
+    colorTextLightSolid = token.colorTextLightSolid,
+    tourBorderRadius = token.tourBorderRadius,
+    colorWhite = token.colorWhite,
+    primaryNextBtnHoverBg = token.primaryNextBtnHoverBg,
+    closeBtnSize = token.closeBtnSize,
+    motionDurationSlow = token.motionDurationSlow,
+    antCls = token.antCls,
+    primaryPrevBtnBg = token.primaryPrevBtnBg;
+  return [(_ref = {}, _defineProperty(_ref, componentCls, Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), (_Object$assign = {
     color: colorText,
     position: 'absolute',
     zIndex: tourZIndexPopup,
@@ -57,133 +52,140 @@ var genBaseStyle = function genBaseStyle(token) {
     fontSize: fontSize,
     lineHeight: lineHeight,
     width: 520,
-    '--antd-arrow-background-color': colorBgContainer,
+    '--antd-arrow-background-color': colorBgElevated,
     '&-pure': {
       maxWidth: '100%',
       position: 'relative'
     }
-  }, (0, _defineProperty2["default"])(_extends2, "&" + componentCls + "-hidden", {
+  }, _defineProperty(_Object$assign, "&".concat(componentCls, "-hidden"), {
     display: 'none'
-  }), (0, _defineProperty2["default"])(_extends2, componentCls + "-content", {
+  }), _defineProperty(_Object$assign, "".concat(componentCls, "-content"), {
     position: 'relative'
-  }), (0, _defineProperty2["default"])(_extends2, componentCls + "-inner", (_ref4 = {
+  }), _defineProperty(_Object$assign, "".concat(componentCls, "-inner"), (_$concat5 = {
     textAlign: 'start',
     textDecoration: 'none',
     borderRadius: tourBorderRadius,
-    boxShadow: boxShadow,
+    boxShadow: boxShadowTertiary,
     position: 'relative',
-    backgroundColor: colorBgContainer,
+    backgroundColor: colorBgElevated,
     border: 'none',
     backgroundClip: 'padding-box'
-  }, (0, _defineProperty2["default"])(_ref4, componentCls + "-close", {
+  }, _defineProperty(_$concat5, "".concat(componentCls, "-close"), {
     position: 'absolute',
     top: padding,
     insetInlineEnd: padding,
     color: token.colorIcon,
     outline: 'none',
-    width: tourCloseSize,
-    height: tourCloseSize,
+    width: closeBtnSize,
+    height: closeBtnSize,
     borderRadius: token.borderRadiusSM,
-    transition: "background-color " + token.motionDurationMid + ", color " + token.motionDurationMid,
+    transition: "background-color ".concat(token.motionDurationMid, ", color ").concat(token.motionDurationMid),
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    cursor: 'pointer',
     '&:hover': {
       color: token.colorIconHover,
-      backgroundColor: token.wireframe ? 'transparent' : token.colorFillContent
+      backgroundColor: token.closeBtnHoverBg
     }
-  }), (0, _defineProperty2["default"])(_ref4, componentCls + "-cover", {
+  }), _defineProperty(_$concat5, "".concat(componentCls, "-cover"), {
     textAlign: 'center',
-    padding: padding + tourCloseSize + paddingXS + "px " + padding + "px 0",
+    padding: "".concat((0, _cssinjs.unit)(token.calc(padding).add(closeBtnSize).add(paddingXS).equal()), " ").concat((0, _cssinjs.unit)(padding), " 0"),
     img: {
       width: '100%'
     }
-  }), (0, _defineProperty2["default"])(_ref4, componentCls + "-header", (0, _defineProperty2["default"])({
-    padding: padding + "px " + padding + "px " + paddingXS + "px"
-  }, componentCls + "-title", {
+  }), _defineProperty(_$concat5, "".concat(componentCls, "-header"), _defineProperty({
+    padding: "".concat((0, _cssinjs.unit)(padding), " ").concat((0, _cssinjs.unit)(padding), " ").concat((0, _cssinjs.unit)(paddingXS))
+  }, "".concat(componentCls, "-title"), {
     lineHeight: lineHeight,
     fontSize: fontSize,
     fontWeight: fontWeightStrong
-  })), (0, _defineProperty2["default"])(_ref4, componentCls + "-description", {
-    padding: "0 " + padding + "px",
+  })), _defineProperty(_$concat5, "".concat(componentCls, "-description"), {
+    padding: "0 ".concat((0, _cssinjs.unit)(padding)),
     lineHeight: lineHeight,
     wordWrap: 'break-word'
-  }), (0, _defineProperty2["default"])(_ref4, componentCls + "-footer", (_ref3 = {
-    padding: paddingXS + "px " + padding + "px " + padding + "px",
+  }), _defineProperty(_$concat5, "".concat(componentCls, "-footer"), (_$concat4 = {
+    padding: "".concat((0, _cssinjs.unit)(paddingXS), " ").concat((0, _cssinjs.unit)(padding), " ").concat((0, _cssinjs.unit)(padding)),
     textAlign: 'end',
-    borderRadius: "0 0 " + borderRadiusXS + "px " + borderRadiusXS + "px",
-    display: 'flex',
-    justifyContent: 'space-between'
-  }, (0, _defineProperty2["default"])(_ref3, componentCls + "-sliders", (0, _defineProperty2["default"])({
+    borderRadius: "0 0 ".concat((0, _cssinjs.unit)(borderRadiusXS), " ").concat((0, _cssinjs.unit)(borderRadiusXS)),
+    display: 'flex'
+  }, _defineProperty(_$concat4, "".concat(componentCls, "-indicators"), _defineProperty({
     display: 'inline-block'
-  }, componentCls + "-slider", {
-    width: sliderWidth + "px",
-    height: sliderHeight + "px",
+  }, "".concat(componentCls, "-indicator"), {
+    width: indicatorWidth,
+    height: indicatorHeight,
     display: 'inline-block',
     borderRadius: '50%',
     background: colorFill,
-    marginInlineEnd: sliderHeight,
+    '&:not(:last-child)': {
+      marginInlineEnd: indicatorHeight
+    },
     '&-active': {
       background: colorPrimary
     }
-  })), (0, _defineProperty2["default"])(_ref3, componentCls + "-buttons button", {
+  })), _defineProperty(_$concat4, "".concat(componentCls, "-buttons"), _defineProperty({
+    marginInlineStart: 'auto'
+  }, "".concat(antCls, "-btn"), {
     marginInlineStart: marginXS
-  }), _ref3)), _ref4)), (0, _defineProperty2["default"])(_extends2, "&" + componentCls + "-primary", (0, _defineProperty2["default"])({
+  })), _$concat4)), _$concat5)), _defineProperty(_Object$assign, "".concat(componentCls, "-primary, &").concat(componentCls, "-primary"), _defineProperty({
     '--antd-arrow-background-color': colorPrimary
-  }, componentCls + "-inner", (_ref6 = {
+  }, "".concat(componentCls, "-inner"), (_$concat7 = {
     color: colorTextLightSolid,
     textAlign: 'start',
     textDecoration: 'none',
     backgroundColor: colorPrimary,
     borderRadius: borderRadius,
-    boxShadow: boxShadow
-  }, (0, _defineProperty2["default"])(_ref6, componentCls + "-close", {
+    boxShadow: boxShadowTertiary
+  }, _defineProperty(_$concat7, "".concat(componentCls, "-close"), {
     color: colorTextLightSolid
-  }), (0, _defineProperty2["default"])(_ref6, componentCls + "-sliders", (0, _defineProperty2["default"])({}, componentCls + "-slider", {
-    background: new _tinycolor.TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(),
+  }), _defineProperty(_$concat7, "".concat(componentCls, "-indicators"), _defineProperty({}, "".concat(componentCls, "-indicator"), {
+    background: primaryPrevBtnBg,
     '&-active': {
       background: colorTextLightSolid
     }
-  })), (0, _defineProperty2["default"])(_ref6, componentCls + "-prev-btn", {
+  })), _defineProperty(_$concat7, "".concat(componentCls, "-prev-btn"), {
     color: colorTextLightSolid,
-    borderColor: new _tinycolor.TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(),
+    borderColor: primaryPrevBtnBg,
+    backgroundColor: colorPrimary,
     '&:hover': {
-      backgroundColor: new _tinycolor.TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(),
+      backgroundColor: primaryPrevBtnBg,
       borderColor: 'transparent'
     }
-  }), (0, _defineProperty2["default"])(_ref6, componentCls + "-next-btn", {
+  }), _defineProperty(_$concat7, "".concat(componentCls, "-next-btn"), {
     color: colorPrimary,
     borderColor: 'transparent',
     background: colorWhite,
     '&:hover': {
-      background: new _tinycolor.TinyColor(colorBgTextHover).onBackground(colorWhite).toRgbString()
+      background: primaryNextBtnHoverBg
     }
-  }), _ref6))), _extends2))), (0, _defineProperty2["default"])(_ref9, componentCls + "-mask", (0, _defineProperty2["default"])({}, componentCls + "-placeholder-animated", {
-    transition: "all " + motionDurationSlow
-  })), (0, _defineProperty2["default"])(_ref9, ["&-placement-left", "&-placement-leftTop", "&-placement-leftBottom", "&-placement-right", "&-placement-rightTop", "&-placement-rightBottom"].join(','), (0, _defineProperty2["default"])({}, componentCls + "-inner", {
-    borderRadius: tourBorderRadius > _placementArrow.MAX_VERTICAL_CONTENT_RADIUS ? _placementArrow.MAX_VERTICAL_CONTENT_RADIUS : tourBorderRadius
-  })), _ref9), // ============================= Arrow ===========================
-  (0, _placementArrow["default"])(token, {
-    colorBg: 'var(--antd-arrow-background-color)',
-    showArrowCls: '',
-    contentRadius: tourBorderRadius,
+  }), _$concat7))), _Object$assign))), _defineProperty(_ref, "".concat(componentCls, "-mask"), _defineProperty({}, "".concat(componentCls, "-placeholder-animated"), {
+    transition: "all ".concat(motionDurationSlow)
+  })), _defineProperty(_ref, ['&-placement-left', '&-placement-leftTop', '&-placement-leftBottom', '&-placement-right', '&-placement-rightTop', '&-placement-rightBottom'].join(','), _defineProperty({}, "".concat(componentCls, "-inner"), {
+    borderRadius: token.min(tourBorderRadius, _placementArrow.MAX_VERTICAL_CONTENT_RADIUS)
+  })), _ref),
+  // ============================= Arrow ===========================
+  (0, _placementArrow.default)(token, 'var(--antd-arrow-background-color)')];
+};
+// ============================== Export ==============================
+var prepareComponentToken = function prepareComponentToken(token) {
+  return Object.assign(Object.assign({
+    zIndexPopup: token.zIndexPopupBase + 70,
+    closeBtnSize: token.fontSize * token.lineHeight,
+    primaryPrevBtnBg: new _tinycolor.TinyColor(token.colorTextLightSolid).setAlpha(0.15).toRgbString(),
+    closeBtnHoverBg: token.wireframe ? 'transparent' : token.colorFillContent,
+    primaryNextBtnHoverBg: new _tinycolor.TinyColor(token.colorBgTextHover).onBackground(token.colorWhite).toRgbString()
+  }, (0, _placementArrow.getArrowOffsetToken)({
+    contentRadius: token.borderRadiusLG,
     limitVerticalRadius: true
-  })];
-}; // ============================== Export ==============================
-
-
-var _default = (0, _internal.genComponentStyleHook)('Tour', function (token) {
-  var borderRadiusLG = token.borderRadiusLG,
-      fontSize = token.fontSize,
-      lineHeight = token.lineHeight;
+  })), (0, _roundedArrow.getArrowToken)(token));
+};
+exports.prepareComponentToken = prepareComponentToken;
+var _default = exports.default = (0, _internal.genStyleHooks)('Tour', function (token) {
+  var borderRadiusLG = token.borderRadiusLG;
   var TourToken = (0, _internal.mergeToken)(token, {
-    tourZIndexPopup: token.zIndexPopupBase + 70,
-    sliderWidth: 6,
-    sliderHeight: 6,
-    tourBorderRadius: borderRadiusLG,
-    tourCloseSize: fontSize * lineHeight
+    indicatorWidth: 6,
+    indicatorHeight: 6,
+    tourBorderRadius: borderRadiusLG
   });
   return [genBaseStyle(TourToken)];
-});
-
-exports["default"] = _default;
+}, prepareComponentToken);

package/lib/transfer/ListBody.d.ts

@@ -1,29 +1,16 @@
 import * as React from 'react';
 import type { KeyWiseTransferItem } from '.';
-import type { ElementOf } from '../_util/type';
 import type { RenderedItem, TransferListProps } from './list';
-export declare const OmitProps: ["handleFilter", "handleClear", "checkedKeys"];
-export type OmitProp = ElementOf<typeof OmitProps>;
+export declare const OmitProps: readonly ["handleFilter", "handleClear", "checkedKeys"];
+export type OmitProp = typeof OmitProps[number];
 type PartialTransferListProps<RecordType> = Omit<TransferListProps<RecordType>, OmitProp>;
 export interface TransferListBodyProps<RecordType> extends PartialTransferListProps<RecordType> {
     filteredItems: RecordType[];
     filteredRenderItems: RenderedItem<RecordType>[];
     selectedKeys: string[];
 }
-interface TransferListBodyState {
-    current: number;
+export interface ListBodyRef<RecordType extends KeyWiseTransferItem> {
+    items?: RenderedItem<RecordType>[];
 }
-declare class ListBody<RecordType extends KeyWiseTransferItem> extends React.Component<TransferListBodyProps<RecordType>, TransferListBodyState> {
-    state: {
-        current: number;
-    };
-    static getDerivedStateFromProps<T>({ filteredRenderItems, pagination }: TransferListBodyProps<T>, { current }: TransferListBodyState): {
-        current: number;
-    } | null;
-    onItemSelect: (item: RecordType) => void;
-    onItemRemove: (item: RecordType) => void;
-    onPageChange: (current: number) => void;
-    getItems: () => RenderedItem<RecordType>[];
-    render(): JSX.Element;
-}
-export default ListBody;
+declare const _default: React.ForwardRefExoticComponent<TransferListBodyProps<KeyWiseTransferItem> & React.RefAttributes<ListBodyRef<KeyWiseTransferItem>>>;
+export default _default;