@multiversx/sdk-dapp-liquidity 2.3.0-alpha.6 → 2.4.0-alpha.0

package/reactjs/components/base/MxSearch/MxSearch.mjs

@@ -1,65 +1,35 @@
-import { jsxs as d, jsx as l } from "react/jsx-runtime";
-import { faClose as h } from "@fortawesome/free-solid-svg-icons/faClose";
-import { faSearch as b } from "@fortawesome/free-solid-svg-icons/faSearch";
-import { FontAwesomeIcon as n } from "@fortawesome/react-fontawesome";
-import { forwardRef as C, useState as N, useEffect as g } from "react";
-import { useDebounce as v } from "../../../hooks/useDebounce.mjs";
-import { mxClsx as i } from "../../../utils/mxClsx.mjs";
-const k = C(
-  (a, s) => {
-    const {
-      iconsClassName: t = "",
-      inputClassName: q = "",
-      containerClassName: u = "",
-      placeholder: m = "Search by name or symbol",
-      inputDefaultValue: c = "",
-      onChange: p
-    } = a, [e, o] = N(c), r = v(e, 200), f = () => o("");
-    return g(() => p(r), [r]), /* @__PURE__ */ d(
-      "div",
-      {
-        className: `liq-relative liq-flex liq-flex-1 liq-items-center  ${u}`,
-        children: [
-          /* @__PURE__ */ l(
-            n,
-            {
-              icon: b,
-              className: i(
-                "liq-pointer-events-none liq-absolute liq-inset-4 liq-top-1/3 liq-h-4 liq-w-4 liq-items-center liq-text-neutral-300",
-                t
-              )
-            }
-          ),
-          /* @__PURE__ */ l(
-            "input",
-            {
-              value: e,
-              onChange: (x) => o(x.target.value),
-              placeholder: m,
-              className: i(
-                "focus-primary liq-text-medium placeholder:liq-font-medium liq-flex liq-w-full liq-gap-2 liq-rounded-xl liq-border liq-border-neutral-800 liq-bg-neutral-900 liq-px-11 liq-py-2 placeholder:liq-text-neutral-300",
-                q
-              ),
-              tabIndex: 1,
-              ref: s
-            }
-          ),
-          !!e && /* @__PURE__ */ l(
-            n,
-            {
-              icon: h,
-              onClick: f,
-              className: i(
-                "liq-absolute liq-inset-4 liq-left-auto liq-top-1/3 liq-h-4 liq-w-4 liq-cursor-pointer liq-items-center liq-text-neutral-300 liq-transition-colors liq-duration-200 hover:liq-text-neutral-400",
-                t
-              )
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-export {
-  k as MxSearch
-};
+import { mxClsx as e } from "../../../utils/mxClsx.mjs";
+import { useDebounce as t } from "../../../hooks/useDebounce.mjs";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as i, useEffect as a, useState as o } from "react";
+import { FontAwesomeIcon as s } from "@fortawesome/react-fontawesome";
+import { faClose as c } from "@fortawesome/free-solid-svg-icons/faClose";
+import { faSearch as l } from "@fortawesome/free-solid-svg-icons/faSearch";
+//#region src/reactjs/components/base/MxSearch/MxSearch.tsx
+var u = i((i, u) => {
+	let { iconsClassName: d = "", inputClassName: f = "", containerClassName: p = "", placeholder: m = "Search by name or symbol", inputDefaultValue: h = "", onChange: g } = i, [_, v] = o(h), y = t(_, 200);
+	return a(() => g(y), [y]), /* @__PURE__ */ r("div", {
+		className: `liq-relative liq-flex liq-flex-1 liq-items-center  ${p}`,
+		children: [
+			/* @__PURE__ */ n(s, {
+				icon: l,
+				className: e("liq-pointer-events-none liq-absolute liq-inset-4 liq-top-1/3 liq-h-4 liq-w-4 liq-items-center liq-text-neutral-300", d)
+			}),
+			/* @__PURE__ */ n("input", {
+				value: _,
+				onChange: (e) => v(e.target.value),
+				placeholder: m,
+				className: e("focus-primary liq-text-medium placeholder:liq-font-medium liq-flex liq-w-full liq-gap-2 liq-rounded-xl liq-border liq-border-neutral-800 liq-bg-neutral-900 liq-px-11 liq-py-2 placeholder:liq-text-neutral-300", f),
+				tabIndex: 1,
+				ref: u
+			}),
+			!!_ && /* @__PURE__ */ n(s, {
+				icon: c,
+				onClick: () => v(""),
+				className: e("liq-absolute liq-inset-4 liq-left-auto liq-top-1/3 liq-h-4 liq-w-4 liq-cursor-pointer liq-items-center liq-text-neutral-300 liq-transition-colors liq-duration-200 hover:liq-text-neutral-400", d)
+			})
+		]
+	});
+});
+//#endregion
+export { u as MxSearch };

package/reactjs/components/base/MxSearch/index.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./MxSearch.js");exports.MxSearch=e.MxSearch;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./MxSearch.js");exports.MxSearch=e.MxSearch;

package/reactjs/components/base/MxSearch/index.mjs

@@ -1,4 +1,2 @@
-import { MxSearch as o } from "./MxSearch.mjs";
-export {
-  o as MxSearch
-};
+import { MxSearch as e } from "./MxSearch.mjs";
+export { e as MxSearch };

package/reactjs/components/base/MxSlideover/MxSlideover.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-
 export type MxSlideoverSizeType = 'h-full' | 'h-60' | 'h-40' | 'h-20';
 export declare const MxSlideover: ({ show, children, size, className, onClose }: {
     show: boolean;
@@ -7,4 +6,4 @@ export declare const MxSlideover: ({ show, children, size, className, onClose }:
     children: ReactNode;
     size?: MxSlideoverSizeType;
     onClose: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/reactjs/components/base/MxSlideover/MxSlideover.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),q=require("@fortawesome/free-solid-svg-icons/faClose"),o=require("@fortawesome/react-fontawesome"),i=require("@headlessui/react"),t=require("react"),c=require("../../../utils/mxClsx.js"),d=require("../MxButton/MxButton.js"),u=({show:r,children:n,size:e,className:s="",onClose:a})=>l.jsx(i.Transition.Root,{show:r,as:t.Fragment,children:l.jsxs(i.Dialog,{as:"div",className:"liq-relative liq-z-30",onClose:a,children:[l.jsx(i.Transition.Child,{as:t.Fragment,enter:"liq-ease-in-out liq-duration-150",enterFrom:"liq-opacity-0",enterTo:"liq-opacity-100",leave:"liq-ease-in-out liq-duration-150",leaveFrom:"liq-opacity-100",leaveTo:"liq-opacity-0",children:l.jsx("div",{className:"liq-fixed liq-inset-0 liq-bg-neutral-400 liq-bg-opacity-25 liq-backdrop-blur-sm liq- liq-backdrop-filter liq-transition-opacity"})}),l.jsx("div",{className:"liq-fixed liq-inset-0 liq-overflow-hidden",children:l.jsx("div",{className:"liq-absolute liq-inset-0 liq-overflow-hidden",children:l.jsx("div",{className:"liq-pointer-events-none liq-fixed liq-inset-y-0 liq-right-0 liq-flex liq-max-w-full liq-p-2",children:l.jsx(i.Transition.Child,{as:t.Fragment,enter:"liq-transform liq-transition liq-ease-in-out liq-duration-150",leave:"liq-transform liq-transition liq-ease-in-out liq-duration-150",enterFrom:"liq-translate-y-full lg:liq-translate-y-0 lg:liq-translate-x-full",enterTo:"liq-translate-y-0 lg:liq-translate-x-0",leaveFrom:"liq-translate-y-0 lg:liq-translate-x-0",leaveTo:"liq-translate-y-full lg:liq-translate-y-0 lg:liq-translate-x-full",children:l.jsx(i.Dialog.Panel,{className:"liq-pointer-events-auto liq-relative liq-flex liq-w-screen liq-lg:max-w-md",children:l.jsxs("div",{className:c.mxClsx("liq-relative liq-flex liq-flex-1 liq-flex-col liq-self-end liq-rounded-3xl liq-bg-neutral-850 liq-p-2 liq-shadow-2xl",{"liq-h-full md:liq-rounded-3xl":e==="h-full","liq-h-3/5":e==="h-60","liq-h-2/5":e==="h-40","liq-h-1/5":e==="h-20"},s),children:[l.jsx(d.MxButton,{variant:"transparent",onClick:a,className:"liq-absolute liq-top-12 liq-right-4 liq-z-30 liq-flex liq-h-10 liq-w-10 liq-items-center liq-justify-center liq-rounded-full liq-border-none liq-bg-neutral-850",children:l.jsx(o.FontAwesomeIcon,{icon:q.faClose,className:"liq-h-5 liq-w-5 liq-text-neutral-500"})}),l.jsx("div",{className:"scrollbar-thin liq-overflow-y-scroll",children:n})]})})})})})})]})});exports.MxSlideover=u;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../utils/mxClsx.js"),t=require("../MxButton/MxButton.js");require("../MxButton/index.js");let n=require("react/jsx-runtime"),r=require("react"),i=require("@fortawesome/react-fontawesome"),a=require("@fortawesome/free-solid-svg-icons/faClose"),o=require("@headlessui/react");var s=({show:s,children:c,size:l,className:u=``,onClose:d})=>(0,n.jsx)(o.Transition.Root,{show:s,as:r.Fragment,children:(0,n.jsxs)(o.Dialog,{as:`div`,className:`liq-relative liq-z-30`,onClose:d,children:[(0,n.jsx)(o.Transition.Child,{as:r.Fragment,enter:`liq-ease-in-out liq-duration-150`,enterFrom:`liq-opacity-0`,enterTo:`liq-opacity-100`,leave:`liq-ease-in-out liq-duration-150`,leaveFrom:`liq-opacity-100`,leaveTo:`liq-opacity-0`,children:(0,n.jsx)(`div`,{className:`liq-fixed liq-inset-0 liq-bg-neutral-400 liq-bg-opacity-25 liq-backdrop-blur-sm liq- liq-backdrop-filter liq-transition-opacity`})}),(0,n.jsx)(`div`,{className:`liq-fixed liq-inset-0 liq-overflow-hidden`,children:(0,n.jsx)(`div`,{className:`liq-absolute liq-inset-0 liq-overflow-hidden`,children:(0,n.jsx)(`div`,{className:`liq-pointer-events-none liq-fixed liq-inset-y-0 liq-right-0 liq-flex liq-max-w-full liq-p-2`,children:(0,n.jsx)(o.Transition.Child,{as:r.Fragment,enter:`liq-transform liq-transition liq-ease-in-out liq-duration-150`,leave:`liq-transform liq-transition liq-ease-in-out liq-duration-150`,enterFrom:`liq-translate-y-full lg:liq-translate-y-0 lg:liq-translate-x-full`,enterTo:`liq-translate-y-0 lg:liq-translate-x-0`,leaveFrom:`liq-translate-y-0 lg:liq-translate-x-0`,leaveTo:`liq-translate-y-full lg:liq-translate-y-0 lg:liq-translate-x-full`,children:(0,n.jsx)(o.Dialog.Panel,{className:`liq-pointer-events-auto liq-relative liq-flex liq-w-screen liq-lg:max-w-md`,children:(0,n.jsxs)(`div`,{className:e.mxClsx(`liq-relative liq-flex liq-flex-1 liq-flex-col liq-self-end liq-rounded-3xl liq-bg-neutral-850 liq-p-2 liq-shadow-2xl`,{"liq-h-full md:liq-rounded-3xl":l===`h-full`,"liq-h-3/5":l===`h-60`,"liq-h-2/5":l===`h-40`,"liq-h-1/5":l===`h-20`},u),children:[(0,n.jsx)(t.MxButton,{variant:`transparent`,onClick:d,className:`liq-absolute liq-top-12 liq-right-4 liq-z-30 liq-flex liq-h-10 liq-w-10 liq-items-center liq-justify-center liq-rounded-full liq-border-none liq-bg-neutral-850`,children:(0,n.jsx)(i.FontAwesomeIcon,{icon:a.faClose,className:`liq-h-5 liq-w-5 liq-text-neutral-500`})}),(0,n.jsx)(`div`,{className:`scrollbar-thin liq-overflow-y-scroll`,children:c})]})})})})})})]})});exports.MxSlideover=s;

package/reactjs/components/base/MxSlideover/MxSlideover.mjs

@@ -1,76 +1,70 @@
-import { jsx as l, jsxs as r } from "react/jsx-runtime";
-import { faClose as d } from "@fortawesome/free-solid-svg-icons/faClose";
-import { FontAwesomeIcon as m } from "@fortawesome/react-fontawesome";
-import { Transition as e, Dialog as q } from "@headlessui/react";
-import { Fragment as t } from "react";
-import { mxClsx as c } from "../../../utils/mxClsx.mjs";
-import { MxButton as f } from "../MxButton/MxButton.mjs";
-const b = ({
-  show: n,
-  children: o,
-  size: i,
-  className: s = "",
-  onClose: a
-}) => /* @__PURE__ */ l(e.Root, { show: n, as: t, children: /* @__PURE__ */ r(q, { as: "div", className: "liq-relative liq-z-30", onClose: a, children: [
-  /* @__PURE__ */ l(
-    e.Child,
-    {
-      as: t,
-      enter: "liq-ease-in-out liq-duration-150",
-      enterFrom: "liq-opacity-0",
-      enterTo: "liq-opacity-100",
-      leave: "liq-ease-in-out liq-duration-150",
-      leaveFrom: "liq-opacity-100",
-      leaveTo: "liq-opacity-0",
-      children: /* @__PURE__ */ l("div", { className: "liq-fixed liq-inset-0 liq-bg-neutral-400 liq-bg-opacity-25 liq-backdrop-blur-sm liq- liq-backdrop-filter liq-transition-opacity" })
-    }
-  ),
-  /* @__PURE__ */ l("div", { className: "liq-fixed liq-inset-0 liq-overflow-hidden", children: /* @__PURE__ */ l("div", { className: "liq-absolute liq-inset-0 liq-overflow-hidden", children: /* @__PURE__ */ l("div", { className: "liq-pointer-events-none liq-fixed liq-inset-y-0 liq-right-0 liq-flex liq-max-w-full liq-p-2", children: /* @__PURE__ */ l(
-    e.Child,
-    {
-      as: t,
-      enter: "liq-transform liq-transition liq-ease-in-out liq-duration-150",
-      leave: "liq-transform liq-transition liq-ease-in-out liq-duration-150",
-      enterFrom: "liq-translate-y-full lg:liq-translate-y-0 lg:liq-translate-x-full",
-      enterTo: "liq-translate-y-0 lg:liq-translate-x-0",
-      leaveFrom: "liq-translate-y-0 lg:liq-translate-x-0",
-      leaveTo: "liq-translate-y-full lg:liq-translate-y-0 lg:liq-translate-x-full",
-      children: /* @__PURE__ */ l(q.Panel, { className: "liq-pointer-events-auto liq-relative liq-flex liq-w-screen liq-lg:max-w-md", children: /* @__PURE__ */ r(
-        "div",
-        {
-          className: c(
-            "liq-relative liq-flex liq-flex-1 liq-flex-col liq-self-end liq-rounded-3xl liq-bg-neutral-850 liq-p-2 liq-shadow-2xl",
-            {
-              "liq-h-full md:liq-rounded-3xl": i === "h-full",
-              "liq-h-3/5": i === "h-60",
-              "liq-h-2/5": i === "h-40",
-              "liq-h-1/5": i === "h-20"
-            },
-            s
-          ),
-          children: [
-            /* @__PURE__ */ l(
-              f,
-              {
-                variant: "transparent",
-                onClick: a,
-                className: "liq-absolute liq-top-12 liq-right-4 liq-z-30 liq-flex liq-h-10 liq-w-10 liq-items-center liq-justify-center liq-rounded-full liq-border-none liq-bg-neutral-850",
-                children: /* @__PURE__ */ l(
-                  m,
-                  {
-                    icon: d,
-                    className: "liq-h-5 liq-w-5 liq-text-neutral-500"
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ l("div", { className: "scrollbar-thin liq-overflow-y-scroll", children: o })
-          ]
-        }
-      ) })
-    }
-  ) }) }) })
-] }) });
-export {
-  b as MxSlideover
-};
+import { mxClsx as e } from "../../../utils/mxClsx.mjs";
+import { MxButton as t } from "../MxButton/MxButton.mjs";
+import "../MxButton/index.mjs";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Fragment as i } from "react";
+import { FontAwesomeIcon as a } from "@fortawesome/react-fontawesome";
+import { faClose as o } from "@fortawesome/free-solid-svg-icons/faClose";
+import { Dialog as s, Transition as c } from "@headlessui/react";
+//#region src/reactjs/components/base/MxSlideover/MxSlideover.tsx
+var l = ({ show: l, children: u, size: d, className: f = "", onClose: p }) => /* @__PURE__ */ n(c.Root, {
+	show: l,
+	as: i,
+	children: /* @__PURE__ */ r(s, {
+		as: "div",
+		className: "liq-relative liq-z-30",
+		onClose: p,
+		children: [/* @__PURE__ */ n(c.Child, {
+			as: i,
+			enter: "liq-ease-in-out liq-duration-150",
+			enterFrom: "liq-opacity-0",
+			enterTo: "liq-opacity-100",
+			leave: "liq-ease-in-out liq-duration-150",
+			leaveFrom: "liq-opacity-100",
+			leaveTo: "liq-opacity-0",
+			children: /* @__PURE__ */ n("div", { className: "liq-fixed liq-inset-0 liq-bg-neutral-400 liq-bg-opacity-25 liq-backdrop-blur-sm liq- liq-backdrop-filter liq-transition-opacity" })
+		}), /* @__PURE__ */ n("div", {
+			className: "liq-fixed liq-inset-0 liq-overflow-hidden",
+			children: /* @__PURE__ */ n("div", {
+				className: "liq-absolute liq-inset-0 liq-overflow-hidden",
+				children: /* @__PURE__ */ n("div", {
+					className: "liq-pointer-events-none liq-fixed liq-inset-y-0 liq-right-0 liq-flex liq-max-w-full liq-p-2",
+					children: /* @__PURE__ */ n(c.Child, {
+						as: i,
+						enter: "liq-transform liq-transition liq-ease-in-out liq-duration-150",
+						leave: "liq-transform liq-transition liq-ease-in-out liq-duration-150",
+						enterFrom: "liq-translate-y-full lg:liq-translate-y-0 lg:liq-translate-x-full",
+						enterTo: "liq-translate-y-0 lg:liq-translate-x-0",
+						leaveFrom: "liq-translate-y-0 lg:liq-translate-x-0",
+						leaveTo: "liq-translate-y-full lg:liq-translate-y-0 lg:liq-translate-x-full",
+						children: /* @__PURE__ */ n(s.Panel, {
+							className: "liq-pointer-events-auto liq-relative liq-flex liq-w-screen liq-lg:max-w-md",
+							children: /* @__PURE__ */ r("div", {
+								className: e("liq-relative liq-flex liq-flex-1 liq-flex-col liq-self-end liq-rounded-3xl liq-bg-neutral-850 liq-p-2 liq-shadow-2xl", {
+									"liq-h-full md:liq-rounded-3xl": d === "h-full",
+									"liq-h-3/5": d === "h-60",
+									"liq-h-2/5": d === "h-40",
+									"liq-h-1/5": d === "h-20"
+								}, f),
+								children: [/* @__PURE__ */ n(t, {
+									variant: "transparent",
+									onClick: p,
+									className: "liq-absolute liq-top-12 liq-right-4 liq-z-30 liq-flex liq-h-10 liq-w-10 liq-items-center liq-justify-center liq-rounded-full liq-border-none liq-bg-neutral-850",
+									children: /* @__PURE__ */ n(a, {
+										icon: o,
+										className: "liq-h-5 liq-w-5 liq-text-neutral-500"
+									})
+								}), /* @__PURE__ */ n("div", {
+									className: "scrollbar-thin liq-overflow-y-scroll",
+									children: u
+								})]
+							})
+						})
+					})
+				})
+			})
+		})]
+	})
+});
+//#endregion
+export { l as MxSlideover };

package/reactjs/components/base/MxSlideover/index.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./MxSlideover.js");exports.MxSlideover=e.MxSlideover;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./MxSlideover.js");exports.MxSlideover=e.MxSlideover;

package/reactjs/components/base/MxSlideover/index.mjs

@@ -1,4 +1,2 @@
-import { MxSlideover as r } from "./MxSlideover.mjs";
-export {
-  r as MxSlideover
-};
+import { MxSlideover as e } from "./MxSlideover.mjs";
+export { e as MxSlideover };

package/reactjs/components/base/MxTooltip/MxTooltip.d.ts

@@ -1,6 +1,5 @@
-import { Placement } from 'react-joyride';
 import { ReactNode } from 'react';
-
+import { Placement } from 'react-joyride';
 export type MxTooltipVariantType = 'default' | 'underline' | 'dotted';
 export type MxTooltipVariantColorType = 'neutral-200' | 'neutral-500' | 'primary-200' | 'primary-300' | 'primary-400';
 interface MxTooltipProps {
@@ -19,5 +18,5 @@ interface MxTooltipProps {
     portalId?: string;
     isSlideoverOnMobile?: boolean;
 }
-export declare const MxTooltip: ({ children, buttonText, hideTooltip, offsetX, offsetY, hideDelayMs, placement, variant, contentClassName, containerClassName, shouldStopPropagation, variantColor, portalId, isSlideoverOnMobile }: MxTooltipProps) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
+export declare const MxTooltip: ({ children, buttonText, hideTooltip, offsetX, offsetY, hideDelayMs, placement, variant, contentClassName, containerClassName, shouldStopPropagation, variantColor, portalId, isSlideoverOnMobile }: MxTooltipProps) => string | number | boolean | import("react").JSX.Element | Iterable<ReactNode> | null | undefined;
 export {};

package/reactjs/components/base/MxTooltip/MxTooltip.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),W=require("react-dom"),B=require("react-popper"),y=require("./components/TooltipContent/TooltipContent.js"),w=require("./components/TooltipContainer/TooltipContainer.js"),d=require("../../../constants/index.js"),z=require("../../../utils/mxClsx.js"),F=require("../MxSlideover/MxSlideover.js"),G=({children:l,buttonText:f,hideTooltip:P,offsetX:R=0,offsetY:g=10,hideDelayMs:O=10,placement:D="top",variant:m="default",contentClassName:v="",containerClassName:_="",shouldStopPropagation:k=!0,variantColor:h="neutral-500",portalId:p,isSlideoverOnMobile:x=!1})=>{const[T,S]=s.useState(!1),[t,j]=s.useState(null),[o,C]=s.useState(null),[A,b]=s.useState(!1),q=d.safeWindow.innerWidth<768,{styles:E,attributes:L}=B.usePopper(o,t,{placement:D,modifiers:[{name:"preventOverflow",options:{boundary:"clippingParents"}},{name:"eventListeners",enabled:T},{name:"offset",options:{offset:[R,g]}}]}),i=["mouseenter","focus"],c=["mouseleave","blur"],n=s.useRef(),u=()=>{n.current&&clearTimeout(n.current),S(!0)},a=()=>{n.current=setTimeout(()=>{S(!1)},O)};s.useEffect(()=>()=>{n.current&&clearTimeout(n.current)},[]),s.useEffect(()=>(i.forEach(e=>t==null?void 0:t.addEventListener(e,u)),c.forEach(e=>t==null?void 0:t.addEventListener(e,a)),()=>{i.forEach(e=>t==null?void 0:t.removeEventListener(e,u)),c.forEach(e=>t==null?void 0:t.removeEventListener(e,a))}),[t]),s.useEffect(()=>(i.forEach(e=>o==null?void 0:o.addEventListener(e,u)),c.forEach(e=>o==null?void 0:o.addEventListener(e,a)),()=>{i.forEach(e=>o==null?void 0:o.removeEventListener(e,u)),c.forEach(e=>o==null?void 0:o.removeEventListener(e,a))}),[o]);const M=e=>{x&&q&&b(!0),k&&(e.preventDefault(),e.stopPropagation())},H=p?d.safeDocument.getElementById(p):null;return P?f:x&&q?r.jsxs(w.TooltipContainer,{containerClassName:_,variant:m,variantColor:h,onClick:M,ref:C,children:[f,r.jsx(F.MxSlideover,{onClose:()=>b(!1),show:A,children:l})]}):r.jsxs(w.TooltipContainer,{containerClassName:_,variant:m,variantColor:h,onClick:M,ref:C,children:[f,T&&(p?W.createPortal(r.jsx(y.TooltipContent,{children:l,contentClassName:z.mxClsx("liq-text-center",v),popperAttributes:L.popper,popperStyles:E.popper,setPopperEl:j}),H??d.safeDocument.body):r.jsx(y.TooltipContent,{children:l,contentClassName:v,popperAttributes:L.popper,popperStyles:E.popper,setPopperEl:j}))]})};exports.MxTooltip=G;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../chunk-oiTVcehM.js"),t=require("../../../constants/index.js"),n=require("../../../utils/mxClsx.js"),r=require("../MxSlideover/MxSlideover.js");require("../MxSlideover/index.js");const i=require("./components/TooltipContent/TooltipContent.js"),a=require("./components/TooltipContainer/TooltipContainer.js");require("./components/index.js");let o=require("react/jsx-runtime"),s=require("react"),c=require("react-dom");c=e.n(c);let l=require("react-popper");var u=({children:e,buttonText:u,hideTooltip:d,offsetX:f=0,offsetY:p=10,hideDelayMs:m=10,placement:h=`top`,variant:g=`default`,contentClassName:_=``,containerClassName:v=``,shouldStopPropagation:y=!0,variantColor:b=`neutral-500`,portalId:x,isSlideoverOnMobile:S=!1})=>{let[C,w]=(0,s.useState)(!1),[T,E]=(0,s.useState)(null),[D,O]=(0,s.useState)(null),[k,A]=(0,s.useState)(!1),j=t.safeWindow.innerWidth<768,{styles:M,attributes:N}=(0,l.usePopper)(D,T,{placement:h,modifiers:[{name:`preventOverflow`,options:{boundary:`clippingParents`}},{name:`eventListeners`,enabled:C},{name:`offset`,options:{offset:[f,p]}}]}),P=[`mouseenter`,`focus`],F=[`mouseleave`,`blur`],I=(0,s.useRef)(),L=()=>{I.current&&clearTimeout(I.current),w(!0)},R=()=>{I.current=setTimeout(()=>{w(!1)},m)};(0,s.useEffect)(()=>()=>{I.current&&clearTimeout(I.current)},[]),(0,s.useEffect)(()=>(P.forEach(e=>T?.addEventListener(e,L)),F.forEach(e=>T?.addEventListener(e,R)),()=>{P.forEach(e=>T?.removeEventListener(e,L)),F.forEach(e=>T?.removeEventListener(e,R))}),[T]),(0,s.useEffect)(()=>(P.forEach(e=>D?.addEventListener(e,L)),F.forEach(e=>D?.addEventListener(e,R)),()=>{P.forEach(e=>D?.removeEventListener(e,L)),F.forEach(e=>D?.removeEventListener(e,R))}),[D]);let z=e=>{S&&j&&A(!0),y&&(e.preventDefault(),e.stopPropagation())},B=x?t.safeDocument.getElementById(x):null;return d?u:S&&j?(0,o.jsxs)(a.TooltipContainer,{containerClassName:v,variant:g,variantColor:b,onClick:z,ref:O,children:[u,(0,o.jsx)(r.MxSlideover,{onClose:()=>A(!1),show:k,children:e})]}):(0,o.jsxs)(a.TooltipContainer,{containerClassName:v,variant:g,variantColor:b,onClick:z,ref:O,children:[u,C&&(x?c.default.createPortal((0,o.jsx)(i.TooltipContent,{children:e,contentClassName:n.mxClsx(`liq-text-center`,_),popperAttributes:N.popper,popperStyles:M.popper,setPopperEl:E}),B??t.safeDocument.body):(0,o.jsx)(i.TooltipContent,{children:e,contentClassName:_,popperAttributes:N.popper,popperStyles:M.popper,setPopperEl:E}))]})};exports.MxTooltip=u;

package/reactjs/components/base/MxTooltip/MxTooltip.mjs

@@ -1,120 +1,80 @@
-import { jsxs as O, jsx as p } from "react/jsx-runtime";
-import { useState as u, useRef as F, useEffect as l } from "react";
-import G from "react-dom";
-import { usePopper as I } from "react-popper";
-import { TooltipContent as g } from "./components/TooltipContent/TooltipContent.mjs";
-import { TooltipContainer as k } from "./components/TooltipContainer/TooltipContainer.mjs";
-import { safeWindow as J, safeDocument as D } from "../../../constants/index.mjs";
-import { mxClsx as K } from "../../../utils/mxClsx.mjs";
-import { MxSlideover as Q } from "../MxSlideover/MxSlideover.mjs";
-const te = ({
-  children: m,
-  buttonText: a,
-  hideTooltip: M,
-  offsetX: j = 0,
-  offsetY: A = 10,
-  hideDelayMs: H = 10,
-  placement: W = "top",
-  variant: v = "default",
-  contentClassName: d = "",
-  containerClassName: h = "",
-  shouldStopPropagation: q = !0,
-  variantColor: L = "neutral-500",
-  portalId: c,
-  isSlideoverOnMobile: E = !1
-}) => {
-  const [w, x] = u(!1), [t, y] = u(null), [o, S] = u(null), [B, b] = u(!1), C = J.innerWidth < 768, { styles: P, attributes: R } = I(o, t, {
-    placement: W,
-    modifiers: [
-      {
-        name: "preventOverflow",
-        options: {
-          boundary: "clippingParents"
-        }
-      },
-      // flips the tooltip if it does not fit
-      { name: "eventListeners", enabled: w },
-      // prevent popper from updating when the tooltip is not shown
-      { name: "offset", options: { offset: [j, A] } }
-    ]
-  }), s = ["mouseenter", "focus"], n = ["mouseleave", "blur"], r = F(), i = () => {
-    r.current && clearTimeout(r.current), x(!0);
-  }, f = () => {
-    r.current = setTimeout(() => {
-      x(!1);
-    }, H);
-  };
-  l(() => () => {
-    r.current && clearTimeout(r.current);
-  }, []), l(() => (s.forEach((e) => t == null ? void 0 : t.addEventListener(e, i)), n.forEach((e) => t == null ? void 0 : t.addEventListener(e, f)), () => {
-    s.forEach((e) => t == null ? void 0 : t.removeEventListener(e, i)), n.forEach((e) => t == null ? void 0 : t.removeEventListener(e, f));
-  }), [t]), l(() => (s.forEach((e) => o == null ? void 0 : o.addEventListener(e, i)), n.forEach((e) => o == null ? void 0 : o.addEventListener(e, f)), () => {
-    s.forEach(
-      (e) => o == null ? void 0 : o.removeEventListener(e, i)
-    ), n.forEach(
-      (e) => o == null ? void 0 : o.removeEventListener(e, f)
-    );
-  }), [o]);
-  const T = (e) => {
-    E && C && b(!0), q && (e.preventDefault(), e.stopPropagation());
-  }, z = c ? D.getElementById(c) : null;
-  return M ? a : E && C ? /* @__PURE__ */ O(
-    k,
-    {
-      containerClassName: h,
-      variant: v,
-      variantColor: L,
-      onClick: T,
-      ref: S,
-      children: [
-        a,
-        /* @__PURE__ */ p(
-          Q,
-          {
-            onClose: () => b(!1),
-            show: B,
-            children: m
-          }
-        )
-      ]
-    }
-  ) : /* @__PURE__ */ O(
-    k,
-    {
-      containerClassName: h,
-      variant: v,
-      variantColor: L,
-      onClick: T,
-      ref: S,
-      children: [
-        a,
-        w && (c ? G.createPortal(
-          /* @__PURE__ */ p(
-            g,
-            {
-              children: m,
-              contentClassName: K("liq-text-center", d),
-              popperAttributes: R.popper,
-              popperStyles: P.popper,
-              setPopperEl: y
-            }
-          ),
-          z ?? D.body
-          // Fixes z-index - overflow issue on tooltips
-        ) : /* @__PURE__ */ p(
-          g,
-          {
-            children: m,
-            contentClassName: d,
-            popperAttributes: R.popper,
-            popperStyles: P.popper,
-            setPopperEl: y
-          }
-        ))
-      ]
-    }
-  );
-};
-export {
-  te as MxTooltip
+import { safeDocument as e, safeWindow as t } from "../../../constants/index.mjs";
+import { mxClsx as n } from "../../../utils/mxClsx.mjs";
+import { MxSlideover as r } from "../MxSlideover/MxSlideover.mjs";
+import "../MxSlideover/index.mjs";
+import { TooltipContent as i } from "./components/TooltipContent/TooltipContent.mjs";
+import { TooltipContainer as a } from "./components/TooltipContainer/TooltipContainer.mjs";
+import "./components/index.mjs";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useEffect as c, useRef as l, useState as u } from "react";
+import d from "react-dom";
+import { usePopper as f } from "react-popper";
+//#region src/reactjs/components/base/MxTooltip/MxTooltip.tsx
+var p = ({ children: p, buttonText: m, hideTooltip: h, offsetX: g = 0, offsetY: _ = 10, hideDelayMs: v = 10, placement: y = "top", variant: b = "default", contentClassName: x = "", containerClassName: S = "", shouldStopPropagation: C = !0, variantColor: w = "neutral-500", portalId: T, isSlideoverOnMobile: E = !1 }) => {
+	let [D, O] = u(!1), [k, A] = u(null), [j, M] = u(null), [N, P] = u(!1), F = t.innerWidth < 768, { styles: I, attributes: L } = f(j, k, {
+		placement: y,
+		modifiers: [
+			{
+				name: "preventOverflow",
+				options: { boundary: "clippingParents" }
+			},
+			{
+				name: "eventListeners",
+				enabled: D
+			},
+			{
+				name: "offset",
+				options: { offset: [g, _] }
+			}
+		]
+	}), R = ["mouseenter", "focus"], z = ["mouseleave", "blur"], B = l(), V = () => {
+		B.current && clearTimeout(B.current), O(!0);
+	}, H = () => {
+		B.current = setTimeout(() => {
+			O(!1);
+		}, v);
+	};
+	c(() => () => {
+		B.current && clearTimeout(B.current);
+	}, []), c(() => (R.forEach((e) => k?.addEventListener(e, V)), z.forEach((e) => k?.addEventListener(e, H)), () => {
+		R.forEach((e) => k?.removeEventListener(e, V)), z.forEach((e) => k?.removeEventListener(e, H));
+	}), [k]), c(() => (R.forEach((e) => j?.addEventListener(e, V)), z.forEach((e) => j?.addEventListener(e, H)), () => {
+		R.forEach((e) => j?.removeEventListener(e, V)), z.forEach((e) => j?.removeEventListener(e, H));
+	}), [j]);
+	let U = (e) => {
+		E && F && P(!0), C && (e.preventDefault(), e.stopPropagation());
+	}, W = T ? e.getElementById(T) : null;
+	return h ? m : E && F ? /* @__PURE__ */ s(a, {
+		containerClassName: S,
+		variant: b,
+		variantColor: w,
+		onClick: U,
+		ref: M,
+		children: [m, /* @__PURE__ */ o(r, {
+			onClose: () => P(!1),
+			show: N,
+			children: p
+		})]
+	}) : /* @__PURE__ */ s(a, {
+		containerClassName: S,
+		variant: b,
+		variantColor: w,
+		onClick: U,
+		ref: M,
+		children: [m, D && (T ? d.createPortal(/* @__PURE__ */ o(i, {
+			children: p,
+			contentClassName: n("liq-text-center", x),
+			popperAttributes: L.popper,
+			popperStyles: I.popper,
+			setPopperEl: A
+		}), W ?? e.body) : /* @__PURE__ */ o(i, {
+			children: p,
+			contentClassName: x,
+			popperAttributes: L.popper,
+			popperStyles: I.popper,
+			setPopperEl: A
+		}))]
+	});
 };
+//#endregion
+export { p as MxTooltip };

package/reactjs/components/base/MxTooltip/components/TooltipContainer/TooltipContainer.d.ts

@@ -1,5 +1,4 @@
 import { MxTooltipVariantColorType, MxTooltipVariantType } from '../../MxTooltip';
-
 interface TooltipContainerProps {
     children: React.ReactNode;
     containerClassName: string;

package/reactjs/components/base/MxTooltip/components/TooltipContainer/TooltipContainer.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),n=require("react"),q=require("../../../../../utils/mxClsx.js"),u=n.forwardRef(({children:i,variant:e,variantColor:r,containerClassName:l,onClick:t},o)=>d.jsx("div",{role:"tooltip",ref:o,onClick:t,className:q.mxClsx("focus-primary liq-relative liq-inline-block liq-max-w-fit liq-rounded-sm",{"":e==="default","liq-border-b liq-underline":e==="underline","liq-border-b liq-border-dashed":e==="dotted"},{"liq-border-neutral-200":r==="neutral-200","liq-border-neutral-500":r==="neutral-500","liq-border-primary-200 liq-text-primary-200":r==="primary-200","liq-border-primary-300 liq-text-primary-300":r==="primary-300","liq-border-primary-400 liq-text-primary-400":r==="primary-400"},l),children:i}));exports.TooltipContainer=u;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../../utils/mxClsx.js");let t=require("react/jsx-runtime");var n=(0,require("react").forwardRef)(({children:n,variant:r,variantColor:i,containerClassName:a,onClick:o},s)=>(0,t.jsx)(`div`,{role:`tooltip`,ref:s,onClick:o,className:e.mxClsx(`focus-primary liq-relative liq-inline-block liq-max-w-fit liq-rounded-sm`,{"":r==="default","liq-border-b liq-underline":r===`underline`,"liq-border-b liq-border-dashed":r===`dotted`},{"liq-border-neutral-200":i===`neutral-200`,"liq-border-neutral-500":i===`neutral-500`,"liq-border-primary-200 liq-text-primary-200":i===`primary-200`,"liq-border-primary-300 liq-text-primary-300":i===`primary-300`,"liq-border-primary-400 liq-text-primary-400":i===`primary-400`},a),children:n}));exports.TooltipContainer=n;