@qsxy/element-plus-react 1.0.3 → 2.0.0

package/dist/Tour/Content.js

@@ -0,0 +1,81 @@
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+import React, { useEffect, useMemo, useState } from 'react';
+import { useClassNames } from "../hooks";
+import { useFloating } from "./helper";
+function Content(_ref) {
+  var _ref$placement = _ref.placement,
+    initialPlacement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
+    reference = _ref.reference,
+    _ref$strategy = _ref.strategy,
+    strategy = _ref$strategy === void 0 ? 'absolute' : _ref$strategy,
+    _ref$offset = _ref.offset,
+    offsetValue = _ref$offset === void 0 ? 10 : _ref$offset,
+    showArrow = _ref.showArrow,
+    style = _ref.style,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 2001 : _ref$zIndex,
+    children = _ref.children,
+    onClose = _ref.onClose;
+  var ns = useClassNames('tour');
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    popperElement = _useState2[0],
+    setPopperElement = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    arrowElement = _useState4[0],
+    setArrowElement = _useState4[1];
+  var _useFloating = useFloating(reference, popperElement, arrowElement, initialPlacement, strategy, offsetValue, zIndex, showArrow),
+    update = _useFloating.update,
+    contentStyle = _useFloating.contentStyle,
+    arrowStyle = _useFloating.arrowStyle,
+    states = _useFloating.states;
+  useEffect(function () {
+    if (popperElement && update) {
+      update();
+    }
+  }, [popperElement]);
+  var side = useMemo(function () {
+    return states.placement.split('-')[0];
+  }, [states]);
+  useEffect(function () {
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key === 'Escape') {
+        onClose === null || onClose === void 0 || onClose();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return function () {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onClose]);
+  var mergedContentStyle = useMemo(function () {
+    return _objectSpread(_objectSpread({}, contentStyle), style);
+  }, [contentStyle, style]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: setPopperElement,
+    style: mergedContentStyle,
+    className: ns.e('content'),
+    "data-side": side,
+    tabIndex: -1 /* {...attributes.popper} */
+  }, children, /*#__PURE__*/React.createElement("span", {
+    ref: setArrowElement,
+    style: _objectSpread(_objectSpread({}, arrowStyle), {}, {
+      display: showArrow ? 'block' : 'none'
+    }),
+    className: ns.e('arrow'),
+    "data-popper-arrow": true
+  }));
+}
+export default Content;

package/dist/Tour/Mask.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { PosInfo } from './typings';
+interface MaskProps {
+    zIndex?: number;
+    visible?: boolean;
+    fill?: string;
+    pos?: PosInfo | null;
+    targetAreaClickable?: boolean;
+    style?: React.CSSProperties;
+}
+declare function Mask({ zIndex, visible, fill, pos, targetAreaClickable, style }: MaskProps): React.JSX.Element;
+export default Mask;

package/dist/Tour/Mask.js

@@ -0,0 +1,100 @@
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+import React, { useEffect, useMemo, useState } from 'react';
+import { useClassNames } from "../hooks";
+function Mask(_ref) {
+  var _pos$radius;
+  var _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 1001 : _ref$zIndex,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? false : _ref$visible,
+    _ref$fill = _ref.fill,
+    fill = _ref$fill === void 0 ? 'rgba(0,0,0,0.5)' : _ref$fill,
+    pos = _ref.pos,
+    _ref$targetAreaClicka = _ref.targetAreaClickable,
+    targetAreaClickable = _ref$targetAreaClicka === void 0 ? true : _ref$targetAreaClicka,
+    style = _ref.style;
+  var ns = useClassNames('tour');
+  var radius = (_pos$radius = pos === null || pos === void 0 ? void 0 : pos.radius) !== null && _pos$radius !== void 0 ? _pos$radius : 2;
+  var roundInfo = useMemo(function () {
+    var v = radius;
+    var baseInfo = "a".concat(v, ",").concat(v, " 0 0 1");
+    return {
+      topRight: "".concat(baseInfo, " ").concat(v, ",").concat(v),
+      bottomRight: "".concat(baseInfo, " ").concat(-v, ",").concat(v),
+      bottomLeft: "".concat(baseInfo, " ").concat(-v, ",").concat(-v),
+      topLeft: "".concat(baseInfo, " ").concat(v, ",").concat(-v)
+    };
+  }, [radius]);
+  var _useState = useState({
+      width: window.innerWidth,
+      height: window.innerHeight
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    windowSize = _useState2[0],
+    setWindowSize = _useState2[1];
+  useEffect(function () {
+    var handleResize = function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  var path = useMemo(function () {
+    var width = windowSize.width,
+      height = windowSize.height;
+    var info = roundInfo;
+    var _path = "M".concat(width, ",0 L0,0 L0,").concat(height, " L").concat(width, ",").concat(height, " L").concat(width, ",0 Z");
+    var _radius = radius;
+    if (!pos) {
+      return _path;
+    }
+    return "".concat(_path, " M").concat(pos.left + _radius, ",").concat(pos.top, " h").concat(pos.width - _radius * 2, " ").concat(info.topRight, " v").concat(pos.height - _radius * 2, " ").concat(info.bottomRight, " h").concat(-pos.width + _radius * 2, " ").concat(info.bottomLeft, " v").concat(-pos.height + _radius * 2, " ").concat(info.topLeft, " z");
+  }, [windowSize, roundInfo, radius, pos]);
+  var maskStyle = _objectSpread({
+    position: 'fixed',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    zIndex: zIndex,
+    pointerEvents: pos && targetAreaClickable ? 'none' : 'auto'
+  }, style);
+  var pathStyle = {
+    fill: fill,
+    pointerEvents: 'auto',
+    cursor: 'auto'
+  };
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: ns.e('mask'),
+    style: maskStyle
+  }, /*#__PURE__*/React.createElement("svg", {
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    className: ns.e('hollow'),
+    style: pathStyle,
+    d: path
+  })));
+}
+export default Mask;

package/dist/Tour/Step.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TourStepProps } from './typings';
+declare function Step(props: TourStepProps): React.JSX.Element;
+declare namespace Step {
+    var displayName: string;
+}
+export default Step;

package/dist/Tour/Step.js

@@ -0,0 +1,119 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import classNames from 'classnames';
+import omit from 'lodash/omit';
+import React, { useEffect } from 'react';
+import { Button } from "../Button";
+import { Icon } from "../Icon";
+import { useClassNames } from "../hooks";
+import { useTourContext } from "./context";
+function Step(props) {
+  var _props$showClose, _ref, _props$prevButtonProp2, _ref2, _props$nextButtonProp2;
+  var ns = useClassNames('tour');
+  var _useTourContext = useTourContext(),
+    current = _useTourContext.current,
+    total = _useTourContext.total,
+    tourShowClose = _useTourContext.showClose,
+    closeIcon = _useTourContext.closeIcon,
+    mergedType = _useTourContext.mergedType,
+    indicators = _useTourContext.indicators,
+    onPrev = _useTourContext.onPrev,
+    onNext = _useTourContext.onNext,
+    onClose = _useTourContext.onClose;
+  var mergedShowClose = (_props$showClose = props.showClose) !== null && _props$showClose !== void 0 ? _props$showClose : tourShowClose;
+  var filterButtonProps = function filterButtonProps(btnProps) {
+    if (!btnProps) {
+      return undefined;
+    }
+    return omit(btnProps, ['children', 'onClick']);
+  };
+  var handlePrev = function handlePrev() {
+    var _props$prevButtonProp;
+    if ((_props$prevButtonProp = props.prevButtonProps) !== null && _props$prevButtonProp !== void 0 && _props$prevButtonProp.onClick) {
+      props.prevButtonProps.onClick();
+    }
+    onPrev();
+  };
+  var handleNext = function handleNext() {
+    var _props$nextButtonProp;
+    if ((_props$nextButtonProp = props.nextButtonProps) !== null && _props$nextButtonProp !== void 0 && _props$nextButtonProp.onClick) {
+      props.nextButtonProps.onClick();
+    }
+    onNext();
+  };
+  var handleClose = function handleClose() {
+    onClose();
+    if (props.onClose) {
+      props.onClose();
+    }
+  };
+  useEffect(function () {
+    var handleKeyDown = function handleKeyDown(e) {
+      var target = e.target;
+      if (target !== null && target !== void 0 && target.isContentEditable) {
+        return;
+      }
+      switch (e.key) {
+        case 'ArrowLeft':
+          e.preventDefault();
+          if (current > 0) {
+            onPrev();
+          }
+          break;
+        case 'ArrowRight':
+          e.preventDefault();
+          onNext();
+          break;
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return function () {
+      return window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [current, onPrev, onNext]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, mergedShowClose && /*#__PURE__*/React.createElement("button", {
+    "aria-label": "Close tour",
+    className: ns.e('closebtn'),
+    type: "button",
+    onClick: handleClose
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: ns.e('close'),
+    name: closeIcon
+  })), /*#__PURE__*/React.createElement("header", {
+    className: classNames(ns.e('header'), {
+      'show-close': mergedShowClose
+    })
+  }, props.header || /*#__PURE__*/React.createElement("span", {
+    role: "heading",
+    className: ns.e('title')
+  }, props.title)), /*#__PURE__*/React.createElement("div", {
+    className: ns.e('body')
+  }, props.children || /*#__PURE__*/React.createElement("span", null, props.description)), /*#__PURE__*/React.createElement("footer", {
+    className: ns.e('footer')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ns.b('indicators')
+  }, indicators ? indicators({
+    current: current,
+    total: total
+  }) : Array.from({
+    length: total
+  }).map(function (_, index) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: index,
+      className: classNames(ns.b('indicator'), ns.is('active', index === current))
+    });
+  })), /*#__PURE__*/React.createElement("div", {
+    className: ns.b('buttons')
+  }, current > 0 && /*#__PURE__*/React.createElement(Button, _extends({
+    size: "small",
+    type: mergedType
+  }, filterButtonProps(props.prevButtonProps), {
+    onClick: handlePrev
+  }), (_ref = (_props$prevButtonProp2 = props.prevButtonProps) === null || _props$prevButtonProp2 === void 0 ? void 0 : _props$prevButtonProp2.children) !== null && _ref !== void 0 ? _ref : 'Previous'), current <= total - 1 && /*#__PURE__*/React.createElement(Button, _extends({
+    size: "small",
+    type: mergedType === 'primary' ? 'default' : 'primary'
+  }, filterButtonProps(props.nextButtonProps), {
+    onClick: handleNext
+  }), (_ref2 = (_props$nextButtonProp2 = props.nextButtonProps) === null || _props$nextButtonProp2 === void 0 ? void 0 : _props$nextButtonProp2.children) !== null && _ref2 !== void 0 ? _ref2 : current === total - 1 ? 'Finish' : 'Next'))));
+}
+Step.displayName = 'ElTourStep';
+export default Step;

package/dist/Tour/Tour.d.ts

@@ -0,0 +1,6 @@
+import type { TourProps } from './typings';
+declare function Tour(props: TourProps): any;
+declare namespace Tour {
+    var displayName: string;
+}
+export default Tour;

package/dist/Tour/Tour.js

@@ -0,0 +1,237 @@
+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; }
+import classNames from 'classnames';
+import { addClass, removeClass } from 'dom-lib';
+import isBoolean from 'lodash/isBoolean';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import * as ReactDOM from 'react-dom';
+import { useClassNames, useControlled } from "../hooks";
+import { mergeDefaultProps } from "../Util";
+import PopupManager from "../Util/PopupManager";
+import Content from "./Content";
+import { TourContext } from "./context";
+import { useTarget } from "./helper";
+import Mask from "./Mask";
+import Step from "./Step";
+function resolveAppendTo(appendTo) {
+  if (typeof appendTo === 'string') {
+    return document.querySelector(appendTo) || document.body;
+  }
+  return appendTo;
+}
+function Tour(props) {
+  props = mergeDefaultProps({
+    defaultCurrent: 0,
+    showArrow: true,
+    showClose: true,
+    placement: 'bottom',
+    mask: true,
+    gap: {
+      offset: 6,
+      radius: 2
+    },
+    scrollIntoViewOptions: {
+      block: 'center'
+    },
+    appendTo: 'body',
+    closeOnPressEscape: true,
+    targetAreaClickable: true,
+    closeIcon: 'xmark'
+  }, props);
+  var _props = props,
+    showArrow = _props.showArrow,
+    showClose = _props.showClose,
+    closeIcon = _props.closeIcon,
+    placementProp = _props.placement,
+    contentStyle = _props.contentStyle,
+    maskProp = _props.mask,
+    gapProp = _props.gap,
+    zIndexProp = _props.zIndex,
+    scrollIntoViewOptionsProp = _props.scrollIntoViewOptions,
+    typeProp = _props.type,
+    appendTo = _props.appendTo,
+    closeOnPressEscape = _props.closeOnPressEscape,
+    targetAreaClickable = _props.targetAreaClickable,
+    onChange = _props.onChange,
+    onClose = _props.onClose,
+    onFinish = _props.onFinish,
+    children = _props.children,
+    indicators = _props.indicators,
+    className = _props.className,
+    style = _props.style;
+  var ns = useClassNames('tour');
+  var _useControlled = useControlled(props.visible, props.defaultVisible),
+    _useControlled2 = _slicedToArray(_useControlled, 2),
+    visible = _useControlled2[0],
+    setVisible = _useControlled2[1];
+  var _useControlled3 = useControlled(props.current, props.defaultCurrent),
+    _useControlled4 = _slicedToArray(_useControlled3, 2),
+    current = _useControlled4[0],
+    setCurrent = _useControlled4[1];
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    total = _useState2[0],
+    setTotal = _useState2[1];
+  var childrenArray = useMemo(function () {
+    return React.Children.toArray(children);
+  }, [children]);
+  var stepChildren = useMemo(function () {
+    return childrenArray.filter(function (child) {
+      return /*#__PURE__*/React.isValidElement(child) && child.type === Step;
+    });
+  }, [childrenArray]);
+  var currentChild = useMemo(function () {
+    return stepChildren[current] || null;
+  }, [stepChildren, current]);
+  var currentStep = useMemo(function () {
+    return /*#__PURE__*/React.isValidElement(currentChild) ? currentChild.props : undefined;
+  }, [currentChild]);
+  var currentTarget = useMemo(function () {
+    return currentStep === null || currentStep === void 0 ? void 0 : currentStep.target;
+  }, [currentStep === null || currentStep === void 0 ? void 0 : currentStep.target]);
+  var mergedPlacement = useMemo(function () {
+    return (currentStep === null || currentStep === void 0 ? void 0 : currentStep.placement) || placementProp;
+  }, [currentStep === null || currentStep === void 0 ? void 0 : currentStep.placement, placementProp]);
+  var mergedContentStyle = useMemo(function () {
+    var _currentStep$contentS;
+    return (_currentStep$contentS = currentStep === null || currentStep === void 0 ? void 0 : currentStep.contentStyle) !== null && _currentStep$contentS !== void 0 ? _currentStep$contentS : contentStyle;
+  }, [currentStep === null || currentStep === void 0 ? void 0 : currentStep.contentStyle, contentStyle]);
+  var mergedMask = useMemo(function () {
+    var _currentStep$mask;
+    return (_currentStep$mask = currentStep === null || currentStep === void 0 ? void 0 : currentStep.mask) !== null && _currentStep$mask !== void 0 ? _currentStep$mask : maskProp;
+  }, [currentStep === null || currentStep === void 0 ? void 0 : currentStep.mask, maskProp]);
+  var mergedShowMask = useMemo(function () {
+    return !!mergedMask && visible;
+  }, [mergedMask, visible]);
+  var mergedMaskStyle = useMemo(function () {
+    return isBoolean(mergedMask) ? undefined : mergedMask;
+  }, [mergedMask]);
+  var mergedShowArrow = useMemo(function () {
+    var _currentStep$showArro;
+    return !!(currentTarget && ((_currentStep$showArro = currentStep === null || currentStep === void 0 ? void 0 : currentStep.showArrow) !== null && _currentStep$showArro !== void 0 ? _currentStep$showArro : showArrow));
+  }, [currentTarget, currentStep === null || currentStep === void 0 ? void 0 : currentStep.showArrow, showArrow]);
+  var mergedScrollIntoViewOptions = useMemo(function () {
+    var _currentStep$scrollIn;
+    return (_currentStep$scrollIn = currentStep === null || currentStep === void 0 ? void 0 : currentStep.scrollIntoViewOptions) !== null && _currentStep$scrollIn !== void 0 ? _currentStep$scrollIn : scrollIntoViewOptionsProp;
+  }, [currentStep === null || currentStep === void 0 ? void 0 : currentStep.scrollIntoViewOptions, scrollIntoViewOptionsProp]);
+  var mergedType = useMemo(function () {
+    var _currentStep$type;
+    return (_currentStep$type = currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) !== null && _currentStep$type !== void 0 ? _currentStep$type : typeProp;
+  }, [currentStep === null || currentStep === void 0 ? void 0 : currentStep.type, typeProp]);
+  var mergedZIndex = useMemo(function () {
+    return zIndexProp !== null && zIndexProp !== void 0 ? zIndexProp : PopupManager.nextZIndex();
+  }, [zIndexProp]);
+  var _useTarget = useTarget(currentTarget, visible, gapProp, mergedMask, mergedScrollIntoViewOptions),
+    mergedPosInfo = _useTarget.mergedPosInfo,
+    triggerTarget = _useTarget.triggerTarget;
+  var handlePrev = useCallback(function () {
+    var _currentStep$prevButt;
+    var prev = current - 1;
+    setCurrent(prev);
+    currentStep === null || currentStep === void 0 || (_currentStep$prevButt = currentStep.prevButtonProps) === null || _currentStep$prevButt === void 0 || _currentStep$prevButt.onClick();
+    onChange === null || onChange === void 0 || onChange(prev, visible);
+  }, [current, setCurrent, currentStep === null || currentStep === void 0 ? void 0 : currentStep.prevButtonProps, onChange, visible]);
+  var handleFinish = useCallback(function () {
+    setVisible === null || setVisible === void 0 || setVisible(false);
+    onClose === null || onClose === void 0 || onClose(current);
+    onFinish === null || onFinish === void 0 || onFinish();
+    onChange === null || onChange === void 0 || onChange(current, false);
+  }, [current, onClose, onFinish, setVisible, onChange]);
+  var handleNext = useCallback(function () {
+    if (current >= total - 1) {
+      handleFinish();
+    } else {
+      var _currentStep$nextButt;
+      var next = current + 1;
+      setCurrent(next);
+      currentStep === null || currentStep === void 0 || (_currentStep$nextButt = currentStep.nextButtonProps) === null || _currentStep$nextButt === void 0 || _currentStep$nextButt.onClick();
+      onChange === null || onChange === void 0 || onChange(next, visible);
+    }
+  }, [current, total, handleFinish, setCurrent, currentStep === null || currentStep === void 0 ? void 0 : currentStep.nextButtonProps, onChange, visible]);
+  var handleClose = useCallback(function () {
+    setVisible === null || setVisible === void 0 || setVisible(false);
+    onClose === null || onClose === void 0 || onClose(current);
+    onChange === null || onChange === void 0 || onChange(current, false);
+  }, [setVisible, onClose, current, onChange]);
+  var handleEscClose = useCallback(function () {
+    if (closeOnPressEscape) {
+      handleClose();
+    }
+  }, [closeOnPressEscape, handleClose]);
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === 'Escape' && visible) {
+      handleEscClose();
+    }
+  };
+  useEffect(function () {
+    window.addEventListener('keydown', handleKeyDown);
+    return function () {
+      return window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+  useEffect(function () {
+    setTotal(stepChildren.length);
+  }, [stepChildren.length]);
+
+  // useEffect(() => {
+  //     setCurrent(currentProp);
+  // }, [currentProp]);
+
+  useEffect(function () {
+    if (!visible) {
+      setCurrent(0);
+      if (portalContainer) {
+        removeClass(portalContainer, ns.b('parent--hidden'));
+      }
+    } else {
+      if (portalContainer && maskProp) {
+        addClass(portalContainer, ns.b('parent--hidden'));
+      }
+    }
+  }, [visible]);
+  var contextValue = useMemo(function () {
+    return {
+      current: current,
+      total: total,
+      showClose: showClose,
+      closeIcon: closeIcon,
+      mergedType: mergedType,
+      ns: ns,
+      indicators: indicators,
+      onPrev: handlePrev,
+      onNext: handleNext,
+      onFinish: handleFinish,
+      onClose: handleClose
+    };
+  }, [current, total, showClose, closeIcon, mergedType, ns, indicators, handlePrev, handleNext, handleFinish, handleClose]);
+  var kls = classNames(ns.b(), mergedType === 'primary' ? ns.m('primary') : '', className);
+  var portalContainer = useMemo(function () {
+    return resolveAppendTo(appendTo);
+  }, [appendTo]);
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
+    className: kls,
+    style: style
+  }, /*#__PURE__*/React.createElement(Mask, {
+    visible: mergedShowMask,
+    fill: mergedMaskStyle === null || mergedMaskStyle === void 0 ? void 0 : mergedMaskStyle.color,
+    style: mergedMaskStyle === null || mergedMaskStyle === void 0 ? void 0 : mergedMaskStyle.style,
+    pos: mergedPosInfo,
+    zIndex: mergedZIndex,
+    targetAreaClickable: targetAreaClickable
+  }), visible && currentChild ? /*#__PURE__*/React.createElement(TourContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(Content, {
+    reference: triggerTarget || undefined,
+    placement: mergedPlacement,
+    showArrow: mergedShowArrow,
+    zIndex: mergedZIndex,
+    style: mergedContentStyle,
+    onClose: handleEscClose
+  }, currentChild)) : null), portalContainer);
+}
+Tour.displayName = 'ElTour';
+export default Tour;

package/dist/Tour/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TourContextType } from './typings';
+export declare const TourContext: import("react").Context<TourContextType>;
+export declare const useTourContext: () => TourContextType;

package/dist/Tour/context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export var TourContext = /*#__PURE__*/createContext(null);
+export var useTourContext = function useTourContext() {
+  var context = useContext(TourContext);
+  if (!context) {
+    throw new Error('useTourContext must be used within a Tour');
+  }
+  return context;
+};

package/dist/Tour/helper.d.ts

@@ -0,0 +1,39 @@
+import { Middleware, Strategy } from '@floating-ui/dom';
+import { Placement, VirtualElement } from '@popperjs/core';
+import { CSSProperties } from 'react';
+export declare function isInViewPort(element: HTMLElement): boolean;
+export declare function getTargetEl(target: string | HTMLElement | (() => HTMLElement | null) | null | undefined): HTMLElement | null | undefined;
+export declare function getGapOffset(gap: {
+    offset?: number | [number, number];
+}, index: number): number;
+export declare function useTarget(target: string | HTMLElement | (() => HTMLElement | null) | null | undefined, open: boolean, gap: {
+    offset?: number | [number, number];
+    radius?: number;
+}, mergedMask: boolean | {
+    style?: any;
+    color?: string;
+}, scrollIntoViewOptions: boolean | ScrollIntoViewOptions): {
+    mergedPosInfo: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        radius: number;
+    } | null;
+    triggerTarget: HTMLElement | {
+        getBoundingClientRect(): DOMRect;
+    } | undefined;
+};
+export declare const useFloating: (referenceRef: VirtualElement, contentRef: HTMLElement, arrowRef: HTMLElement, placement: Placement, strategy: Strategy, offset: number, zIndex: number, showArrow: boolean) => {
+    update: () => Promise<void>;
+    contentStyle: CSSProperties;
+    arrowStyle: CSSProperties;
+    states: {
+        x: any;
+        y: any;
+        placement: Placement;
+        strategy: Strategy;
+        middlewareData: import("@floating-ui/dom").MiddlewareData;
+    };
+};
+export declare const overflowMiddleware: () => Middleware;