iguazio.dashboard-react-controls 3.2.15 → 3.2.16

package/dist/components/RoundedIcon/RoundedIcon.mjs

@@ -0,0 +1,40 @@
+import { jsx as r } from "react/jsx-runtime";
+import u, { forwardRef as _ } from "react";
+import o from "prop-types";
+import s from "classnames";
+import N from "../Tooltip/Tooltip.mjs";
+import R from "../TooltipTemplate/TextTooltipTemplate.mjs";
+/* empty css                  */
+let e = ({
+  children: n,
+  className: a = "",
+  disabled: t = !1,
+  id: c = "",
+  isActive: d = !1,
+  onClick: l = () => {
+  },
+  tooltipText: i = ""
+}, m) => {
+  const p = s("round-icon-cp", a), f = s(
+    "round-icon-cp__circle",
+    d && "round-icon-cp__circle-active",
+    t && "round-icon-cp__circle-disabled"
+  );
+  return /* @__PURE__ */ r("div", { className: p, ref: m, "data-testid": c, children: /* @__PURE__ */ r(N, { hidden: !i, id: c, template: /* @__PURE__ */ r(R, { text: i }), children: /* @__PURE__ */ r("button", { onClick: l, disabled: t, className: f, children: n }) }) });
+};
+e = u.memo(_(e));
+e.displayName = "RoundedIcon";
+e.propTypes = {
+  children: o.node.isRequired,
+  className: o.string,
+  disabled: o.bool,
+  id: o.string,
+  isActive: o.bool,
+  onClick: o.func,
+  tooltipText: o.string
+};
+const y = e;
+export {
+  y as default
+};
+//# sourceMappingURL=RoundedIcon.mjs.map

package/dist/components/RoundedIcon/RoundedIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundedIcon.mjs","sources":["../../../src/lib/components/RoundedIcon/RoundedIcon.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, { forwardRef } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nimport Tooltip from '../Tooltip/Tooltip'\nimport TextTooltipTemplate from '../TooltipTemplate/TextTooltipTemplate'\n\nimport './roundedIcon.scss'\n\nlet RoundedIcon = (\n  {\n    children,\n    className = '',\n    disabled = false,\n    id = '',\n    isActive = false,\n    onClick = () => {},\n    tooltipText = ''\n  },\n  ref\n) => {\n  const wrapperClassNames = classNames('round-icon-cp', className)\n  const IconClassNames = classNames(\n    'round-icon-cp__circle',\n    isActive && 'round-icon-cp__circle-active',\n    disabled && 'round-icon-cp__circle-disabled'\n  )\n\n  return (\n    <div className={wrapperClassNames} ref={ref} data-testid={id}>\n      <Tooltip hidden={!tooltipText} id={id} template={<TextTooltipTemplate text={tooltipText} />}>\n        <button onClick={onClick} disabled={disabled} className={IconClassNames}>\n          {children}\n        </button>\n      </Tooltip>\n    </div>\n  )\n}\n\nRoundedIcon = React.memo(forwardRef(RoundedIcon))\n\nRoundedIcon.displayName = 'RoundedIcon'\n\nRoundedIcon.propTypes = {\n  children: PropTypes.node.isRequired,\n  className: PropTypes.string,\n  disabled: PropTypes.bool,\n  id: PropTypes.string,\n  isActive: PropTypes.bool,\n  onClick: PropTypes.func,\n  tooltipText: PropTypes.string\n}\n\nexport default RoundedIcon\n"],"names":["RoundedIcon","children","className","disabled","id","isActive","onClick","tooltipText","ref","wrapperClassNames","classNames","IconClassNames","jsx","Tooltip","TextTooltipTemplate","React","forwardRef","PropTypes","RoundedIcon$1"],"mappings":";;;;;;;AAyBA,IAAIA,IAAc,CAChB;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,IAAAC,IAAK;AAAA,EACL,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU,MAAM;AAAA,EAAC;AAAA,EACjB,aAAAC,IAAc;AAChB,GACAC,MACG;AACH,QAAMC,IAAoBC,EAAW,iBAAiBR,CAAS,GACzDS,IAAiBD;AAAAA,IACrB;AAAA,IACAL,KAAY;AAAA,IACZF,KAAY;AAAA,EAAA;AAGd,SACE,gBAAAS,EAAC,OAAA,EAAI,WAAWH,GAAmB,KAAAD,GAAU,eAAaJ,GACxD,UAAA,gBAAAQ,EAACC,GAAA,EAAQ,QAAQ,CAACN,GAAa,IAAAH,GAAQ,UAAU,gBAAAQ,EAACE,GAAA,EAAoB,MAAMP,EAAA,CAAa,GACvF,UAAA,gBAAAK,EAAC,UAAA,EAAO,SAAAN,GAAkB,UAAAH,GAAoB,WAAWQ,GACtD,UAAAV,EAAA,CACH,EAAA,CACF,GACF;AAEJ;AAEAD,IAAce,EAAM,KAAKC,EAAWhB,CAAW,CAAC;AAEhDA,EAAY,cAAc;AAE1BA,EAAY,YAAY;AAAA,EACtB,UAAUiB,EAAU,KAAK;AAAA,EACzB,WAAWA,EAAU;AAAA,EACrB,UAAUA,EAAU;AAAA,EACpB,IAAIA,EAAU;AAAA,EACd,UAAUA,EAAU;AAAA,EACpB,SAASA,EAAU;AAAA,EACnB,aAAaA,EAAU;AACzB;AAEA,MAAAC,IAAelB;"}

package/dist/components/RoundedIcon/RoundedIcon.stories.d.ts

@@ -0,0 +1,9 @@
+declare namespace _default {
+    export let title: string;
+    export { RoundedIcon as component };
+}
+export default _default;
+export const Normal: any;
+export const WithToolTip: any;
+import RoundedIcon from './RoundedIcon';
+//# sourceMappingURL=RoundedIcon.stories.d.ts.map

package/dist/components/RoundedIcon/RoundedIcon.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundedIcon.stories.d.ts","sourceRoot":"","sources":["../../../src/lib/components/RoundedIcon/RoundedIcon.stories.js"],"names":[],"mappings":";;;;;AAiCA,yBAAuC;AAKvC,8BAA4C;wBApBpB,eAAe"}

package/dist/components/TableCell/TableCell.d.ts

@@ -0,0 +1,28 @@
+export default TableCell;
+declare function TableCell({ cellData, className, firstCell, item, link, onClick, selectItem, selectedItem, showExpandButton, toggleRow }: {
+    cellData: any;
+    className?: string;
+    firstCell?: boolean;
+    item: any;
+    link?: string;
+    onClick?: any;
+    selectItem?: () => void;
+    selectedItem?: {};
+    showExpandButton?: boolean;
+    toggleRow?: any;
+}): JSX.Element;
+declare namespace TableCell {
+    namespace propTypes {
+        let cellData: any;
+        let className: any;
+        let firstCell: any;
+        let item: any;
+        let link: any;
+        let onClick: any;
+        let selectItem: any;
+        let selectedItem: any;
+        let showExpandButton: any;
+        let toggleRow: any;
+    }
+}
+//# sourceMappingURL=TableCell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TableCell/TableCell.jsx"],"names":[],"mappings":";AAkCA;;;;;;;;;;;gBA6HC"}

package/dist/components/TableCell/TableCell.mjs

@@ -0,0 +1,111 @@
+import { jsx as s, jsxs as C } from "react/jsx-runtime";
+import { cloneElement as T } from "react";
+import t from "prop-types";
+import c from "classnames";
+import i from "../Tooltip/Tooltip.mjs";
+import j from "../ReadOnlyChips/ReadOnlyChips.mjs";
+import I from "../../elements/TableLinkCell/TableLinkCell.mjs";
+import O from "../../elements/TableTypeCell/TableTypeCell.mjs";
+import p from "../TooltipTemplate/TextTooltipTemplate.mjs";
+import { getChipOptions as A } from "../../utils/chips.util.mjs";
+import { truncateUid as L } from "../../utils/string.util.mjs";
+import _ from "../../images/arrow.svg.mjs";
+const g = ({
+  cellData: e,
+  className: m = "",
+  firstCell: h = !1,
+  item: r,
+  link: l = "",
+  onClick: d = null,
+  selectItem: y = () => {
+  },
+  selectedItem: b = {},
+  showExpandButton: a = !1,
+  toggleRow: u = null
+}) => {
+  const { value: N, label: f, className: v } = r.state ?? {}, o = c(
+    "table-body__cell",
+    e.className,
+    m,
+    e.bodyCellClassName,
+    d && "link"
+  );
+  return e.template ? T(e.template, {
+    className: m
+  }) : l && e.type !== "hidden" ? /* @__PURE__ */ s(
+    I,
+    {
+      className: m,
+      cellData: e,
+      item: r,
+      link: l,
+      selectItem: y,
+      selectedItem: b,
+      showExpandButton: a,
+      toggleRow: u
+    }
+  ) : h && !l ? /* @__PURE__ */ C(
+    "td",
+    {
+      onClick: () => e.value && d && d(e.value),
+      className: o,
+      children: [
+        /* @__PURE__ */ s("div", { className: "data-ellipsis", children: e && /* @__PURE__ */ s(
+          i,
+          {
+            template: /* @__PURE__ */ s(p, { text: e.tooltip || e.value || "" }),
+            children: e.value
+          }
+        ) }),
+        r.state && N && f && /* @__PURE__ */ s(i, { className: "status", template: /* @__PURE__ */ s(p, { text: f }), children: /* @__PURE__ */ s("i", { className: v }) }),
+        !r.state && r.status && /* @__PURE__ */ s(i, { className: "status", template: /* @__PURE__ */ s(p, { text: r.status }), children: /* @__PURE__ */ s("i", { className: `${r.status[0].toLowerCase()}${r.status.slice(1)}` }) }),
+        a && /* @__PURE__ */ s(_, { onClick: (n) => u && u(n, r), className: "expand-arrow" })
+      ]
+    }
+  ) : e.type === "type" ? /* @__PURE__ */ s(O, { className: m, cellData: e }) : e.type === "icons" ? /* @__PURE__ */ s("td", { "data-testid": e.headerId, className: o, children: e.value.map((n, x) => /* @__PURE__ */ s(
+    i,
+    {
+      template: /* @__PURE__ */ s(p, { text: n.tooltip }),
+      children: n.icon
+    },
+    n.tooltip + x
+  )) }) : Array.isArray(e.value) ? /* @__PURE__ */ s("td", { "data-testid": e.headerId, className: o, children: /* @__PURE__ */ s(
+    j,
+    {
+      chipOptions: A(e.type),
+      labels: e.value,
+      shortChips: !0
+    }
+  ) }) : e.type === "hash" ? /* @__PURE__ */ s("td", { "data-testid": e.headerId, className: o, children: /* @__PURE__ */ s(i, { template: /* @__PURE__ */ s(p, { text: e.value }), children: /* @__PURE__ */ s("span", { children: L(e.value) }) }) }) : e.type === "hidden" ? null : e.type === "component" ? /* @__PURE__ */ s("td", { "data-testid": e.headerId, className: o, children: e.value }) : /* @__PURE__ */ s(
+    "td",
+    {
+      "data-testid": e == null ? void 0 : e.headerId,
+      className: o,
+      onClick: () => e.value && d && d(e.value),
+      children: /* @__PURE__ */ s(
+        i,
+        {
+          className: "text_small",
+          template: /* @__PURE__ */ s(p, { text: e.tooltip || e.value || "" }),
+          children: e.value
+        }
+      )
+    }
+  );
+};
+g.propTypes = {
+  cellData: t.object.isRequired,
+  className: t.string,
+  firstCell: t.bool,
+  item: t.oneOfType([t.object, t.bool]),
+  link: t.oneOfType([t.string, t.bool]),
+  onClick: t.func,
+  selectItem: t.func,
+  selectedItem: t.object,
+  showExpandButton: t.bool,
+  toggleRow: t.func
+};
+export {
+  g as default
+};
+//# sourceMappingURL=TableCell.mjs.map

package/dist/components/TableCell/TableCell.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.mjs","sources":["../../../src/lib/components/TableCell/TableCell.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, { cloneElement } from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\n\nimport Tooltip from '../Tooltip/Tooltip'\nimport ReadOnlyChips from '../ReadOnlyChips/ReadOnlyChips'\nimport TableLinkCell from '../../elements/TableLinkCell/TableLinkCell'\nimport TableTypeCell from '../../elements/TableTypeCell/TableTypeCell'\nimport TextTooltipTemplate from '../TooltipTemplate/TextTooltipTemplate'\n\nimport { getChipOptions } from '../../utils/chips.util'\nimport { truncateUid } from '../../utils/string.util'\n\nimport Arrow from '../../images/arrow.svg?react'\n\nconst TableCell = ({\n  cellData,\n  className = '',\n  firstCell = false,\n  item,\n  link = '',\n  onClick = null,\n  selectItem = () => {},\n  selectedItem = {},\n  showExpandButton = false,\n  toggleRow = null\n}) => {\n  const { value: stateValue, label: stateLabel, className: stateClassName } = item.state ?? {}\n  const cellClassNames = classnames(\n    'table-body__cell',\n    cellData.className,\n    className,\n    cellData.bodyCellClassName,\n    onClick && 'link'\n  )\n\n  if (cellData.template) {\n    return cloneElement(cellData.template, {\n      className\n    })\n  } else if (link && cellData.type !== 'hidden') {\n    return (\n      <TableLinkCell\n        className={className}\n        cellData={cellData}\n        item={item}\n        link={link}\n        selectItem={selectItem}\n        selectedItem={selectedItem}\n        showExpandButton={showExpandButton}\n        toggleRow={toggleRow}\n      />\n    )\n  } else if (firstCell && !link) {\n    return (\n      <td\n        onClick={() => cellData.value && onClick && onClick(cellData.value)}\n        className={cellClassNames}\n      >\n        <div className=\"data-ellipsis\">\n          {cellData && (\n            <Tooltip\n              template={<TextTooltipTemplate text={cellData.tooltip || cellData.value || ''} />}\n            >\n              {cellData.value}\n            </Tooltip>\n          )}\n        </div>\n        {item.state && stateValue && stateLabel && (\n          <Tooltip className=\"status\" template={<TextTooltipTemplate text={stateLabel} />}>\n            <i className={stateClassName} />\n          </Tooltip>\n        )}\n        {!item.state && item.status && (\n          <Tooltip className=\"status\" template={<TextTooltipTemplate text={item.status} />}>\n            <i className={`${item.status[0].toLowerCase()}${item.status.slice(1)}`} />\n          </Tooltip>\n        )}\n        {showExpandButton && (\n          <Arrow onClick={e => toggleRow && toggleRow(e, item)} className=\"expand-arrow\" />\n        )}\n      </td>\n    )\n  } else if (cellData.type === 'type') {\n    return <TableTypeCell className={className} cellData={cellData} />\n  } else if (cellData.type === 'icons') {\n    return (\n      <td data-testid={cellData.headerId} className={cellClassNames}>\n        {cellData.value.map((valueItem, index) => (\n          <Tooltip\n            key={valueItem.tooltip + index}\n            template={<TextTooltipTemplate text={valueItem.tooltip} />}\n          >\n            {valueItem.icon}\n          </Tooltip>\n        ))}\n      </td>\n    )\n  } else if (Array.isArray(cellData.value)) {\n    return (\n      <td data-testid={cellData.headerId} className={cellClassNames}>\n        <ReadOnlyChips\n          chipOptions={getChipOptions(cellData.type)}\n          labels={cellData.value}\n          shortChips\n        />\n      </td>\n    )\n  } else if (cellData.type === 'hash') {\n    return (\n      <td data-testid={cellData.headerId} className={cellClassNames}>\n        <Tooltip template={<TextTooltipTemplate text={cellData.value} />}>\n          <span>{truncateUid(cellData.value)}</span>\n        </Tooltip>\n      </td>\n    )\n  } else if (cellData.type === 'hidden') {\n    return null\n  } else if (cellData.type === 'component') {\n    return (\n      <td data-testid={cellData.headerId} className={cellClassNames}>\n        {cellData.value}\n      </td>\n    )\n  } else {\n    return (\n      <td\n        data-testid={cellData?.headerId}\n        className={cellClassNames}\n        onClick={() => cellData.value && onClick && onClick(cellData.value)}\n      >\n        <Tooltip\n          className=\"text_small\"\n          template={<TextTooltipTemplate text={cellData.tooltip || cellData.value || ''} />}\n        >\n          {cellData.value}\n        </Tooltip>\n      </td>\n    )\n  }\n}\n\nTableCell.propTypes = {\n  cellData: PropTypes.object.isRequired,\n  className: PropTypes.string,\n  firstCell: PropTypes.bool,\n  item: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),\n  link: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  onClick: PropTypes.func,\n  selectItem: PropTypes.func,\n  selectedItem: PropTypes.object,\n  showExpandButton: PropTypes.bool,\n  toggleRow: PropTypes.func\n}\n\nexport default TableCell\n"],"names":["TableCell","cellData","className","firstCell","item","link","onClick","selectItem","selectedItem","showExpandButton","toggleRow","stateValue","stateLabel","stateClassName","cellClassNames","classnames","cloneElement","jsx","TableLinkCell","jsxs","Tooltip","TextTooltipTemplate","Arrow","e","TableTypeCell","valueItem","index","ReadOnlyChips","getChipOptions","PropTypes"],"mappings":";;;;;;;;;;;;AAkCA,MAAMA,IAAY,CAAC;AAAA,EACjB,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,YAAAC,IAAa,MAAM;AAAA,EAAC;AAAA,EACpB,cAAAC,IAAe,CAAA;AAAA,EACf,kBAAAC,IAAmB;AAAA,EACnB,WAAAC,IAAY;AACd,MAAM;AACJ,QAAM,EAAE,OAAOC,GAAY,OAAOC,GAAY,WAAWC,EAAA,IAAmBT,EAAK,SAAS,CAAA,GACpFU,IAAiBC;AAAA,IACrB;AAAA,IACAd,EAAS;AAAA,IACTC;AAAA,IACAD,EAAS;AAAA,IACTK,KAAW;AAAA,EAAA;AAGb,SAAIL,EAAS,WACJe,EAAaf,EAAS,UAAU;AAAA,IACrC,WAAAC;AAAA,EAAA,CACD,IACQG,KAAQJ,EAAS,SAAS,WAEjC,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAAhB;AAAA,MACA,UAAAD;AAAA,MACA,MAAAG;AAAA,MACA,MAAAC;AAAA,MACA,YAAAE;AAAA,MACA,cAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,WAAAC;AAAA,IAAA;AAAA,EAAA,IAGKP,KAAa,CAACE,IAErB,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,MAAMlB,EAAS,SAASK,KAAWA,EAAQL,EAAS,KAAK;AAAA,MAClE,WAAWa;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,iBACZ,UAAAhB,KACC,gBAAAgB;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,4BAAWC,GAAA,EAAoB,MAAMpB,EAAS,WAAWA,EAAS,SAAS,IAAI;AAAA,YAE9E,UAAAA,EAAS;AAAA,UAAA;AAAA,QAAA,GAGhB;AAAA,QACCG,EAAK,SAASO,KAAcC,KAC3B,gBAAAK,EAACG,GAAA,EAAQ,WAAU,UAAS,UAAU,gBAAAH,EAACI,GAAA,EAAoB,MAAMT,GAAY,GAC3E,4BAAC,KAAA,EAAE,WAAWC,GAAgB,GAChC;AAAA,QAED,CAACT,EAAK,SAASA,EAAK,UACnB,gBAAAa,EAACG,GAAA,EAAQ,WAAU,UAAS,UAAU,gBAAAH,EAACI,GAAA,EAAoB,MAAMjB,EAAK,OAAA,CAAQ,GAC5E,UAAA,gBAAAa,EAAC,KAAA,EAAE,WAAW,GAAGb,EAAK,OAAO,CAAC,EAAE,YAAA,CAAa,GAAGA,EAAK,OAAO,MAAM,CAAC,CAAC,IAAI,GAC1E;AAAA,QAEDK,KACC,gBAAAQ,EAACK,GAAA,EAAM,SAAS,CAAAC,MAAKb,KAAaA,EAAUa,GAAGnB,CAAI,GAAG,WAAU,eAAA,CAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAI5EH,EAAS,SAAS,SACpB,gBAAAgB,EAACO,GAAA,EAAc,WAAAtB,GAAsB,UAAAD,EAAA,CAAoB,IACvDA,EAAS,SAAS,UAEzB,gBAAAgB,EAAC,MAAA,EAAG,eAAahB,EAAS,UAAU,WAAWa,GAC5C,UAAAb,EAAS,MAAM,IAAI,CAACwB,GAAWC,MAC9B,gBAAAT;AAAA,IAACG;AAAA,IAAA;AAAA,MAEC,UAAU,gBAAAH,EAACI,GAAA,EAAoB,MAAMI,EAAU,SAAS;AAAA,MAEvD,UAAAA,EAAU;AAAA,IAAA;AAAA,IAHNA,EAAU,UAAUC;AAAA,EAAA,CAK5B,GACH,IAEO,MAAM,QAAQzB,EAAS,KAAK,sBAElC,MAAA,EAAG,eAAaA,EAAS,UAAU,WAAWa,GAC7C,UAAA,gBAAAG;AAAA,IAACU;AAAA,IAAA;AAAA,MACC,aAAaC,EAAe3B,EAAS,IAAI;AAAA,MACzC,QAAQA,EAAS;AAAA,MACjB,YAAU;AAAA,IAAA;AAAA,EAAA,GAEd,IAEOA,EAAS,SAAS,SAEzB,gBAAAgB,EAAC,QAAG,eAAahB,EAAS,UAAU,WAAWa,GAC7C,UAAA,gBAAAG,EAACG,GAAA,EAAQ,UAAU,gBAAAH,EAACI,KAAoB,MAAMpB,EAAS,MAAA,CAAO,GAC5D,UAAA,gBAAAgB,EAAC,QAAA,EAAM,YAAYhB,EAAS,KAAK,EAAA,CAAE,EAAA,CACrC,EAAA,CACF,IAEOA,EAAS,SAAS,WACpB,OACEA,EAAS,SAAS,cAEzB,gBAAAgB,EAAC,QAAG,eAAahB,EAAS,UAAU,WAAWa,GAC5C,YAAS,MAAA,CACZ,IAIA,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAahB,KAAA,gBAAAA,EAAU;AAAA,MACvB,WAAWa;AAAA,MACX,SAAS,MAAMb,EAAS,SAASK,KAAWA,EAAQL,EAAS,KAAK;AAAA,MAElE,UAAA,gBAAAgB;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,4BAAWC,GAAA,EAAoB,MAAMpB,EAAS,WAAWA,EAAS,SAAS,IAAI;AAAA,UAE9E,UAAAA,EAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAIR;AAEAD,EAAU,YAAY;AAAA,EACpB,UAAU6B,EAAU,OAAO;AAAA,EAC3B,WAAWA,EAAU;AAAA,EACrB,WAAWA,EAAU;AAAA,EACrB,MAAMA,EAAU,UAAU,CAACA,EAAU,QAAQA,EAAU,IAAI,CAAC;AAAA,EAC5D,MAAMA,EAAU,UAAU,CAACA,EAAU,QAAQA,EAAU,IAAI,CAAC;AAAA,EAC5D,SAASA,EAAU;AAAA,EACnB,YAAYA,EAAU;AAAA,EACtB,cAAcA,EAAU;AAAA,EACxB,kBAAkBA,EAAU;AAAA,EAC5B,WAAWA,EAAU;AACvB;"}

package/dist/components/TabsSlider/TabsSlider.d.ts

@@ -0,0 +1,20 @@
+export default TabsSlider;
+declare function TabsSlider({ fontSize, initialTab, isDetailsPopUp, onClick, skipLink, tabsList }: {
+    fontSize?: string;
+    initialTab?: string;
+    isDetailsPopUp?: boolean;
+    onClick?: () => void;
+    skipLink?: boolean;
+    tabsList: any;
+}): JSX.Element;
+declare namespace TabsSlider {
+    namespace propTypes {
+        let fontSize: any;
+        let initialTab: any;
+        let isDetailsPopUp: any;
+        let onClick: any;
+        let skipLink: any;
+        let tabsList: any;
+    }
+}
+//# sourceMappingURL=TabsSlider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabsSlider.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TabsSlider/TabsSlider.jsx"],"names":[],"mappings":";AA+BA;;;;;;;gBAsMC"}

package/dist/components/TabsSlider/TabsSlider.mjs

@@ -0,0 +1,131 @@
+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 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: k = !1,
+  onClick: L = () => {
+  },
+  skipLink: D = !1,
+  tabsList: b
+}) => {
+  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",
+    R && "tabs-slider__arrow_hidden",
+    f === 0 && "tabs-slider__arrow_disabled"
+  ), F = C(
+    "tabs-slider__arrow",
+    "tabs-slider__arrow_right",
+    R && "tabs-slider__arrow_hidden",
+    A && "tabs-slider__arrow_disabled"
+  ), x = (e) => {
+    var r, o, a, _, p, y;
+    let t;
+    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 - ((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 && 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);
+  };
+  w(() => (window.addEventListener("resize", u), () => window.removeEventListener("resize", u)), [u]), w(() => (window.addEventListener("resize", h), () => window.removeEventListener("resize", h)), [h]), w(() => {
+    u();
+  }, [b, u]), w(() => {
+    h();
+  }, [h]), w(() => {
+    var e;
+    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: () => {
+          x(!1);
+        },
+        children: /* @__PURE__ */ i(N, {})
+      }
+    ),
+    /* @__PURE__ */ i("div", { className: "content-menu__tabs-wrapper", ref: s, children: /* @__PURE__ */ i(
+      "div",
+      {
+        ref: n,
+        className: "content-menu__tabs",
+        style: {
+          transform: `translateX(${-f}px)`
+        },
+        children: b.map((e) => {
+          var r;
+          const t = C(
+            "content-menu__tab",
+            `content-menu__tab-${P}`,
+            d === e.id && "content-menu__tab_active"
+          );
+          return !e.hidden && (D ? /* @__PURE__ */ i(
+            "div",
+            {
+              className: t,
+              "data-tab": e.id,
+              onClick: () => E(e.id),
+              children: T(e)
+            },
+            e.id
+          ) : /* @__PURE__ */ i(
+            X,
+            {
+              to: K(
+                `${(r = window.location.pathname) == null ? void 0 : r.replace(/^$|([^/]+$)/, e.id)}${j.search ?? ""}${e.query ?? ""}`
+              ),
+              className: t,
+              "data-tab": e.id,
+              onClick: () => E(e.id),
+              children: T(e)
+            },
+            e.id
+          ));
+        })
+      }
+    ) }),
+    /* @__PURE__ */ i("div", { className: F, onClick: () => x(!0), children: /* @__PURE__ */ i(N, {}) })
+  ] });
+};
+Q.propTypes = {
+  fontSize: W.oneOf(["sm", "md", "lg"]),
+  initialTab: W.string,
+  isDetailsPopUp: W.bool,
+  onClick: W.func,
+  skipLink: W.bool,
+  tabsList: J.isRequired
+};
+export {
+  Q as default
+};
+//# sourceMappingURL=TabsSlider.mjs.map

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

@@ -0,0 +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  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/Tip/Tip.d.ts

@@ -0,0 +1,14 @@
+export default Tip;
+declare function Tip({ className, text, withExclamationMark }: {
+    className?: string;
+    text: any;
+    withExclamationMark?: boolean;
+}): JSX.Element;
+declare namespace Tip {
+    namespace propTypes {
+        let className: any;
+        let text: any;
+        let withExclamationMark: any;
+    }
+}
+//# sourceMappingURL=Tip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tip/Tip.jsx"],"names":[],"mappings":";AA6BA;;;;gBA2FC"}

package/dist/components/Tip/Tip.mjs

@@ -0,0 +1,67 @@
+import { jsxs as I, jsx as s } from "react/jsx-runtime";
+import { useState as x, useMemo as f, useRef as _, useCallback as M, useEffect as E } from "react";
+import i from "prop-types";
+import { CSSTransition as O } from "react-transition-group";
+import L from "classnames";
+import { createPortal as $ } from "react-dom";
+import { getScssVariableValue as d } from "../../utils/common.util.mjs";
+import k from "../../images/question-mark.svg.mjs";
+import A from "../../images/exclamation-mark.svg.mjs";
+/* empty css          */
+const B = ({ className: y = "", text: u, withExclamationMark: C = !1 }) => {
+  const [n, h] = x(!1), [N, R] = x("tip_top tip_left"), e = f(() => parseInt(d("--tipArrowLength")), []), r = f(() => parseInt(d("--tipArrowOffset")), []), c = f(() => parseInt(d("--tipIconLength")), []), S = 40, a = _(), o = _(), T = L(y, "tip-container"), b = L(
+    "tip",
+    N,
+    u.length <= S ? "tip_small" : "tip_big"
+  ), l = M(() => {
+    h(!0);
+  }, []);
+  E(() => {
+    if (n) {
+      const t = a.current.getBoundingClientRect(), p = o.current.getBoundingClientRect(), v = t.left > p.width - r ? "tip_left" : "tip_right", w = t.top > p.height + e ? "tip_top" : "tip_bottom";
+      if (R(`${w} ${v}`), v === "tip_left") {
+        const m = r + (c + e) / 2;
+        o.current.style.left = `${t.left - (p.width - m)}px`;
+      } else {
+        const m = r - (c - e) / 2;
+        o.current.style.left = `${t.left - m}px`;
+      }
+      o.current.style.top = w === "tip_top" ? `${t.top - p.height - e}px` : `${t.bottom + e}px`;
+    }
+  }, [e, r, c, n]);
+  const g = () => {
+    h(!1);
+  };
+  return E(() => {
+    const t = a.current;
+    if (a.current)
+      return t.addEventListener("mouseenter", l), t.addEventListener("mouseleave", g), () => {
+        t.removeEventListener("mouseenter", l), t.removeEventListener("mouseleave", g);
+      };
+  }, [l, n]), /* @__PURE__ */ I("div", { "data-testid": "tip", className: T, children: [
+    /* @__PURE__ */ s("div", { ref: a, className: "tip-wrapper", children: C ? /* @__PURE__ */ s(A, { "data-testid": "tip-icon" }) : /* @__PURE__ */ s(k, { "data-testid": "tip-icon" }) }),
+    $(
+      /* @__PURE__ */ s(
+        O,
+        {
+          nodeRef: o,
+          in: n,
+          timeout: 200,
+          classNames: "fade",
+          unmountOnExit: !0,
+          children: /* @__PURE__ */ s("div", { ref: o, "data-testid": "tip-text", className: b, children: u })
+        }
+      ),
+      document.getElementById("overlay_container")
+    )
+  ] });
+};
+B.propTypes = {
+  className: i.string,
+  text: i.oneOfType([i.string, i.element]).isRequired,
+  withExclamationMark: i.bool
+};
+export {
+  B as default
+};
+//# sourceMappingURL=Tip.mjs.map

package/dist/components/Tip/Tip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tip.mjs","sources":["../../../src/lib/components/Tip/Tip.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, { useState, useRef, useEffect, useCallback, useMemo } from 'react'\nimport PropTypes from 'prop-types'\nimport { CSSTransition } from 'react-transition-group'\nimport classnames from 'classnames'\nimport { createPortal } from 'react-dom'\n\nimport { getScssVariableValue } from '../../utils/common.util'\n\nimport QuestionMarkIcon from '../../images/question-mark.svg?react'\nimport ExclamationMarkIcon from '../../images/exclamation-mark.svg?react'\n\nimport './tip.scss'\n\nconst Tip = ({ className = '', text, withExclamationMark = false }) => {\n  const [isShow, setIsShow] = useState(false)\n  const [tipClassName, setTipClassName] = useState('tip_top tip_left')\n\n  const arrowLength = useMemo(() => parseInt(getScssVariableValue('--tipArrowLength')), [])\n  const arrowOffset = useMemo(() => parseInt(getScssVariableValue('--tipArrowOffset')), [])\n  const iconLength = useMemo(() => parseInt(getScssVariableValue('--tipIconLength')), [])\n\n  const minTextLength = 40\n\n  const iconRef = useRef()\n  const tipBodyRef = useRef()\n\n  const tipContainerClassNames = classnames(className, 'tip-container')\n  const tipClassNames = classnames(\n    'tip',\n    tipClassName,\n    text.length <= minTextLength ? 'tip_small' : 'tip_big'\n  )\n\n  const handleMouseEnter = useCallback(() => {\n    setIsShow(true)\n  }, [])\n\n  useEffect(() => {\n    if (isShow) {\n      const iconRect = iconRef.current.getBoundingClientRect()\n      const tipRect = tipBodyRef.current.getBoundingClientRect()\n      const widthPosition = iconRect.left > tipRect.width - arrowOffset ? 'tip_left' : 'tip_right'\n      const heightPosition = iconRect.top > tipRect.height + arrowLength ? 'tip_top' : 'tip_bottom'\n\n      setTipClassName(`${heightPosition} ${widthPosition}`)\n\n      if (widthPosition === 'tip_left') {\n        const computedArrowOffset = arrowOffset + (iconLength + arrowLength) / 2\n        tipBodyRef.current.style.left = `${iconRect.left - (tipRect.width - computedArrowOffset)}px`\n      } else {\n        const computedArrowOffset = arrowOffset - (iconLength - arrowLength) / 2\n        tipBodyRef.current.style.left = `${iconRect.left - computedArrowOffset}px`\n      }\n\n      tipBodyRef.current.style.top =\n        heightPosition === 'tip_top'\n          ? `${iconRect.top - tipRect.height - arrowLength}px`\n          : `${iconRect.bottom + arrowLength}px`\n    }\n  }, [arrowLength, arrowOffset, iconLength, isShow])\n\n  const handleMouseLeave = () => {\n    setIsShow(false)\n  }\n\n  useEffect(() => {\n    const node = iconRef.current\n\n    if (iconRef.current) {\n      node.addEventListener('mouseenter', handleMouseEnter)\n      node.addEventListener('mouseleave', handleMouseLeave)\n\n      return () => {\n        node.removeEventListener('mouseenter', handleMouseEnter)\n        node.removeEventListener('mouseleave', handleMouseLeave)\n      }\n    }\n  }, [handleMouseEnter, isShow])\n\n  return (\n    <div data-testid=\"tip\" className={tipContainerClassNames}>\n      <div ref={iconRef} className=\"tip-wrapper\">\n        {withExclamationMark ? (\n          <ExclamationMarkIcon data-testid=\"tip-icon\" />\n        ) : (\n          <QuestionMarkIcon data-testid=\"tip-icon\" />\n        )}\n      </div>\n      {createPortal(\n        <CSSTransition\n          nodeRef={tipBodyRef}\n          in={isShow}\n          timeout={200}\n          classNames=\"fade\"\n          unmountOnExit\n        >\n          <div ref={tipBodyRef} data-testid=\"tip-text\" className={tipClassNames}>\n            {text}\n          </div>\n        </CSSTransition>,\n        document.getElementById('overlay_container')\n      )}\n    </div>\n  )\n}\n\nTip.propTypes = {\n  className: PropTypes.string,\n  text: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n  withExclamationMark: PropTypes.bool\n}\n\nexport default Tip\n"],"names":["Tip","className","text","withExclamationMark","isShow","setIsShow","useState","tipClassName","setTipClassName","arrowLength","useMemo","getScssVariableValue","arrowOffset","iconLength","minTextLength","iconRef","useRef","tipBodyRef","tipContainerClassNames","classnames","tipClassNames","handleMouseEnter","useCallback","useEffect","iconRect","tipRect","widthPosition","heightPosition","computedArrowOffset","handleMouseLeave","node","jsxs","jsx","ExclamationMarkIcon","QuestionMarkIcon","createPortal","CSSTransition","PropTypes"],"mappings":"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"}

package/dist/components/Tip/Tip.stories.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    export let title: string;
+    export { Tip as component };
+}
+export default _default;
+export const Normal: any;
+//# sourceMappingURL=Tip.stories.d.ts.map

package/dist/components/Tip/Tip.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tip.stories.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tip/Tip.stories.js"],"names":[],"mappings":";;;;;AA+BA,yBAAuC"}

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

@@ -0,0 +1,24 @@
+export default Tooltip;
+declare function Tooltip({ children, className, tooltipBodyClassName, hidden, id, renderChildAsHtml, template, textShow }: {
+    children?: string;
+    className?: string;
+    tooltipBodyClassName?: string;
+    hidden?: boolean;
+    id?: string;
+    renderChildAsHtml?: boolean;
+    template: any;
+    textShow?: boolean;
+}): JSX.Element;
+declare namespace Tooltip {
+    namespace propTypes {
+        let children: any;
+        let className: any;
+        let tooltipBodyClassName: any;
+        let hidden: any;
+        let id: any;
+        let renderChildAsHtml: any;
+        let template: any;
+        let textShow: any;
+    }
+}
+//# sourceMappingURL=Tooltip.d.ts.map

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

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