impact-nova 2.2.4 → 2.2.6

package/dist/components/flows/filter-strip/filter-tag-list.js

@@ -1,171 +1,187 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import * as C from "react";
-import { HorizontalScroller as S } from "../../layout/horizontal-scroller/horizontal-scroller.js";
-import { TagGroup as z } from "../../primitives/tag-group/tag-group.js";
-import { Tag as k } from "../../primitives/tag/tag.js";
-import { Tooltip as b, TooltipTrigger as w, TooltipContent as y } from "../../feedback/tooltip/tooltip.js";
-import { PopoverContent as $, Popover as O, PopoverTrigger as j } from "../../feedback/popover/popover.js";
-import { Button as P } from "../../primitives/button/button.js";
-import { Checkmark as A, Copy as R, Cross as F } from "impact-nova-icons";
-const T = "whitespace-nowrap bg-accent text-accent-foreground hover:bg-accent/80 border-0 px-2 text-xs font-medium font-['Manrope'] cursor-pointer focus:!ring-inset focus:!ring-offset-0 focus:!ring-brand data-[state=open]:!ring-inset data-[state=open]:!ring-offset-0 data-[state=open]:!ring-brand", I = ({
-  remainingValues: s,
+import { jsx as o, jsxs as r } from "react/jsx-runtime";
+import * as N from "react";
+import { cn as O } from "../../../lib/utils.js";
+import { HorizontalScroller as $ } from "../../layout/horizontal-scroller/horizontal-scroller.js";
+import { TagGroup as A } from "../../primitives/tag-group/tag-group.js";
+import { Tag as C } from "../../primitives/tag/tag.js";
+import { Tooltip as k, TooltipTrigger as T, TooltipContent as z } from "../../feedback/tooltip/tooltip.js";
+import { OverflowTooltip as P } from "../../feedback/tooltip/overflow-tooltip.js";
+import { PopoverContent as j, Popover as R, PopoverTrigger as B } from "../../feedback/popover/popover.js";
+import { Button as F } from "../../primitives/button/button.js";
+import { Checkmark as I, Copy as L, Cross as V } from "impact-nova-icons";
+const S = "whitespace-nowrap bg-accent text-brand hover:bg-accent/80 border-0 px-2 text-xs font-medium font-['Manrope'] cursor-pointer focus:!ring-inset focus:!ring-offset-0 focus:!ring-brand data-[state=open]:!ring-inset data-[state=open]:!ring-offset-0 data-[state=open]:!ring-brand", E = ({
+  remainingValues: a,
   viewAllTrigger: c = "expand",
   onViewAll: h,
-  onItemRemove: u,
-  isRemovable: N,
-  isCopyable: o = !1,
+  onItemRemove: v,
+  isRemovable: f,
+  isCopyable: e = !1,
   externalCopyFunction: m
 }) => {
-  const [i, f] = C.useState(!1), [n, d] = C.useState(null), g = (t, l, a) => {
-    navigator.clipboard.writeText(String(l)), d(a), t.currentTarget.blur(), setTimeout(() => d(null), 1500);
-  }, v = i ? s : s.slice(0, 3), x = s.length > 3, p = () => {
-    c === "custom" ? h?.() : f(!0);
+  const [s, g] = N.useState(!1), [n, d] = N.useState(null), x = (t, l, i) => {
+    navigator.clipboard.writeText(String(l)), d(i), t.currentTarget.blur(), setTimeout(() => d(null), 1500);
+  }, b = s ? a : a.slice(0, 3), w = a.length > 3, u = () => {
+    c === "custom" ? h?.() : g(!0);
   };
-  return /* @__PURE__ */ e(
-    $,
+  return /* @__PURE__ */ o(
+    j,
     {
       className: "w-[200px] p-0 rounded-[8px] bg-canvas-elevated shadow-elevation-floating border-none",
       align: "start",
       sideOffset: 8,
       onOpenAutoFocus: (t) => t.preventDefault(),
       children: /* @__PURE__ */ r("div", { className: "flex flex-col py-2 px-[6px]", children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ o(
           "div",
           {
-            className: `flex flex-col gap-1 mb-2 ${i ? "max-h-[180px] overflow-y-auto" : ""}`,
-            children: v.map((t, l) => /* @__PURE__ */ r(
-              "div",
-              {
-                className: "flex items-center justify-between text-[14px] font-medium leading-[20px] text-foreground px-3 py-2 overflow-hidden hover:bg-secondary rounded group shrink-0",
-                children: [
-                  /* @__PURE__ */ r(b, { children: [
-                    /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "truncate", children: String(t) }) }),
-                    /* @__PURE__ */ e(y, { variant: "tertiary", side: "right", children: String(t) })
-                  ] }),
-                  /* @__PURE__ */ r("div", { className: "flex items-center shrink-0", children: [
-                    o && /* @__PURE__ */ e(
-                      "button",
+            className: `flex flex-col gap-1 mb-2 ${s ? "max-h-[180px] overflow-y-auto" : ""}`,
+            children: b.map((t, l) => {
+              const i = String(t), y = !!(e || f);
+              return /* @__PURE__ */ r(
+                "div",
+                {
+                  className: "group relative shrink-0 overflow-hidden rounded px-3 py-2 text-[14px] font-medium leading-[20px] text-foreground hover:bg-secondary",
+                  children: [
+                    /* @__PURE__ */ o(
+                      P,
                       {
-                        onClick: (a) => {
-                          a.stopPropagation(), m ? m({ e: a, val: t, index: l }) : g(a, t, l);
-                        },
-                        "aria-label": `Copy ${String(t)}`,
-                        className: "ms-2 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-content-icon hover:bg-scrim-hover hover:text-content-secondary opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity",
-                        children: n === l ? /* @__PURE__ */ e(A, { size: 12, className: "text-success" }) : /* @__PURE__ */ e(R, { size: 12 })
+                        triggerClassName: O(
+                          "block min-w-0 w-full truncate",
+                          y && "pe-0 group-hover:pe-10"
+                        ),
+                        content: i,
+                        side: "right",
+                        variant: "tertiary",
+                        children: i
                       }
                     ),
-                    N && /* @__PURE__ */ e(
-                      "button",
-                      {
-                        onClick: (a) => {
-                          a.stopPropagation(), u(t);
-                        },
-                        "aria-label": `Remove ${String(t)}`,
-                        className: "ms-2 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-content-icon hover:bg-scrim-hover hover:text-content-secondary opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity",
-                        children: /* @__PURE__ */ e(F, { size: 12 })
-                      }
-                    )
-                  ] })
-                ]
-              },
-              l
-            ))
+                    y ? /* @__PURE__ */ r("div", { className: "pointer-events-none absolute end-2 top-1/2 z-10 flex -translate-y-1/2 items-center gap-1 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100", children: [
+                      e ? /* @__PURE__ */ o(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: (p) => {
+                            p.stopPropagation(), m ? m({ e: p, val: t, index: l }) : x(p, t, l);
+                          },
+                          "aria-label": `Copy ${i}`,
+                          className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-content-icon hover:bg-scrim-hover hover:text-content-secondary",
+                          children: n === l ? /* @__PURE__ */ o(I, { size: 12, className: "text-success" }) : /* @__PURE__ */ o(L, { size: 12 })
+                        }
+                      ) : null,
+                      f ? /* @__PURE__ */ o(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: (p) => {
+                            p.stopPropagation(), v(t);
+                          },
+                          "aria-label": `Remove ${i}`,
+                          className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-content-icon hover:bg-scrim-hover hover:text-content-secondary",
+                          children: /* @__PURE__ */ o(V, { size: 12 })
+                        }
+                      ) : null
+                    ] }) : null
+                  ]
+                },
+                l
+              );
+            })
           }
         ),
-        !i && x && /* @__PURE__ */ r("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ e("div", { className: "h-px bg-stroke-hairline w-full" }),
-          /* @__PURE__ */ e(
-            P,
+        !s && w && /* @__PURE__ */ r("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ o("div", { className: "h-px bg-stroke-hairline w-full" }),
+          /* @__PURE__ */ o(
+            F,
             {
               variant: "secondary",
               size: "md",
               className: "w-full justify-center",
-              onClick: p,
-              children: c === "custom" ? "View all" : `View all (${s.length})`
+              onClick: u,
+              children: c === "custom" ? "View all" : `View all (${a.length})`
             }
           )
         ] })
       ] })
     }
   );
-}, H = ({
-  filters: s,
+}, X = ({
+  filters: a,
   onFilterRemove: c,
   onOverflowClick: h,
-  onViewAll: u
-}) => /* @__PURE__ */ e("div", { className: "flex flex-1 items-center min-w-0", children: /* @__PURE__ */ e(
-  S,
+  onViewAll: v
+}) => /* @__PURE__ */ o("div", { className: "flex flex-1 items-center min-w-0", children: /* @__PURE__ */ o(
+  $,
   {
-    items: s,
-    renderItem: (o, m) => {
-      const i = Array.isArray(o.value) ? o.value : [o.value], f = i.slice(0, 2), n = i.slice(2), d = !!o.overflow, g = o.overflow?.label ? o.overflow.label : o.overflow?.count ? `+${o.overflow.count}` : null, v = n.length > 0, x = d || v, p = `+${n.length}`;
+    items: a,
+    renderItem: (e, m) => {
+      const s = Array.isArray(e.value) ? e.value : [e.value], g = s.slice(0, 2), n = s.slice(2), d = !!e.overflow, x = e.overflow?.label ? e.overflow.label : e.overflow?.count ? `+${e.overflow.count}` : null, b = n.length > 0, w = d || b, u = `+${n.length}`;
       return /* @__PURE__ */ r("div", { className: "flex items-center px-1", children: [
-        m > 0 && /* @__PURE__ */ e("div", { className: "mx-3 h-4 w-px bg-stroke-hairline shrink-0" }),
+        m > 0 && /* @__PURE__ */ o("div", { className: "mx-3 h-4 w-px bg-stroke-hairline shrink-0" }),
         /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ r("span", { className: "text-xs font-medium leading-[21px] text-secondary-foreground whitespace-nowrap", children: [
-            o.label,
-            o.required && /* @__PURE__ */ e("span", { className: "text-validation ms-0.5", children: "*" })
+            e.label,
+            e.required && /* @__PURE__ */ o("span", { className: "text-validation ms-0.5", children: "*" })
           ] }),
           /* @__PURE__ */ r("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ e(
-              z,
+            /* @__PURE__ */ o(
+              A,
               {
                 spacing: "sm",
-                tags: f.map((t) => ({
+                tags: g.map((t) => ({
                   label: String(t),
                   variant: "secondary",
                   size: "md",
                   shape: "rounded",
-                  removable: o.removable,
-                  onRemove: () => c(o.id, t)
+                  removable: e.removable,
+                  onRemove: () => c(e.id, t)
                 }))
               }
             ),
-            x && (d ? /* @__PURE__ */ r(b, { children: [
-              /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(
-                k,
+            w && (d ? /* @__PURE__ */ r(k, { children: [
+              /* @__PURE__ */ o(T, { asChild: !0, children: /* @__PURE__ */ o(
+                C,
                 {
                   asButton: !0,
                   variant: "secondary",
                   size: "md",
                   shape: "rounded",
-                  className: T,
-                  "aria-label": `${o.overflow?.count || n.length} more filters for ${o.label}`,
-                  onClick: () => h?.(o.id),
-                  children: g || p
+                  className: S,
+                  "aria-label": `${e.overflow?.count || n.length} more filters for ${e.label}`,
+                  onClick: () => h?.(e.id),
+                  children: x || u
                 }
               ) }),
-              /* @__PURE__ */ r(y, { variant: "tertiary", side: "top", children: [
-                o.overflow?.count || n.length,
+              /* @__PURE__ */ r(z, { variant: "tertiary", side: "top", children: [
+                e.overflow?.count || n.length,
                 " more filters"
               ] })
-            ] }) : /* @__PURE__ */ r(O, { children: [
-              /* @__PURE__ */ r(b, { children: [
-                /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(j, { asChild: !0, children: /* @__PURE__ */ e(
-                  k,
+            ] }) : /* @__PURE__ */ r(R, { children: [
+              /* @__PURE__ */ r(k, { children: [
+                /* @__PURE__ */ o(T, { asChild: !0, children: /* @__PURE__ */ o(B, { asChild: !0, children: /* @__PURE__ */ o(
+                  C,
                   {
                     asButton: !0,
                     variant: "secondary",
                     size: "md",
                     shape: "rounded",
-                    className: T,
-                    children: p
+                    className: S,
+                    children: u
                   }
                 ) }) }),
-                /* @__PURE__ */ r(y, { variant: "tertiary", side: "top", children: [
+                /* @__PURE__ */ r(z, { variant: "tertiary", side: "top", children: [
                   n.length,
                   " more filters"
                 ] })
               ] }),
-              /* @__PURE__ */ e(
-                I,
+              /* @__PURE__ */ o(
+                E,
                 {
                   remainingValues: n,
-                  viewAllTrigger: o.viewAllTrigger,
-                  onViewAll: u,
-                  onItemRemove: (t) => c(o.id, t),
-                  isRemovable: o.removable,
-                  isCopyable: o.copyable
+                  viewAllTrigger: e.viewAllTrigger,
+                  onViewAll: v,
+                  onItemRemove: (t) => c(e.id, t),
+                  isRemovable: e.removable,
+                  isCopyable: e.copyable
                 }
               )
             ] }))
@@ -178,6 +194,6 @@ const T = "whitespace-nowrap bg-accent text-accent-foreground hover:bg-accent/80
   }
 ) });
 export {
-  I as FilterPopoverContent,
-  H as FilterTagList
+  E as FilterPopoverContent,
+  X as FilterTagList
 };

package/dist/components/forms/select/components/SelectOptionRow.js

@@ -1,12 +1,13 @@
 import { jsxs as w, jsx as t } from "react/jsx-runtime";
-import { memo as Y } from "react";
-import { Checkmark as F, ChevronRight as H } from "impact-nova-icons";
-import { Badge as J } from "../../../data-display/badge/badge.js";
-import { cn as o } from "../../../../lib/utils.js";
+import { memo as T } from "react";
+import { Checkmark as Y, ChevronRight as F } from "impact-nova-icons";
+import { Badge as H } from "../../../data-display/badge/badge.js";
+import { OverflowTooltip as J } from "../../../feedback/tooltip/overflow-tooltip.js";
+import { cn as m } from "../../../../lib/utils.js";
 import { selectOptionVariants as K } from "../select.variants.js";
 import { isSelected as L } from "../utils/select.js";
 import { Submenu as Q } from "./Submenu.js";
-function T({
+function U({
   option: e,
   virtualRow: s,
   measureElement: j,
@@ -21,10 +22,10 @@ function T({
   isOptDisabled: n,
   indeterminate: h,
   selectedCount: N,
-  isParentSelectable: $,
+  isParentSelectable: y,
   highlighted: z,
   activeSubmenu: B,
-  setActiveSubmenu: y,
+  setActiveSubmenu: $,
   optionLabel: V,
   optionLabelString: E,
   sequence: d,
@@ -50,7 +51,7 @@ function T({
           "div",
           {
             id: `${C}-option-${s.index}`,
-            className: o(
+            className: m(
               K({
                 disabled: n,
                 readOnly: u,
@@ -62,10 +63,10 @@ function T({
               paddingInlineStart: `${e.depth * 16 + 12}px`
             },
             onClick: () => {
-              n || (c && e.isGroup || a && e.isSubmenuParent) && !$ || b(e);
+              n || (c && e.isGroup || a && e.isSubmenuParent) && !y || b(e);
             },
             onMouseEnter: () => {
-              a && e.isSubmenuParent ? y(e.value) : y(null);
+              a && e.isSubmenuParent ? $(e.value) : $(null);
             },
             "data-testid": `select-option-${x}-${p}`,
             "data-state": r ? "checked" : "unchecked",
@@ -84,44 +85,51 @@ function T({
               },
               e
             ) : /* @__PURE__ */ w("div", { className: "flex items-center flex-1 overflow-hidden", children: [
-              f && (c && e.isGroup || a && e.isSubmenuParent ? $ : !0) && /* @__PURE__ */ t(
+              f && (c && e.isGroup || a && e.isSubmenuParent ? y : !0) && /* @__PURE__ */ t(
                 "span",
                 {
                   "aria-hidden": "true",
-                  className: o(
+                  className: m(
                     "mr-[7px] flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border border-stroke-field bg-canvas-elevated",
                     (r || h) && "border-brand bg-accent text-brand",
                     (n || u) && "opacity-50"
                   ),
-                  children: r && !h ? /* @__PURE__ */ t(F, { className: "h-3.5 w-3.5" }) : h ? /* @__PURE__ */ t("span", { className: "block h-0.5 w-2.5 bg-current" }) : null
+                  children: r && !h ? /* @__PURE__ */ t(Y, { className: "h-3.5 w-3.5" }) : h ? /* @__PURE__ */ t("span", { className: "block h-0.5 w-2.5 bg-current" }) : null
                 }
               ),
               /* @__PURE__ */ w(
                 "div",
                 {
-                  className: o(
+                  className: m(
                     "flex min-w-0 flex-1 items-center overflow-hidden",
                     k ? "justify-between gap-2" : "gap-2"
                   ),
                   children: [
                     /* @__PURE__ */ t(
-                      "span",
+                      J,
                       {
-                        className: o(
+                        triggerClassName: m(
                           "block min-w-0 truncate",
                           k && "flex-1",
                           l ? "text-xs font-semibold text-content-icon uppercase tracking-wider" : r && !g ? "font-medium" : "font-normal",
                           !l && "text-[14px]"
                         ),
-                        "data-testid": `select-option-label-${x}-${p}`,
-                        "data-state": r ? "checked" : "unchecked",
-                        title: E,
-                        children: V
+                        content: E,
+                        side: "top",
+                        variant: "tertiary",
+                        children: /* @__PURE__ */ t(
+                          "span",
+                          {
+                            "data-testid": `select-option-label-${x}-${p}`,
+                            "data-state": r ? "checked" : "unchecked",
+                            children: V
+                          }
+                        )
                       }
                     ),
                     (l || g) && N > 0 && /* @__PURE__ */ t("span", { className: "inline-flex shrink-0 items-center justify-center rounded-full bg-brand-tint px-1.5 py-0.5 text-xs font-medium text-brand-on-subtle", children: N }),
                     k && /* @__PURE__ */ t("span", { className: "flex h-5 w-6 shrink-0 items-center justify-center", children: d !== void 0 && d > 0 ? /* @__PURE__ */ t(
-                      J,
+                      H,
                       {
                         variant: "outline",
                         color: "primary",
@@ -133,7 +141,7 @@ function T({
                   ]
                 }
               ),
-              a && e.isSubmenuParent && /* @__PURE__ */ t(H, { size: "12px", className: "text-content-icon" })
+              a && e.isSubmenuParent && /* @__PURE__ */ t(F, { size: "12px", className: "text-content-icon" })
             ] })
           }
         ),
@@ -145,8 +153,8 @@ function T({
             isReadOnly: !!u,
             isSelected: (i) => L(i, G, !!f),
             getIndeterminateState: (i) => {
-              const m = P(i);
-              return m ? m.selected > 0 && m.selected < m.total : !1;
+              const o = P(i);
+              return o ? o.selected > 0 && o.selected < o.total : !1;
             },
             getSelectedCount: (i) => P(i)?.selected || 0,
             handleSelect: b,
@@ -158,8 +166,8 @@ function T({
     s.key
   );
 }
-const O = Y(T);
+const D = T(U);
 export {
-  O as SelectOptionRow,
-  T as SelectOptionRowInner
+  D as SelectOptionRow,
+  U as SelectOptionRowInner
 };

package/dist/components/forms/select/components/SelectTriggerValue.js

@@ -1,28 +1,57 @@
-import { jsx as n } from "react/jsx-runtime";
-import { cn as p } from "../../../../lib/utils.js";
-import { isInvertedSelection as x, isOptionArray as f } from "../utils/select.js";
-function T({
-  isMulti: l,
-  isDisabled: m,
-  internalValue: s,
-  totalCount: i,
-  totalOptionsCount: u,
-  formatSelectedCount: d,
-  resolveOptionLabel: c,
-  placeholder: o
+import { jsx as r } from "react/jsx-runtime";
+import { cn as x } from "../../../../lib/utils.js";
+import "react";
+import { OverflowTooltip as m } from "../../../feedback/tooltip/overflow-tooltip.js";
+import { isInvertedSelection as h, isOptionArray as d } from "../utils/select.js";
+function C({
+  isMulti: u,
+  isDisabled: p,
+  internalValue: o,
+  totalCount: s,
+  totalOptionsCount: g,
+  formatSelectedCount: v,
+  resolveOptionLabel: a,
+  placeholder: c
 }) {
-  const r = p(
+  const n = x(
     "text-[14px] font-medium truncate min-w-0 block",
-    m ? "text-disabled-foreground" : "text-foreground"
+    p ? "text-disabled-foreground" : "text-foreground"
   );
-  if (l) {
-    const e = s || [];
+  if (u) {
+    const e = o || [];
     let t = 0;
-    return x(e) ? t = Math.max(0, (typeof i == "number" ? i : u) - e.excludedValues.length) : f(e) && (t = e.length), t === 0 ? o : t === 1 && f(e) ? /* @__PURE__ */ n("span", { className: r, children: c(e[0]) }) : /* @__PURE__ */ n("span", { className: r, children: d(t) });
+    if (h(e) ? t = Math.max(0, (typeof s == "number" ? s : g) - e.excludedValues.length) : d(e) && (t = e.length), t === 0)
+      return c;
+    if (t === 1 && d(e)) {
+      const i = a(e[0]);
+      return /* @__PURE__ */ r(
+        m,
+        {
+          triggerClassName: n,
+          content: i,
+          side: "top",
+          variant: "tertiary",
+          children: /* @__PURE__ */ r("span", { children: i })
+        }
+      );
+    }
+    return /* @__PURE__ */ r("span", { className: n, children: v(t) });
   }
-  const a = s;
-  return a ? /* @__PURE__ */ n("span", { className: r, children: c(a) }) : o;
+  const l = o;
+  if (!l)
+    return c;
+  const f = a(l);
+  return /* @__PURE__ */ r(
+    m,
+    {
+      triggerClassName: n,
+      content: f,
+      side: "top",
+      variant: "tertiary",
+      children: /* @__PURE__ */ r("span", { children: f })
+    }
+  );
 }
 export {
-  T as SelectTriggerValue
+  C as SelectTriggerValue
 };