impact-nova 3.0.0-alpha.4 → 3.0.0-alpha.6

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

@@ -2,19 +2,19 @@ import { jsx as o } from "react/jsx-runtime";
 import * as n from "@radix-ui/react-popover";
 import { cn as a } from "../../../../lib/utils.js";
 import { preventDismissOnTooltipOutside as t } from "../../../../lib/overlay/prevent-dismiss-on-tooltip-outside.js";
-import { useOverlayPortalContainer as v } from "../../../../lib/overlay/overlay-portal-context.js";
-import { OVERLAY_NESTED_FLOATING_INSTANT_HIDE_CLASS as f } from "../../../../lib/overlay/overlay-host.constants.js";
-function P({
+import { useOverlayPortalContainer as u } from "../../../../lib/overlay/overlay-portal-context.js";
+import { OVERLAY_NESTED_FLOATING_INSTANT_HIDE_CLASS as v } from "../../../../lib/overlay/overlay-host.constants.js";
+function O({
   menuRef: l,
-  menuMinHeight: i,
+  menuMinHeight: r,
   menuWidth: s,
-  isReadOnly: r,
+  isReadOnly: i,
   id: d,
   menuLabel: p,
-  children: m
+  children: c
 }) {
-  const c = v();
-  return /* @__PURE__ */ o(n.Portal, { container: c, children: /* @__PURE__ */ o(
+  const m = u();
+  return /* @__PURE__ */ o(n.Portal, { container: m, children: /* @__PURE__ */ o(
     n.Content,
     {
       ref: l,
@@ -25,7 +25,7 @@ function P({
       collisionPadding: 8,
       "aria-label": p,
       onOpenAutoFocus: (e) => e.preventDefault(),
-      onPointerDown: (e) => e.stopPropagation(),
+      onCloseAutoFocus: (e) => e.preventDefault(),
       onPointerDownOutside: t,
       onInteractOutside: t,
       onFocusOutside: t,
@@ -37,8 +37,8 @@ function P({
       },
       className: a(
         "z-50 flex flex-col overflow-hidden rounded-[12px] p-0 text-base shadow-elevation-select focus:outline-none sm:text-sm border-none pointer-events-auto",
-        r ? "bg-disabled-surface" : "bg-canvas-elevated",
-        f
+        i ? "bg-disabled-surface" : "bg-canvas-elevated",
+        v
       ),
       "data-testid": `select-menu-${d || "default"}`,
       "data-component": "select-menu",
@@ -47,17 +47,17 @@ function P({
         {
           className: a(
             "flex min-h-0 flex-1 flex-col overflow-hidden rounded-[12px]",
-            r ? "bg-disabled-surface" : "bg-canvas-elevated"
+            i ? "bg-disabled-surface" : "bg-canvas-elevated"
           ),
           style: {
-            minHeight: i ? `${i}px` : void 0
+            minHeight: r ? `${r}px` : void 0
           },
-          children: m
+          children: c
         }
       )
     }
   ) });
 }
 export {
-  P as SelectMenuPanel
+  O as SelectMenuPanel
 };

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

@@ -1,8 +1,9 @@
 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 w({
+function C({
   isMulti: u,
   isDisabled: p,
   internalValue: o,
@@ -52,5 +53,5 @@ function w({
   );
 }
 export {
-  w as SelectTriggerValue
+  C as SelectTriggerValue
 };

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

@@ -1,13 +1,14 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import * as i from "@radix-ui/react-popover";
 import { Checkbox as P } from "../../checkbox/checkbox.js";
+import "react";
 import { OverflowTooltip as y } from "../../../feedback/tooltip/overflow-tooltip.js";
 import { ChevronRight as A, Checkmark as O } from "impact-nova-icons";
 import { cn as v } from "../../../../lib/utils.js";
 import { useOverlayPortalContainer as T } from "../../../../lib/overlay/overlay-portal-context.js";
 import { OVERLAY_NESTED_FLOATING_INSTANT_HIDE_CLASS as _ } from "../../../../lib/overlay/overlay-host.constants.js";
 import { useSuppressOptionClickForTextSelection as E } from "../hooks/useSuppressOptionClickForTextSelection.js";
-const G = ({
+const R = ({
   parentOption: n,
   isMulti: u,
   isReadOnly: l,
@@ -105,5 +106,5 @@ const G = ({
   ] });
 };
 export {
-  G as Submenu
+  R as Submenu
 };

package/dist/components/layout/horizontal-scroller/horizontal-scroller-mask.d.ts

@@ -0,0 +1,3 @@
+export declare const HORIZONTAL_SCROLLER_FADE_WIDTH_PX = 48;
+export declare function buildHorizontalScrollerMaskImage(canScrollLeft: boolean, canScrollRight: boolean): string | undefined;
+export declare const horizontalScrollerEdgeFadeClassName = "pointer-events-none absolute top-0 z-10 h-full w-14";

package/dist/components/layout/horizontal-scroller/horizontal-scroller-mask.js

@@ -0,0 +1,12 @@
+const e = 48;
+function n(a, t) {
+  if (!a && !t) return;
+  const r = 48;
+  return a && t ? `linear-gradient(to right, transparent, black ${r}px, black calc(100% - ${r}px), transparent)` : t ? `linear-gradient(to right, black, black calc(100% - ${r}px), transparent 100%)` : `linear-gradient(to right, transparent, black ${r}px, black)`;
+}
+const i = "pointer-events-none absolute top-0 z-10 h-full w-14";
+export {
+  e as HORIZONTAL_SCROLLER_FADE_WIDTH_PX,
+  n as buildHorizontalScrollerMaskImage,
+  i as horizontalScrollerEdgeFadeClassName
+};

package/dist/components/layout/horizontal-scroller/horizontal-scroller.js

@@ -1,167 +1,223 @@
-import { jsxs as i, jsx as l } from "react/jsx-runtime";
-import * as n from "react";
-import { ChevronRight as W } from "impact-nova-icons";
-import { useVirtualizer as j } from "@tanstack/react-virtual";
-import { cn as h } from "../../../lib/utils.js";
-import { Button as O } from "../../primitives/button/button.js";
-import { useImpactNovaI18n as T } from "../../../i18n/use-impact-nova-i18n.js";
-function $({
-  className: N,
-  items: d,
-  renderItem: R,
-  scrollStep: p = 200,
-  hideScrollbar: u = !0,
-  controlsPosition: v = "right",
-  renderPrevious: x,
-  renderNext: g,
-  maxWidth: L = "100%",
-  estimateSize: m = 200,
-  overscan: C = 5,
-  ...B
-}, E) {
-  const { t: w } = T(), r = n.useRef(null), [o, H] = n.useState(!1), [s, I] = n.useState(!1);
-  n.useImperativeHandle(E, () => r.current);
-  const c = j({
-    count: d.length,
-    getScrollElement: () => r.current,
-    estimateSize: typeof m == "function" ? m : () => m,
+import { jsx as t, jsxs as h, Fragment as $ } from "react/jsx-runtime";
+import * as i from "react";
+import { ChevronRight as L } from "impact-nova-icons";
+import { useVirtualizer as D } from "@tanstack/react-virtual";
+import { cn as r } from "../../../lib/utils.js";
+import { Button as I } from "../../primitives/button/button.js";
+import { useImpactNovaI18n as _ } from "../../../i18n/use-impact-nova-i18n.js";
+import { horizontalScrollerEdgeFadeClassName as E, buildHorizontalScrollerMaskImage as q } from "./horizontal-scroller-mask.js";
+function G({
+  className: B,
+  items: u,
+  renderItem: H,
+  scrollStep: x = 200,
+  hideScrollbar: v = !0,
+  edgeAffordance: c = !1,
+  controlsPosition: z = "right",
+  renderPrevious: b,
+  renderNext: w,
+  maxWidth: W = "100%",
+  estimateSize: p = 200,
+  overscan: M = 5,
+  ...V
+}, j) {
+  const { t: S } = _(), o = i.useRef(null), [n, F] = i.useState(!1), [a, O] = i.useState(!1);
+  i.useImperativeHandle(j, () => o.current);
+  const f = D({
+    count: u.length,
+    getScrollElement: () => o.current,
+    estimateSize: typeof p == "function" ? p : () => p,
     horizontal: !0,
-    overscan: C
-  }), V = c.getTotalSize(), f = n.useCallback(() => {
-    const e = r.current;
-    e && (H(e.scrollLeft > 0), I(
+    overscan: M
+  }), T = f.getTotalSize(), m = i.useCallback(() => {
+    const e = o.current;
+    e && (F(e.scrollLeft > 0), O(
       Math.ceil(e.scrollLeft + e.clientWidth) < e.scrollWidth
     ));
   }, []);
-  n.useEffect(() => {
-    const e = r.current;
+  i.useEffect(() => {
+    const e = o.current;
     if (!e) return;
-    f();
-    const t = () => f();
-    e.addEventListener("scroll", t);
-    const a = new ResizeObserver(() => {
-      f();
+    m();
+    const l = () => m();
+    e.addEventListener("scroll", l);
+    const s = new ResizeObserver(() => {
+      m();
     });
-    return a.observe(e), () => {
-      e.removeEventListener("scroll", t), a.disconnect();
+    return s.observe(e), () => {
+      e.removeEventListener("scroll", l), s.disconnect();
     };
-  }, [f, d, V]);
-  const z = () => {
-    r.current?.scrollBy({ left: -p, behavior: "smooth" });
-  }, b = () => {
-    r.current?.scrollBy({ left: p, behavior: "smooth" });
-  }, S = (e, t, a) => {
-    if (a) return null;
-    const k = w(e === "left" ? "horizontalScroller.scrollLeft" : "horizontalScroller.scrollRight");
-    return /* @__PURE__ */ i(
-      O,
+  }, [m, u, T]);
+  const N = () => {
+    o.current?.scrollBy({ left: -x, behavior: "smooth" });
+  }, y = () => {
+    o.current?.scrollBy({ left: x, behavior: "smooth" });
+  }, k = (e, l, s) => {
+    if (s) return null;
+    const g = S(e === "left" ? "horizontalScroller.scrollLeft" : "horizontalScroller.scrollRight");
+    return c ? /* @__PURE__ */ t(
+      I,
+      {
+        variant: "ghost",
+        size: "iconSm",
+        className: r(
+          "absolute top-1/2 z-20 !size-5 !min-h-5 !min-w-5 -translate-y-1/2 rounded-full border border-stroke-hairline p-0",
+          "bg-canvas-elevated/95 text-content-secondary shadow-sm",
+          "hover:bg-canvas-muted hover:text-content",
+          "[&_svg]:!size-3",
+          e === "left" ? "left-0.5" : "right-0.5"
+        ),
+        onClick: l,
+        disabled: s,
+        "aria-label": g,
+        "data-component": e === "left" ? "horizontal-scroller-prev" : "horizontal-scroller-next",
+        tabIndex: -1,
+        children: /* @__PURE__ */ t(
+          L,
+          {
+            className: r(e === "left" && "rotate-180")
+          }
+        )
+      }
+    ) : /* @__PURE__ */ h(
+      I,
       {
         variant: "ghost",
         size: "icon",
-        className: h(
+        className: r(
           "h-8 w-8 rounded-md bg-canvas-muted text-content-tertiary hover:bg-brand-tint hover:text-brand"
         ),
-        onClick: t,
-        disabled: a,
-        "aria-label": k,
+        onClick: l,
+        disabled: s,
+        "aria-label": g,
         "data-component": e === "left" ? "horizontal-scroller-prev" : "horizontal-scroller-next",
         children: [
-          /* @__PURE__ */ l(
-            W,
+          /* @__PURE__ */ t(
+            L,
             {
-              className: h("h-4 w-4", e === "left" && "rotate-180")
+              className: r("h-4 w-4", e === "left" && "rotate-180")
             }
           ),
-          /* @__PURE__ */ l("span", { className: "sr-only", children: k })
+          /* @__PURE__ */ t("span", { className: "sr-only", children: g })
         ]
       }
     );
-  }, y = (() => {
-    const e = x ? x({ onClick: z, disabled: !o }) : S("left", z, !o), t = g ? g({ onClick: b, disabled: !s }) : S("right", b, !s);
-    return v === "split" ? {
-      left: o ? /* @__PURE__ */ l("div", { className: "flex-shrink-0", children: e }) : null,
-      right: s ? /* @__PURE__ */ l("div", { className: "flex-shrink-0", children: t }) : null
-    } : v === "left" ? {
-      left: o || s ? /* @__PURE__ */ i("div", { className: "flex-shrink-0 flex items-center gap-1", children: [
+  }, d = (() => {
+    const e = b ? b({ onClick: N, disabled: !n }) : k("left", N, !n), l = w ? w({ onClick: y, disabled: !a }) : k("right", y, !a);
+    return c || z === "split" ? {
+      left: n ? /* @__PURE__ */ t("div", { className: "flex-shrink-0", children: e }) : null,
+      right: a ? /* @__PURE__ */ t("div", { className: "flex-shrink-0", children: l }) : null
+    } : z === "left" ? {
+      left: n || a ? /* @__PURE__ */ h("div", { className: "flex-shrink-0 flex items-center gap-1", children: [
         e,
-        t
+        l
       ] }) : null,
       right: null
     } : {
       left: null,
-      right: o || s ? /* @__PURE__ */ i("div", { className: "flex-shrink-0 flex items-center gap-1", children: [
+      right: n || a ? /* @__PURE__ */ h("div", { className: "flex-shrink-0 flex items-center gap-1", children: [
         e,
-        t
+        l
       ] }) : null
     };
-  })();
-  return /* @__PURE__ */ i(
+  })(), C = c ? q(n, a) : void 0, R = /* @__PURE__ */ t(
     "div",
     {
-      className: h(
-        "flex items-center gap-2 min-w-0 w-full bg-transparent",
-        N
+      ref: o,
+      tabIndex: 0,
+      className: r(
+        "flex flex-1 min-w-0 overflow-x-auto overflow-y-hidden whitespace-nowrap",
+        v && "scrollbar-hide",
+        "scroll-smooth",
+        c && "h-full overscroll-x-contain outline-none"
       ),
-      style: { maxWidth: L },
-      "data-component": "horizontal-scroller",
-      ...B,
-      children: [
-        y.left,
-        /* @__PURE__ */ l(
-          "div",
-          {
-            ref: r,
-            tabIndex: 0,
-            className: h(
-              "flex flex-1 min-w-0 overflow-x-auto overflow-y-hidden whitespace-nowrap",
-              u && "scrollbar-hide",
-              "scroll-smooth"
-            ),
-            style: {
-              scrollbarWidth: u ? "none" : "auto",
-              msOverflowStyle: u ? "none" : "auto"
-            },
-            "data-component": "horizontal-scroller-viewport",
-            children: /* @__PURE__ */ i(
+      style: {
+        scrollbarWidth: v ? "none" : "auto",
+        msOverflowStyle: v ? "none" : "auto",
+        WebkitMaskImage: C,
+        maskImage: C
+      },
+      "data-component": "horizontal-scroller-viewport",
+      children: /* @__PURE__ */ h(
+        "div",
+        {
+          style: {
+            width: `${f.getTotalSize()}px`,
+            display: "flex",
+            position: "relative"
+          },
+          children: [
+            /* @__PURE__ */ t(
               "div",
               {
                 style: {
-                  width: `${c.getTotalSize()}px`,
-                  display: "flex",
-                  position: "relative"
-                },
-                children: [
-                  /* @__PURE__ */ l(
-                    "div",
-                    {
-                      style: {
-                        width: `${c.getVirtualItems()[0]?.start ?? 0}px`,
-                        flexShrink: 0
-                      }
-                    }
-                  ),
-                  c.getVirtualItems().map((e) => /* @__PURE__ */ l(
-                    "div",
-                    {
-                      ref: c.measureElement,
-                      "data-index": e.index,
-                      className: "flex-shrink-0",
-                      children: R(d[e.index], e.index)
-                    },
-                    e.key
-                  ))
-                ]
+                  width: `${f.getVirtualItems()[0]?.start ?? 0}px`,
+                  flexShrink: 0
+                }
               }
+            ),
+            f.getVirtualItems().map((e) => /* @__PURE__ */ t(
+              "div",
+              {
+                ref: f.measureElement,
+                "data-index": e.index,
+                className: "flex-shrink-0",
+                children: H(u[e.index], e.index)
+              },
+              e.key
+            ))
+          ]
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: r(
+        "flex items-center gap-2 min-w-0 w-full bg-transparent",
+        c && "gap-0",
+        B
+      ),
+      style: { maxWidth: W },
+      "data-component": "horizontal-scroller",
+      ...V,
+      children: c ? /* @__PURE__ */ h("div", { className: "relative flex min-h-0 min-w-0 flex-1 self-stretch", children: [
+        n ? /* @__PURE__ */ t(
+          "div",
+          {
+            "aria-hidden": !0,
+            "data-component": "horizontal-scroller-fade-left",
+            className: r(
+              E,
+              "left-0 bg-gradient-to-r from-canvas-elevated from-10% via-canvas-elevated/90 via-50% to-transparent"
             )
           }
-        ),
-        y.right
-      ]
+        ) : null,
+        a ? /* @__PURE__ */ t(
+          "div",
+          {
+            "aria-hidden": !0,
+            "data-component": "horizontal-scroller-fade-right",
+            className: r(
+              E,
+              "right-0 bg-gradient-to-l from-canvas-elevated from-10% via-canvas-elevated/90 via-50% to-transparent"
+            )
+          }
+        ) : null,
+        d.left,
+        d.right,
+        R
+      ] }) : /* @__PURE__ */ h($, { children: [
+        d.left,
+        R,
+        d.right
+      ] })
     }
   );
 }
-const A = n.forwardRef($);
-A.displayName = "HorizontalScroller";
+const J = i.forwardRef(G);
+J.displayName = "HorizontalScroller";
 export {
-  A as HorizontalScroller
+  J as HorizontalScroller
 };

package/dist/components/layout/horizontal-scroller/horizontal-scroller.types.d.ts

@@ -4,6 +4,8 @@ export interface HorizontalScrollerProps<T> extends Omit<React.HTMLAttributes<HT
     renderItem: (item: T, index: number) => React.ReactNode;
     scrollStep?: number;
     hideScrollbar?: boolean;
+    /** Overlay edge fades + split chevrons on the viewport (dashboard carousel pattern). */
+    edgeAffordance?: boolean;
     controlsPosition?: "left" | "right" | "split";
     renderPrevious?: (props: {
         onClick: () => void;

package/dist/components/layout/horizontal-scroller/scroll-overflow-affordance.d.ts

@@ -6,5 +6,7 @@ export interface ScrollOverflowAffordanceProps extends Omit<React.HTMLAttributes
     hideScrollbar?: boolean;
     viewportClassName?: string;
     viewportDataComponent?: string;
+    /** `compact` = small circular chevrons; `default` = 32px rounded-md dashboard controls. */
+    controlSize?: "compact" | "default";
 }
-export declare function ScrollOverflowAffordance({ children, scrollStep, contentDependency, hideScrollbar, viewportClassName, viewportDataComponent, className, ...props }: ScrollOverflowAffordanceProps): import("react/jsx-runtime").JSX.Element;
+export declare function ScrollOverflowAffordance({ children, scrollStep, contentDependency, hideScrollbar, viewportClassName, viewportDataComponent, controlSize, className, ...props }: ScrollOverflowAffordanceProps): import("react/jsx-runtime").JSX.Element;