@situaction/traq-ui-ste 1.2.34 → 1.2.35

package/dist/components/list/list-controls/ListControls.js

@@ -1,8 +1,9 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { Button as p } from "../../button/Button.js";
 import "react";
 import "../../icon-button/IconButton.js";
 import { Checkbox as _ } from "../../checkbox/Checkbox.js";
+import "../../../index-CxdrhfJv.mjs";
 import "../../accordion/Accordion.js";
 import { Icon as a } from "../../icon/Icon.js";
 import "../../modal/Modal.js";
@@ -15,19 +16,19 @@ const u = "_list_1nihg_6", f = "_children_1nihg_29", g = "_selected_1nihg_43", k
   children: f,
   selected: g,
   reset: k
-}, S = ({ listChildren: l, handleItemClick: d, selectedItems: m, onReset: r, labelButtonReset: n }) => /* @__PURE__ */ o("div", { className: i.list, children: [
+}, X = ({ listChildren: l, handleItemClick: d, selectedItems: m, onReset: r, labelButtonReset: n }) => /* @__PURE__ */ c("div", { className: i.list, children: [
   /* @__PURE__ */ e("div", { children: l.map((t, h) => {
     if (t.key == null) return null;
-    const s = t.key, c = m.includes(s);
-    return /* @__PURE__ */ o(
+    const s = t.key, o = m.includes(s);
+    return /* @__PURE__ */ c(
       "div",
       {
-        className: `${c ? i.selected : ""} ${i.children}`,
+        className: `${o ? i.selected : ""} ${i.children}`,
         children: [
           /* @__PURE__ */ e(
             _,
             {
-              checked: c,
+              checked: o,
               onChange: () => d(s)
             }
           ),
@@ -48,5 +49,5 @@ const u = "_list_1nihg_6", f = "_children_1nihg_29", g = "_selected_1nihg_43", k
   ) })
 ] });
 export {
-  S as ListControls
+  X as ListControls
 };

package/dist/components/list/nested-list/NestedList.js

@@ -1,8 +1,9 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
 import { NestedListItem as l } from "./item/NestedListItem.js";
 import { Button as c } from "../../button/Button.js";
 import "react";
 import "../../icon-button/IconButton.js";
+import "../../../index-CxdrhfJv.mjs";
 import "../../accordion/Accordion.js";
 import { Icon as a } from "../../icon/Icon.js";
 import "../../modal/Modal.js";
@@ -10,13 +11,13 @@ import "../../carousel/Carousel.js";
 import "../../carousel/FadeCarousel.js";
 import "../../theme/ThemeContext.js";
 import '../../../styles/Size.css';import '../../../styles/NestedList.css';/* empty css                      */
-const h = "_nestedlist_7rnd3_6", _ = "_reset_7rnd3_18", i = {
+const h = "_nestedlist_7rnd3_6", _ = "_reset_7rnd3_18", e = {
   nestedlist: h,
   reset: _
-}, F = ({ items: s, align: o = "right", onReset: r, children: m, labelButtonReset: e }) => /* @__PURE__ */ p("div", { className: i.nestedlist, children: [
-  s.map((n, d) => /* @__PURE__ */ t(l, { ...n, align: o ?? "right", children: m }, d)),
-  r && e && /* @__PURE__ */ t("div", { className: i.reset, children: /* @__PURE__ */ t(c, { mode: "ghost", label: e, onClick: r, childrenLeft: /* @__PURE__ */ t(a, { icon: "FunnelX" }) }) })
+}, X = ({ items: s, align: o = "right", onReset: r, children: m, labelButtonReset: i }) => /* @__PURE__ */ d("div", { className: e.nestedlist, children: [
+  s.map((n, p) => /* @__PURE__ */ t(l, { ...n, align: o ?? "right", children: m }, p)),
+  r && i && /* @__PURE__ */ t("div", { className: e.reset, children: /* @__PURE__ */ t(c, { mode: "ghost", label: i, onClick: r, childrenLeft: /* @__PURE__ */ t(a, { icon: "FunnelX" }) }) })
 ] });
 export {
-  F as NestedList
+  X as NestedList
 };

package/dist/components/list/nested-list/item/NestedListItem.js

@@ -3,6 +3,7 @@ import { useState as g, useRef as u, useLayoutEffect as z } from "react";
 import "../../../button/Button.js";
 import "../../../icon-button/IconButton.js";
 import { TagCounter as B } from "../../../tag-counter/TagCounter.js";
+import "../../../../index-CxdrhfJv.mjs";
 import "../../../accordion/Accordion.js";
 import { Icon as l } from "../../../icon/Icon.js";
 import { Modal as L } from "../../../modal/Modal.js";
@@ -15,7 +16,7 @@ const S = "_nestedlist_2r2ga_6", $ = "_items_2r2ga_21", j = "_textSmall_2r2ga_28
   items: $,
   textSmall: j,
   modal: v
-}, D = ({
+}, G = ({
   icon: a,
   title: h,
   numberSelect: i,
@@ -23,13 +24,13 @@ const S = "_nestedlist_2r2ga_6", $ = "_items_2r2ga_21", j = "_textSmall_2r2ga_28
   onClick: m,
   align: e = "right"
 }) => {
-  const [c, d] = g(!1), r = u(null), o = u(null), [x, C] = g({
+  const [c, p] = g(!1), r = u(null), o = u(null), [x, C] = g({
     top: "0px"
   });
   z(() => {
-    var p;
+    var d;
     if (r.current && o.current) {
-      const N = o.current.getBoundingClientRect(), f = r.current.getBoundingClientRect().width, M = ((p = o.current.parentElement) == null ? void 0 : p.getBoundingClientRect().top) || 0;
+      const N = o.current.getBoundingClientRect(), f = r.current.getBoundingClientRect().width, M = ((d = o.current.parentElement) == null ? void 0 : d.getBoundingClientRect().top) || 0;
       C({
         top: `${N.top - M}px`,
         ...e === "right" ? { right: `-${f + 6}px` } : { left: `-${f + 6}px` }
@@ -37,7 +38,7 @@ const S = "_nestedlist_2r2ga_6", $ = "_items_2r2ga_21", j = "_textSmall_2r2ga_28
     }
   }, [c, e]);
   const R = () => {
-    d(!0), m && m();
+    p(!0), m && m();
   };
   return /* @__PURE__ */ n(w, { children: [
     /* @__PURE__ */ n(
@@ -63,7 +64,7 @@ const S = "_nestedlist_2r2ga_6", $ = "_items_2r2ga_21", j = "_textSmall_2r2ga_28
         ref: r,
         className: s.modal,
         open: c,
-        onClose: () => d(!1),
+        onClose: () => p(!1),
         position: x,
         children: _
       }
@@ -71,5 +72,5 @@ const S = "_nestedlist_2r2ga_6", $ = "_items_2r2ga_21", j = "_textSmall_2r2ga_28
   ] });
 };
 export {
-  D as NestedListItem
+  G as NestedListItem
 };

package/dist/components/menu/Menu.js

@@ -2,6 +2,7 @@ import { jsx as n, jsxs as d } from "react/jsx-runtime";
 import { useState as c, useRef as M, useEffect as B } from "react";
 import { Button as $ } from "../button/Button.js";
 import { IconButton as f } from "../icon-button/IconButton.js";
+import "../../index-CxdrhfJv.mjs";
 import "../accordion/Accordion.js";
 import { Icon as N } from "../icon/Icon.js";
 import { Modal as W } from "../modal/Modal.js";
@@ -27,7 +28,7 @@ const y = "_fullHeight_11eub_15", O = "_fullWidth_11eub_18", j = "_open_11eub_21
   flexVerticalBetweenStart: Y,
   flexHorizontalCenter: Z,
   flexVerticalBetweenCenter: ee
-}, fe = ({ menuItems: s = [], menuParams: a = [], shortLogo: m, logo: p, isOpen: h, defaultOpen: I = !1, selectedId: u }) => {
+}, _e = ({ menuItems: s = [], menuParams: a = [], shortLogo: m, logo: p, isOpen: h, defaultOpen: I = !1, selectedId: u }) => {
   const [l, g] = c(I ?? !1), [b, x] = c(u ?? (s.length > 0 ? s[0].id : null)), w = M(null), [H, _] = c(!1), [L, C] = c(!1), [k, E] = c(null), [z, R] = c({}), V = M(null);
   B(() => {
     u != null && x(u);
@@ -118,5 +119,5 @@ const y = "_fullHeight_11eub_15", O = "_fullWidth_11eub_18", j = "_open_11eub_21
   ] }) });
 };
 export {
-  fe as Menu
+  _e as Menu
 };

package/dist/components/panel/side-panel-header/SidePanelHeader.js

@@ -2,6 +2,7 @@ import { jsxs as C, jsx as e } from "react/jsx-runtime";
 import "../../button/Button.js";
 import "react";
 import { IconButton as i } from "../../icon-button/IconButton.js";
+import "../../../index-CxdrhfJv.mjs";
 import "../../accordion/Accordion.js";
 import { Icon as t } from "../../icon/Icon.js";
 import "../../modal/Modal.js";
@@ -9,11 +10,11 @@ import "../../carousel/Carousel.js";
 import "../../carousel/FadeCarousel.js";
 import "../../theme/ThemeContext.js";
 import '../../../styles/Size.css';import '../../../styles/SidePanelHeader.css';/* empty css                      */
-const c = "_sidePanelHeader_72g7b_6", m = "_buttonArrow_72g7b_13", h = "_title_72g7b_20", r = {
+const c = "_sidePanelHeader_72g7b_6", m = "_buttonArrow_72g7b_13", p = "_title_72g7b_20", r = {
   sidePanelHeader: c,
   buttonArrow: m,
-  title: h
-}, y = ({
+  title: p
+}, H = ({
   title: s,
   icon: o,
   onClickBack: L,
@@ -75,5 +76,5 @@ const c = "_sidePanelHeader_72g7b_6", m = "_buttonArrow_72g7b_13", h = "_title_7
   )
 ] });
 export {
-  y as SidePanelHeader
+  H as SidePanelHeader
 };

package/dist/components/select/Select.js

@@ -3,6 +3,7 @@ import { useState as y, useRef as v, useEffect as d } from "react";
 import { Button as W } from "../button/Button.js";
 import { Input as H } from "../input/Input.js";
 import { IconButton as J } from "../icon-button/IconButton.js";
+import "../../index-CxdrhfJv.mjs";
 import "../accordion/Accordion.js";
 import { Icon as _ } from "../icon/Icon.js";
 import { Modal as Q } from "../modal/Modal.js";
@@ -19,7 +20,7 @@ const X = "_selectContainer_133eb_54", Y = "_children_133eb_61", Z = "_active_13
   itemLabel: ee,
   searchWrapper: te,
   noResults: ne
-}, pe = ({
+}, ve = ({
   selected: k,
   size: g = "m",
   listItem: h,
@@ -215,5 +216,5 @@ const X = "_selectContainer_133eb_54", Y = "_children_133eb_61", Z = "_active_13
   ] });
 };
 export {
-  pe as Select
+  ve as Select
 };

package/dist/components/select-filter-input-tags/SelectFilterInputTags.js

@@ -3,15 +3,16 @@ import "../button/Button.js";
 import "react";
 import { Input as p } from "../input/Input.js";
 import "../icon-button/IconButton.js";
+import "../../index-CxdrhfJv.mjs";
 import "../accordion/Accordion.js";
 import "../modal/Modal.js";
 import "../carousel/Carousel.js";
 import "../carousel/FadeCarousel.js";
 import "../theme/ThemeContext.js";
 import '../../styles/Size.css';import '../../styles/SelectFilterInputTags.css';/* empty css                   */
-const a = "_listTagSelect_2v3fb_6", c = {
-  listTagSelect: a
-}, y = ({ children: o, inputValue: r, handleInputChange: s, handleKeyDown: i }) => /* @__PURE__ */ e("div", { className: c.listTagSelect, children: /* @__PURE__ */ l("div", { children: [
+const m = "_listTagSelect_2v3fb_6", a = {
+  listTagSelect: m
+}, _ = ({ children: o, inputValue: r, handleInputChange: s, handleKeyDown: i }) => /* @__PURE__ */ e("div", { className: a.listTagSelect, children: /* @__PURE__ */ l("div", { children: [
   o,
   /* @__PURE__ */ e("div", { className: "flexAutoSize", children: /* @__PURE__ */ e(
     p,
@@ -30,5 +31,5 @@ const a = "_listTagSelect_2v3fb_6", c = {
   ) })
 ] }) });
 export {
-  y as SelectFilterInputTags
+  _ as SelectFilterInputTags
 };

package/dist/components/select-multi-items/SelectMultiItems.js

@@ -4,6 +4,7 @@ import { n as v, s as C, a as x } from "../../X.es-BEJ-zMPl.mjs";
 import { Button as M } from "../button/Button.js";
 import "../icon-button/IconButton.js";
 import { TagCounter as w } from "../tag-counter/TagCounter.js";
+import "../../index-CxdrhfJv.mjs";
 import "../accordion/Accordion.js";
 import { Modal as y } from "../modal/Modal.js";
 import "../carousel/Carousel.js";
@@ -14,16 +15,16 @@ const N = "_relative_w7e9a_6", R = "_tagCounter_w7e9a_10", b = "_modal_w7e9a_18"
   relative: N,
   tagCounter: R,
   modal: b
-}, D = ({
+}, E = ({
   label: a,
   iconButton: l,
   selectedCount: t = 0,
-  onClearSelection: n,
-  children: m,
+  onClearSelection: m,
+  children: n,
   size: c = "m",
   align: p = "right"
 }) => {
-  const [e, i] = _(!1), d = h(null), f = () => i(!1), g = t > 0 ? /* @__PURE__ */ o(v, { onClick: n }) : e ? /* @__PURE__ */ o(C, {}) : /* @__PURE__ */ o(x, {}), u = t > 0 ? "secondary" : "tertiary";
+  const [e, i] = _(!1), d = h(null), f = () => i(!1), g = t > 0 ? /* @__PURE__ */ o(v, { onClick: m }) : e ? /* @__PURE__ */ o(C, {}) : /* @__PURE__ */ o(x, {}), u = t > 0 ? "secondary" : "tertiary";
   return /* @__PURE__ */ s("div", { className: r.relative, children: [
     /* @__PURE__ */ o(
       M,
@@ -39,9 +40,9 @@ const N = "_relative_w7e9a_6", R = "_tagCounter_w7e9a_10", b = "_modal_w7e9a_18"
         onClick: () => i(!e)
       }
     ),
-    /* @__PURE__ */ o(y, { ref: d, open: e, onClose: f, className: r.modal, position: { top: "calc(100% + 6px)", ...p === "right" ? { left: "0" } : { right: "0" } }, children: m })
+    /* @__PURE__ */ o(y, { ref: d, open: e, onClose: f, className: r.modal, position: { top: "calc(100% + 6px)", ...p === "right" ? { left: "0" } : { right: "0" } }, children: n })
   ] });
 };
 export {
-  D as SelectMultiItems
+  E as SelectMultiItems
 };

package/dist/components/switch/Switch.js

@@ -2,6 +2,7 @@ import { jsxs as n, jsx as c } from "react/jsx-runtime";
 import { useState as $, useEffect as b } from "react";
 import "../button/Button.js";
 import { IconButton as k } from "../icon-button/IconButton.js";
+import "../../index-CxdrhfJv.mjs";
 import "../accordion/Accordion.js";
 import { Icon as g } from "../icon/Icon.js";
 import "../modal/Modal.js";
@@ -20,7 +21,7 @@ const y = "_slider_1mxgk_21", I = "_s_1mxgk_6", N = "_m_1mxgk_58", S = "_l_1mxgk
   wrapper: E,
   button: R,
   active: T
-}, O = ({
+}, P = ({
   size: i = "m",
   variant: w = "classic",
   checked: l,
@@ -92,5 +93,5 @@ const y = "_slider_1mxgk_21", I = "_s_1mxgk_6", N = "_m_1mxgk_58", S = "_l_1mxgk
   ] });
 };
 export {
-  O as Switch
+  P as Switch
 };

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

@@ -15,8 +15,8 @@ export type TooltipProps = {
 };
 /**
  * Tooltip component that shows additional information when hovering over an element.
- * The tooltip can be positioned in various ways relative to the element, and its content
- * can be customized. It also allows control over the gap and padding around the tooltip.
+ * Renders via a portal to escape overflow/scroll containers, and automatically
+ * adjusts position to stay within the viewport.
  */
 export declare const Tooltip: FC<TooltipProps>;
 export default Tooltip;

package/dist/components/tooltip/Tooltip.js

@@ -1,44 +1,92 @@
-import { jsxs as g, jsx as b } from "react/jsx-runtime";
-import { useState as d } from "react";
-import '../../styles/Tooltip.css';const y = "_tooltip_19b26_30", s = {
-  "tooltip-container": "_tooltip-container_19b26_30",
-  tooltip: y
-}, _ = ({ children: l, content: a, position: i = "top", gap: n = "xs-5", padding: r = "xs-5" }) => {
-  const [p, o] = d(!1), c = [
-    s.tooltip,
-    "labelMedium",
-    "fontWeight-600"
-  ].filter(Boolean).join(" "), m = {
-    "--dynamic-gap": `var(--spacing-${n})`,
-    "--dynamic-padding": `var(--spacing-${r})`
-  }, f = () => {
-    const t = "calc(100% + var(--dynamic-gap))", e = {
-      top: { bottom: t, left: "50%", transform: "translateX(-50%)" },
-      topLeft: { bottom: t, right: "100%" },
-      topRight: { bottom: t, left: "100%" },
-      bottom: { top: t, left: "50%", transform: "translateX(-50%)" },
-      bottomLeft: { top: t, right: "100%" },
-      bottomRight: { top: t, left: "100%" },
-      left: { top: "50%", right: t, transform: "translateY(-50%)" },
-      right: { top: "50%", left: t, transform: "translateY(-50%)" }
-    };
-    return { ...e[i] || e.top };
-  };
-  return /* @__PURE__ */ g(
+import { jsxs as S, jsx as c } from "react/jsx-runtime";
+import { useState as w, useRef as x, useCallback as L, useLayoutEffect as T } from "react";
+import { r as j } from "../../index-CxdrhfJv.mjs";
+import '../../styles/Tooltip.css';const I = "_tooltip_ymexm_30", y = {
+  "tooltip-container": "_tooltip-container_ymexm_30",
+  tooltip: I
+}, W = {
+  "xs-5": 6,
+  "xs-3": 10,
+  xs: 14,
+  "m-1": 18
+}, r = 8, N = ({ children: v, content: k, position: u = "top", gap: M = "xs-5", padding: _ = "xs-5" }) => {
+  const [l, g] = w(!1), [E, h] = w({ visibility: "hidden" }), n = x(null), d = x(null), o = W[M] ?? 6, f = L((t, e) => {
+    const a = window.innerWidth, m = window.innerHeight;
+    let s, i;
+    switch (u) {
+      case "top":
+        s = t.top - e.height - o, i = t.left + t.width / 2 - e.width / 2;
+        break;
+      case "topLeft":
+        s = t.top - e.height - o, i = t.right - e.width;
+        break;
+      case "topRight":
+        s = t.top - e.height - o, i = t.left;
+        break;
+      case "bottom":
+        s = t.bottom + o, i = t.left + t.width / 2 - e.width / 2;
+        break;
+      case "bottomLeft":
+        s = t.bottom + o, i = t.right - e.width;
+        break;
+      case "bottomRight":
+        s = t.bottom + o, i = t.left;
+        break;
+      case "left":
+        s = t.top + t.height / 2 - e.height / 2, i = t.left - e.width - o;
+        break;
+      case "right":
+        s = t.top + t.height / 2 - e.height / 2, i = t.right + o;
+        break;
+      default:
+        s = t.top - e.height - o, i = t.left + t.width / 2 - e.width / 2;
+    }
+    return i = Math.max(r, Math.min(i, a - e.width - r)), s = Math.max(r, Math.min(s, m - e.height - r)), { position: "fixed", top: s, left: i, visibility: "visible" };
+  }, [u, o]);
+  T(() => {
+    const t = [
+      "--background-tooltip",
+      "--general-border-window",
+      "--general-text-icons",
+      "--shadow-color-minimal"
+    ];
+    if (l && n.current && d.current) {
+      const e = getComputedStyle(n.current), a = t.reduce((i, b) => {
+        const p = e.getPropertyValue(b).trim();
+        return p && (i[b] = p), i;
+      }, {}), m = n.current.getBoundingClientRect(), s = d.current.getBoundingClientRect();
+      h({ ...f(m, s), ...a });
+    }
+  }, [l, f]);
+  const C = () => {
+    h({ visibility: "hidden" }), g(!0);
+  }, V = [y.tooltip, "labelMedium", "fontWeight-600"].join(" "), P = { "--dynamic-padding": `var(--spacing-${_})` };
+  return /* @__PURE__ */ S(
     "div",
     {
-      className: s["tooltip-container"],
-      style: m,
-      onMouseEnter: () => o(!0),
-      onMouseLeave: () => o(!1),
+      ref: n,
+      className: y["tooltip-container"],
+      onMouseEnter: C,
+      onMouseLeave: () => g(!1),
       children: [
-        l,
-        p && /* @__PURE__ */ b("div", { className: c, style: f(), children: a })
+        v,
+        l && j.createPortal(
+          /* @__PURE__ */ c(
+            "div",
+            {
+              ref: d,
+              className: V,
+              style: { ...P, ...E },
+              children: k
+            }
+          ),
+          document.body
+        )
       ]
     }
   );
 };
 export {
-  _ as Tooltip,
-  _ as default
+  N as Tooltip,
+  N as default
 };