@multiversx/sdk-dapp-liquidity 0.2.0-alpha.1

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

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { faClose } from "@fortawesome/free-solid-svg-icons/faClose";
+import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { forwardRef, useState, useEffect } from "react";
+import { useDebounce } from "../../../hooks/useDebounce.mjs";
+import { mxClsx } from "../../../utils/mxClsx.mjs";
+const MxSearch = forwardRef(
+  (props, ref) => {
+    const {
+      iconsClassName = "",
+      inputClassName = "",
+      containerClassName = "",
+      placeholder = "Search by name or symbol",
+      inputDefaultValue = "",
+      onChange
+    } = props;
+    const [inputValue, setInputValue] = useState(inputDefaultValue);
+    const onDebounceInputChange = useDebounce(inputValue, 200);
+    const onClear = () => setInputValue("");
+    useEffect(() => onChange(onDebounceInputChange), [onDebounceInputChange]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `liq-relative liq-flex liq-flex-1 liq-items-center  ${containerClassName}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            FontAwesomeIcon,
+            {
+              icon: faSearch,
+              className: mxClsx(
+                "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",
+                iconsClassName
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: inputValue,
+              onChange: (val) => setInputValue(val.target.value),
+              placeholder,
+              className: mxClsx(
+                "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",
+                inputClassName
+              ),
+              tabIndex: 1,
+              ref
+            }
+          ),
+          Boolean(inputValue) && /* @__PURE__ */ jsx(
+            FontAwesomeIcon,
+            {
+              icon: faClose,
+              onClick: onClear,
+              className: mxClsx(
+                "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",
+                iconsClassName
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  MxSearch
+};

package/reactjs/components/base/MxSearch/index.d.ts

@@ -0,0 +1 @@
+export * from './MxSearch';

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

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

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

@@ -0,0 +1,4 @@
+import { MxSearch } from "./MxSearch.mjs";
+export {
+  MxSearch
+};

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

@@ -0,0 +1,10 @@
+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;
+    className?: string;
+    children: ReactNode;
+    size?: MxSlideoverSizeType;
+    onClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const faClose = require("@fortawesome/free-solid-svg-icons/faClose");
+const reactFontawesome = require("@fortawesome/react-fontawesome");
+const react = require("@headlessui/react");
+const require$$0 = require("react");
+const reactjs_utils_mxClsx = require("../../../utils/mxClsx.js");
+const reactjs_components_base_MxButton_MxButton = require("../MxButton/MxButton.js");
+const MxSlideover = ({
+  show,
+  children,
+  size,
+  className = "",
+  onClose
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Transition.Root, { show, as: require$$0.Fragment, children: /* @__PURE__ */ jsxRuntime.jsxs(react.Dialog, { as: "div", className: "liq-relative liq-z-30", onClose, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.Transition.Child,
+      {
+        as: require$$0.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: /* @__PURE__ */ jsxRuntime.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" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-fixed liq-inset-0 liq-overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liq-absolute liq-inset-0 liq-overflow-hidden", children: /* @__PURE__ */ jsxRuntime.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: /* @__PURE__ */ jsxRuntime.jsx(
+      react.Transition.Child,
+      {
+        as: require$$0.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: /* @__PURE__ */ jsxRuntime.jsx(react.Dialog.Panel, { className: "liq-pointer-events-auto liq-relative liq-flex liq-w-screen liq-lg:max-w-md", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: reactjs_utils_mxClsx.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": size === "h-full",
+                "liq-h-3/5": size === "h-60",
+                "liq-h-2/5": size === "h-40",
+                "liq-h-1/5": size === "h-20"
+              },
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactjs_components_base_MxButton_MxButton.MxButton,
+                {
+                  variant: "transparent",
+                  onClick: onClose,
+                  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__ */ jsxRuntime.jsx(
+                    reactFontawesome.FontAwesomeIcon,
+                    {
+                      icon: faClose.faClose,
+                      className: "liq-h-5 liq-w-5 liq-text-neutral-500"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "scrollbar-thin liq-overflow-y-scroll", children })
+            ]
+          }
+        ) })
+      }
+    ) }) }) })
+  ] }) });
+};
+exports.MxSlideover = MxSlideover;

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

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { faClose } from "@fortawesome/free-solid-svg-icons/faClose";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Transition, Dialog } from "@headlessui/react";
+import { Fragment } from "react";
+import { mxClsx } from "../../../utils/mxClsx.mjs";
+import { MxButton } from "../MxButton/MxButton.mjs";
+const MxSlideover = ({
+  show,
+  children,
+  size,
+  className = "",
+  onClose
+}) => {
+  return /* @__PURE__ */ jsx(Transition.Root, { show, as: Fragment, children: /* @__PURE__ */ jsxs(Dialog, { as: "div", className: "liq-relative liq-z-30", onClose, children: [
+    /* @__PURE__ */ jsx(
+      Transition.Child,
+      {
+        as: 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: /* @__PURE__ */ 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" })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "liq-fixed liq-inset-0 liq-overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "liq-absolute liq-inset-0 liq-overflow-hidden", children: /* @__PURE__ */ 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: /* @__PURE__ */ jsx(
+      Transition.Child,
+      {
+        as: 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: /* @__PURE__ */ jsx(Dialog.Panel, { className: "liq-pointer-events-auto liq-relative liq-flex liq-w-screen liq-lg:max-w-md", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: 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": size === "h-full",
+                "liq-h-3/5": size === "h-60",
+                "liq-h-2/5": size === "h-40",
+                "liq-h-1/5": size === "h-20"
+              },
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                MxButton,
+                {
+                  variant: "transparent",
+                  onClick: onClose,
+                  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__ */ jsx(
+                    FontAwesomeIcon,
+                    {
+                      icon: faClose,
+                      className: "liq-h-5 liq-w-5 liq-text-neutral-500"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "scrollbar-thin liq-overflow-y-scroll", children })
+            ]
+          }
+        ) })
+      }
+    ) }) }) })
+  ] }) });
+};
+export {
+  MxSlideover
+};

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

@@ -0,0 +1 @@
+export * from './MxSlideover';

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

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

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

@@ -0,0 +1,4 @@
+import { MxSlideover } from "./MxSlideover.mjs";
+export {
+  MxSlideover
+};

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

@@ -0,0 +1,23 @@
+import { Placement } from 'react-joyride';
+import { ReactNode } from 'react';
+
+export type MxTooltipVariantType = 'default' | 'underline' | 'dotted';
+export type MxTooltipVariantColorType = 'neutral-200' | 'neutral-500' | 'primary-200' | 'primary-300' | 'primary-400';
+interface MxTooltipProps {
+    offsetX?: number;
+    offsetY?: number;
+    hideDelayMs?: number;
+    children?: ReactNode;
+    buttonText: ReactNode;
+    placement?: Placement;
+    hideTooltip?: boolean;
+    contentClassName?: string;
+    containerClassName?: string;
+    shouldStopPropagation?: boolean;
+    variant?: MxTooltipVariantType;
+    variantColor?: MxTooltipVariantColorType;
+    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 {};

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

@@ -0,0 +1,163 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const require$$0 = require("react");
+const ReactDOM = require("react-dom");
+const reactPopper = require("react-popper");
+const reactjs_components_base_MxTooltip_components_TooltipContent_TooltipContent = require("./components/TooltipContent/TooltipContent.js");
+const reactjs_components_base_MxTooltip_components_TooltipContainer_TooltipContainer = require("./components/TooltipContainer/TooltipContainer.js");
+const reactjs_utils_mxClsx = require("../../../utils/mxClsx.js");
+const reactjs_components_base_MxSlideover_MxSlideover = require("../MxSlideover/MxSlideover.js");
+const MxTooltip = ({
+  children,
+  buttonText,
+  hideTooltip,
+  offsetX = 0,
+  offsetY = 10,
+  hideDelayMs = 10,
+  placement = "top",
+  variant = "default",
+  contentClassName = "",
+  containerClassName = "",
+  shouldStopPropagation = true,
+  variantColor = "neutral-500",
+  portalId,
+  isSlideoverOnMobile = false
+}) => {
+  const [isHover, setIsHover] = require$$0.useState(false);
+  const [popperEl, setPopperEl] = require$$0.useState(null);
+  const [referenceEl, setReferenceEl] = require$$0.useState(null);
+  const [showSlideOver, setShowSlideOver] = require$$0.useState(false);
+  const isMobile = window.innerWidth < 768;
+  const { styles, attributes } = reactPopper.usePopper(referenceEl, popperEl, {
+    placement,
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          boundary: "clippingParents"
+        }
+      },
+      // flips the tooltip if it does not fit
+      { name: "eventListeners", enabled: isHover },
+      // prevent popper from updating when the tooltip is not shown
+      { name: "offset", options: { offset: [offsetX, offsetY] } }
+    ]
+  });
+  const showEvents = ["mouseenter", "focus"];
+  const hideEvents = ["mouseleave", "blur"];
+  const hideTimeoutRef = require$$0.useRef();
+  const show = () => {
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+    }
+    setIsHover(true);
+  };
+  const hide = () => {
+    hideTimeoutRef.current = setTimeout(() => {
+      setIsHover(false);
+    }, hideDelayMs);
+  };
+  require$$0.useEffect(() => {
+    return () => {
+      if (hideTimeoutRef.current) {
+        clearTimeout(hideTimeoutRef.current);
+      }
+    };
+  }, []);
+  require$$0.useEffect(() => {
+    showEvents.forEach((event) => popperEl == null ? void 0 : popperEl.addEventListener(event, show));
+    hideEvents.forEach((event) => popperEl == null ? void 0 : popperEl.addEventListener(event, hide));
+    return () => {
+      showEvents.forEach((event) => popperEl == null ? void 0 : popperEl.removeEventListener(event, show));
+      hideEvents.forEach((event) => popperEl == null ? void 0 : popperEl.removeEventListener(event, hide));
+    };
+  }, [popperEl]);
+  require$$0.useEffect(() => {
+    showEvents.forEach((event) => referenceEl == null ? void 0 : referenceEl.addEventListener(event, show));
+    hideEvents.forEach((event) => referenceEl == null ? void 0 : referenceEl.addEventListener(event, hide));
+    return () => {
+      showEvents.forEach(
+        (event) => referenceEl == null ? void 0 : referenceEl.removeEventListener(event, show)
+      );
+      hideEvents.forEach(
+        (event) => referenceEl == null ? void 0 : referenceEl.removeEventListener(event, hide)
+      );
+    };
+  }, [referenceEl]);
+  const handleOnClick = (e) => {
+    if (isSlideoverOnMobile && isMobile) {
+      setShowSlideOver(true);
+    }
+    if (!shouldStopPropagation) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const portalRoot = portalId ? document.getElementById(portalId) : null;
+  if (hideTooltip) {
+    return buttonText;
+  }
+  if (isSlideoverOnMobile && isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactjs_components_base_MxTooltip_components_TooltipContainer_TooltipContainer.TooltipContainer,
+      {
+        containerClassName,
+        variant,
+        variantColor,
+        onClick: handleOnClick,
+        ref: setReferenceEl,
+        children: [
+          buttonText,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactjs_components_base_MxSlideover_MxSlideover.MxSlideover,
+            {
+              onClose: () => setShowSlideOver(false),
+              show: showSlideOver,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactjs_components_base_MxTooltip_components_TooltipContainer_TooltipContainer.TooltipContainer,
+    {
+      containerClassName,
+      variant,
+      variantColor,
+      onClick: handleOnClick,
+      ref: setReferenceEl,
+      children: [
+        buttonText,
+        isHover && (portalId ? ReactDOM.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactjs_components_base_MxTooltip_components_TooltipContent_TooltipContent.TooltipContent,
+            {
+              children,
+              contentClassName: reactjs_utils_mxClsx.mxClsx("liq-text-center", contentClassName),
+              popperAttributes: attributes.popper,
+              popperStyles: styles.popper,
+              setPopperEl
+            }
+          ),
+          portalRoot ?? document.body
+          // Fixes z-index - overflow issue on tooltips
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          reactjs_components_base_MxTooltip_components_TooltipContent_TooltipContent.TooltipContent,
+          {
+            children,
+            contentClassName,
+            popperAttributes: attributes.popper,
+            popperStyles: styles.popper,
+            setPopperEl
+          }
+        ))
+      ]
+    }
+  );
+};
+exports.MxTooltip = MxTooltip;

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

@@ -0,0 +1,162 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import ReactDOM from "react-dom";
+import { usePopper } from "react-popper";
+import { TooltipContent } from "./components/TooltipContent/TooltipContent.mjs";
+import { TooltipContainer } from "./components/TooltipContainer/TooltipContainer.mjs";
+import { mxClsx } from "../../../utils/mxClsx.mjs";
+import { MxSlideover } from "../MxSlideover/MxSlideover.mjs";
+const MxTooltip = ({
+  children,
+  buttonText,
+  hideTooltip,
+  offsetX = 0,
+  offsetY = 10,
+  hideDelayMs = 10,
+  placement = "top",
+  variant = "default",
+  contentClassName = "",
+  containerClassName = "",
+  shouldStopPropagation = true,
+  variantColor = "neutral-500",
+  portalId,
+  isSlideoverOnMobile = false
+}) => {
+  const [isHover, setIsHover] = useState(false);
+  const [popperEl, setPopperEl] = useState(null);
+  const [referenceEl, setReferenceEl] = useState(null);
+  const [showSlideOver, setShowSlideOver] = useState(false);
+  const isMobile = window.innerWidth < 768;
+  const { styles, attributes } = usePopper(referenceEl, popperEl, {
+    placement,
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          boundary: "clippingParents"
+        }
+      },
+      // flips the tooltip if it does not fit
+      { name: "eventListeners", enabled: isHover },
+      // prevent popper from updating when the tooltip is not shown
+      { name: "offset", options: { offset: [offsetX, offsetY] } }
+    ]
+  });
+  const showEvents = ["mouseenter", "focus"];
+  const hideEvents = ["mouseleave", "blur"];
+  const hideTimeoutRef = useRef();
+  const show = () => {
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+    }
+    setIsHover(true);
+  };
+  const hide = () => {
+    hideTimeoutRef.current = setTimeout(() => {
+      setIsHover(false);
+    }, hideDelayMs);
+  };
+  useEffect(() => {
+    return () => {
+      if (hideTimeoutRef.current) {
+        clearTimeout(hideTimeoutRef.current);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    showEvents.forEach((event) => popperEl == null ? void 0 : popperEl.addEventListener(event, show));
+    hideEvents.forEach((event) => popperEl == null ? void 0 : popperEl.addEventListener(event, hide));
+    return () => {
+      showEvents.forEach((event) => popperEl == null ? void 0 : popperEl.removeEventListener(event, show));
+      hideEvents.forEach((event) => popperEl == null ? void 0 : popperEl.removeEventListener(event, hide));
+    };
+  }, [popperEl]);
+  useEffect(() => {
+    showEvents.forEach((event) => referenceEl == null ? void 0 : referenceEl.addEventListener(event, show));
+    hideEvents.forEach((event) => referenceEl == null ? void 0 : referenceEl.addEventListener(event, hide));
+    return () => {
+      showEvents.forEach(
+        (event) => referenceEl == null ? void 0 : referenceEl.removeEventListener(event, show)
+      );
+      hideEvents.forEach(
+        (event) => referenceEl == null ? void 0 : referenceEl.removeEventListener(event, hide)
+      );
+    };
+  }, [referenceEl]);
+  const handleOnClick = (e) => {
+    if (isSlideoverOnMobile && isMobile) {
+      setShowSlideOver(true);
+    }
+    if (!shouldStopPropagation) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const portalRoot = portalId ? document.getElementById(portalId) : null;
+  if (hideTooltip) {
+    return buttonText;
+  }
+  if (isSlideoverOnMobile && isMobile) {
+    return /* @__PURE__ */ jsxs(
+      TooltipContainer,
+      {
+        containerClassName,
+        variant,
+        variantColor,
+        onClick: handleOnClick,
+        ref: setReferenceEl,
+        children: [
+          buttonText,
+          /* @__PURE__ */ jsx(
+            MxSlideover,
+            {
+              onClose: () => setShowSlideOver(false),
+              show: showSlideOver,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    TooltipContainer,
+    {
+      containerClassName,
+      variant,
+      variantColor,
+      onClick: handleOnClick,
+      ref: setReferenceEl,
+      children: [
+        buttonText,
+        isHover && (portalId ? ReactDOM.createPortal(
+          /* @__PURE__ */ jsx(
+            TooltipContent,
+            {
+              children,
+              contentClassName: mxClsx("liq-text-center", contentClassName),
+              popperAttributes: attributes.popper,
+              popperStyles: styles.popper,
+              setPopperEl
+            }
+          ),
+          portalRoot ?? document.body
+          // Fixes z-index - overflow issue on tooltips
+        ) : /* @__PURE__ */ jsx(
+          TooltipContent,
+          {
+            children,
+            contentClassName,
+            popperAttributes: attributes.popper,
+            popperStyles: styles.popper,
+            setPopperEl
+          }
+        ))
+      ]
+    }
+  );
+};
+export {
+  MxTooltip
+};

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

@@ -0,0 +1,11 @@
+import { MxTooltipVariantColorType, MxTooltipVariantType } from '../../MxTooltip';
+
+interface TooltipContainerProps {
+    children: React.ReactNode;
+    containerClassName: string;
+    variant: MxTooltipVariantType;
+    variantColor: MxTooltipVariantColorType;
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+export declare const TooltipContainer: import('react').ForwardRefExoticComponent<TooltipContainerProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const require$$0 = require("react");
+const reactjs_utils_mxClsx = require("../../../../../utils/mxClsx.js");
+const TooltipContainer = require$$0.forwardRef(({ children, variant, variantColor, containerClassName, onClick }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "tooltip",
+      ref,
+      onClick,
+      className: reactjs_utils_mxClsx.mxClsx(
+        "focus-primary liq-relative liq-inline-block liq-max-w-fit liq-rounded-sm",
+        {
+          "": variant === "default",
+          "liq-border-b liq-underline": variant === "underline",
+          "liq-border-b liq-border-dashed": variant === "dotted"
+        },
+        {
+          "liq-border-neutral-200": variantColor === "neutral-200",
+          "liq-border-neutral-500": variantColor === "neutral-500",
+          "liq-border-primary-200 liq-text-primary-200": variantColor === "primary-200",
+          "liq-border-primary-300 liq-text-primary-300": variantColor === "primary-300",
+          "liq-border-primary-400 liq-text-primary-400": variantColor === "primary-400"
+        },
+        containerClassName
+      ),
+      children
+    }
+  );
+});
+exports.TooltipContainer = TooltipContainer;