ekm-ui 0.4.7 → 0.4.9

package/dist/chunk-PKDFSF3I.js

@@ -0,0 +1,11 @@
+import { a } from './chunk-6LHL364H.js';
+import { e } from './chunk-Z4LPO673.js';
+import x from 'clsx';
+import { useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var r=e(a(),1);function h({children:l,content:p,tooltipPos:s,width:o,additionalClasses:n}){let a=useRef(),f=useRef(),i=()=>{if(f.current&&a.current){let t=f.current.getBoundingClientRect(),e=a.current.getBoundingClientRect();["top","right","bottom","left"].find(b=>{switch(b){case"top":return t.top>=e.height;case"right":return window.innerWidth-t.right>=e.width;case"bottom":return window.innerHeight-t.bottom>=e.height;case"left":return t.left>=e.width;default:return !1}});}};return useEffect(()=>(i(),window.addEventListener("resize",i),()=>{window.removeEventListener("resize",i);}),[]),jsxs("div",{className:`group relative block w-fit ${n||""}`,ref:f,children:[l,jsx("div",{className:x("absolute z-50 w-fit whitespace-normal break-words rounded-md bg-black px-3 py-1 text-xs text-white opacity-0 after:absolute after:h-0 after:w-0 after:border-solid group-hover:visible group-hover:opacity-100 dark:bg-gray-700",{top:"bottom-full left-1/2 -translate-x-1/2 after:-bottom-[4px] after:left-1/2 after:-translate-x-1/2 after:border-b-0 after:border-l-[5px] after:border-r-[5px] after:border-t-[5px] after:border-transparent after:border-t-black dark:after:border-t-gray-700",right:"left-full top-1/2 -translate-y-1/2 after:-left-[4px] after:top-1/2 after:-translate-y-1/2 after:border-b-[5px] after:border-l-[0px] after:border-r-[5px] after:border-t-[5px] after:border-transparent after:border-r-black dark:after:border-r-gray-700",bottom:"left-1/2 top-full -translate-x-1/2 after:-top-[4px] after:left-1/2 after:-translate-x-1/2 after:border-b-[5px] after:border-l-[5px] after:border-r-[5px] after:border-t-[0px] after:border-transparent after:border-b-black dark:after:border-b-gray-700",left:"right-full top-1/2 -translate-y-1/2 after:-right-[4px] after:top-1/2 after:-translate-y-1/2 after:border-b-[5px] after:border-l-[5px] after:border-r-[0px] after:border-t-[5px] after:border-transparent after:border-l-black dark:after:border-l-gray-700"}[s]),ref:a,style:Number.isInteger(o)&&o>0?{width:`${o}px`}:{},children:p})]})}h.propTypes={children:r.default.node.isRequired,content:r.default.node.isRequired,tooltipPos:r.default.oneOf(["top","right","bottom","left"]).isRequired,width:r.default.number,additionalClasses:r.default.string};
+
+export { h as a };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-PKDFSF3I.js.map

package/dist/chunk-PKDFSF3I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tooltip/tooltip.tsx"],"names":["import_prop_types","clsx","useEffect","useRef","jsx","jsxs","ToolTip","children","content","tooltipPos","width","additionalClasses","tooltipRef","childRef","updateTooltipPosition","childRect","tooltipRect","newPosition","pos","PropTypes"],"mappings":"gFAGA,IAAAA,EAAsB,SAFtB,OAAOC,MAAU,OACjB,OAAS,aAAAC,EAAW,UAAAC,MAAc,QAyC9B,OAEE,OAAAC,EAFF,QAAAC,MAAA,oBAtCG,SAASC,EAAQ,CAAE,SAAAC,EAAU,QAAAC,EAAS,WAAAC,EAAY,MAAAC,EAAO,kBAAAC,CAAkB,EAAG,CACnF,IAAMC,EAAaT,EAAO,EACpBU,EAAWV,EAAO,EAElBW,EAAwB,IAAM,CAClC,GAAID,EAAS,SAAWD,EAAW,QAAS,CAC1C,IAAMG,EAAYF,EAAS,QAAQ,sBAAsB,EACnDG,EAAcJ,EAAW,QAAQ,sBAAsB,EAIvDK,EAHY,CAAC,MAAO,QAAS,SAAU,MAAM,EAGrB,KAAMC,GAAQ,CAC1C,OAAQA,EAAK,CACX,IAAK,MACH,OAAOH,EAAU,KAAOC,EAAY,OACtC,IAAK,QACH,OAAO,OAAO,WAAaD,EAAU,OAASC,EAAY,MAC5D,IAAK,SACH,OAAO,OAAO,YAAcD,EAAU,QAAUC,EAAY,OAC9D,IAAK,OACH,OAAOD,EAAU,MAAQC,EAAY,MACvC,QACE,MAAO,EACX,CACF,CAAC,EAEL,EAEA,OAAAd,EAAU,KACRY,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAEhD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAAC,CAAC,EAGHT,EAAC,OAAI,UAAW,8BAA8BM,GAAwC,KAAM,IAAKE,EAC9F,UAAAN,EACDH,EAAC,OACC,UAAWH,EACT,kOACA,CACE,IAAK,6PACL,MACE,2PACF,OACE,2PACF,KAAM,4PACR,EAAEQ,CAAU,CAEd,EACA,IAAKG,EACL,MAAO,OAAO,UAAUF,CAAK,GAAKA,EAAQ,EAAK,CAAE,MAAO,GAAGA,KAAU,EAAI,CAAC,EAEzE,SAAAF,EACH,GACF,CAEJ,CAEAF,EAAQ,UAAY,CAElB,SAAU,EAAAa,QAAU,KAAK,WAEzB,QAAS,EAAAA,QAAU,KAAK,WAExB,WAAY,EAAAA,QAAU,MAAM,CAAC,MAAO,QAAS,SAAU,MAAM,CAAC,EAAE,WAEhE,MAAO,EAAAA,QAAU,OAEjB,kBAAmB,EAAAA,QAAU,MAC/B","sourcesContent":["//@ts-nocheck\nimport clsx from \"clsx\";\nimport { useEffect, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\n\nexport function ToolTip({ children, content, tooltipPos, width, additionalClasses }) {\n  const tooltipRef = useRef();\n  const childRef = useRef();\n\n  const updateTooltipPosition = () => {\n    if (childRef.current && tooltipRef.current) {\n      const childRect = childRef.current.getBoundingClientRect();\n      const tooltipRect = tooltipRef.current.getBoundingClientRect();\n      const positions = [\"top\", \"right\", \"bottom\", \"left\"];\n\n      // Find a position where the tooltip fits\n      const newPosition = positions.find((pos) => {\n        switch (pos) {\n          case \"top\":\n            return childRect.top >= tooltipRect.height;\n          case \"right\":\n            return window.innerWidth - childRect.right >= tooltipRect.width;\n          case \"bottom\":\n            return window.innerHeight - childRect.bottom >= tooltipRect.height;\n          case \"left\":\n            return childRect.left >= tooltipRect.width;\n          default:\n            return false;\n        }\n      });\n    }\n  };\n\n  useEffect(() => {\n    updateTooltipPosition();\n    window.addEventListener(\"resize\", updateTooltipPosition);\n\n    return () => {\n      window.removeEventListener(\"resize\", updateTooltipPosition);\n    };\n  }, []);\n\n  return (\n    <div className={`group relative block w-fit ${additionalClasses ? additionalClasses : ''}`} ref={childRef}>\n      {children}\n      <div\n        className={clsx(\n          \"absolute z-50 w-fit whitespace-normal break-words rounded-md bg-black px-3 py-1 text-xs text-white opacity-0 after:absolute after:h-0 after:w-0 after:border-solid group-hover:visible group-hover:opacity-100 dark:bg-gray-700\",\n          {\n            top: \"bottom-full left-1/2 -translate-x-1/2 after:-bottom-[4px] after:left-1/2 after:-translate-x-1/2 after:border-b-0 after:border-l-[5px] after:border-r-[5px] after:border-t-[5px] after:border-transparent after:border-t-black dark:after:border-t-gray-700\",\n            right:\n              \"left-full top-1/2 -translate-y-1/2 after:-left-[4px] after:top-1/2 after:-translate-y-1/2 after:border-b-[5px] after:border-l-[0px] after:border-r-[5px] after:border-t-[5px] after:border-transparent after:border-r-black dark:after:border-r-gray-700\",\n            bottom:\n              \"left-1/2 top-full -translate-x-1/2 after:-top-[4px] after:left-1/2 after:-translate-x-1/2 after:border-b-[5px] after:border-l-[5px] after:border-r-[5px] after:border-t-[0px] after:border-transparent after:border-b-black dark:after:border-b-gray-700\",\n            left: \"right-full top-1/2 -translate-y-1/2 after:-right-[4px] after:top-1/2 after:-translate-y-1/2 after:border-b-[5px] after:border-l-[5px] after:border-r-[0px] after:border-t-[5px] after:border-transparent after:border-l-black dark:after:border-l-gray-700\",\n          }[tooltipPos]\n          // takes the tooltip Positon and adds the relevant classes to the tooltip box to adjust the position of the box to the child element.\n        )}\n        ref={tooltipRef}\n        style={Number.isInteger(width) && width > 0 ?  { width: `${width}px` } : {}}\n      >\n        {content}\n      </div>\n    </div>\n  );\n}\n\nToolTip.propTypes = {\n  /** Target element of the tooltip */\n  children: PropTypes.node.isRequired,\n  /** Content to display in the tooltip */\n  content: PropTypes.node.isRequired,\n  /** String to determine the size of the badge. \"xs, sm\" */\n  tooltipPos: PropTypes.oneOf([\"top\", \"right\", \"bottom\", \"left\"]).isRequired,\n  /** width of tooltip in pixels. Otherwise w-fit is used. */\n  width: PropTypes.number,\n  /** Additional classes to add to div that surrounds children */\n  additionalClasses: PropTypes.string,\n};\n"]}

package/dist/country-picker/country-modal.js

@@ -1,8 +1,8 @@
 export { g as CountryPicker } from '../chunk-R4Z7MITT.js';
 import '../chunk-52VBZOHL.js';
-import '../chunk-3MJK7ZTP.js';
+import '../chunk-3JMXJ65S.js';
 import '../chunk-YZ2YZSNQ.js';
-import '../chunk-E62SCYLR.js';
+import '../chunk-PKDFSF3I.js';
 import '../chunk-7Q6OMA2A.js';
 import '../chunk-KRMPO53Y.js';
 import '../chunk-UFMUMALD.js';

package/dist/drag-and-drop.js

@@ -1,8 +1,8 @@
 export { c as DragAndDrop } from './chunk-R4Z7MITT.js';
 import './chunk-52VBZOHL.js';
-import './chunk-3MJK7ZTP.js';
+import './chunk-3JMXJ65S.js';
 import './chunk-YZ2YZSNQ.js';
-import './chunk-E62SCYLR.js';
+import './chunk-PKDFSF3I.js';
 import './chunk-7Q6OMA2A.js';
 import './chunk-KRMPO53Y.js';
 import './chunk-UFMUMALD.js';

package/dist/file-picker/file-picker.js

@@ -1,8 +1,8 @@
 export { d as FilePicker } from '../chunk-R4Z7MITT.js';
 import '../chunk-52VBZOHL.js';
-import '../chunk-3MJK7ZTP.js';
+import '../chunk-3JMXJ65S.js';
 import '../chunk-YZ2YZSNQ.js';
-import '../chunk-E62SCYLR.js';
+import '../chunk-PKDFSF3I.js';
 import '../chunk-7Q6OMA2A.js';
 import '../chunk-KRMPO53Y.js';
 import '../chunk-UFMUMALD.js';

package/dist/index.js

@@ -1,8 +1,8 @@
 export { h as CardPaymentBlock, g as CountryPicker, c as DragAndDrop, d as FilePicker, b as Layout, f as ProductPicker, a as StackedListItem, e as TableResultBlock } from './chunk-R4Z7MITT.js';
 export { a as Sort } from './chunk-52VBZOHL.js';
-export { a as TableHeader } from './chunk-3MJK7ZTP.js';
+export { a as TableHeader } from './chunk-3JMXJ65S.js';
 export { b as ToastProvider, c as useToast } from './chunk-YZ2YZSNQ.js';
-export { a as ToolTip } from './chunk-E62SCYLR.js';
+export { a as ToolTip } from './chunk-PKDFSF3I.js';
 export { a as NBUI_Container } from './chunk-7Q6OMA2A.js';
 export { a as Pagination } from './chunk-KRMPO53Y.js';
 import './chunk-UFMUMALD.js';

package/dist/layout/layout.js

@@ -1,8 +1,8 @@
 export { b as Layout } from '../chunk-R4Z7MITT.js';
 import '../chunk-52VBZOHL.js';
-import '../chunk-3MJK7ZTP.js';
+import '../chunk-3JMXJ65S.js';
 import '../chunk-YZ2YZSNQ.js';
-import '../chunk-E62SCYLR.js';
+import '../chunk-PKDFSF3I.js';
 import '../chunk-7Q6OMA2A.js';
 import '../chunk-KRMPO53Y.js';
 import '../chunk-UFMUMALD.js';

package/dist/product-picker/product-modal.js

@@ -1,8 +1,8 @@
 export { f as ProductPicker } from '../chunk-R4Z7MITT.js';
 import '../chunk-52VBZOHL.js';
-import '../chunk-3MJK7ZTP.js';
+import '../chunk-3JMXJ65S.js';
 import '../chunk-YZ2YZSNQ.js';
-import '../chunk-E62SCYLR.js';
+import '../chunk-PKDFSF3I.js';
 import '../chunk-7Q6OMA2A.js';
 import '../chunk-KRMPO53Y.js';
 import '../chunk-UFMUMALD.js';

package/dist/stacked-list-item.js

@@ -1,8 +1,8 @@
 export { a as StackedListItem } from './chunk-R4Z7MITT.js';
 import './chunk-52VBZOHL.js';
-import './chunk-3MJK7ZTP.js';
+import './chunk-3JMXJ65S.js';
 import './chunk-YZ2YZSNQ.js';
-import './chunk-E62SCYLR.js';
+import './chunk-PKDFSF3I.js';
 import './chunk-7Q6OMA2A.js';
 import './chunk-KRMPO53Y.js';
 import './chunk-UFMUMALD.js';

package/dist/table-header/table-header.js

@@ -1,5 +1,5 @@
-export { a as TableHeader } from '../chunk-3MJK7ZTP.js';
-import '../chunk-E62SCYLR.js';
+export { a as TableHeader } from '../chunk-3JMXJ65S.js';
+import '../chunk-PKDFSF3I.js';
 import '../chunk-6CVHAPIS.js';
 import '../chunk-TJMI4DH2.js';
 import '../chunk-6LHL364H.js';

package/dist/table-result-block.js

@@ -1,8 +1,8 @@
 export { e as TableResultBlock } from './chunk-R4Z7MITT.js';
 import './chunk-52VBZOHL.js';
-import './chunk-3MJK7ZTP.js';
+import './chunk-3JMXJ65S.js';
 import './chunk-YZ2YZSNQ.js';
-import './chunk-E62SCYLR.js';
+import './chunk-PKDFSF3I.js';
 import './chunk-7Q6OMA2A.js';
 import './chunk-KRMPO53Y.js';
 import './chunk-UFMUMALD.js';

package/dist/tooltip/tooltip.d.ts

@@ -1,8 +1,25 @@
-declare function ToolTip({ children, content, tooltopPos, width }: {
+import PropTypes from 'prop-types';
+
+declare function ToolTip({ children, content, tooltipPos, width, additionalClasses }: {
     children: any;
     content: any;
-    tooltopPos: any;
+    tooltipPos: any;
     width: any;
+    additionalClasses: any;
 }): JSX.Element;
+declare namespace ToolTip {
+    var propTypes: {
+        /** Target element of the tooltip */
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /** Content to display in the tooltip */
+        content: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /** String to determine the size of the badge. "xs, sm" */
+        tooltipPos: PropTypes.Validator<string>;
+        /** width of tooltip in pixels. Otherwise w-fit is used. */
+        width: PropTypes.Requireable<number>;
+        /** Additional classes to add to div that surrounds children */
+        additionalClasses: PropTypes.Requireable<string>;
+    };
+}
 
 export { ToolTip };

package/dist/tooltip/tooltip.js

@@ -1,4 +1,5 @@
-export { a as ToolTip } from '../chunk-E62SCYLR.js';
+export { a as ToolTip } from '../chunk-PKDFSF3I.js';
+import '../chunk-6LHL364H.js';
 import '../chunk-Z4LPO673.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=tooltip.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ekm-ui",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "sideEffects": [
     "**/*.css"
   ],

package/src/table-header/table-header.tsx

@@ -129,7 +129,7 @@ function TableHeaderItem({ ...props }) {
   return (
     <div
       className={`${layout} ${sortable ? "cursor-pointer" : ""} ${
-        tooltip != null ? " d-flex align-items-center float-left" : ""
+        tooltip != null ? " flex align-items-center float-left" : ""
       } `}
     >
       <span
@@ -143,7 +143,7 @@ function TableHeaderItem({ ...props }) {
         <div className="ml-2 mt-1">
           <ToolTip
             key={`tooltipName-${title}`}
-            placement="bottom"
+            tooltipPos="bottom"
             content={tooltip}
           >
             <HiExclamationCircle fontSize="20px" color="#555555" />

package/src/tooltip/tooltip.tsx

@@ -1,8 +1,9 @@
 //@ts-nocheck
 import clsx from "clsx";
 import { useEffect, useRef } from "react";
+import PropTypes from "prop-types";
 
-export function ToolTip({ children, content, tooltopPos, width }) {
+export function ToolTip({ children, content, tooltipPos, width, additionalClasses }) {
   const tooltipRef = useRef();
   const childRef = useRef();
 
@@ -40,11 +41,11 @@ export function ToolTip({ children, content, tooltopPos, width }) {
   }, []);
 
   return (
-    <div className="group relative block w-fit p-2" ref={childRef}>
+    <div className={`group relative block w-fit ${additionalClasses ? additionalClasses : ''}`} ref={childRef}>
       {children}
       <div
         className={clsx(
-          "invisible absolute z-50 w-full whitespace-normal break-words rounded-md bg-black px-3 py-1 text-xs text-white opacity-0 after:absolute after:h-0 after:w-0 after:border-solid group-hover:visible group-hover:opacity-100 dark:bg-gray-700",
+          "absolute z-50 w-fit whitespace-normal break-words rounded-md bg-black px-3 py-1 text-xs text-white opacity-0 after:absolute after:h-0 after:w-0 after:border-solid group-hover:visible group-hover:opacity-100 dark:bg-gray-700",
           {
             top: "bottom-full left-1/2 -translate-x-1/2 after:-bottom-[4px] after:left-1/2 after:-translate-x-1/2 after:border-b-0 after:border-l-[5px] after:border-r-[5px] after:border-t-[5px] after:border-transparent after:border-t-black dark:after:border-t-gray-700",
             right:
@@ -52,14 +53,27 @@ export function ToolTip({ children, content, tooltopPos, width }) {
             bottom:
               "left-1/2 top-full -translate-x-1/2 after:-top-[4px] after:left-1/2 after:-translate-x-1/2 after:border-b-[5px] after:border-l-[5px] after:border-r-[5px] after:border-t-[0px] after:border-transparent after:border-b-black dark:after:border-b-gray-700",
             left: "right-full top-1/2 -translate-y-1/2 after:-right-[4px] after:top-1/2 after:-translate-y-1/2 after:border-b-[5px] after:border-l-[5px] after:border-r-[0px] after:border-t-[5px] after:border-transparent after:border-l-black dark:after:border-l-gray-700",
-          }[tooltopPos]
+          }[tooltipPos]
           // takes the tooltip Positon and adds the relevant classes to the tooltip box to adjust the position of the box to the child element.
         )}
         ref={tooltipRef}
-        style={{ width: `${width}px` }}
+        style={Number.isInteger(width) && width > 0 ?  { width: `${width}px` } : {}}
       >
         {content}
       </div>
     </div>
   );
 }
+
+ToolTip.propTypes = {
+  /** Target element of the tooltip */
+  children: PropTypes.node.isRequired,
+  /** Content to display in the tooltip */
+  content: PropTypes.node.isRequired,
+  /** String to determine the size of the badge. "xs, sm" */
+  tooltipPos: PropTypes.oneOf(["top", "right", "bottom", "left"]).isRequired,
+  /** width of tooltip in pixels. Otherwise w-fit is used. */
+  width: PropTypes.number,
+  /** Additional classes to add to div that surrounds children */
+  additionalClasses: PropTypes.string,
+};

package/dist/chunk-E62SCYLR.js

@@ -1,9 +0,0 @@
-import p from 'clsx';
-import { useRef, useEffect } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function m({children:i,content:n,tooltopPos:l,width:d}){let e=useRef(),a=useRef(),o=()=>{if(a.current&&e.current){let r=a.current.getBoundingClientRect(),t=e.current.getBoundingClientRect();["top","right","bottom","left"].find(b=>{switch(b){case"top":return r.top>=t.height;case"right":return window.innerWidth-r.right>=t.width;case"bottom":return window.innerHeight-r.bottom>=t.height;case"left":return r.left>=t.width;default:return !1}});}};return useEffect(()=>(o(),window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o);}),[]),jsxs("div",{className:"group relative block w-fit p-2",ref:a,children:[i,jsx("div",{className:p("invisible absolute z-50 w-full whitespace-normal break-words rounded-md bg-black px-3 py-1 text-xs text-white opacity-0 after:absolute after:h-0 after:w-0 after:border-solid group-hover:visible group-hover:opacity-100 dark:bg-gray-700",{top:"bottom-full left-1/2 -translate-x-1/2 after:-bottom-[4px] after:left-1/2 after:-translate-x-1/2 after:border-b-0 after:border-l-[5px] after:border-r-[5px] after:border-t-[5px] after:border-transparent after:border-t-black dark:after:border-t-gray-700",right:"left-full top-1/2 -translate-y-1/2 after:-left-[4px] after:top-1/2 after:-translate-y-1/2 after:border-b-[5px] after:border-l-[0px] after:border-r-[5px] after:border-t-[5px] after:border-transparent after:border-r-black dark:after:border-r-gray-700",bottom:"left-1/2 top-full -translate-x-1/2 after:-top-[4px] after:left-1/2 after:-translate-x-1/2 after:border-b-[5px] after:border-l-[5px] after:border-r-[5px] after:border-t-[0px] after:border-transparent after:border-b-black dark:after:border-b-gray-700",left:"right-full top-1/2 -translate-y-1/2 after:-right-[4px] after:top-1/2 after:-translate-y-1/2 after:border-b-[5px] after:border-l-[5px] after:border-r-[0px] after:border-t-[5px] after:border-transparent after:border-l-black dark:after:border-l-gray-700"}[l]),ref:e,style:{width:`${d}px`},children:n})]})}
-
-export { m as a };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-E62SCYLR.js.map

package/dist/chunk-E62SCYLR.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/tooltip/tooltip.tsx"],"names":["clsx","useEffect","useRef","jsx","jsxs","ToolTip","children","content","tooltopPos","width","tooltipRef","childRef","updateTooltipPosition","childRect","tooltipRect","newPosition","pos"],"mappings":"AACA,OAAOA,MAAU,OACjB,OAAS,aAAAC,EAAW,UAAAC,MAAc,QAwC9B,OAEE,OAAAC,EAFF,QAAAC,MAAA,oBAtCG,SAASC,EAAQ,CAAE,SAAAC,EAAU,QAAAC,EAAS,WAAAC,EAAY,MAAAC,CAAM,EAAG,CAChE,IAAMC,EAAaR,EAAO,EACpBS,EAAWT,EAAO,EAElBU,EAAwB,IAAM,CAClC,GAAID,EAAS,SAAWD,EAAW,QAAS,CAC1C,IAAMG,EAAYF,EAAS,QAAQ,sBAAsB,EACnDG,EAAcJ,EAAW,QAAQ,sBAAsB,EAIvDK,EAHY,CAAC,MAAO,QAAS,SAAU,MAAM,EAGrB,KAAMC,GAAQ,CAC1C,OAAQA,EAAK,CACX,IAAK,MACH,OAAOH,EAAU,KAAOC,EAAY,OACtC,IAAK,QACH,OAAO,OAAO,WAAaD,EAAU,OAASC,EAAY,MAC5D,IAAK,SACH,OAAO,OAAO,YAAcD,EAAU,QAAUC,EAAY,OAC9D,IAAK,OACH,OAAOD,EAAU,MAAQC,EAAY,MACvC,QACE,MAAO,EACX,CACF,CAAC,EAEL,EAEA,OAAAb,EAAU,KACRW,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAEhD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAAC,CAAC,EAGHR,EAAC,OAAI,UAAU,iCAAiC,IAAKO,EAClD,UAAAL,EACDH,EAAC,OACC,UAAWH,EACT,6OACA,CACE,IAAK,6PACL,MACE,2PACF,OACE,2PACF,KAAM,4PACR,EAAEQ,CAAU,CAEd,EACA,IAAKE,EACL,MAAO,CAAE,MAAO,GAAGD,KAAU,EAE5B,SAAAF,EACH,GACF,CAEJ","sourcesContent":["//@ts-nocheck\nimport clsx from \"clsx\";\nimport { useEffect, useRef } from \"react\";\n\nexport function ToolTip({ children, content, tooltopPos, width }) {\n  const tooltipRef = useRef();\n  const childRef = useRef();\n\n  const updateTooltipPosition = () => {\n    if (childRef.current && tooltipRef.current) {\n      const childRect = childRef.current.getBoundingClientRect();\n      const tooltipRect = tooltipRef.current.getBoundingClientRect();\n      const positions = [\"top\", \"right\", \"bottom\", \"left\"];\n\n      // Find a position where the tooltip fits\n      const newPosition = positions.find((pos) => {\n        switch (pos) {\n          case \"top\":\n            return childRect.top >= tooltipRect.height;\n          case \"right\":\n            return window.innerWidth - childRect.right >= tooltipRect.width;\n          case \"bottom\":\n            return window.innerHeight - childRect.bottom >= tooltipRect.height;\n          case \"left\":\n            return childRect.left >= tooltipRect.width;\n          default:\n            return false;\n        }\n      });\n    }\n  };\n\n  useEffect(() => {\n    updateTooltipPosition();\n    window.addEventListener(\"resize\", updateTooltipPosition);\n\n    return () => {\n      window.removeEventListener(\"resize\", updateTooltipPosition);\n    };\n  }, []);\n\n  return (\n    <div className=\"group relative block w-fit p-2\" ref={childRef}>\n      {children}\n      <div\n        className={clsx(\n          \"invisible absolute z-50 w-full whitespace-normal break-words rounded-md bg-black px-3 py-1 text-xs text-white opacity-0 after:absolute after:h-0 after:w-0 after:border-solid group-hover:visible group-hover:opacity-100 dark:bg-gray-700\",\n          {\n            top: \"bottom-full left-1/2 -translate-x-1/2 after:-bottom-[4px] after:left-1/2 after:-translate-x-1/2 after:border-b-0 after:border-l-[5px] after:border-r-[5px] after:border-t-[5px] after:border-transparent after:border-t-black dark:after:border-t-gray-700\",\n            right:\n              \"left-full top-1/2 -translate-y-1/2 after:-left-[4px] after:top-1/2 after:-translate-y-1/2 after:border-b-[5px] after:border-l-[0px] after:border-r-[5px] after:border-t-[5px] after:border-transparent after:border-r-black dark:after:border-r-gray-700\",\n            bottom:\n              \"left-1/2 top-full -translate-x-1/2 after:-top-[4px] after:left-1/2 after:-translate-x-1/2 after:border-b-[5px] after:border-l-[5px] after:border-r-[5px] after:border-t-[0px] after:border-transparent after:border-b-black dark:after:border-b-gray-700\",\n            left: \"right-full top-1/2 -translate-y-1/2 after:-right-[4px] after:top-1/2 after:-translate-y-1/2 after:border-b-[5px] after:border-l-[5px] after:border-r-[0px] after:border-t-[5px] after:border-transparent after:border-l-black dark:after:border-l-gray-700\",\n          }[tooltopPos]\n          // takes the tooltip Positon and adds the relevant classes to the tooltip box to adjust the position of the box to the child element.\n        )}\n        ref={tooltipRef}\n        style={{ width: `${width}px` }}\n      >\n        {content}\n      </div>\n    </div>\n  );\n}\n"]}