impact-nova 2.2.5 → 2.2.7

package/dist/components/flows/filter-panel/filter-panel.js

@@ -1,21 +1,23 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import v from "react";
-import { Sheet as b, SheetContent as g, SheetDescription as N, SheetTitle as y, SheetClose as w } from "../../feedback/sheet/sheet.js";
-import { createCompoundPart as k } from "../../../lib/primitives/create-compound.js";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import b from "react";
+import { Sheet as g, SheetContent as N, SheetDescription as y, SheetTitle as w, SheetClose as k } from "../../feedback/sheet/sheet.js";
+import { createCompoundPart as C } from "../../../lib/primitives/create-compound.js";
 import { cn as o } from "../../../lib/utils.js";
-import { MultiColorFilter as C, Cross as F, InfoBadge as u } from "impact-nova-icons";
-import { Button as P } from "../../primitives/button/button.js";
-import { Tooltip as d, TooltipTrigger as h, TooltipContent as f } from "../../feedback/tooltip/tooltip.js";
+import { MultiColorFilter as F, Cross as P, InfoBadge as u } from "impact-nova-icons";
+import { Button as D } from "../../primitives/button/button.js";
+import { Tooltip as d, TooltipTrigger as f, TooltipContent as h } from "../../feedback/tooltip/tooltip.js";
 import { Kbd as S } from "../../primitives/kbd/kbd.js";
-import { useImpactNovaI18n as x } from "../../../i18n/use-impact-nova-i18n.js";
-import { useOverlayHostDismissNestedLayersOnNavigation as j } from "../../../lib/overlay/overlay-portal-context.js";
-const I = ({
+import { OverflowTooltip as j } from "../../feedback/tooltip/overflow-tooltip.js";
+import { useImpactNovaI18n as v } from "../../../i18n/use-impact-nova-i18n.js";
+import { useOverlayHostDismissNestedLayersOnNavigation as I } from "../../../lib/overlay/overlay-portal-context.js";
+import { preventDismissOnTooltipOutside as x } from "../../../lib/overlay/prevent-dismiss-on-tooltip-outside.js";
+const O = ({
   title: i,
   children: n,
   className: l
 }) => {
-  const { t: c } = x();
-  return /* @__PURE__ */ t(
+  const { t: c } = v();
+  return /* @__PURE__ */ a(
     "div",
     {
       "data-component": "filter-panel-header",
@@ -24,35 +26,35 @@ const I = ({
         l
       ),
       children: [
-        /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ e(
             "div",
             {
               className: "flex size-8 shrink-0 items-center justify-center rounded-md border border-brand-tint bg-canvas-elevated",
               "aria-hidden": !0,
-              children: /* @__PURE__ */ e(C, { className: "size-5 shrink-0" })
+              children: /* @__PURE__ */ e(F, { className: "size-5 shrink-0" })
             }
           ),
-          /* @__PURE__ */ e(y, { className: "text-lg font-bold text-content", children: i })
+          /* @__PURE__ */ e(w, { className: "text-lg font-bold text-content", children: i })
         ] }),
-        /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
           n,
-          /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(
-            P,
+          /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ e(
+            D,
             {
               variant: "secondary",
               size: "icon",
               tabIndex: -1,
               "aria-label": c("aria.close"),
               "data-component": "filter-panel-close",
-              children: /* @__PURE__ */ e(F, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ e(P, { className: "h-3 w-3" })
             }
           ) })
         ] })
       ]
     }
   );
-}, R = ({
+}, G = ({
   open: i,
   onOpenChange: n,
   title: l = "Filter panel",
@@ -60,9 +62,9 @@ const I = ({
   header: s,
   sidebar: p,
   className: m,
-  preventClose: a = !1
-}) => /* @__PURE__ */ e(b, { open: i, onOpenChange: n, children: /* @__PURE__ */ t(
-  g,
+  preventClose: t = !1
+}) => /* @__PURE__ */ e(g, { open: i, onOpenChange: n, children: /* @__PURE__ */ a(
+  N,
   {
     side: "right",
     className: o(
@@ -70,30 +72,33 @@ const I = ({
       m
     ),
     onInteractOutside: (r) => {
-      a && r.preventDefault();
+      x(r), t && r.preventDefault();
+    },
+    onPointerDownOutside: (r) => {
+      x(r), t && r.preventDefault();
     },
     onEscapeKeyDown: (r) => {
-      a && r.preventDefault();
+      t && r.preventDefault();
     },
     children: [
-      /* @__PURE__ */ e(N, { className: "sr-only", children: "Select filters to apply to the current view." }),
-      /* @__PURE__ */ t("div", { className: "flex h-full flex-col bg-canvas-elevated", "data-component": "filter-panel", children: [
-        s || /* @__PURE__ */ e(I, { title: l }),
-        /* @__PURE__ */ t("div", { className: "flex flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ e(y, { className: "sr-only", children: "Select filters to apply to the current view." }),
+      /* @__PURE__ */ a("div", { className: "flex h-full flex-col bg-canvas-elevated", "data-component": "filter-panel", children: [
+        s || /* @__PURE__ */ e(O, { title: l }),
+        /* @__PURE__ */ a("div", { className: "flex flex-1 overflow-hidden", children: [
           p,
           /* @__PURE__ */ e("div", { className: "flex flex-col flex-1 overflow-hidden", children: c })
         ] })
       ] })
     ]
   }
-) }), W = ({
+) }), J = ({
   items: i,
   activeTab: n,
   onTabChange: l,
   className: c
 }) => {
-  const { t: s } = x(), p = j(), m = (a) => {
-    a !== n && p(), l(a);
+  const { t: s } = v(), p = I(), m = (t) => {
+    t !== n && p(), l(t);
   };
   return /* @__PURE__ */ e(
     "div",
@@ -103,26 +108,26 @@ const I = ({
         "flex w-[200px] shrink-0 flex-col border-r bg-navigation-canvas",
         c
       ),
-      children: /* @__PURE__ */ e("div", { className: "flex flex-1 flex-col py-2 gap-1 overflow-y-auto", children: i.map((a) => {
-        const r = n === a.id;
-        return /* @__PURE__ */ t(v.Fragment, { children: [
-          a.separator && /* @__PURE__ */ e("div", { className: "my-2 h-px bg-stroke-hairline" }),
-          /* @__PURE__ */ t(
+      children: /* @__PURE__ */ e("div", { className: "flex flex-1 flex-col py-2 gap-1 overflow-y-auto", children: i.map((t) => {
+        const r = n === t.id;
+        return /* @__PURE__ */ a(b.Fragment, { children: [
+          t.separator && /* @__PURE__ */ e("div", { className: "my-2 h-px bg-stroke-hairline" }),
+          /* @__PURE__ */ a(
             "button",
             {
               type: "button",
               autoFocus: r,
-              onClick: () => m(a.id),
+              onClick: () => m(t.id),
               "data-component": "filter-panel-sidebar-item",
               "data-active": r ? "true" : "false",
-              "data-tab": a.id,
-              "data-shortcut-id": a.shortcutId,
+              "data-tab": t.id,
+              "data-shortcut-id": t.shortcutId,
               className: o(
                 "group flex items-center justify-between px-3 py-[6px] mx-2 rounded-lg text-left text-sm font-medium transition-colors",
                 r ? "bg-canvas-accent text-brand" : "text-content-secondary hover:bg-canvas-accent"
               ),
               children: [
-                /* @__PURE__ */ t("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
+                /* @__PURE__ */ a("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
                   /* @__PURE__ */ e(
                     "span",
                     {
@@ -130,74 +135,80 @@ const I = ({
                         "shrink-0",
                         r ? "text-brand" : "text-content-secondary"
                       ),
-                      children: a.icon
+                      children: t.icon
                     }
                   ),
-                  /* @__PURE__ */ t("div", { className: "flex items-center gap-1 min-w-0", children: [
-                    /* @__PURE__ */ t(d, { children: [
-                      /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "truncate font-['Manrope']", children: a.label }) }),
-                      /* @__PURE__ */ e(f, { variant: "tertiary", side: "right", children: a.tooltipKeybinding ? /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: [
-                        a.label,
-                        " ",
-                        /* @__PURE__ */ e(
-                          S,
-                          {
-                            keybinding: a.tooltipKeybinding,
-                            size: "sm"
-                          }
-                        )
-                      ] }) : a.label })
-                    ] }),
-                    a.isRequired && /* @__PURE__ */ e("span", { className: "shrink-0 text-danger", children: "*" })
+                  /* @__PURE__ */ a("div", { className: "flex items-center gap-1 min-w-0", children: [
+                    /* @__PURE__ */ e(
+                      j,
+                      {
+                        triggerClassName: "truncate font-['Manrope'] block min-w-0",
+                        content: t.tooltipKeybinding ? /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
+                          t.label,
+                          " ",
+                          /* @__PURE__ */ e(
+                            S,
+                            {
+                              keybinding: t.tooltipKeybinding,
+                              size: "sm"
+                            }
+                          )
+                        ] }) : t.label,
+                        side: "right",
+                        variant: "tertiary",
+                        children: t.label
+                      }
+                    ),
+                    t.isRequired && /* @__PURE__ */ e("span", { className: "shrink-0 text-danger", children: "*" })
                   ] })
                 ] }),
-                /* @__PURE__ */ t("div", { className: "flex items-center gap-1 shrink-0 ml-1", children: [
-                  a.count !== void 0 && a.count > 0 && /* @__PURE__ */ t(d, { children: [
-                    /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e(
+                /* @__PURE__ */ a("div", { className: "flex items-center gap-1 shrink-0 ml-1", children: [
+                  t.count !== void 0 && t.count > 0 && /* @__PURE__ */ a(d, { children: [
+                    /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e(
                       "span",
                       {
                         className: o(
                           "inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[11px] font-medium tabular-nums leading-none shrink-0",
                           r ? "bg-canvas-elevated text-brand border border-stroke-subtle" : "bg-brand-tint border border-stroke-subtle"
                         ),
-                        children: a.count
+                        children: t.count
                       }
                     ) }),
-                    /* @__PURE__ */ e(f, { variant: "tertiary", side: "top", children: s(
-                      a.countBadgeContext === "savedFiltersTotal" ? "filterPanel.savedFiltersAvailableCount" : "filterPanel.filtersAppliedCount",
-                      { count: a.count }
+                    /* @__PURE__ */ e(h, { variant: "tertiary", side: "top", children: s(
+                      t.countBadgeContext === "savedFiltersTotal" ? "filterPanel.savedFiltersAvailableCount" : "filterPanel.filtersAppliedCount",
+                      { count: t.count }
                     ) })
                   ] }),
-                  a.hasError && /* @__PURE__ */ t(d, { children: [
-                    /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e(u, { className: "h-5 w-5 shrink-0 text-danger" }) }),
-                    /* @__PURE__ */ e(f, { variant: "tertiary", children: s("filterPanel.tabContainsErrors") })
+                  t.hasError && /* @__PURE__ */ a(d, { children: [
+                    /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e(u, { className: "h-5 w-5 shrink-0 text-danger" }) }),
+                    /* @__PURE__ */ e(h, { variant: "tertiary", children: s("filterPanel.tabContainsErrors") })
                   ] }),
-                  a.hasWarning && /* @__PURE__ */ t(d, { children: [
-                    /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e(u, { className: "h-5 w-5 shrink-0 text-warning" }) }),
-                    /* @__PURE__ */ e(f, { variant: "tertiary", children: s("filterPanel.tabHasWarnings") })
+                  t.hasWarning && /* @__PURE__ */ a(d, { children: [
+                    /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e(u, { className: "h-5 w-5 shrink-0 text-warning" }) }),
+                    /* @__PURE__ */ e(h, { variant: "tertiary", children: s("filterPanel.tabHasWarnings") })
                   ] }),
-                  a.hasInfo && /* @__PURE__ */ t(d, { children: [
-                    /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e(u, { className: "h-5 w-5 shrink-0 text-content-icon" }) }),
-                    /* @__PURE__ */ e(f, { variant: "tertiary", children: s("filterPanel.additionalInfoAvailable") })
+                  t.hasInfo && /* @__PURE__ */ a(d, { children: [
+                    /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e(u, { className: "h-5 w-5 shrink-0 text-content-icon" }) }),
+                    /* @__PURE__ */ e(h, { variant: "tertiary", children: s("filterPanel.additionalInfoAvailable") })
                   ] })
                 ] })
               ]
             }
           )
-        ] }, a.id);
+        ] }, t.id);
       }) })
     }
   );
-}, _ = k("filter-panel", {
+}, Q = C("filter-panel", {
   part: "body",
   displayName: "FilterPanelBody",
   className: "flex flex-1 flex-col overflow-auto bg-canvas-elevated p-4",
   scrollSurface: !0
-}), q = ({
+}), U = ({
   children: i,
   className: n,
   leftAction: l
-}) => /* @__PURE__ */ t(
+}) => /* @__PURE__ */ a(
   "div",
   {
     "data-component": "filter-panel-footer",
@@ -212,9 +223,9 @@ const I = ({
   }
 );
 export {
-  R as FilterPanel,
-  _ as FilterPanelBody,
-  q as FilterPanelFooter,
-  I as FilterPanelHeader,
-  W as FilterPanelSidebar
+  G as FilterPanel,
+  Q as FilterPanelBody,
+  U as FilterPanelFooter,
+  O as FilterPanelHeader,
+  J as FilterPanelSidebar
 };