@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/{chunk-HKAZXG74.mjs → chunk-OU2AV7DY.mjs}

@@ -13,16 +13,21 @@ import {
   getFocusTrapNavigation,
   getFocusableElements,
   isEventOutside,
+  isFocusInForeignOverlay,
   lockBodyScroll,
+  setBackgroundInert,
   isBrowser,
   computeFloatingPosition,
   autoUpdateFloating,
   resolveAnchoredOverlayTarget,
   getAnchoredOverlayTabTarget,
   getAnchoredOverlayLayoutClasses,
-  FLOATING_OVERLAY_Z_INDEX,
+  getOverlayDirLang,
+  OVERLAY_Z_INDEX,
   getTransformOrigin,
   restoreFocus,
+  captureActiveElement,
+  focusFirst,
   registerEscapeDismiss
 } from "@expcat/tigercat-core";
 var OVERLAY_LAYER_SELECTOR = "[data-tiger-overlay-layer]";
@@ -68,15 +73,21 @@ function useBodyScrollLock({ enabled }) {
     return lockBodyScroll();
   }, [enabled]);
 }
-function renderBodyPortal(node) {
-  if (!isBrowser()) return null;
-  return createPortal(node, document.body);
+function useBackgroundInert({
+  enabled,
+  containerRef
+}) {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!enabled || !container) return;
+    return setBackgroundInert(container);
+  }, [enabled, containerRef]);
 }
-function renderOverlayPortal(node, target, disabled = false) {
-  if (node == null || typeof node === "boolean") return node;
-  const layeredNode = createElement(
+function wrapOverlayLayer(node, target) {
+  const dirLang = getOverlayDirLang(target);
+  return createElement(
     "div",
-    { className: "contents", "data-tiger-overlay-layer": "" },
+    { className: "contents", "data-tiger-overlay-layer": "", ...dirLang },
     node,
     createElement("div", {
       key: "overlay-host",
@@ -84,26 +95,89 @@ function renderOverlayPortal(node, target, disabled = false) {
       "data-tiger-overlay-host": ""
     })
   );
+}
+function renderBodyPortal(node, disabled = false) {
+  if (node == null || typeof node === "boolean") return node;
+  const target = isBrowser() ? resolveAnchoredOverlayTarget(null) : null;
+  const layeredNode = wrapOverlayLayer(node, target);
   if (disabled || !target) return layeredNode;
   return createPortal(layeredNode, target);
 }
-function useFocusTrap({ enabled, containerRef }) {
-  useEffect(() => {
+function useOverlayPortalTarget() {
+  const anchorRef = useRef(null);
+  const [target, setTarget] = useState(null);
+  useLayoutEffect(() => {
+    setTarget(resolveAnchoredOverlayTarget(anchorRef.current));
+  }, []);
+  return {
+    anchorRef,
+    target: target ?? (isBrowser() ? resolveAnchoredOverlayTarget(anchorRef.current) : null)
+  };
+}
+function renderOverlayPortal(node, target, disabled = false) {
+  if (node == null || typeof node === "boolean") return node;
+  const layeredNode = wrapOverlayLayer(node, target);
+  if (disabled || !target) return layeredNode;
+  return createPortal(layeredNode, target);
+}
+function useFocusTrap({
+  enabled,
+  containerRef,
+  inert = false,
+  autoFocus = false
+}) {
+  const restoreTargetRef = useRef(null);
+  const wasEnabledRef = useRef(false);
+  if (autoFocus && enabled && !wasEnabledRef.current) {
+    restoreTargetRef.current = captureActiveElement();
+  }
+  wasEnabledRef.current = enabled;
+  useLayoutEffect(() => {
+    if (!enabled) {
+      if (autoFocus) {
+        restoreFocus(restoreTargetRef.current);
+        restoreTargetRef.current = null;
+      }
+      return;
+    }
     const container = containerRef.current;
-    if (!enabled || !container) return;
+    if (!container) return;
     const ownerDocument = container.ownerDocument;
+    const releaseInert = inert ? setBackgroundInert(container) : void 0;
+    if (autoFocus) {
+      const focusables = getFocusableElements(container);
+      focusFirst([...focusables, container]);
+    }
     const handler = (event) => {
-      if (!(event.target instanceof Node) || !container.contains(event.target)) return;
       const focusables = getFocusableElements(container);
       const activeElement = ownerDocument.activeElement;
+      const inside = activeElement instanceof Node && container.contains(activeElement);
+      if (!inside) {
+        if (event.key !== "Tab") return;
+        if (isFocusInForeignOverlay(container, activeElement)) return;
+        event.preventDefault();
+        const next = event.shiftKey ? focusables[focusables.length - 1] : focusables[0];
+        next?.focus();
+        return;
+      }
       const nav = getFocusTrapNavigation(event, focusables, activeElement);
-      if (!nav.shouldHandle || !nav.next) return;
+      if (!nav.shouldHandle) return;
       event.preventDefault();
-      nav.next.focus();
+      nav.next?.focus();
     };
     ownerDocument.addEventListener("keydown", handler, true);
-    return () => ownerDocument.removeEventListener("keydown", handler, true);
-  }, [enabled, containerRef]);
+    return () => {
+      ownerDocument.removeEventListener("keydown", handler, true);
+      releaseInert?.();
+    };
+  }, [enabled, containerRef, inert, autoFocus]);
+  useLayoutEffect(() => {
+    return () => {
+      if (!autoFocus) return;
+      restoreFocus(restoreTargetRef.current);
+      restoreTargetRef.current = null;
+    };
+  }, [autoFocus]);
 }
 function useFloating(options) {
   const {
@@ -190,6 +264,9 @@ function useFloating(options) {
     referenceWidth
   };
 }
+function resolveOverlayPortalTarget(reference, getContainer) {
+  return getContainer?.() ?? resolveAnchoredOverlayTarget(reference);
+}
 function useAnchoredOverlay({
   enabled,
   referenceRef,
@@ -201,9 +278,11 @@ function useAnchoredOverlay({
   layout = "anchored",
   matchReferenceWidth = false,
   portal = true,
+  getContainer,
   dismissOnOutside = false,
   dismissOnEscape = false,
   restoreFocusOnDismiss = false,
+  arrowRef,
   onDismiss
 }) {
   const [target, setTarget] = useState(null);
@@ -220,22 +299,25 @@ function useAnchoredOverlay({
       setTarget(null);
       return;
     }
-    setTarget(resolveAnchoredOverlayTarget(referenceRef.current));
-  }, [portal, referenceRef]);
-  const resolvedTarget = portal && referenceRef.current ? resolveAnchoredOverlayTarget(referenceRef.current) : null;
+    setTarget(resolveOverlayPortalTarget(referenceRef.current, getContainer));
+  }, [portal, referenceRef, getContainer]);
+  const resolvedTarget = portal && referenceRef.current ? resolveOverlayPortalTarget(referenceRef.current, getContainer) : null;
   const effectiveTarget = resolvedTarget ?? target;
   const {
     x,
     y,
     placement: actualPlacement,
     isPositioned,
-    referenceWidth
+    referenceWidth,
+    arrowX,
+    arrowY
   } = useFloating({
     referenceRef,
     floatingRef,
     enabled,
     placement,
     offset,
+    arrowRef,
     context: effectiveTarget
   });
   const dismiss = useCallback(
@@ -253,7 +335,7 @@ function useAnchoredOverlay({
     enabled: enabled && dismissOnOutside,
     refs: [containerRef, referenceRef, floatingLayerRef, ...outsideRefs],
     onOutsideClick: dismissOutside,
-    defer: false
+    defer: true
   });
   useEscapeKey({
     enabled: enabled && dismissOnEscape,
@@ -282,7 +364,7 @@ function useAnchoredOverlay({
       "--tiger-overlay-x": `${x}px`,
       "--tiger-overlay-y": `${y}px`,
       "--tiger-overlay-reference-width": `${referenceWidth}px`,
-      zIndex: FLOATING_OVERLAY_Z_INDEX,
+      zIndex: OVERLAY_Z_INDEX.overlay,
       transformOrigin: getTransformOrigin(actualPlacement)
     }),
     [actualPlacement, referenceWidth, x, y]
@@ -294,14 +376,19 @@ function useAnchoredOverlay({
     positioned: isPositioned,
     placement: actualPlacement,
     x,
-    y
+    y,
+    arrowX,
+    arrowY
   };
 }
 
 export {
+  useClickOutside,
   useEscapeKey,
   useBodyScrollLock,
+  useBackgroundInert,
   renderBodyPortal,
+  useOverlayPortalTarget,
   renderOverlayPortal,
   useFocusTrap,
   useAnchoredOverlay

package/dist/chunk-OZ4WH3GE.mjs

@@ -0,0 +1,431 @@
+import {
+  useChartInteraction
+} from "./chunk-7H7EKANG.mjs";
+import {
+  useResponsiveChartSize
+} from "./chunk-7P4R3NVO.mjs";
+import {
+  ChartTooltip
+} from "./chunk-JX2WKSVM.mjs";
+import {
+  ChartCanvas
+} from "./chunk-OP77MPGN.mjs";
+import {
+  ChartLegend
+} from "./chunk-A4JRK5SM.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/PieChart.tsx
+import { useCallback, useId, useMemo } from "react";
+import {
+  classNames,
+  getStableChartGradientPrefix,
+  resolveChartPalette,
+  buildChartLegendItems,
+  chartLegendOrientationFromPosition,
+  resolveChartTooltipContent,
+  getCartesianChartShellClasses,
+  chartMarkTabIndex,
+  nextChartRovingIndex,
+  isChartNavigationKey,
+  getChartLabels,
+  mergeTigerLocale,
+  formatChartTemplate,
+  layoutPieSlices,
+  pieSliceDisplayLabel,
+  pieSliceTransitionClasses,
+  pieSliceLabelInsideClasses,
+  resolvePieRadii,
+  DEFAULT_PIE_START_ANGLE,
+  DONUT_ENTRANCE_CLASS,
+  PIE_BASE_SHADOW,
+  PIE_EMPHASIS_SHADOW,
+  getChartElementOpacity
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PieChart = ({
+  width = 320,
+  height = 200,
+  padding = 24,
+  responsive = false,
+  data,
+  innerRadius,
+  innerRadiusRatio,
+  outerRadius,
+  startAngle = DEFAULT_PIE_START_ANGLE,
+  endAngle = Math.PI * 2,
+  padAngle = 0,
+  colors,
+  showLabels = false,
+  labelFormatter,
+  labelPosition = "inside",
+  borderWidth = 2,
+  borderColor = "var(--tiger-surface,#ffffff)",
+  hoverOffset = 8,
+  shadow = false,
+  gradient = false,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  showLegend = false,
+  legendPosition = "bottom",
+  legendMarkerSize = 10,
+  legendGap = 8,
+  showTooltip = true,
+  tooltipFormatter,
+  legendFormatter,
+  centerValue,
+  centerLabel,
+  animated = false,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onSliceClick,
+  onSliceHover
+}) => {
+  const config = useTigerConfig();
+  const labels = useMemo(() => getChartLabels(mergeTigerLocale(config.locale)), [config.locale]);
+  const interactive = hoverable || selectable || Boolean(onSliceClick);
+  const gradientId = useId();
+  const gradientPrefix = useMemo(
+    () => getStableChartGradientPrefix("pie", gradientId),
+    [gradientId]
+  );
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    resolvedSelectedIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave
+  } = useChartInteraction({
+    hoverable,
+    showTooltip,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => data[index],
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onSliceHover?.(index, index !== null ? data[index] : null);
+    },
+    onSelectedIndexChange,
+    onClick: (index, datum) => {
+      if (datum !== void 0) onSliceClick?.(index, datum);
+    }
+  });
+  const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+    width,
+    height,
+    padding,
+    responsive
+  );
+  const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const radii = useMemo(
+    () => resolvePieRadii({
+      innerWidth: innerRect.width,
+      innerHeight: innerRect.height,
+      innerRadius,
+      outerRadius,
+      innerRadiusRatio,
+      labelPosition,
+      hoverOffset
+    }),
+    [
+      innerRect.width,
+      innerRect.height,
+      innerRadius,
+      outerRadius,
+      innerRadiusRatio,
+      labelPosition,
+      hoverOffset
+    ]
+  );
+  const slices = useMemo(
+    () => layoutPieSlices(data, {
+      cx: radii.cx,
+      cy: radii.cy,
+      innerRadius: radii.innerRadius,
+      outerRadius: radii.outerRadius,
+      startAngle,
+      endAngle,
+      padAngle,
+      palette,
+      gradient,
+      gradientPrefix,
+      hoverOffset,
+      labelPosition
+    }),
+    [
+      data,
+      radii.cx,
+      radii.cy,
+      radii.innerRadius,
+      radii.outerRadius,
+      startAngle,
+      endAngle,
+      padAngle,
+      palette,
+      gradient,
+      gradientPrefix,
+      hoverOffset,
+      labelPosition
+    ]
+  );
+  const total = useMemo(() => slices.reduce((sum, slice) => sum + slice.value, 0), [slices]);
+  const sliceName = useCallback(
+    (datum, index) => pieSliceDisplayLabel(datum, index, labels.sliceName),
+    [labels.sliceName]
+  );
+  const legendItems = useMemo(
+    () => buildChartLegendItems({
+      data: slices.map((slice) => slice.datum),
+      palette,
+      activeIndex,
+      selectedIndex: resolvedSelectedIndex,
+      getLabel: (d, i) => legendFormatter ? legendFormatter(d, i) : sliceName(d, i),
+      getColor: (d, i) => d.color ?? palette[i % palette.length]
+    }),
+    [slices, legendFormatter, palette, activeIndex, resolvedSelectedIndex, sliceName]
+  );
+  const tooltipContent = useMemo(
+    () => resolveChartTooltipContent(resolvedHoveredIndex, data, tooltipFormatter, (datum, index) => {
+      const name = sliceName(datum, index);
+      const percentage = total > 0 ? (datum.value / total * 100).toFixed(1) : "0";
+      return `${name}: ${datum.value} (${percentage}%)`;
+    }),
+    [resolvedHoveredIndex, data, tooltipFormatter, total, sliceName]
+  );
+  const visualActive = slices.findIndex(
+    (slice) => slice.index === (activeIndex ?? resolvedHoveredIndex)
+  );
+  const centerParts = [centerValue, centerLabel].filter((part) => part !== void 0);
+  const resolvedDesc = [desc, ...centerParts.map((part) => String(part))].filter(Boolean).join(" ");
+  const handleSliceKeyDown = (event, visualIndex) => {
+    if (isChartNavigationKey(event.key)) {
+      event.preventDefault();
+      const nextVisual = nextChartRovingIndex(visualIndex, event.key, slices.length);
+      const next = slices[nextVisual];
+      const node = event.currentTarget.parentElement?.querySelector(
+        `[data-pie-slice][data-index="${next.index}"]`
+      );
+      if (node instanceof SVGElement) node.focus();
+      handleMouseEnter(next.index, event);
+      return;
+    }
+    handleKeyDown(event, slices[visualIndex].index);
+  };
+  const chart = /* @__PURE__ */ jsxs(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      responsive,
+      title,
+      desc: resolvedDesc || void 0,
+      className: animated ? DONUT_ENTRANCE_CLASS : void 0,
+      onResolvedSizeChange,
+      children: [
+        gradient && /* @__PURE__ */ jsx("defs", { children: slices.map((slice) => /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: `${gradientPrefix}-${slice.index}`,
+            gradientUnits: "userSpaceOnUse",
+            x1: radii.cx,
+            y1: radii.cy - radii.outerRadius,
+            x2: radii.cx,
+            y2: radii.cy + radii.outerRadius,
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: slice.color, stopOpacity: 1 }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: slice.color, stopOpacity: 0.7 })
+            ]
+          },
+          `pie-grad-${slice.index}`
+        )) }),
+        radii.innerRadius > 0 && centerParts.length > 0 && /* @__PURE__ */ jsx("clipPath", { id: `${gradientPrefix}-center`, children: /* @__PURE__ */ jsx("circle", { cx: radii.cx, cy: radii.cy, r: radii.innerRadius }) }),
+        slices.map((slice, visualIndex) => {
+          const isEmphasized = activeIndex === slice.index;
+          const ariaLabel = formatChartTemplate(labels.sliceAriaLabel, {
+            label: sliceName(slice.datum, slice.index),
+            value: slice.value,
+            percent: slice.percent.toFixed(1)
+          });
+          return /* @__PURE__ */ jsx(
+            "g",
+            {
+              transform: interactive && isEmphasized ? `translate(${slice.hoverDx} ${slice.hoverDy})` : void 0,
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: slice.path,
+                  fill: slice.fill,
+                  opacity: getChartElementOpacity(slice.index, activeIndex, {
+                    activeOpacity,
+                    inactiveOpacity
+                  }),
+                  stroke: borderColor,
+                  strokeWidth: borderWidth,
+                  strokeLinejoin: "round",
+                  "data-pie-slice": "true",
+                  "data-index": slice.index,
+                  tabIndex: interactive ? chartMarkTabIndex(visualIndex, visualActive < 0 ? null : visualActive) : void 0,
+                  role: interactive ? "button" : void 0,
+                  "aria-hidden": interactive ? void 0 : true,
+                  "aria-label": interactive ? ariaLabel : void 0,
+                  className: classNames(interactive && "cursor-pointer", pieSliceTransitionClasses),
+                  style: {
+                    filter: shadow ? isEmphasized ? PIE_EMPHASIS_SHADOW : PIE_BASE_SHADOW : void 0
+                  },
+                  onMouseEnter: (e) => handleMouseEnter(slice.index, e),
+                  onMouseMove: handleMouseMove,
+                  onMouseLeave: handleMouseLeave,
+                  onFocus: (e) => handleMouseEnter(slice.index, e),
+                  onClick: () => handleClick(slice.index),
+                  onKeyDown: (e) => handleSliceKeyDown(e, visualIndex)
+                }
+              )
+            },
+            `slice-${slice.index}`
+          );
+        }),
+        showLabels && labelPosition === "outside" && slices.map((slice) => {
+          const text = labelFormatter ? labelFormatter(slice.value, slice.datum, slice.index) : `${sliceName(slice.datum, slice.index)} ${slice.percent.toFixed(1)}%`;
+          return /* @__PURE__ */ jsxs("g", { "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx(
+              "polyline",
+              {
+                points: slice.outside?.points,
+                fill: "none",
+                stroke: slice.color,
+                strokeWidth: 1,
+                opacity: 0.5
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: slice.outside?.x,
+                y: slice.outside?.y,
+                textAnchor: slice.outside?.textAnchor,
+                dominantBaseline: "middle",
+                className: "fill-[color:var(--tiger-text,#1f2937)] text-xs",
+                children: text
+              }
+            )
+          ] }, `label-group-${slice.index}`);
+        }),
+        showLabels && labelPosition !== "outside" && slices.map((slice) => {
+          const text = labelFormatter ? labelFormatter(slice.value, slice.datum, slice.index) : sliceName(slice.datum, slice.index);
+          return /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: slice.labelX,
+              y: slice.labelY,
+              className: pieSliceLabelInsideClasses,
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              "aria-hidden": "true",
+              children: text
+            },
+            `label-${slice.index}`
+          );
+        }),
+        centerParts.length > 0 && /* @__PURE__ */ jsxs(
+          "g",
+          {
+            "data-donut-center": "true",
+            clipPath: radii.innerRadius > 0 ? `url(#${gradientPrefix}-center)` : void 0,
+            "aria-hidden": "true",
+            children: [
+              centerValue !== void 0 && /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: radii.cx,
+                  y: centerLabel !== void 0 ? radii.cy - 8 : radii.cy,
+                  textAnchor: "middle",
+                  dominantBaseline: "middle",
+                  className: "fill-[color:var(--tiger-text,#1f2937)] text-xl font-semibold",
+                  children: `${centerValue}`
+                }
+              ),
+              centerLabel !== void 0 && /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: radii.cx,
+                  y: centerValue !== void 0 ? radii.cy + 12 : radii.cy,
+                  textAnchor: "middle",
+                  dominantBaseline: "middle",
+                  className: "fill-[color:var(--tiger-text-secondary,#6b7280)] text-xs",
+                  children: centerLabel
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+  const tooltip = showTooltip && /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      content: tooltipContent,
+      open: resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: getCartesianChartShellClasses({
+        showLegend,
+        legendPosition,
+        responsive,
+        className
+      }),
+      "data-pie-chart": "",
+      "data-donut-chart": radii.innerRadius > 0 ? "" : void 0,
+      children: [
+        chart,
+        showLegend ? /* @__PURE__ */ jsx(
+          ChartLegend,
+          {
+            items: legendItems,
+            orientation: chartLegendOrientationFromPosition(legendPosition),
+            markerSize: legendMarkerSize,
+            gap: legendGap,
+            interactive: hoverable || selectable,
+            ariaLabel: labels.legendAriaLabel,
+            onItemClick: handleLegendClick,
+            onItemHover: handleLegendHover,
+            onItemLeave: handleLegendLeave
+          }
+        ) : null,
+        tooltip
+      ]
+    }
+  );
+};
+var PieChart_default = PieChart;
+
+export {
+  PieChart,
+  PieChart_default
+};

package/dist/{chunk-Y3SGFGN6.mjs → chunk-P44HJQNB.mjs}

@@ -1,10 +1,19 @@
-// src/components/MessageRoot.ts
+// src/components/MessageRoot.tsx
+import { isBrowser } from "@expcat/tigercat-core";
 var messageModulePromise = null;
+var resolvedMessage = null;
 function loadMessageModule() {
-  messageModulePromise ??= import("./components/Message.mjs");
+  messageModulePromise ??= import("./components/Message.mjs").then((module) => {
+    resolvedMessage = module.Message;
+    return module;
+  });
   return messageModulePromise;
 }
 function forwardMessage(method, options) {
+  if (!isBrowser()) return () => void 0;
+  if (resolvedMessage) {
+    return resolvedMessage[method](options);
+  }
   let closeMessage = null;
   let requestedClose = false;
   void loadMessageModule().then(({ Message: Message2 }) => {
@@ -41,6 +50,11 @@ var Message = {
     return forwardMessage("loading", options);
   },
   clear() {
+    if (!isBrowser()) return;
+    if (resolvedMessage) {
+      resolvedMessage.clear();
+      return;
+    }
     void loadMessageModule().then(({ Message: Message2 }) => {
       Message2.clear();
     });