@qsxy/element-plus-react 1.0.0-next.2 → 1.0.0-next.22

package/dist/DatePicker/DateRangePicker.js

@@ -1,288 +1,291 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+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; }
+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); }
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import { addClass, removeClass } from 'dom-lib';
+import head from 'lodash/head';
+import last from 'lodash/last';
+import noop from 'lodash/noop';
+import React, { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Calendar, CalendarContext, initDateRange, toDayjs } from "../Calendar";
+import Icon from "../Icon/Icon";
+import { InputGroup } from "../Input";
+import Popper from "../Popper/Popper";
+import { isNotEmpty } from "../Util";
+import { useClassNames, useControlled, useDisabled, useSize } from "../hooks";
+var DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
+  props = _objectSpread({
+    name: ['', ''],
+    type: 'daterange',
+    readOnly: false,
+    isoWeek: true,
+    clearable: true,
+    disabled: false,
+    unlinkPanels: false,
+    rangeSeparator: '-'
+  }, props);
+  var _props = props,
+    name = _props.name,
+    clearable = _props.clearable,
+    valueFormat = _props.valueFormat,
+    type = _props.type,
+    _props$classPrefix = _props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'range' : _props$classPrefix,
+    prepend = _props.prepend,
+    append = _props.append,
+    onChange = _props.onChange,
+    error = _props.error,
+    warning = _props.warning,
+    formatter = _props.formatter;
+  var _useControlled = useControlled(props.value, props.defaultValue),
+    _useControlled2 = _slicedToArray(_useControlled, 2),
+    value = _useControlled2[0],
+    setValue = _useControlled2[1];
+  var _useClassNames = useClassNames(classPrefix),
+    b = _useClassNames.b,
+    e = _useClassNames.e,
+    be = _useClassNames.be,
+    bm = _useClassNames.bm,
+    ebm = _useClassNames.ebm,
+    is = _useClassNames.is;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var referenceElement = useRef(null);
+  var groupRef = useRef(null);
+  var popperInstRef = useRef(null);
+  var closeRef = useRef(null);
+  var startInputRef = useRef(null);
+  var endInputRef = useRef(null);
+  var disabled = useDisabled(props.disabled);
+  var size = useSize(props.size);
 
-// src/DatePicker/DateRangePicker.tsx
-var DateRangePicker_exports = {};
-__export(DateRangePicker_exports, {
-  default: () => DateRangePicker_default
-});
-module.exports = __toCommonJS(DateRangePicker_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_dom_lib = require("dom-lib");
-var import_head = __toESM(require("lodash/head"));
-var import_last = __toESM(require("lodash/last"));
-var import_noop = __toESM(require("lodash/noop"));
-var import_react = __toESM(require("react"));
-var import_Calendar = require("../Calendar");
-var import_Icon = require("../Icon");
-var import_Input = require("../Input");
-var import_Popper = require("../Popper");
-var import_Util = require("../Util");
-var import_hooks = require("../hooks");
-var DateRangePicker = (0, import_react.memo)(
-  (0, import_react.forwardRef)((props, ref) => {
-    props = {
-      name: ["", ""],
-      type: "daterange",
-      readOnly: false,
-      isoWeek: true,
-      clearable: true,
-      disabled: false,
-      unlinkPanels: false,
-      rangeSeparator: "到",
-      ...props
-    };
-    const { name, clearable, valueFormat, type, classPrefix = "range", prepend, append, onChange, error, warning, formatter } = props;
-    const [value, setValue] = (0, import_hooks.useControlled)(props.value, props.defaultValue);
-    const { b, e, be, bm, ebm, is } = (0, import_hooks.useClassNames)(classPrefix);
-    const [visible, setVisible] = (0, import_react.useState)(false);
-    const referenceElement = (0, import_react.useRef)(null);
-    const groupRef = (0, import_react.useRef)(null);
-    const popperInstRef = (0, import_react.useRef)();
-    const closeRef = (0, import_react.useRef)();
-    const disabled = (0, import_hooks.useDisabled)(props.disabled);
-    const size = (0, import_hooks.useSize)(props.size);
-    const format = (0, import_react.useMemo)(() => {
-      if ((0, import_Util.isNotEmpty)(props.format)) {
-        return props.format;
-      } else {
-        switch (props.type) {
-          case "yearrange":
-            return "YYYY";
-          case "monthrange":
-            return "YYYY-MM";
-          default:
-            return "YYYY-MM-DD";
-        }
-      }
-    }, [props.format, props.type]);
-    const startPlaceholder = (0, import_react.useMemo)(() => {
-      if ((0, import_Util.isNotEmpty)(props.startPlaceholder)) {
-        return props.startPlaceholder;
-      } else {
-        switch (props.type) {
-          case "monthrange":
-            return "开始月份";
-          case "yearrange":
-            return "开始年份";
-          default:
-            return "开始日期";
-        }
+  /** 没有指定格式时，根据日期类型初始格式 */
+  var format = useMemo(function () {
+    if (isNotEmpty(props.format)) {
+      return props.format;
+    } else {
+      switch (props.type) {
+        case 'yearrange':
+          return 'YYYY';
+        case 'monthrange':
+          return 'YYYY-MM';
+        default:
+          return 'YYYY-MM-DD';
       }
-    }, [props.startPlaceholder, props.type]);
-    const endPlaceholder = (0, import_react.useMemo)(() => {
-      if ((0, import_Util.isNotEmpty)(props.endPlaceholder)) {
-        return props.endPlaceholder;
-      } else {
-        switch (props.type) {
-          case "monthrange":
-            return "结束月份";
-          case "yearrange":
-            return "结束年份";
-          default:
-            return "结束日期";
+    }
+  }, [props.format, props.type]);
+  var formatValue = useMemo(function () {
+    if (value instanceof Array && value.length === 2) {
+      return value.map(function (item) {
+        if (typeof item === 'string') {
+          return item;
+        } else if (typeof item === 'number') {
+          return dayjs(new Date(item)).format(format);
+        } else if (item instanceof Date) {
+          return dayjs(item).format(valueFormat !== null && valueFormat !== void 0 ? valueFormat : format);
         }
+      });
+    }
+    return null;
+  }, [format, value, valueFormat]);
+
+  /** 根据日期类型设定占位符 */
+  var startPlaceholder = useMemo(function () {
+    if (isNotEmpty(props.startPlaceholder)) {
+      return props.startPlaceholder;
+    } else {
+      switch (props.type) {
+        case 'monthrange':
+          return '开始月份';
+        case 'yearrange':
+          return '开始年份';
+        default:
+          return '开始日期';
       }
-    }, [props.endPlaceholder, props.type]);
-    const dateProp = (0, import_react.useMemo)(() => {
-      return (0, import_Util.isNotEmpty)(value) ? (0, import_Calendar.toDayjs)(value, valueFormat || format, type === "monthrange" ? "y" : "M") : (0, import_Calendar.initDateRange)(valueFormat || format, type === "monthrange" ? "y" : "M");
-    }, [format, type, value, valueFormat]);
-    const onActive = (0, import_react.useCallback)(() => {
-      if (!disabled) {
-        setVisible(true);
+    }
+  }, [props.startPlaceholder, props.type]);
+
+  /** 根据日期类型设定占位符 */
+  var endPlaceholder = useMemo(function () {
+    if (isNotEmpty(props.endPlaceholder)) {
+      return props.endPlaceholder;
+    } else {
+      switch (props.type) {
+        case 'monthrange':
+          return '结束月份';
+        case 'yearrange':
+          return '结束年份';
+        default:
+          return '结束日期';
       }
-    }, [disabled]);
-    const onMouseEnter = (0, import_react.useCallback)(() => {
-      if (clearable && (0, import_Util.isNotEmpty)(value)) {
-        if (value instanceof Array) {
-          if (closeRef.current && value.some((item) => (0, import_Util.isNotEmpty)(item))) {
-            (0, import_dom_lib.removeClass)(closeRef.current, ebm("close", "icon", "hidden"));
-          }
-        }
-      } else {
-        if (closeRef.current) {
-          (0, import_dom_lib.addClass)(closeRef.current, ebm("close", "icon", "hidden"));
+    }
+  }, [props.endPlaceholder, props.type]);
+
+  /** 日期参数转成dayjs对象 */
+  var dateProp = useMemo(function () {
+    return isNotEmpty(formatValue) ? toDayjs(formatValue, valueFormat || format, type === 'monthrange' ? 'y' : 'M') : initDateRange(valueFormat || format, type === 'monthrange' ? 'y' : 'M');
+  }, [format, formatValue, type, valueFormat]);
+  var onActive = useCallback(function () {
+    if (!disabled) {
+      setVisible(true);
+    }
+  }, [disabled]);
+
+  /** 鼠标悬浮进入事件 */
+  var onMouseEnter = useCallback(function () {
+    if (clearable && isNotEmpty(value)) {
+      if (value instanceof Array) {
+        if (closeRef.current && value.some(function (item) {
+          return isNotEmpty(item);
+        })) {
+          removeClass(closeRef.current, ebm('close', 'icon', 'hidden'));
         }
       }
-    }, [clearable, ebm, value]);
-    const onMouseLeave = (0, import_react.useCallback)(() => {
+    } else {
       if (closeRef.current) {
-        (0, import_dom_lib.addClass)(closeRef.current, ebm("close", "icon", "hidden"));
+        addClass(closeRef.current, ebm('close', 'icon', 'hidden'));
       }
-    }, [ebm]);
-    const onChangeRange = (0, import_react.useCallback)(
-      (val, finish) => {
-        const formatValue = (0, import_Util.isNotEmpty)(val) && val.length === 2 ? [val[0].format(format), val[1].format(format)] : ["", ""];
-        setValue(formatValue);
-        if ((0, import_Util.isNotEmpty)(val) && val.length === 2) {
-          if (valueFormat == "x") {
-            onChange == null ? void 0 : onChange([val[0].toDate().getTime(), val[1].toDate().getTime()]);
-          } else if ((0, import_Util.isNotEmpty)(props.valueFormat)) {
-            onChange == null ? void 0 : onChange([val[0].format(valueFormat), val[1].format(valueFormat)]);
-          } else {
-            onChange == null ? void 0 : onChange([val[0].toDate(), val[1].toDate()]);
-          }
-        } else {
-          onChange == null ? void 0 : onChange(["", ""]);
-        }
-        setVisible(!finish);
+    }
+  }, [clearable, ebm, value]);
+
+  /** 鼠标悬浮退出事件 */
+  var onMouseLeave = useCallback(function () {
+    if (closeRef.current) {
+      addClass(closeRef.current, ebm('close', 'icon', 'hidden'));
+    }
+  }, [ebm]);
+  var onChangeRange = useCallback(function (val, finish) {
+    var _formatValue = isNotEmpty(val) && val.length === 2 ? [val[0].format(format), val[1].format(format)] : ['', ''];
+    setValue(_formatValue);
+    if (isNotEmpty(val) && val.length === 2) {
+      if (valueFormat == 'x') {
+        onChange === null || onChange === void 0 || onChange([val[0].toDate().getTime(), val[1].toDate().getTime()]);
+      } else if (isNotEmpty(props.valueFormat)) {
+        onChange === null || onChange === void 0 || onChange([val[0].format(valueFormat), val[1].format(valueFormat)]);
+      } else {
+        onChange === null || onChange === void 0 || onChange([val[0].toDate(), val[1].toDate()]);
+      }
+    } else {
+      onChange === null || onChange === void 0 || onChange(['', '']);
+    }
+    setVisible(!finish);
+  }, [format, onChange, props.valueFormat, setValue, valueFormat]);
+  var onClear = useCallback(function (event) {
+    event.stopPropagation();
+    setValue(null);
+    if (closeRef.current) {
+      addClass(closeRef.current, ebm('close', 'icon', 'hidden'));
+    }
+    setVisible(false);
+    onChange === null || onChange === void 0 || onChange(null);
+  }, [ebm, onChange, setValue]);
+  useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        return startInputRef.current.focus();
       },
-      [format, onChange, props.valueFormat, setValue, valueFormat]
-    );
-    const onClear = (0, import_react.useCallback)(
-      (event) => {
-        event.stopPropagation();
-        setValue(null);
-        if (closeRef.current) {
-          (0, import_dom_lib.addClass)(closeRef.current, ebm("close", "icon", "hidden"));
-        }
-        setVisible(false);
-        onChange == null ? void 0 : onChange(null);
+      blur: function blur() {
+        startInputRef.current.blur();
+        endInputRef.current.blur();
       },
-      [ebm, onChange, setValue]
-    );
-    const content = (0, import_react.useMemo)(
-      () => /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: (0, import_classnames.default)(
-            b("date-editor", "date-editor--daterange", false),
-            b`editor`,
-            be("input", "wrapper", false),
-            be("tooltip", "trigger", false),
-            { [bm("editor", size)]: size },
-            is({ active: visible, disabled, error, warning })
-          ),
-          ref: ref ?? referenceElement,
-          onClick: onActive,
-          style: append || prepend ? null : props.style,
-          onMouseEnter,
-          onMouseLeave
-        },
-        /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "calendar-days", className: e`icon` }),
-        /* @__PURE__ */ import_react.default.createElement(
-          "input",
-          {
-            name: name instanceof Array ? (0, import_head.default)(name) : "",
-            readOnly: props.readOnly,
-            placeholder: startPlaceholder,
-            disabled,
-            className: b`input`,
-            value: value instanceof Array ? (0, import_head.default)(value) : "",
-            onChange: import_noop.default
-          }
-        ),
-        /* @__PURE__ */ import_react.default.createElement("span", { className: b`separator` }, props.rangeSeparator),
-        /* @__PURE__ */ import_react.default.createElement(
-          "input",
-          {
-            name: name instanceof Array ? (0, import_last.default)(name) : "",
-            readOnly: props.readOnly,
-            placeholder: endPlaceholder,
-            disabled,
-            className: b`input`,
-            value: value instanceof Array ? (0, import_last.default)(value) : "",
-            onChange: import_noop.default
-          }
-        ),
-        clearable && /* @__PURE__ */ import_react.default.createElement(
-          import_Icon.Icon,
-          {
-            ref: closeRef,
-            prefix: "fal",
-            name: "circle-xmark",
-            className: (0, import_classnames.default)(be("input", "icon", false), e`close-icon`, ebm("close", "icon", "hidden")),
-            onClick: onClear,
-            onMouseDown: (event) => {
-              event.preventDefault();
-              event.stopPropagation();
-            }
-          }
-        )
-      ),
-      [
-        b,
-        be,
-        bm,
-        size,
-        is,
-        visible,
-        disabled,
-        error,
-        warning,
-        ref,
-        onActive,
-        append,
-        prepend,
-        props.style,
-        props.readOnly,
-        props.rangeSeparator,
-        onMouseEnter,
-        onMouseLeave,
-        e,
-        name,
-        startPlaceholder,
-        value,
-        endPlaceholder,
-        clearable,
-        ebm,
-        onClear
-      ]
-    );
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, append || prepend ? /* @__PURE__ */ import_react.default.createElement(import_Input.InputGroup, { prepend, append, className: props.className, style: props.style, ref: ref ?? groupRef }, content) : content, /* @__PURE__ */ import_react.default.createElement(
-      import_Popper.Popper,
-      {
-        visible,
-        referenceElement: ref ?? (append || prepend ? groupRef : referenceElement),
-        popperInstRef,
-        onDestroy: () => setVisible(false),
-        transitionAppear: true,
-        unmountOnExit: true
+      handleOpen: function handleOpen() {
+        return setVisible(true);
       },
-      /* @__PURE__ */ import_react.default.createElement(
-        import_Calendar.CalendarContext.Provider,
-        {
-          value: {
-            initialValue: value,
-            valueRange: dateProp,
-            dateType: props.type,
-            isoWeek: props.isoWeek,
-            unlinkPanels: props.unlinkPanels,
-            popperInstRef,
-            onChangeRange,
-            disabledDate: props.disabledDate,
-            formatter
-          }
-        },
-        /* @__PURE__ */ import_react.default.createElement(import_Calendar.Calendar, null)
-      )
-    ));
-  })
-);
-DateRangePicker.displayName = "DateRangePicker";
-var DateRangePicker_default = DateRangePicker;
+      handleClose: function handleClose() {
+        return setVisible(false);
+      }
+    };
+  });
+  var content = useMemo(function () {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(b('date-editor', 'date-editor--daterange', false), b(_templateObject || (_templateObject = _taggedTemplateLiteral(["editor"]))), be('input', 'wrapper', false), be('tooltip', 'trigger', false), _defineProperty({}, bm('editor', size), size), is({
+        active: visible,
+        disabled: disabled,
+        error: error,
+        warning: warning
+      })),
+      ref: referenceElement,
+      onClick: onActive,
+      style: append || prepend ? null : props.style,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "calendar-days",
+      className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["icon"])))
+    }), /*#__PURE__*/React.createElement("input", {
+      ref: startInputRef,
+      name: name instanceof Array ? head(name) : '',
+      readOnly: props.readOnly,
+      placeholder: startPlaceholder,
+      disabled: disabled,
+      className: b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["input"]))),
+      value: formatValue instanceof Array ? head(formatValue) : '',
+      onChange: noop
+    }), /*#__PURE__*/React.createElement("span", {
+      className: b(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["separator"])))
+    }, props.rangeSeparator), /*#__PURE__*/React.createElement("input", {
+      ref: endInputRef,
+      name: name instanceof Array ? last(name) : '',
+      readOnly: props.readOnly,
+      placeholder: endPlaceholder,
+      disabled: disabled,
+      className: b(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["input"]))),
+      value: formatValue instanceof Array ? last(formatValue) : '',
+      onChange: noop
+    }), clearable && /*#__PURE__*/React.createElement(Icon, {
+      ref: closeRef,
+      prefix: "fal",
+      name: "circle-xmark",
+      className: classNames(be('input', 'icon', false), e(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["close-icon"]))), ebm('close', 'icon', 'hidden')),
+      onClick: onClear,
+      onMouseDown: function onMouseDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    }));
+  }, [b, be, bm, size, is, visible, disabled, error, warning, onActive, append, prepend, props.style, props.readOnly, props.rangeSeparator, onMouseEnter, onMouseLeave, e, name, startPlaceholder, formatValue, endPlaceholder, clearable, ebm, onClear]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, append || prepend ? /*#__PURE__*/React.createElement(InputGroup, {
+    prepend: prepend,
+    append: append,
+    className: props.className,
+    style: props.style,
+    ref: groupRef
+  }, content) : content, /*#__PURE__*/React.createElement(Popper, {
+    visible: visible,
+    referenceElement: append || prepend ? groupRef : referenceElement,
+    popperInstRef: popperInstRef,
+    onDestroy: function onDestroy() {
+      return setVisible(false);
+    },
+    transitionAppear: true,
+    unmountOnExit: true
+  }, /*#__PURE__*/React.createElement(CalendarContext.Provider, {
+    value: {
+      initialValue: formatValue,
+      valueRange: dateProp,
+      dateType: props.type,
+      isoWeek: props.isoWeek,
+      unlinkPanels: props.unlinkPanels,
+      popperInstRef: popperInstRef,
+      onChangeRange: onChangeRange,
+      disabledDate: props.disabledDate,
+      formatter: formatter
+    }
+  }, /*#__PURE__*/React.createElement(Calendar, null))));
+}));
+DateRangePicker.displayName = 'ElDatePicker';
+export default DateRangePicker;

package/dist/DatePicker/index.js

@@ -1,39 +1,2 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/DatePicker/index.ts
-var DatePicker_exports = {};
-__export(DatePicker_exports, {
-  DatePicker: () => import_main.default
-});
-module.exports = __toCommonJS(DatePicker_exports);
-var import_main = __toESM(require("./main"));
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  DatePicker
-});
+export { default as DatePicker } from "./main";
+// export { default as DateRangePicker } from './DateRangePicker';

package/dist/DatePicker/main.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { AllDatePickerProps } from './typings';
-declare const Index: (props: AllDatePickerProps) => React.JSX.Element;
+import { AllDatePickerProps, DatePickerRef } from './typings';
+declare const Index: React.ForwardRefExoticComponent<AllDatePickerProps & React.RefAttributes<DatePickerRef>>;
 export default Index;