iguazio.dashboard-react-controls 3.1.10 → 3.2.0

package/dist/components/TabsSlider/TabsSlider.mjs

@@ -1,68 +1,80 @@
-import { jsxs as g, jsx as s } from "react/jsx-runtime";
-import { useState as S, useRef as y, useCallback as z, useEffect as w } from "react";
+import { jsxs as z, jsx as i } from "react/jsx-runtime";
+import { useState as S, useRef as H, useCallback as g, useEffect as w } from "react";
 import { useLocation as M, useParams as U, Link as X } from "react-router-dom";
 import W from "prop-types";
-import k from "classnames";
-import H from "../Tip/Tip.mjs";
-import { SLIDER_TABS as G } from "../../types.mjs";
-import { generateUrlFromRouterPath as J } from "../../utils/common.util.mjs";
-import T from "../../images/arrow.svg.mjs";
-const K = ({
+import C from "classnames";
+import G from "../Tip/Tip.mjs";
+import { SLIDER_TABS as J } from "../../types.mjs";
+import { generateUrlFromRouterPath as K } from "../../utils/common.util.mjs";
+import N from "../../images/arrow.svg.mjs";
+const Q = ({
   fontSize: P = "sm",
   initialTab: q = "",
-  isDetailsPopUp: C = !1,
+  isDetailsPopUp: k = !1,
   onClick: L = () => {
   },
   skipLink: D = !1,
-  tabsList: v
+  tabsList: b
 }) => {
-  const [d, $] = S(q), [x, O] = S(!0), [f, a] = S(0), [A, l] = S(!1), i = y(), n = y(), j = M(), b = U(), m = 2, I = 1.5, B = k(
+  const [d, $] = S(q), [R, O] = S(!0), [f, c] = S(0), [A, l] = S(!1), s = H(), n = H(), j = M(), v = U(), m = 2, I = 1.5, B = C(
     "tabs-slider__arrow",
     "tabs-slider__arrow_left",
-    x && "tabs-slider__arrow_hidden",
+    R && "tabs-slider__arrow_hidden",
     f === 0 && "tabs-slider__arrow_disabled"
-  ), F = k(
+  ), F = C(
     "tabs-slider__arrow",
     "tabs-slider__arrow_right",
-    x && "tabs-slider__arrow_hidden",
+    R && "tabs-slider__arrow_hidden",
     A && "tabs-slider__arrow_disabled"
-  ), R = (e) => {
-    var r, o, c, _, p, N;
+  ), x = (e) => {
+    var r, o, a, _, p, y;
     let t;
-    e ? ((r = n.current) == null ? void 0 : r.scrollWidth) < ((o = i.current) == null ? void 0 : o.offsetWidth) * I + f ? (t = ((c = n.current) == null ? void 0 : c.scrollWidth) - ((_ = i.current) == null ? void 0 : _.offsetWidth), l(!0)) : t = f + ((p = i.current) == null ? void 0 : p.offsetWidth) / m : (t = Math.max(
+    e ? ((r = n.current) == null ? void 0 : r.scrollWidth) < ((o = s.current) == null ? void 0 : o.offsetWidth) * I + f ? (t = ((a = n.current) == null ? void 0 : a.scrollWidth) - ((_ = s.current) == null ? void 0 : _.offsetWidth), l(!0)) : t = f + ((p = s.current) == null ? void 0 : p.offsetWidth) / m : (t = Math.max(
       0,
-      f - ((N = i.current) == null ? void 0 : N.offsetWidth) / m
-    ), l(!1)), a(t);
-  }, u = z(() => {
-    var t, r, o, c;
+      f - ((y = s.current) == null ? void 0 : y.offsetWidth) / m
+    ), l(!1)), c(t);
+  }, u = g(() => {
+    var t, r, o, a;
     const e = ((t = n.current) == null ? void 0 : t.offsetWidth) === ((r = n.current) == null ? void 0 : r.scrollWidth);
-    O(e), A && a(((o = n.current) == null ? void 0 : o.scrollWidth) - ((c = i.current) == null ? void 0 : c.offsetWidth)), e && (a(0), l(!1));
-  }, [A, n, i]), h = z(() => {
-    var r, o, c, _, p;
-    const e = document.querySelector(`[data-tab='${d}']`), t = (e == null ? void 0 : e.offsetLeft) - ((r = i.current) == null ? void 0 : r.offsetWidth) / m + (e == null ? void 0 : e.offsetWidth) / m;
-    t <= 0 ? (a(0), l(!1)) : ((o = n.current) == null ? void 0 : o.scrollWidth) < ((c = i.current) == null ? void 0 : c.offsetWidth) / m + (e == null ? void 0 : e.offsetLeft) + (e == null ? void 0 : e.offsetWidth) ? (a(((_ = n.current) == null ? void 0 : _.scrollWidth) - ((p = i.current) == null ? void 0 : p.offsetWidth)), l(!0)) : (a(t), l(!1));
+    O(e), A && c(((o = n.current) == null ? void 0 : o.scrollWidth) - ((a = s.current) == null ? void 0 : a.offsetWidth)), e && (c(0), l(!1));
+  }, [A, n, s]), h = g(() => {
+    var r, o, a, _, p;
+    const e = document.querySelector(`[data-tab='${d}']`), t = (e == null ? void 0 : e.offsetLeft) - ((r = s.current) == null ? void 0 : r.offsetWidth) / m + (e == null ? void 0 : e.offsetWidth) / m;
+    t <= 0 ? (c(0), l(!1)) : ((o = n.current) == null ? void 0 : o.scrollWidth) < ((a = s.current) == null ? void 0 : a.offsetWidth) / m + (e == null ? void 0 : e.offsetLeft) + (e == null ? void 0 : e.offsetWidth) ? (c(((_ = n.current) == null ? void 0 : _.scrollWidth) - ((p = s.current) == null ? void 0 : p.offsetWidth)), l(!0)) : (c(t), l(!1));
   }, [d]), E = (e) => {
     $(e), L && L(e);
   };
-  return w(() => (window.addEventListener("resize", u), () => window.removeEventListener("resize", u)), [u]), w(() => (window.addEventListener("resize", h), () => window.removeEventListener("resize", h)), [h]), w(() => {
+  w(() => (window.addEventListener("resize", u), () => window.removeEventListener("resize", u)), [u]), w(() => (window.addEventListener("resize", h), () => window.removeEventListener("resize", h)), [h]), w(() => {
     u();
-  }, [v, u]), w(() => {
+  }, [b, u]), w(() => {
     h();
   }, [h]), w(() => {
     var e;
-    b.tab && b.tab !== d && !C && $((e = v.find((t) => t.id === b.tab)) == null ? void 0 : e.id);
-  }, [C, b.tab, d, v]), /* @__PURE__ */ g("div", { className: "content-menu", children: [
-    /* @__PURE__ */ s(
+    v.tab && v.tab !== d && !k && $((e = b.find((t) => t.id === v.tab)) == null ? void 0 : e.id);
+  }, [k, v.tab, d, b]);
+  const T = g((e) => /* @__PURE__ */ z(
+    "span",
+    {
+      className: e.icon && "content-menu__tab-icon" || e.tip && "content-menu__tab-tip",
+      children: [
+        e.icon && /* @__PURE__ */ i("div", { children: e.icon }),
+        e.label,
+        e.tip && /* @__PURE__ */ i(G, { text: e.tip })
+      ]
+    }
+  ), []);
+  return /* @__PURE__ */ z("div", { className: "content-menu", children: [
+    /* @__PURE__ */ i(
       "div",
       {
         className: B,
         onClick: () => {
-          R(!1);
+          x(!1);
         },
-        children: /* @__PURE__ */ s(T, {})
+        children: /* @__PURE__ */ i(N, {})
       }
     ),
-    /* @__PURE__ */ s("div", { className: "content-menu__tabs-wrapper", ref: i, children: /* @__PURE__ */ s(
+    /* @__PURE__ */ i("div", { className: "content-menu__tabs-wrapper", ref: s, children: /* @__PURE__ */ i(
       "div",
       {
         ref: n,
@@ -70,64 +82,50 @@ const K = ({
         style: {
           transform: `translateX(${-f}px)`
         },
-        children: v.map((e) => {
+        children: b.map((e) => {
           var r;
-          const t = k(
+          const t = C(
             "content-menu__tab",
             `content-menu__tab-${P}`,
             d === e.id && "content-menu__tab_active"
           );
-          return !e.hidden && (D ? /* @__PURE__ */ g(
+          return !e.hidden && (D ? /* @__PURE__ */ i(
             "div",
             {
               className: t,
               "data-tab": e.id,
               onClick: () => E(e.id),
-              children: [
-                e.icon && /* @__PURE__ */ s("div", { className: "content-menu_tab-icon", children: e.icon }),
-                e.label,
-                e.tip && /* @__PURE__ */ s(H, { className: "content-menu__tab-tip", text: e.tip })
-              ]
+              children: T(e)
             },
             e.id
-          ) : /* @__PURE__ */ s(
+          ) : /* @__PURE__ */ i(
             X,
             {
-              to: J(
+              to: K(
                 `${(r = window.location.pathname) == null ? void 0 : r.replace(/^$|([^/]+$)/, e.id)}${j.search ?? ""}${e.query ?? ""}`
               ),
               className: t,
-              children: /* @__PURE__ */ g(
-                "span",
-                {
-                  className: e.icon && "content-menu__tab-icon" || e.tip && "content-menu__tab-tip",
-                  "data-tab": e.id,
-                  onClick: () => E(e),
-                  children: [
-                    e.icon && /* @__PURE__ */ s("div", { children: e.icon }),
-                    e.label,
-                    e.tip && /* @__PURE__ */ s(H, { text: e.tip })
-                  ]
-                }
-              )
+              "data-tab": e.id,
+              onClick: () => E(e.id),
+              children: T(e)
             },
             e.id
           ));
         })
       }
     ) }),
-    /* @__PURE__ */ s("div", { className: F, onClick: () => R(!0), children: /* @__PURE__ */ s(T, {}) })
+    /* @__PURE__ */ i("div", { className: F, onClick: () => x(!0), children: /* @__PURE__ */ i(N, {}) })
   ] });
 };
-K.propTypes = {
+Q.propTypes = {
   fontSize: W.oneOf(["sm", "md", "lg"]),
   initialTab: W.string,
   isDetailsPopUp: W.bool,
   onClick: W.func,
   skipLink: W.bool,
-  tabsList: G.isRequired
+  tabsList: J.isRequired
 };
 export {
-  K as default
+  Q as default
 };
 //# sourceMappingURL=TabsSlider.mjs.map

package/dist/components/TabsSlider/TabsSlider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsSlider.mjs","sources":["../../../src/lib/components/TabsSlider/TabsSlider.jsx"],"sourcesContent":["/*\nCopyright 2019 Iguazio Systems Ltd.\n\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\n\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useCallback, useEffect, useState, useRef } from 'react'\nimport { Link, useLocation, useParams } from 'react-router-dom'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\n\nimport Tip from '../Tip/Tip'\n\nimport { SLIDER_TABS } from '../../types'\nimport { generateUrlFromRouterPath } from '../../utils/common.util'\n\nimport Arrow from '../../images/arrow.svg?react'\n\nconst TabsSlider = ({\n  fontSize = 'sm',\n  initialTab = '',\n  isDetailsPopUp = false,\n  onClick = () => {},\n  skipLink = false,\n  tabsList\n}) => {\n  const [selectedTab, setSelectedTab] = useState(initialTab)\n  const [arrowsAreHidden, setArrowsAreHidden] = useState(true)\n  const [scrolledWidth, setScrolledWidth] = useState(0)\n  const [rightArrowDisabled, setRightArrowDisabled] = useState(false)\n  const tabsWrapperRef = useRef()\n  const tabsRef = useRef()\n  const location = useLocation()\n  const params = useParams()\n  const menuOffsetHalfWidth = 2\n  const tabOffset = 1.5\n\n  const leftArrowClassNames = classnames(\n    'tabs-slider__arrow',\n    'tabs-slider__arrow_left',\n    arrowsAreHidden && 'tabs-slider__arrow_hidden',\n    scrolledWidth === 0 && 'tabs-slider__arrow_disabled'\n  )\n  const rightArrowClassNames = classnames(\n    'tabs-slider__arrow',\n    'tabs-slider__arrow_right',\n    arrowsAreHidden && 'tabs-slider__arrow_hidden',\n    rightArrowDisabled && 'tabs-slider__arrow_disabled'\n  )\n\n  const scrollTabs = toRight => {\n    let scrollWidth\n\n    if (toRight) {\n      if (\n        tabsRef.current?.scrollWidth <\n        tabsWrapperRef.current?.offsetWidth * tabOffset + scrolledWidth\n      ) {\n        scrollWidth = tabsRef.current?.scrollWidth - tabsWrapperRef.current?.offsetWidth\n\n        setRightArrowDisabled(true)\n      } else {\n        scrollWidth = scrolledWidth + tabsWrapperRef.current?.offsetWidth / menuOffsetHalfWidth\n      }\n    } else {\n      scrollWidth = Math.max(\n        0,\n        scrolledWidth - tabsWrapperRef.current?.offsetWidth / menuOffsetHalfWidth\n      )\n\n      setRightArrowDisabled(false)\n    }\n\n    setScrolledWidth(scrollWidth)\n  }\n\n  const handleHideArrows = useCallback(() => {\n    const scrollIsHidden = tabsRef.current?.offsetWidth === tabsRef.current?.scrollWidth\n\n    setArrowsAreHidden(scrollIsHidden)\n\n    if (rightArrowDisabled) {\n      setScrolledWidth(tabsRef.current?.scrollWidth - tabsWrapperRef.current?.offsetWidth)\n    }\n\n    if (scrollIsHidden) {\n      setScrolledWidth(0)\n      setRightArrowDisabled(false)\n    }\n  }, [rightArrowDisabled, tabsRef, tabsWrapperRef])\n\n  const moveToSelectedTab = useCallback(() => {\n    const selectedTabNode = document.querySelector(`[data-tab='${selectedTab}']`)\n    const centeredTabPosition =\n      selectedTabNode?.offsetLeft -\n      tabsWrapperRef.current?.offsetWidth / menuOffsetHalfWidth +\n      selectedTabNode?.offsetWidth / menuOffsetHalfWidth\n\n    if (centeredTabPosition <= 0) {\n      setScrolledWidth(0)\n      setRightArrowDisabled(false)\n    } else if (\n      tabsRef.current?.scrollWidth <\n      tabsWrapperRef.current?.offsetWidth / menuOffsetHalfWidth +\n        selectedTabNode?.offsetLeft +\n        selectedTabNode?.offsetWidth\n    ) {\n      setScrolledWidth(tabsRef.current?.scrollWidth - tabsWrapperRef.current?.offsetWidth)\n      setRightArrowDisabled(true)\n    } else {\n      setScrolledWidth(centeredTabPosition)\n      setRightArrowDisabled(false)\n    }\n  }, [selectedTab])\n\n  const onSelectTab = newTab => {\n    setSelectedTab(newTab)\n    onClick && onClick(newTab)\n  }\n\n  useEffect(() => {\n    window.addEventListener('resize', handleHideArrows)\n\n    return () => window.removeEventListener('resize', handleHideArrows)\n  }, [handleHideArrows])\n\n  useEffect(() => {\n    window.addEventListener('resize', moveToSelectedTab)\n\n    return () => window.removeEventListener('resize', moveToSelectedTab)\n  }, [moveToSelectedTab])\n\n  useEffect(() => {\n    handleHideArrows()\n  }, [tabsList, handleHideArrows])\n\n  useEffect(() => {\n    moveToSelectedTab()\n  }, [moveToSelectedTab])\n\n  useEffect(() => {\n    if (params.tab && params.tab !== selectedTab && !isDetailsPopUp) {\n      setSelectedTab(tabsList.find(tab => tab.id === params.tab)?.id)\n    }\n  }, [isDetailsPopUp, params.tab, selectedTab, tabsList])\n\n  return (\n    <div className=\"content-menu\">\n      <div\n        className={leftArrowClassNames}\n        onClick={() => {\n          scrollTabs(false)\n        }}\n      >\n        <Arrow />\n      </div>\n      <div className=\"content-menu__tabs-wrapper\" ref={tabsWrapperRef}>\n        <div\n          ref={tabsRef}\n          className=\"content-menu__tabs\"\n          style={{\n            transform: `translateX(${-scrolledWidth}px)`\n          }}\n        >\n          {tabsList.map(tab => {\n            const tabClassName = classnames(\n              'content-menu__tab',\n              `content-menu__tab-${fontSize}`,\n              selectedTab === tab.id && 'content-menu__tab_active'\n            )\n\n            return (\n              !tab.hidden &&\n              (!skipLink ? (\n                <Link\n                  to={generateUrlFromRouterPath(\n                    `${window.location.pathname?.replace(/^$|([^/]+$)/, tab.id)}${location.search ?? ''}${tab.query ?? ''}`\n                  )}\n                  className={tabClassName}\n                  key={tab.id}\n                >\n                  <span\n                    className={\n                      (tab.icon && 'content-menu__tab-icon') || (tab.tip && 'content-menu__tab-tip')\n                    }\n                    data-tab={tab.id}\n                    onClick={() => onSelectTab(tab)}\n                  >\n                    {tab.icon && <div>{tab.icon}</div>}\n                    {tab.label}\n                    {tab.tip && <Tip text={tab.tip} />}\n                  </span>\n                </Link>\n              ) : (\n                <div\n                  className={tabClassName}\n                  data-tab={tab.id}\n                  key={tab.id}\n                  onClick={() => onSelectTab(tab.id)}\n                >\n                  {tab.icon && <div className=\"content-menu_tab-icon\">{tab.icon}</div>}\n                  {tab.label}\n                  {tab.tip && <Tip className=\"content-menu__tab-tip\" text={tab.tip} />}\n                </div>\n              ))\n            )\n          })}\n        </div>\n      </div>\n      <div className={rightArrowClassNames} onClick={() => scrollTabs(true)}>\n        <Arrow />\n      </div>\n    </div>\n  )\n}\n\nTabsSlider.propTypes = {\n  fontSize: PropTypes.oneOf(['sm', 'md', 'lg']),\n  initialTab: PropTypes.string,\n  isDetailsPopUp: PropTypes.bool,\n  onClick: PropTypes.func,\n  skipLink: PropTypes.bool,\n  tabsList: SLIDER_TABS.isRequired\n}\n\nexport default TabsSlider\n"],"names":["TabsSlider","fontSize","initialTab","isDetailsPopUp","onClick","skipLink","tabsList","selectedTab","setSelectedTab","useState","arrowsAreHidden","setArrowsAreHidden","scrolledWidth","setScrolledWidth","rightArrowDisabled","setRightArrowDisabled","tabsWrapperRef","useRef","tabsRef","location","useLocation","params","useParams","menuOffsetHalfWidth","tabOffset","leftArrowClassNames","classnames","rightArrowClassNames","scrollTabs","toRight","scrollWidth","_a","_b","_c","_d","_e","_f","handleHideArrows","useCallback","scrollIsHidden","moveToSelectedTab","selectedTabNode","centeredTabPosition","onSelectTab","newTab","useEffect","tab","jsxs","jsx","Arrow","tabClassName","Tip","Link","generateUrlFromRouterPath","PropTypes","SLIDER_TABS"],"mappings":"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"}
+{"version":3,"file":"TabsSlider.mjs","sources":["../../../src/lib/components/TabsSlider/TabsSlider.jsx"],"sourcesContent":["/*\nCopyright 2019 Iguazio Systems Ltd.\n\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\n\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useCallback, useEffect, useState, useRef } from 'react'\nimport { Link, useLocation, useParams } from 'react-router-dom'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\n\nimport Tip from '../Tip/Tip'\n\nimport { SLIDER_TABS } from '../../types'\nimport { generateUrlFromRouterPath } from '../../utils/common.util'\n\nimport Arrow from '../../images/arrow.svg?react'\n\nconst TabsSlider = ({\n  fontSize = 'sm',\n  initialTab = '',\n  isDetailsPopUp = false,\n  onClick = () => {},\n  skipLink = false,\n  tabsList\n}) => {\n  const [selectedTab, setSelectedTab] = useState(initialTab)\n  const [arrowsAreHidden, setArrowsAreHidden] = useState(true)\n  const [scrolledWidth, setScrolledWidth] = useState(0)\n  const [rightArrowDisabled, setRightArrowDisabled] = useState(false)\n  const tabsWrapperRef = useRef()\n  const tabsRef = useRef()\n  const location = useLocation()\n  const params = useParams()\n  const menuOffsetHalfWidth = 2\n  const tabOffset = 1.5\n\n  const leftArrowClassNames = classnames(\n    'tabs-slider__arrow',\n    'tabs-slider__arrow_left',\n    arrowsAreHidden && 'tabs-slider__arrow_hidden',\n    scrolledWidth === 0 && 'tabs-slider__arrow_disabled'\n  )\n  const rightArrowClassNames = classnames(\n    'tabs-slider__arrow',\n    'tabs-slider__arrow_right',\n    arrowsAreHidden && 'tabs-slider__arrow_hidden',\n    rightArrowDisabled && 'tabs-slider__arrow_disabled'\n  )\n\n  const scrollTabs = toRight => {\n    let scrollWidth\n\n    if (toRight) {\n      if (\n        tabsRef.current?.scrollWidth <\n        tabsWrapperRef.current?.offsetWidth * tabOffset + scrolledWidth\n      ) {\n        scrollWidth = tabsRef.current?.scrollWidth - tabsWrapperRef.current?.offsetWidth\n\n        setRightArrowDisabled(true)\n      } else {\n        scrollWidth = scrolledWidth + tabsWrapperRef.current?.offsetWidth / menuOffsetHalfWidth\n      }\n    } else {\n      scrollWidth = Math.max(\n        0,\n        scrolledWidth - tabsWrapperRef.current?.offsetWidth / menuOffsetHalfWidth\n      )\n\n      setRightArrowDisabled(false)\n    }\n\n    setScrolledWidth(scrollWidth)\n  }\n\n  const handleHideArrows = useCallback(() => {\n    const scrollIsHidden = tabsRef.current?.offsetWidth === tabsRef.current?.scrollWidth\n\n    setArrowsAreHidden(scrollIsHidden)\n\n    if (rightArrowDisabled) {\n      setScrolledWidth(tabsRef.current?.scrollWidth - tabsWrapperRef.current?.offsetWidth)\n    }\n\n    if (scrollIsHidden) {\n      setScrolledWidth(0)\n      setRightArrowDisabled(false)\n    }\n  }, [rightArrowDisabled, tabsRef, tabsWrapperRef])\n\n  const moveToSelectedTab = useCallback(() => {\n    const selectedTabNode = document.querySelector(`[data-tab='${selectedTab}']`)\n    const centeredTabPosition =\n      selectedTabNode?.offsetLeft -\n      tabsWrapperRef.current?.offsetWidth / menuOffsetHalfWidth +\n      selectedTabNode?.offsetWidth / menuOffsetHalfWidth\n\n    if (centeredTabPosition <= 0) {\n      setScrolledWidth(0)\n      setRightArrowDisabled(false)\n    } else if (\n      tabsRef.current?.scrollWidth <\n      tabsWrapperRef.current?.offsetWidth / menuOffsetHalfWidth +\n        selectedTabNode?.offsetLeft +\n        selectedTabNode?.offsetWidth\n    ) {\n      setScrolledWidth(tabsRef.current?.scrollWidth - tabsWrapperRef.current?.offsetWidth)\n      setRightArrowDisabled(true)\n    } else {\n      setScrolledWidth(centeredTabPosition)\n      setRightArrowDisabled(false)\n    }\n  }, [selectedTab])\n\n  const onSelectTab = newTab => {\n    setSelectedTab(newTab)\n    onClick && onClick(newTab)\n  }\n\n  useEffect(() => {\n    window.addEventListener('resize', handleHideArrows)\n\n    return () => window.removeEventListener('resize', handleHideArrows)\n  }, [handleHideArrows])\n\n  useEffect(() => {\n    window.addEventListener('resize', moveToSelectedTab)\n\n    return () => window.removeEventListener('resize', moveToSelectedTab)\n  }, [moveToSelectedTab])\n\n  useEffect(() => {\n    handleHideArrows()\n  }, [tabsList, handleHideArrows])\n\n  useEffect(() => {\n    moveToSelectedTab()\n  }, [moveToSelectedTab])\n\n  useEffect(() => {\n    if (params.tab && params.tab !== selectedTab && !isDetailsPopUp) {\n      setSelectedTab(tabsList.find(tab => tab.id === params.tab)?.id)\n    }\n  }, [isDetailsPopUp, params.tab, selectedTab, tabsList])\n\n  const getTabContent = useCallback(tab => {\n    return (\n      <span\n        className={(tab.icon && 'content-menu__tab-icon') || (tab.tip && 'content-menu__tab-tip')}\n      >\n        {tab.icon && <div>{tab.icon}</div>}\n        {tab.label}\n        {tab.tip && <Tip text={tab.tip} />}\n      </span>\n    )\n  }, [])\n\n  return (\n    <div className=\"content-menu\">\n      <div\n        className={leftArrowClassNames}\n        onClick={() => {\n          scrollTabs(false)\n        }}\n      >\n        <Arrow />\n      </div>\n      <div className=\"content-menu__tabs-wrapper\" ref={tabsWrapperRef}>\n        <div\n          ref={tabsRef}\n          className=\"content-menu__tabs\"\n          style={{\n            transform: `translateX(${-scrolledWidth}px)`\n          }}\n        >\n          {tabsList.map(tab => {\n            const tabClassName = classnames(\n              'content-menu__tab',\n              `content-menu__tab-${fontSize}`,\n              selectedTab === tab.id && 'content-menu__tab_active'\n            )\n\n            return (\n              !tab.hidden &&\n              (!skipLink ? (\n                <Link\n                  to={generateUrlFromRouterPath(\n                    `${window.location.pathname?.replace(/^$|([^/]+$)/, tab.id)}${location.search ?? ''}${tab.query ?? ''}`\n                  )}\n                  className={tabClassName}\n                  key={tab.id}\n                  data-tab={tab.id}\n                  onClick={() => onSelectTab(tab.id)}\n                >\n                  {getTabContent(tab)}\n                </Link>\n              ) : (\n                <div\n                  className={tabClassName}\n                  key={tab.id}\n                  data-tab={tab.id}\n                  onClick={() => onSelectTab(tab.id)}\n                >\n                  {getTabContent(tab)}\n                </div>\n              ))\n            )\n          })}\n        </div>\n      </div>\n      <div className={rightArrowClassNames} onClick={() => scrollTabs(true)}>\n        <Arrow />\n      </div>\n    </div>\n  )\n}\n\nTabsSlider.propTypes = {\n  fontSize: PropTypes.oneOf(['sm', 'md', 'lg']),\n  initialTab: PropTypes.string,\n  isDetailsPopUp: PropTypes.bool,\n  onClick: PropTypes.func,\n  skipLink: PropTypes.bool,\n  tabsList: SLIDER_TABS.isRequired\n}\n\nexport default TabsSlider\n"],"names":["TabsSlider","fontSize","initialTab","isDetailsPopUp","onClick","skipLink","tabsList","selectedTab","setSelectedTab","useState","arrowsAreHidden","setArrowsAreHidden","scrolledWidth","setScrolledWidth","rightArrowDisabled","setRightArrowDisabled","tabsWrapperRef","useRef","tabsRef","location","useLocation","params","useParams","menuOffsetHalfWidth","tabOffset","leftArrowClassNames","classnames","rightArrowClassNames","scrollTabs","toRight","scrollWidth","_a","_b","_c","_d","_e","_f","handleHideArrows","useCallback","scrollIsHidden","moveToSelectedTab","selectedTabNode","centeredTabPosition","onSelectTab","newTab","useEffect","tab","getTabContent","jsxs","jsx","Tip","Arrow","tabClassName","Link","generateUrlFromRouterPath","PropTypes","SLIDER_TABS"],"mappings":"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"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,7 +1,8 @@
 export default Tooltip;
-declare function Tooltip({ children, className, hidden, id, renderChildAsHtml, template, textShow }: {
+declare function Tooltip({ children, className, tooltipBodyClassName, hidden, id, renderChildAsHtml, template, textShow }: {
     children?: string;
     className?: string;
+    tooltipBodyClassName?: string;
     hidden?: boolean;
     id?: string;
     renderChildAsHtml?: boolean;
@@ -12,6 +13,7 @@ declare namespace Tooltip {
     namespace propTypes {
         let children: any;
         let className: any;
+        let tooltipBodyClassName: any;
         let hidden: any;
         let id: any;
         let renderChildAsHtml: any;

package/dist/components/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tooltip/Tooltip.jsx"],"names":[],"mappings":";AA2BA;;;;;;;;gBA2LC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tooltip/Tooltip.jsx"],"names":[],"mappings":";AA2BA;;;;;;;;;gBA6LC"}

package/dist/components/Tooltip/Tooltip.mjs

@@ -1,63 +1,64 @@
-import { jsxs as A, Fragment as F, jsx as p } from "react/jsx-runtime";
-import V, { useState as j, useRef as k, useCallback as B, useEffect as m } from "react";
-import { createPortal as G } from "react-dom";
-import i from "prop-types";
-import { CSSTransition as J } from "react-transition-group";
-import K from "classnames";
-import { debounce as Q } from "lodash";
-import { isEveryObjectValueEmpty as U } from "../../utils/common.util.mjs";
+import { jsxs as G, Fragment as J, jsx as p } from "react/jsx-runtime";
+import K, { useState as X, useRef as j, useCallback as k, useEffect as m } from "react";
+import { createPortal as Q } from "react-dom";
+import s from "prop-types";
+import { CSSTransition as U } from "react-transition-group";
+import M from "classnames";
+import { debounce as Y } from "lodash";
+import { isEveryObjectValueEmpty as Z } from "../../utils/common.util.mjs";
 /* empty css              */
 let v = ({
-  children: T = "",
-  className: M = "",
+  children: N = "",
+  className: $ = "",
+  tooltipBodyClassName: z = "",
   hidden: a = !1,
   id: l = "",
-  renderChildAsHtml: $ = !1,
-  template: z,
-  textShow: N = !1
+  renderChildAsHtml: I = !1,
+  template: q,
+  textShow: T = !1
 }) => {
-  const [s, u] = j(!1), [f, h] = j({}), g = K("data-ellipsis", "tooltip-wrapper", M), I = 200, t = k(), r = k(), o = 10, y = () => {
+  const [i, u] = X(!1), [f, h] = X({}), y = M("data-ellipsis", "tooltip-wrapper", $), A = M("tooltip", z), F = 200, t = j(), r = j(), o = 10, g = () => {
     u(!1);
-  }, n = B(
+  }, n = k(
     (e) => {
       (!r.current || a || r.current && !r.current.contains(e.relatedTarget) && t.current && !t.current.contains(e.relatedTarget)) && u(!1);
     },
     [a]
-  ), c = B(
+  ), c = k(
     (e) => {
-      var L, _, x, C;
-      if (!s) {
+      var L, C, _, x;
+      if (!i) {
         const [d] = t.current.childNodes;
-        let S = !a && (N ? !0 : d ? d.nodeType !== Node.TEXT_NODE && ((_ = (L = d.childNodes) == null ? void 0 : L[0]) == null ? void 0 : _.nodeType) !== Node.TEXT_NODE || /*
+        let S = !a && (T ? !0 : d ? d.nodeType !== Node.TEXT_NODE && ((C = (L = d.childNodes) == null ? void 0 : L[0]) == null ? void 0 : C.nodeType) !== Node.TEXT_NODE || /*
           If the child node is a text node and the text of the child node inside the container is greater than the width of the container, then show tooltip.
         */
-        (d.nodeType === Node.TEXT_NODE || ((C = (x = d.childNodes) == null ? void 0 : x[0]) == null ? void 0 : C.nodeType) === Node.TEXT_NODE) && t.current.scrollWidth > t.current.offsetWidth : !1);
+        (d.nodeType === Node.TEXT_NODE || ((x = (_ = d.childNodes) == null ? void 0 : _[0]) == null ? void 0 : x.nodeType) === Node.TEXT_NODE) && t.current.scrollWidth > t.current.offsetWidth : !1);
         u(S), setTimeout(() => {
           var b, O;
           if (S) {
-            let { height: E, top: R, bottom: q } = ((b = t == null ? void 0 : t.current) == null ? void 0 : b.getBoundingClientRect()) ?? {};
-            const { height: W, width: D } = ((O = r.current) == null ? void 0 : O.getBoundingClientRect()) ?? {
+            let { height: E, top: R, bottom: V } = ((b = t == null ? void 0 : t.current) == null ? void 0 : b.getBoundingClientRect()) ?? {};
+            const { height: W, width: B } = ((O = r.current) == null ? void 0 : O.getBoundingClientRect()) ?? {
               height: 0,
               width: 0
-            }, H = e.x - (e.x + D - window.innerWidth + o), P = e.x + D + o > window.innerWidth ? H > o ? H : o : e.x + o;
+            }, D = e.x - (e.x + B - window.innerWidth + o), H = e.x + B + o > window.innerWidth ? D > o ? D : o : e.x + o;
             if (R + E + o + W >= window.innerHeight) {
-              const X = q - E - o - W;
+              const P = V - E - o - W;
               h({
-                top: X > 0 ? X : o,
-                left: P
+                top: P > 0 ? P : o,
+                left: H
               });
             } else
               h({
                 top: R + E + o,
-                left: P
+                left: H
               });
           }
         }, 0);
       }
     },
-    [a, N, s]
-  ), w = Q(() => {
-    U(f) || h({});
+    [a, T, i]
+  ), w = Y(() => {
+    Z(f) || h({});
   }, 100);
   return m(() => {
     const e = t.current;
@@ -67,20 +68,20 @@ let v = ({
       };
   }, [t, c, n]), m(() => {
     const e = r.current;
-    if (e && s)
+    if (e && i)
       return e.addEventListener("mouseleave", n), () => {
         e.removeEventListener("mouseleave", n);
       };
-  }, [r, c, n, s]), m(() => (s && window.addEventListener("scroll", y, !0), () => window.removeEventListener("scroll", y, !0)), [s]), m(() => (window.addEventListener("resize", w), () => {
+  }, [r, c, n, i]), m(() => (i && window.addEventListener("scroll", g, !0), () => window.removeEventListener("scroll", g, !0)), [i]), m(() => (window.addEventListener("resize", w), () => {
     window.removeEventListener("resize", w);
-  }), [w, f]), /* @__PURE__ */ A(F, { children: [
-    $ ? /* @__PURE__ */ p(
+  }), [w, f]), /* @__PURE__ */ G(J, { children: [
+    I ? /* @__PURE__ */ p(
       "div",
       {
         "data-testid": l ? `${l}-tooltip-wrapper` : "tooltip-wrapper",
         ref: t,
-        className: g,
-        dangerouslySetInnerHTML: { __html: T },
+        className: y,
+        dangerouslySetInnerHTML: { __html: N },
         onClick: n
       }
     ) : /* @__PURE__ */ p(
@@ -88,19 +89,19 @@ let v = ({
       {
         "data-testid": l ? `${l}-tooltip-wrapper` : "tooltip-wrapper",
         ref: t,
-        className: g,
+        className: y,
         onClick: n,
-        children: T
+        children: N
       }
     ),
-    !a && G(
+    !a && Q(
       /* @__PURE__ */ p(
-        J,
+        U,
         {
           nodeRef: r,
           classNames: "fade",
-          in: s,
-          timeout: I,
+          in: i,
+          timeout: F,
           unmountOnExit: !0,
           children: /* @__PURE__ */ p(
             "div",
@@ -110,8 +111,8 @@ let v = ({
               style: {
                 ...f
               },
-              className: "tooltip",
-              children: z
+              className: A,
+              children: q
             }
           )
         }
@@ -121,15 +122,16 @@ let v = ({
   ] });
 };
 v.propTypes = {
-  children: i.any,
-  className: i.string,
-  hidden: i.bool,
-  id: i.string,
-  renderChildAsHtml: i.bool,
-  template: i.element.isRequired,
-  textShow: i.bool
+  children: s.any,
+  className: s.string,
+  tooltipBodyClassName: s.string,
+  hidden: s.bool,
+  id: s.string,
+  renderChildAsHtml: s.bool,
+  template: s.element.isRequired,
+  textShow: s.bool
 };
-v = V.memo(v);
+v = K.memo(v);
 export {
   v as default
 };

package/dist/components/Tooltip/Tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.mjs","sources":["../../../src/lib/components/Tooltip/Tooltip.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useRef, useState, useEffect, useCallback } from 'react'\nimport { createPortal } from 'react-dom'\nimport PropTypes from 'prop-types'\nimport { CSSTransition } from 'react-transition-group'\nimport classnames from 'classnames'\nimport { debounce } from 'lodash'\n\nimport { isEveryObjectValueEmpty } from '../../utils/common.util'\n\nimport './tooltip.scss'\n\nlet Tooltip = ({\n  children = '',\n  className = '',\n  hidden = false,\n  id = '',\n  renderChildAsHtml = false,\n  template,\n  textShow = false\n}) => {\n  const [show, setShow] = useState(false)\n  const [style, setStyle] = useState({})\n\n  const tooltipClassNames = classnames('data-ellipsis', 'tooltip-wrapper', className)\n  const duration = 200\n  const parentRef = useRef()\n  const tooltipRef = useRef()\n  const offset = 10\n\n  const handleScroll = () => {\n    setShow(false)\n  }\n\n  const handleMouseLeave = useCallback(\n    event => {\n      if (\n        !tooltipRef.current ||\n        hidden ||\n        (tooltipRef.current &&\n          !tooltipRef.current.contains(event.relatedTarget) &&\n          parentRef.current &&\n          !parentRef.current.contains(event.relatedTarget))\n      ) {\n        setShow(false)\n      }\n    },\n    [hidden]\n  )\n\n  const handleMouseEnter = useCallback(\n    event => {\n      if (!show) {\n        const [child] = parentRef.current.childNodes\n        let show =\n          !hidden &&\n          (textShow\n            ? true\n            : !child\n              ? false\n              : (child.nodeType !== Node.TEXT_NODE &&\n                  child.childNodes?.[0]?.nodeType !== Node.TEXT_NODE) ||\n                /*\n                                    If the child node is a text node and the text of the child node inside the container is greater than the width of the container, then show tooltip.\n                                  */\n                ((child.nodeType === Node.TEXT_NODE ||\n                  child.childNodes?.[0]?.nodeType === Node.TEXT_NODE) &&\n                  parentRef.current.scrollWidth > parentRef.current.offsetWidth))\n\n        setShow(show)\n\n        setTimeout(() => {\n          if (show) {\n            let { height, top, bottom } = parentRef?.current?.getBoundingClientRect() ?? {}\n            const { height: tooltipHeight, width: tooltipWidth } =\n              tooltipRef.current?.getBoundingClientRect() ?? {\n                height: 0,\n                width: 0\n              }\n            const leftPosition = event.x - (event.x + tooltipWidth - window.innerWidth + offset)\n            const left =\n              event.x + tooltipWidth + offset > window.innerWidth\n                ? leftPosition > offset\n                  ? leftPosition\n                  : offset\n                : event.x + offset\n\n            if (top + height + offset + tooltipHeight >= window.innerHeight) {\n              const topPosition = bottom - height - offset - tooltipHeight\n\n              setStyle({\n                top: topPosition > 0 ? topPosition : offset,\n                left\n              })\n            } else {\n              setStyle({\n                top: top + height + offset,\n                left\n              })\n            }\n          }\n        }, 0)\n      }\n    },\n    [hidden, textShow, show]\n  )\n\n  const clearStyles = debounce(() => {\n    if (!isEveryObjectValueEmpty(style)) {\n      setStyle({})\n    }\n  }, 100)\n\n  useEffect(() => {\n    const parentNode = parentRef.current\n\n    if (parentNode) {\n      parentNode.addEventListener('mouseenter', handleMouseEnter)\n      parentNode.addEventListener('mouseleave', handleMouseLeave)\n\n      return () => {\n        parentNode.removeEventListener('mouseenter', handleMouseEnter)\n        parentNode.removeEventListener('mouseleave', handleMouseLeave)\n      }\n    }\n  }, [parentRef, handleMouseEnter, handleMouseLeave])\n\n  useEffect(() => {\n    const tooltipNode = tooltipRef.current\n\n    if (tooltipNode && show) {\n      tooltipNode.addEventListener('mouseleave', handleMouseLeave)\n\n      return () => {\n        tooltipNode.removeEventListener('mouseleave', handleMouseLeave)\n      }\n    }\n  }, [tooltipRef, handleMouseEnter, handleMouseLeave, show])\n\n  useEffect(() => {\n    if (show) {\n      window.addEventListener('scroll', handleScroll, true)\n    }\n\n    return () => window.removeEventListener('scroll', handleScroll, true)\n  }, [show])\n\n  useEffect(() => {\n    window.addEventListener('resize', clearStyles)\n\n    return () => {\n      window.removeEventListener('resize', clearStyles)\n    }\n  }, [clearStyles, style])\n\n  return (\n    <>\n      {renderChildAsHtml ? (\n        <div\n          data-testid={id ? `${id}-tooltip-wrapper` : 'tooltip-wrapper'}\n          ref={parentRef}\n          className={tooltipClassNames}\n          dangerouslySetInnerHTML={{ __html: children }}\n          onClick={handleMouseLeave}\n        />\n      ) : (\n        <div\n          data-testid={id ? `${id}-tooltip-wrapper` : 'tooltip-wrapper'}\n          ref={parentRef}\n          className={tooltipClassNames}\n          onClick={handleMouseLeave}\n        >\n          {children}\n        </div>\n      )}\n      {!hidden &&\n        createPortal(\n          <CSSTransition\n            nodeRef={tooltipRef}\n            classNames=\"fade\"\n            in={show}\n            timeout={duration}\n            unmountOnExit\n          >\n            <div\n              data-testid={id ? `${id}-tooltip` : 'tooltip'}\n              ref={tooltipRef}\n              style={{\n                ...style\n              }}\n              className=\"tooltip\"\n            >\n              {template}\n            </div>\n          </CSSTransition>,\n          document.getElementById('overlay_container')\n        )}\n    </>\n  )\n}\n\nTooltip.propTypes = {\n  children: PropTypes.any,\n  className: PropTypes.string,\n  hidden: PropTypes.bool,\n  id: PropTypes.string,\n  renderChildAsHtml: PropTypes.bool,\n  template: PropTypes.element.isRequired,\n  textShow: PropTypes.bool\n}\n\nTooltip = React.memo(Tooltip)\n\nexport default Tooltip\n"],"names":["Tooltip","children","className","hidden","id","renderChildAsHtml","template","textShow","show","setShow","useState","style","setStyle","tooltipClassNames","classnames","duration","parentRef","useRef","tooltipRef","offset","handleScroll","handleMouseLeave","useCallback","event","handleMouseEnter","child","_b","_a","_d","_c","height","top","bottom","tooltipHeight","tooltipWidth","leftPosition","left","topPosition","clearStyles","debounce","isEveryObjectValueEmpty","useEffect","parentNode","tooltipNode","jsxs","Fragment","jsx","createPortal","CSSTransition","PropTypes","React"],"mappings":";;;;;;;;;AA2BA,IAAIA,IAAU,CAAC;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAAS;AAAA,EACT,IAAAC,IAAK;AAAA,EACL,mBAAAC,IAAoB;AAAA,EACpB,UAAAC;AAAA,EACA,UAAAC,IAAW;AACb,MAAM;AACJ,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAChC,CAACC,GAAOC,CAAQ,IAAIF,EAAS,CAAA,CAAE,GAE/BG,IAAoBC,EAAW,iBAAiB,mBAAmBZ,CAAS,GAC5Ea,IAAW,KACXC,IAAYC,EAAO,GACnBC,IAAaD,EAAO,GACpBE,IAAS,IAETC,IAAe,MAAM;AACzB,IAAAX,EAAQ,EAAK;AAAA,EACf,GAEMY,IAAmBC;AAAA,IACvB,CAASC,MAAA;AAEL,OAAA,CAACL,EAAW,WACZf,KACCe,EAAW,WACV,CAACA,EAAW,QAAQ,SAASK,EAAM,aAAa,KAChDP,EAAU,WACV,CAACA,EAAU,QAAQ,SAASO,EAAM,aAAa,MAEjDd,EAAQ,EAAK;AAAA,IAEjB;AAAA,IACA,CAACN,CAAM;AAAA,EACT,GAEMqB,IAAmBF;AAAA,IACvB,CAASC,MAAA;;AACP,UAAI,CAACf,GAAM;AACT,cAAM,CAACiB,CAAK,IAAIT,EAAU,QAAQ;AAClC,YAAIR,IACF,CAACL,MACAI,IACG,KACCkB,IAEEA,EAAM,aAAa,KAAK,eACvBC,KAAAC,IAAAF,EAAM,eAAN,gBAAAE,EAAmB,OAAnB,gBAAAD,EAAuB,cAAa,KAAK;AAAA;AAAA;AAAA,SAIzCD,EAAM,aAAa,KAAK,eACxBG,KAAAC,IAAAJ,EAAM,eAAN,gBAAAI,EAAmB,OAAnB,gBAAAD,EAAuB,cAAa,KAAK,cACzCZ,EAAU,QAAQ,cAAcA,EAAU,QAAQ,cARpD;AAUR,QAAAP,EAAQD,CAAI,GAEZ,WAAW,MAAM;;AACf,cAAIA,GAAM;AACJ,gBAAA,EAAE,QAAAsB,GAAQ,KAAAC,GAAK,QAAAC,EAAA,MAAWL,IAAAX,KAAA,gBAAAA,EAAW,YAAX,gBAAAW,EAAoB,4BAA2B,CAAC;AACxE,kBAAA,EAAE,QAAQM,GAAe,OAAOC,QACpCR,IAAAR,EAAW,YAAX,gBAAAQ,EAAoB,4BAA2B;AAAA,cAC7C,QAAQ;AAAA,cACR,OAAO;AAAA,YACT,GACIS,IAAeZ,EAAM,KAAKA,EAAM,IAAIW,IAAe,OAAO,aAAaf,IACvEiB,IACJb,EAAM,IAAIW,IAAef,IAAS,OAAO,aACrCgB,IAAehB,IACbgB,IACAhB,IACFI,EAAM,IAAIJ;AAEhB,gBAAIY,IAAMD,IAASX,IAASc,KAAiB,OAAO,aAAa;AACzD,oBAAAI,IAAcL,IAASF,IAASX,IAASc;AAEtC,cAAArB,EAAA;AAAA,gBACP,KAAKyB,IAAc,IAAIA,IAAclB;AAAA,gBACrC,MAAAiB;AAAA,cAAA,CACD;AAAA,YAAA;AAEQ,cAAAxB,EAAA;AAAA,gBACP,KAAKmB,IAAMD,IAASX;AAAA,gBACpB,MAAAiB;AAAA,cAAA,CACD;AAAA,UACH;AAAA,WAED,CAAC;AAAA,MAAA;AAAA,IAER;AAAA,IACA,CAACjC,GAAQI,GAAUC,CAAI;AAAA,EACzB,GAEM8B,IAAcC,EAAS,MAAM;AAC7B,IAACC,EAAwB7B,CAAK,KAChCC,EAAS,CAAA,CAAE;AAAA,KAEZ,GAAG;AAEN,SAAA6B,EAAU,MAAM;AACd,UAAMC,IAAa1B,EAAU;AAE7B,QAAI0B;AACS,aAAAA,EAAA,iBAAiB,cAAclB,CAAgB,GAC/CkB,EAAA,iBAAiB,cAAcrB,CAAgB,GAEnD,MAAM;AACA,QAAAqB,EAAA,oBAAoB,cAAclB,CAAgB,GAClDkB,EAAA,oBAAoB,cAAcrB,CAAgB;AAAA,MAC/D;AAAA,EAED,GAAA,CAACL,GAAWQ,GAAkBH,CAAgB,CAAC,GAElDoB,EAAU,MAAM;AACd,UAAME,IAAczB,EAAW;AAE/B,QAAIyB,KAAenC;AACL,aAAAmC,EAAA,iBAAiB,cAActB,CAAgB,GAEpD,MAAM;AACC,QAAAsB,EAAA,oBAAoB,cAActB,CAAgB;AAAA,MAChE;AAAA,KAED,CAACH,GAAYM,GAAkBH,GAAkBb,CAAI,CAAC,GAEzDiC,EAAU,OACJjC,KACK,OAAA,iBAAiB,UAAUY,GAAc,EAAI,GAG/C,MAAM,OAAO,oBAAoB,UAAUA,GAAc,EAAI,IACnE,CAACZ,CAAI,CAAC,GAETiC,EAAU,OACD,OAAA,iBAAiB,UAAUH,CAAW,GAEtC,MAAM;AACJ,WAAA,oBAAoB,UAAUA,CAAW;AAAA,EAClD,IACC,CAACA,GAAa3B,CAAK,CAAC,GAIlB,gBAAAiC,EAAAC,GAAA,EAAA,UAAA;AAAA,IACCxC,IAAA,gBAAAyC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAa1C,IAAK,GAAGA,CAAE,qBAAqB;AAAA,QAC5C,KAAKY;AAAA,QACL,WAAWH;AAAA,QACX,yBAAyB,EAAE,QAAQZ,EAAS;AAAA,QAC5C,SAASoB;AAAA,MAAA;AAAA,IAAA,IAGX,gBAAAyB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAa1C,IAAK,GAAGA,CAAE,qBAAqB;AAAA,QAC5C,KAAKY;AAAA,QACL,WAAWH;AAAA,QACX,SAASQ;AAAA,QAER,UAAApB;AAAA,MAAA;AAAA,IACH;AAAA,IAED,CAACE,KACA4C;AAAA,MACE,gBAAAD;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,SAAS9B;AAAA,UACT,YAAW;AAAA,UACX,IAAIV;AAAA,UACJ,SAASO;AAAA,UACT,eAAa;AAAA,UAEb,UAAA,gBAAA+B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAa1C,IAAK,GAAGA,CAAE,aAAa;AAAA,cACpC,KAAKc;AAAA,cACL,OAAO;AAAA,gBACL,GAAGP;AAAA,cACL;AAAA,cACA,WAAU;AAAA,cAET,UAAAL;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MACF;AAAA,MACA,SAAS,eAAe,mBAAmB;AAAA,IAAA;AAAA,EAC7C,GACJ;AAEJ;AAEAN,EAAQ,YAAY;AAAA,EAClB,UAAUiD,EAAU;AAAA,EACpB,WAAWA,EAAU;AAAA,EACrB,QAAQA,EAAU;AAAA,EAClB,IAAIA,EAAU;AAAA,EACd,mBAAmBA,EAAU;AAAA,EAC7B,UAAUA,EAAU,QAAQ;AAAA,EAC5B,UAAUA,EAAU;AACtB;AAEAjD,IAAUkD,EAAM,KAAKlD,CAAO;"}
+{"version":3,"file":"Tooltip.mjs","sources":["../../../src/lib/components/Tooltip/Tooltip.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useRef, useState, useEffect, useCallback } from 'react'\nimport { createPortal } from 'react-dom'\nimport PropTypes from 'prop-types'\nimport { CSSTransition } from 'react-transition-group'\nimport classnames from 'classnames'\nimport { debounce } from 'lodash'\n\nimport { isEveryObjectValueEmpty } from '../../utils/common.util'\n\nimport './tooltip.scss'\n\nlet Tooltip = ({\n  children = '',\n  className = '',\n  tooltipBodyClassName = '',\n  hidden = false,\n  id = '',\n  renderChildAsHtml = false,\n  template,\n  textShow = false\n}) => {\n  const [show, setShow] = useState(false)\n  const [style, setStyle] = useState({})\n\n  const tooltipWrapperClassNames = classnames('data-ellipsis', 'tooltip-wrapper', className)\n  const tooltipBodyClassNames = classnames('tooltip', tooltipBodyClassName)\n  const duration = 200\n  const parentRef = useRef()\n  const tooltipRef = useRef()\n  const offset = 10\n\n  const handleScroll = () => {\n    setShow(false)\n  }\n\n  const handleMouseLeave = useCallback(\n    event => {\n      if (\n        !tooltipRef.current ||\n        hidden ||\n        (tooltipRef.current &&\n          !tooltipRef.current.contains(event.relatedTarget) &&\n          parentRef.current &&\n          !parentRef.current.contains(event.relatedTarget))\n      ) {\n        setShow(false)\n      }\n    },\n    [hidden]\n  )\n\n  const handleMouseEnter = useCallback(\n    event => {\n      if (!show) {\n        const [child] = parentRef.current.childNodes\n        let show =\n          !hidden &&\n          (textShow\n            ? true\n            : !child\n              ? false\n              : (child.nodeType !== Node.TEXT_NODE &&\n                  child.childNodes?.[0]?.nodeType !== Node.TEXT_NODE) ||\n                /*\n                                    If the child node is a text node and the text of the child node inside the container is greater than the width of the container, then show tooltip.\n                                  */\n                ((child.nodeType === Node.TEXT_NODE ||\n                  child.childNodes?.[0]?.nodeType === Node.TEXT_NODE) &&\n                  parentRef.current.scrollWidth > parentRef.current.offsetWidth))\n\n        setShow(show)\n\n        setTimeout(() => {\n          if (show) {\n            let { height, top, bottom } = parentRef?.current?.getBoundingClientRect() ?? {}\n            const { height: tooltipHeight, width: tooltipWidth } =\n              tooltipRef.current?.getBoundingClientRect() ?? {\n                height: 0,\n                width: 0\n              }\n            const leftPosition = event.x - (event.x + tooltipWidth - window.innerWidth + offset)\n            const left =\n              event.x + tooltipWidth + offset > window.innerWidth\n                ? leftPosition > offset\n                  ? leftPosition\n                  : offset\n                : event.x + offset\n\n            if (top + height + offset + tooltipHeight >= window.innerHeight) {\n              const topPosition = bottom - height - offset - tooltipHeight\n\n              setStyle({\n                top: topPosition > 0 ? topPosition : offset,\n                left\n              })\n            } else {\n              setStyle({\n                top: top + height + offset,\n                left\n              })\n            }\n          }\n        }, 0)\n      }\n    },\n    [hidden, textShow, show]\n  )\n\n  const clearStyles = debounce(() => {\n    if (!isEveryObjectValueEmpty(style)) {\n      setStyle({})\n    }\n  }, 100)\n\n  useEffect(() => {\n    const parentNode = parentRef.current\n\n    if (parentNode) {\n      parentNode.addEventListener('mouseenter', handleMouseEnter)\n      parentNode.addEventListener('mouseleave', handleMouseLeave)\n\n      return () => {\n        parentNode.removeEventListener('mouseenter', handleMouseEnter)\n        parentNode.removeEventListener('mouseleave', handleMouseLeave)\n      }\n    }\n  }, [parentRef, handleMouseEnter, handleMouseLeave])\n\n  useEffect(() => {\n    const tooltipNode = tooltipRef.current\n\n    if (tooltipNode && show) {\n      tooltipNode.addEventListener('mouseleave', handleMouseLeave)\n\n      return () => {\n        tooltipNode.removeEventListener('mouseleave', handleMouseLeave)\n      }\n    }\n  }, [tooltipRef, handleMouseEnter, handleMouseLeave, show])\n\n  useEffect(() => {\n    if (show) {\n      window.addEventListener('scroll', handleScroll, true)\n    }\n\n    return () => window.removeEventListener('scroll', handleScroll, true)\n  }, [show])\n\n  useEffect(() => {\n    window.addEventListener('resize', clearStyles)\n\n    return () => {\n      window.removeEventListener('resize', clearStyles)\n    }\n  }, [clearStyles, style])\n\n  return (\n    <>\n      {renderChildAsHtml ? (\n        <div\n          data-testid={id ? `${id}-tooltip-wrapper` : 'tooltip-wrapper'}\n          ref={parentRef}\n          className={tooltipWrapperClassNames}\n          dangerouslySetInnerHTML={{ __html: children }}\n          onClick={handleMouseLeave}\n        />\n      ) : (\n        <div\n          data-testid={id ? `${id}-tooltip-wrapper` : 'tooltip-wrapper'}\n          ref={parentRef}\n          className={tooltipWrapperClassNames}\n          onClick={handleMouseLeave}\n        >\n          {children}\n        </div>\n      )}\n      {!hidden &&\n        createPortal(\n          <CSSTransition\n            nodeRef={tooltipRef}\n            classNames=\"fade\"\n            in={show}\n            timeout={duration}\n            unmountOnExit\n          >\n            <div\n              data-testid={id ? `${id}-tooltip` : 'tooltip'}\n              ref={tooltipRef}\n              style={{\n                ...style\n              }}\n              className={tooltipBodyClassNames}\n            >\n              {template}\n            </div>\n          </CSSTransition>,\n          document.getElementById('overlay_container')\n        )}\n    </>\n  )\n}\n\nTooltip.propTypes = {\n  children: PropTypes.any,\n  className: PropTypes.string,\n  tooltipBodyClassName: PropTypes.string,\n  hidden: PropTypes.bool,\n  id: PropTypes.string,\n  renderChildAsHtml: PropTypes.bool,\n  template: PropTypes.element.isRequired,\n  textShow: PropTypes.bool\n}\n\nTooltip = React.memo(Tooltip)\n\nexport default Tooltip\n"],"names":["Tooltip","children","className","tooltipBodyClassName","hidden","id","renderChildAsHtml","template","textShow","show","setShow","useState","style","setStyle","tooltipWrapperClassNames","classnames","tooltipBodyClassNames","duration","parentRef","useRef","tooltipRef","offset","handleScroll","handleMouseLeave","useCallback","event","handleMouseEnter","child","_b","_a","_d","_c","height","top","bottom","tooltipHeight","tooltipWidth","leftPosition","left","topPosition","clearStyles","debounce","isEveryObjectValueEmpty","useEffect","parentNode","tooltipNode","jsxs","Fragment","jsx","createPortal","CSSTransition","PropTypes","React"],"mappings":"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"}

package/dist/hooks/useChipCell.hook.d.ts

@@ -1,4 +1,4 @@
-export function useChipCell(isEditMode: any, visibleChipsMaxLength: any): {
+export function useChipCell(isEditMode: any, visibleChipsMaxLength: any, withInitialParentWidth: any): {
     chipsCellRef: import("react").MutableRefObject<undefined>;
     chipsWrapperRef: import("react").MutableRefObject<undefined>;
     handleShowElements: (event: any) => void;

package/dist/hooks/useChipCell.hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useChipCell.hook.d.ts","sourceRoot":"","sources":["../../src/lib/hooks/useChipCell.hook.js"],"names":[],"mappings":"AA6BO;;;;;;;;;;;EA4IN"}
+{"version":3,"file":"useChipCell.hook.d.ts","sourceRoot":"","sources":["../../src/lib/hooks/useChipCell.hook.js"],"names":[],"mappings":"AA6BO;;;;;;;;;;;EAyJN"}