@cloudtower/eagle 0.0.0-config-rc-7 → 0.0.0-data-testid

package/dist/esm/coreX/BarChart/index.js

@@ -1,7 +1,47 @@
 import { formatPercent } from '../../utils/tower.js';
-import React__default from 'react';
+import cs from 'classnames';
+import React__default, { useMemo } from 'react';
 
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b)) {
+    if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  }
+  return a;
+};
 const StackBar = "E_skwah65";
+const useShapeStyle = (shape, color) => {
+  return useMemo(() => {
+    switch (shape) {
+      case "stripes":
+        return {
+          backgroundImage: `linear-gradient(-45deg, 
+                ${color} 25%, 
+                transparent 25%, 
+                transparent 50%, 
+                ${color} 50%, 
+                ${color} 75%, 
+                transparent 75%, 
+                transparent)`,
+          backgroundSize: "4px 4px"
+        };
+      default:
+        return {
+          backgroundColor: color
+        };
+    }
+  }, [color, shape]);
+};
 function getWidth(input) {
   const {
     value,
@@ -9,27 +49,45 @@ function getWidth(input) {
   } = formatPercent(input);
   return value + unit;
 }
-const BarChart = ({
-  data,
-  total
-}) => /* @__PURE__ */React__default.createElement("div", {
-  className: StackBar
-}, (data || []).map((item, index) => {
+const BarItem = props => {
   const {
-    value,
-    color
-  } = item;
-  const width = total === 0 ? 0 : getWidth(100 * value / total);
+    color,
+    shape,
+    style,
+    className
+  } = props;
+  const shapeStyle = useShapeStyle(shape, color);
   return /* @__PURE__ */React__default.createElement("div", {
-    className: "stack-bar-item",
-    key: index,
-    style: {
-      width,
-      background: color,
-      display: value === 0 || total === 0 ? "none" : "inline-block"
-    }
+    className,
+    style: __spreadValues(__spreadValues({}, shapeStyle), style)
   });
-}));
+};
+const BarChart = ({
+  data,
+  total,
+  className
+}) => {
+  return /* @__PURE__ */React__default.createElement("div", {
+    className: cs(StackBar, className)
+  }, (data || []).map((item, index) => {
+    const {
+      value,
+      color,
+      shape = "fill"
+    } = item;
+    const width = total === 0 ? 0 : getWidth(100 * value / total);
+    return /* @__PURE__ */React__default.createElement(BarItem, {
+      className: "stack-bar-item",
+      key: index,
+      shape,
+      color,
+      style: {
+        width,
+        display: value === 0 || total === 0 ? "none" : "inline-block"
+      }
+    });
+  }));
+};
 var BarChart$1 = BarChart;
 
 export { BarChart$1 as default, getWidth };

package/dist/esm/coreX/BatchOperation/index.js

@@ -27,6 +27,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 const SelectToolbar = "E_s1ebs0ra";
+const MenuItemInnerStyle = "E_mzzncgx";
 const renderBatchOperationMenuItem = (act, idx = 0) => {
   if (act === "divider") {
     return /* @__PURE__ */React__default.createElement(Menu.Divider, {
@@ -41,7 +42,9 @@ const renderBatchOperationMenuItem = (act, idx = 0) => {
     }, act.children.map(renderBatchOperationMenuItem));
   }
   const Inner = props => {
-    return /* @__PURE__ */React__default.createElement("span", __spreadValues({}, props), act.icon ? React__default.cloneElement(act.icon, {}, act.title) : null, (act == null ? void 0 : act.count) && /* @__PURE__ */React__default.createElement("span", null, act.count));
+    return /* @__PURE__ */React__default.createElement("span", __spreadValues({
+      className: MenuItemInnerStyle
+    }, props), act.icon ? React__default.cloneElement(act.icon, {}, act.title) : null, (act == null ? void 0 : act.count) && /* @__PURE__ */React__default.createElement("span", null, act.count));
   };
   return /* @__PURE__ */React__default.createElement(Menu.Item, {
     key: act.key,

package/dist/esm/coreX/ChartWithTooltip/index.js

@@ -3,6 +3,7 @@ import Bit from '../../core/Bit/index.js';
 import BitPerSecond from '../../core/BitPerSecond/index.js';
 import Bps from '../../core/Bps/index.js';
 import Byte from '../../core/Byte/index.js';
+import BytePerSecond from '../../core/BytePerSecond/index.js';
 import Frequency from '../../core/Frequency/index.js';
 import Percent from '../../core/Percent/index.js';
 import Second from '../../core/Second/index.js';
@@ -17,6 +18,7 @@ import React__default from 'react';
 const units = {
   Percent,
   Byte,
+  BytePerSecond,
   Frequency,
   Speed,
   Bps,

package/dist/esm/coreX/CheckPointList/checkpointlist.style.js

@@ -0,0 +1,5 @@
+const CheckPointListStyle = "E_cyms3br";
+const CheckPointItemStyle = "E_c157gu4z";
+const EmptyWrapper = "E_eu1sysj";
+
+export { CheckPointItemStyle, CheckPointListStyle, EmptyWrapper };

package/dist/esm/coreX/CheckPointList/index.js

@@ -0,0 +1,110 @@
+import { XmarkFailedSeriousWarningFill16RedIcon, CheckmarkDoneSuccessCircleFill16GreenIcon, Loading16GradientBlueIcon, NoticeTriangleFill16YellowIcon, TimelineNotStart16GrayIcon } from '@cloudtower/icons-react';
+import { cx } from '@linaria/core';
+import useParrotTranslation from '../../hooks/useParrotTranslation.js';
+import { List, Flex } from 'antd5';
+import cs from 'classnames';
+import React__default, { useState, useCallback } from 'react';
+import { CheckPointItemStyle, CheckPointListStyle, EmptyWrapper } from './checkpointlist.style.js';
+import { Show } from '../Show/index.js';
+import Icon from '../../core/Icon/index.js';
+import { Typo } from '../../core/Typo/index.js';
+import Button from '../../core/Button/index.js';
+import Link from '../../core/Link/index.js';
+import Tag from '../../core/Tag/index.js';
+import Alert from '../../core/Alert/index.js';
+import Switch from '../../core/Switch/index.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const CheckPointItem = ({
+  description,
+  status,
+  key,
+  tagProps,
+  alertProps,
+  actions
+}) => {
+  const icon = {
+    failed: XmarkFailedSeriousWarningFill16RedIcon,
+    success: CheckmarkDoneSuccessCircleFill16GreenIcon,
+    loading: Loading16GradientBlueIcon,
+    warning: NoticeTriangleFill16YellowIcon,
+    idle: TimelineNotStart16GrayIcon
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(List.Item, { className: cx(CheckPointItemStyle), key }, /* @__PURE__ */ React__default.createElement(Show, { condition: Boolean(icon) }, /* @__PURE__ */ React__default.createElement(
+    Icon,
+    {
+      src: icon[status],
+      className: "icon-wrapper",
+      isRotate: status === "loading"
+    }
+  )), /* @__PURE__ */ React__default.createElement("span", { className: cx(Typo.Label.l4_regular, "description") }, description), /* @__PURE__ */ React__default.createElement(Flex, { gap: 8 }, /* @__PURE__ */ React__default.createElement(Show, { condition: Boolean(actions == null ? void 0 : actions.length) }, actions == null ? void 0 : actions.map((action) => {
+    if (action.type === "button") {
+      return /* @__PURE__ */ React__default.createElement(Button, __spreadValues({}, action.props));
+    }
+    if (action.type === "link") {
+      return /* @__PURE__ */ React__default.createElement(Link, __spreadValues({}, action.props));
+    }
+    if (action.type === "icon") {
+      return /* @__PURE__ */ React__default.createElement(Icon, __spreadValues({}, action.props));
+    }
+  })), /* @__PURE__ */ React__default.createElement(Show, { condition: Boolean(tagProps) }, /* @__PURE__ */ React__default.createElement(Tag, __spreadValues({}, tagProps))))), /* @__PURE__ */ React__default.createElement(Show, { condition: Boolean(alertProps) }, /* @__PURE__ */ React__default.createElement(Alert, __spreadValues({ showIcon: false }, alertProps))));
+};
+const CheckPointList = ({
+  items = [],
+  showSwitchControl = true,
+  title,
+  switchText,
+  emptyRender,
+  emptyText,
+  emptyTextClassName,
+  onClickSwitch,
+  defaultChecked = false,
+  className,
+  border = true
+}) => {
+  const { t } = useParrotTranslation();
+  const [checked, setChecked] = useState(defaultChecked);
+  const onClickSwitchFn = useCallback(() => {
+    const nextChecked = !checked;
+    setChecked(nextChecked);
+    onClickSwitch == null ? void 0 : onClickSwitch(nextChecked);
+  }, [onClickSwitch, checked]);
+  const isEmpty = !items.length;
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: cs(CheckPointListStyle, className, {
+        border
+      })
+    },
+    /* @__PURE__ */ React__default.createElement("header", { className: cx(Typo.Label.l4_bold) }, title, /* @__PURE__ */ React__default.createElement(Show, { condition: showSwitchControl }, /* @__PURE__ */ React__default.createElement("span", { className: "switch-text" }, /* @__PURE__ */ React__default.createElement(Switch, { checked, onChange: onClickSwitchFn, size: "small" }), /* @__PURE__ */ React__default.createElement("span", null, switchText || t("common.show_unpassed"))))),
+    /* @__PURE__ */ React__default.createElement(
+      Show,
+      {
+        condition: isEmpty,
+        fallback: /* @__PURE__ */ React__default.createElement(List, { split: false, bordered: false }, items.map((item, index) => /* @__PURE__ */ React__default.createElement(CheckPointItem, __spreadProps(__spreadValues({}, item), { key: `checklist-item-${index}` }))))
+      },
+      emptyRender ? emptyRender(emptyText) : /* @__PURE__ */ React__default.createElement("div", { className: cx(EmptyWrapper, emptyTextClassName) }, emptyText)
+    )
+  );
+};
+
+export { CheckPointItem, CheckPointList };

package/dist/esm/coreX/CircleLoading/index.js

@@ -0,0 +1,59 @@
+import { Loading64GradientBlueIcon } from '@cloudtower/icons-react';
+import Icon from '../../core/Icon/index.js';
+import { FullView } from '../../core/Styled/index.js';
+import cs from 'classnames';
+import React__default, { Fragment } from 'react';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b)) {
+    if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source) if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0) target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols) for (var prop of __getOwnPropSymbols(source)) {
+    if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop)) target[prop] = source[prop];
+  }
+  return target;
+};
+const LoadingWrapper = "E_l12xdkhl";
+const CircleLoading = _a => {
+  var _b = _a,
+    {
+      fullView = true,
+      className
+    } = _b,
+    restProps = __objRest(_b, ["fullView", "className"]);
+  const Wrapper = fullView ? FullView : Fragment;
+  const props = fullView ? {
+    className: "loading-full-view"
+  } : {};
+  return /* @__PURE__ */React__default.createElement(Wrapper, __spreadProps(__spreadValues({}, props), {
+    "data-testid": "loading"
+  }), /* @__PURE__ */React__default.createElement("div", __spreadValues({
+    className: cs(LoadingWrapper, className)
+  }, restProps), /* @__PURE__ */React__default.createElement(Icon, {
+    src: Loading64GradientBlueIcon,
+    iconWidth: 64,
+    iconHeight: 64
+  })));
+};
+var CircleLoading$1 = CircleLoading;
+
+export { CircleLoading$1 as default };

package/dist/esm/coreX/Copy/CopyButton.js

@@ -0,0 +1,34 @@
+import Button from '../../core/Button/index.js';
+import useParrotTranslation from '../../hooks/useParrotTranslation.js';
+import React__default, { useState } from 'react';
+import CopyTooltip from './CopyTooltip.js';
+
+const CopyButton = ({
+  text,
+  buttonText,
+  tooltipText
+}) => {
+  const { t } = useParrotTranslation();
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+  const handleCopy = async () => {
+    try {
+      setTooltipVisible(true);
+      setTimeout(() => {
+        setTooltipVisible(false);
+      }, 1e3);
+    } catch (err) {
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    CopyTooltip,
+    {
+      tooltipProps: { visible: tooltipVisible },
+      text,
+      afterTooltip: tooltipText ? tooltipText : t("common.has_copied_to_clipboard")
+    },
+    /* @__PURE__ */ React__default.createElement(Button, { onClick: handleCopy }, buttonText ? buttonText : t("common.copy"))
+  );
+};
+var CopyButton$1 = CopyButton;
+
+export { CopyButton$1 as default };

package/dist/esm/coreX/Copy/CopyTooltip.js

@@ -0,0 +1,59 @@
+import { ClipboardCopy16GradientGrayIcon } from '@cloudtower/icons-react';
+import Icon from '../../core/Icon/index.js';
+import Tooltip from '../../core/Tooltip/index.js';
+import useParrotTranslation from '../../hooks/useParrotTranslation.js';
+import React__default, { useState } from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const CopyTooltip = React__default.forwardRef(
+  (props, ref) => {
+    const { t } = useParrotTranslation();
+    const {
+      text,
+      beforeTooltip = t("common.click_to_copy"),
+      afterTooltip = t("common.copy_done"),
+      children = /* @__PURE__ */ React__default.createElement(Icon, { src: ClipboardCopy16GradientGrayIcon }),
+      tooltipProps,
+      className
+    } = props;
+    const [tooltipText, setTooltipText] = useState(beforeTooltip);
+    return /* @__PURE__ */ React__default.createElement(
+      "span",
+      {
+        ref,
+        onMouseEnter: () => setTooltipText(beforeTooltip),
+        className
+      },
+      /* @__PURE__ */ React__default.createElement(Tooltip, __spreadProps(__spreadValues({}, tooltipProps), { title: tooltipText }), /* @__PURE__ */ React__default.createElement(
+        CopyToClipboard,
+        {
+          text,
+          onCopy: () => setTooltipText(afterTooltip)
+        },
+        children
+      ))
+    );
+  }
+);
+var CopyTooltip$1 = CopyTooltip;
+
+export { CopyTooltip$1 as default };

package/dist/esm/coreX/DateRangePicker/AbsoluteDate.js

@@ -139,7 +139,7 @@ const Time = React__default.forwardRef((props, ref) => {
 });
 const AbsoluteDate = React__default.forwardRef(
   (props, ref) => {
-    const { range, minDate, maxDate, onChange, onOk } = props;
+    const { range, minDate, maxDate, maxRange, onChange, onOk } = props;
     const timeRef = useRef(null);
     useImperativeHandle(ref, () => {
       var _a;
@@ -158,6 +158,7 @@ const AbsoluteDate = React__default.forwardRef(
         range,
         minDate,
         maxDate,
+        maxRange,
         onChange
       }
     ), /* @__PURE__ */ React__default.createElement(

package/dist/esm/coreX/DateRangePicker/Calendar.js

@@ -1,4 +1,5 @@
 import { ArrowChevronUp16BoldBlueIcon, ArrowChevronDown16BoldBlueIcon } from '@cloudtower/icons-react';
+import { parrotI18n } from '@cloudtower/parrot';
 import { cx } from '@linaria/core';
 import Button from '../../core/Button/index.js';
 import Icon from '../../core/Icon/index.js';
@@ -6,10 +7,13 @@ import Input from '../../core/Input/index.js';
 import { Typo } from '../../core/Typo/index.js';
 import useElementIntersectionRatio from '../../hooks/useElementIntersectionRatio.js';
 import useParrotTranslation from '../../hooks/useParrotTranslation.js';
+import { parseNumberAndUnit } from '../../utils/unit.js';
 import dayjs from 'dayjs';
-import React__default, { useState, useEffect, useRef } from 'react';
+import React__default, { useState, useEffect, useRef, useMemo } from 'react';
 import { getDiffMonthAndDate, getTime, checkDateNotInRange, getClassNameForDateBlock } from './common.js';
 import { CalendarStyle } from './DateRangePicker.style.js';
+import { getFirstDateOfMonth } from './utils.js';
+import { getCalendarTitle } from '../common/getCalendarTitle.js';
 
 const Year = (props) => {
   const { year, onChange } = props;
@@ -74,11 +78,12 @@ const MonthItem = (props) => {
     highlightDay,
     minDate,
     maxDate,
+    maxRange,
     parentElement,
     onRangeChange,
     onMouseEnter
   } = props;
-  const { t } = useParrotTranslation();
+  useParrotTranslation();
   const containerRef = useRef(null);
   const datesContainerRef = useRef(null);
   const headerRef = useRef(null);
@@ -123,70 +128,85 @@ const MonthItem = (props) => {
     }
     onRangeChange(_range);
   }
+  const datesElements = useMemo(() => {
+    return initMonth.dates.map((date) => {
+      const _date = getTime(initYear, initMonth.month, date);
+      const { number: maxRangeNumber, unit: maxRangeUnit } = parseNumberAndUnit(maxRange || "") || {};
+      const dateNotIncludeInRange = checkDateNotInRange(
+        _date,
+        minDate,
+        maxDate
+      );
+      const isLimitRangeEnd = !!rangeStart && !rangeEnd;
+      const isDateBeforeRangeStart = isLimitRangeEnd ? _date.valueOf() < rangeStart.valueOf() : false;
+      const isDateNotIncludeInMaxRange = isLimitRangeEnd && maxRangeNumber && maxRangeUnit ? rangeStart.add(maxRangeNumber, maxRangeUnit).valueOf() <= _date.valueOf() : false;
+      const disabled = Boolean(isDateBeforeRangeStart || isDateNotIncludeInMaxRange) || !dateNotIncludeInRange;
+      const dateClassName = getClassNameForDateBlock(
+        range,
+        _date,
+        mapOfHighlightDay,
+        disabled
+      );
+      const highlightIndex = mapOfHighlightDay.get(_date.format("YYYY-MM-DD"));
+      const isFirstDayInWeek = _date.day() === 1;
+      const isLastDayInWeek = _date.day() === 0;
+      const isFirstDayInMonth = _date.date() === 1;
+      const isLastDayInMonth = _date.date() === _date.daysInMonth();
+      const isLastDayIsSingleDayInWeek = isLastDayInMonth && isFirstDayInWeek;
+      const isFirstHighlight = highlightIndex === 0 || isFirstDayInWeek || isFirstDayInMonth || isLastDayIsSingleDayInWeek;
+      const isLastHighlight = highlightIndex === Math.max(mapOfHighlightDay.size - 1, 0) || isLastDayInWeek || isLastDayInMonth;
+      return /* @__PURE__ */ React__default.createElement(
+        "span",
+        {
+          key: `date-${date}`,
+          className: cx(
+            "date-block",
+            dateClassName,
+            isFirstHighlight && "first-highlight",
+            isLastHighlight && "last-highlight"
+          ),
+          onClick: () => {
+            if (disabled) {
+              return;
+            }
+            clickDate(date);
+          },
+          onMouseEnter: () => {
+            if (disabled) {
+              onMouseEnter(null);
+            } else if (rangeStart && !rangeEnd) {
+              onMouseEnter(_date);
+            }
+          }
+        },
+        /* @__PURE__ */ React__default.createElement("span", { className: cx("date-text", dateClassName) }, date)
+      );
+    });
+  }, [
+    initMonth.dates,
+    initMonth.month,
+    initYear,
+    maxRange,
+    minDate,
+    maxDate,
+    rangeStart,
+    rangeEnd,
+    range,
+    mapOfHighlightDay,
+    clickDate,
+    onMouseEnter
+  ]);
   return /* @__PURE__ */ React__default.createElement("li", { className: "month-container", ref: containerRef }, /* @__PURE__ */ React__default.createElement(
     "header",
     {
       className: cx(Typo.Label.l1_bold, isPinned && "pinned"),
       ref: headerRef
     },
-    initMonth.month,
-    t("common.month")
-  ), /* @__PURE__ */ React__default.createElement("div", { className: "dates-in-month", ref: datesContainerRef }, new Array(initMonth.firstDateOfDay).fill(null).map((value, index) => /* @__PURE__ */ React__default.createElement("span", { key: `blank-date-${index}`, className: "blank" })), initMonth.dates.map((date) => {
-    const _date = getTime(initYear, initMonth.month, date);
-    const dateNotIncludeInRange = checkDateNotInRange(
-      _date,
-      minDate,
-      maxDate
-    );
-    const disabled = Boolean(
-      rangeStart && !rangeEnd && rangeStart.valueOf() > _date.valueOf()
-    ) || !dateNotIncludeInRange;
-    const dateClassName = getClassNameForDateBlock(
-      range,
-      _date,
-      mapOfHighlightDay,
-      disabled
-    );
-    const highlightIndex = mapOfHighlightDay.get(
-      _date.format("YYYY-MM-DD")
-    );
-    const isFirstDayInWeek = _date.day() === 1;
-    const isLastDayInWeek = _date.day() === 0;
-    const isFirstDayInMonth = _date.date() === 1;
-    const isLastDayInMonth = _date.date() === _date.daysInMonth();
-    const isLastDayIsSingleDayInWeek = isLastDayInMonth && isFirstDayInWeek;
-    const isFirstHighlight = highlightIndex === 0 || isFirstDayInWeek || isFirstDayInMonth || isLastDayIsSingleDayInWeek;
-    const isLastHighlight = highlightIndex === Math.max(mapOfHighlightDay.size - 1, 0) || isLastDayInWeek || isLastDayInMonth;
-    return /* @__PURE__ */ React__default.createElement(
-      "span",
-      {
-        key: `date-${date}`,
-        className: cx(
-          "date-block",
-          dateClassName,
-          isFirstHighlight && "first-highlight",
-          isLastHighlight && "last-highlight"
-        ),
-        onClick: () => {
-          if (disabled) {
-            return;
-          }
-          clickDate(date);
-        },
-        onMouseEnter: () => {
-          if (disabled) {
-            onMouseEnter(null);
-          } else if (rangeStart && !rangeEnd) {
-            onMouseEnter(_date);
-          }
-        }
-      },
-      /* @__PURE__ */ React__default.createElement("span", { className: cx("date-text", dateClassName) }, date)
-    );
-  })));
+    getCalendarTitle(initMonth.month.toString(), parrotI18n.t, parrotI18n)
+  ), /* @__PURE__ */ React__default.createElement("div", { className: "dates-in-month", ref: datesContainerRef }, new Array(initMonth.firstDateOfDay).fill(null).map((value, index) => /* @__PURE__ */ React__default.createElement("span", { key: `blank-date-${index}`, className: "blank" })), datesElements));
 };
 const Month = (props) => {
-  const { year, range, minDate, maxDate, onRangeChange } = props;
+  const { year, range, minDate, maxDate, maxRange, onRangeChange } = props;
   const monthContainerRef = useRef(null);
   const [month, setMonth] = useState([]);
   const [highlightDay, setHighlightDay] = useState(() => {
@@ -202,11 +222,10 @@ const Month = (props) => {
       const time = dayjs(`${year}-${month2}`, "YYYY-M");
       const allDateInMonth = time.daysInMonth();
       const dates = new Array(allDateInMonth).fill(1).map((value, index) => index + 1);
-      const firstDateOfDay = time.set("date", dates[0]).day();
       monthAndDate.push({
         month: month2,
         dates,
-        firstDateOfDay: Math.max(firstDateOfDay - 1, 0)
+        firstDateOfDay: getFirstDateOfMonth(time)
       });
     }
     setMonth(monthAndDate);
@@ -245,7 +264,8 @@ const Month = (props) => {
         range,
         minDate,
         maxDate,
-        highlightDay: highlightDay || controlHighlightDay || [],
+        maxRange,
+        highlightDay: controlHighlightDay || highlightDay || [],
         parentElement: monthContainerRef,
         onRangeChange,
         onMouseEnter: handleMouseEnterDate
@@ -258,7 +278,7 @@ const Week = () => {
   return /* @__PURE__ */ React__default.createElement(CalendarStyle.Week, null, /* @__PURE__ */ React__default.createElement("li", { className: Typo.Label.l1_regular }, t("components.monday-simple")), /* @__PURE__ */ React__default.createElement("li", { className: Typo.Label.l1_regular }, t("components.tuesday-simple")), /* @__PURE__ */ React__default.createElement("li", { className: Typo.Label.l1_regular }, t("components.wednesday-simple")), /* @__PURE__ */ React__default.createElement("li", { className: Typo.Label.l1_regular }, t("components.thursday-simple")), /* @__PURE__ */ React__default.createElement("li", { className: Typo.Label.l1_regular }, t("components.friday-simple")), /* @__PURE__ */ React__default.createElement("li", { className: Typo.Label.l1_regular }, t("components.saturday-simple")), /* @__PURE__ */ React__default.createElement("li", { className: Typo.Label.l1_regular }, t("components.sunday-simple")));
 };
 const Calendar = (props) => {
-  const { range: initRange, minDate, maxDate, onChange } = props;
+  const { range: initRange, minDate, maxDate, maxRange, onChange } = props;
   const [year, setYear] = useState(dayjs().year());
   const [range, setRange] = useState(
     initRange || [null, null]
@@ -277,6 +297,7 @@ const Calendar = (props) => {
       range,
       minDate,
       maxDate,
+      maxRange,
       onRangeChange: handleRangeChange
     }
   ));

package/dist/esm/coreX/DateRangePicker/common.js

@@ -139,12 +139,14 @@ function time2string(time) {
   }
 }
 function getDateText(date, t) {
-  const unit = {
-    d: t("common.day"),
-    h: t("common.hour"),
-    m: t("common.minute")
+  const count = date.value;
+  const dateString = {
+    d: t("common.day_count", { count }),
+    h: t("common.hour_count", { count }),
+    m: t("common.minute_count", { count }),
+    M: t("common.month_measure_count", { count })
   }[date.unit];
-  return `${t("components.past")} ${date.value} ${unit}`;
+  return `${t("components.past")} ${dateString}`;
 }
 function checkDateNotInRange(date, minDate, maxDate) {
   if (!minDate && !maxDate) {