impact-nova 1.7.31 → 1.7.32

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

@@ -1,156 +1,160 @@
-import { jsxs as c, jsx as t, Fragment as O } from "react/jsx-runtime";
-import * as a from "react";
-import { ChevronRight as T } from "lucide-react";
-import { useVirtualizer as $ } from "@tanstack/react-virtual";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import * as o from "react";
+import { ChevronRight as j } from "lucide-react";
+import { useVirtualizer as I } from "@tanstack/react-virtual";
 import { cn as h } from "../../../lib/utils.js";
-import { Button as A } from "../button.js";
-import { useImpactNovaI18n as D } from "../../../i18n/ImpactNovaI18nContext.js";
-const F = a.forwardRef(
+import { Button as O } from "../button.js";
+import { useImpactNovaI18n as T } from "../../../i18n/ImpactNovaI18nContext.js";
+const $ = o.forwardRef(
   ({
     className: N,
-    items: u,
-    renderItem: R,
-    scrollStep: g = 200,
-    hideScrollbar: p = !0,
-    controlsPosition: s = "right",
-    renderPrevious: v,
-    renderNext: b,
-    maxWidth: L = "100%",
+    items: d,
+    renderItem: C,
+    scrollStep: p = 200,
+    hideScrollbar: u = !0,
+    controlsPosition: v = "right",
+    renderPrevious: x,
+    renderNext: g,
+    maxWidth: R = "100%",
     estimateSize: m = 200,
-    overscan: k = 5,
-    ...C
-  }, B) => {
-    const { t: x } = D(), l = a.useRef(null), [n, E] = a.useState(!1), [o, H] = a.useState(!1);
-    a.useImperativeHandle(B, () => l.current);
-    const i = $({
-      count: u.length,
-      getScrollElement: () => l.current,
+    overscan: L = 5,
+    ...B
+  }, E) => {
+    const { t: b } = T(), r = o.useRef(null), [n, H] = o.useState(!1), [s, V] = o.useState(!1);
+    o.useImperativeHandle(E, () => r.current);
+    const c = I({
+      count: d.length,
+      getScrollElement: () => r.current,
       estimateSize: typeof m == "function" ? m : () => m,
       horizontal: !0,
-      overscan: k
-    }), V = i.getTotalSize(), d = a.useCallback(() => {
-      const e = l.current;
-      e && (E(e.scrollLeft > 0), H(Math.ceil(e.scrollLeft + e.clientWidth) < e.scrollWidth));
+      overscan: L
+    }), W = c.getTotalSize(), f = o.useCallback(() => {
+      const e = r.current;
+      e && (H(e.scrollLeft > 0), V(Math.ceil(e.scrollLeft + e.clientWidth) < e.scrollWidth));
     }, []);
-    a.useEffect(() => {
-      const e = l.current;
+    o.useEffect(() => {
+      const e = r.current;
       if (!e) return;
-      d();
-      const r = () => d();
-      e.addEventListener("scroll", r);
-      const f = new ResizeObserver(() => {
-        d();
+      f();
+      const l = () => f();
+      e.addEventListener("scroll", l);
+      const i = new ResizeObserver(() => {
+        f();
       });
-      return f.observe(e), () => {
-        e.removeEventListener("scroll", r), f.disconnect();
+      return i.observe(e), () => {
+        e.removeEventListener("scroll", l), i.disconnect();
       };
-    }, [d, u, V]);
-    const z = () => {
-      l.current?.scrollBy({ left: -g, behavior: "smooth" });
-    }, y = () => {
-      l.current?.scrollBy({ left: g, behavior: "smooth" });
-    }, w = ({
+    }, [f, d, W]);
+    const w = () => {
+      r.current?.scrollBy({ left: -p, behavior: "smooth" });
+    }, z = () => {
+      r.current?.scrollBy({ left: p, behavior: "smooth" });
+    }, y = ({
       direction: e,
-      onClick: r,
-      disabled: f
+      onClick: l,
+      disabled: i
     }) => {
-      if (f) return null;
-      const S = x(e === "left" ? "horizontalScroller.scrollLeft" : "horizontalScroller.scrollRight");
-      return /* @__PURE__ */ c(
-        A,
+      if (i) return null;
+      const k = b(e === "left" ? "horizontalScroller.scrollLeft" : "horizontalScroller.scrollRight");
+      return /* @__PURE__ */ a(
+        O,
         {
           variant: "ghost",
           size: "icon",
           className: h(
             "h-8 w-8 rounded-md bg-canvas-muted text-content-tertiary hover:bg-brand-tint hover:text-brand"
           ),
-          onClick: r,
-          disabled: f,
-          "aria-label": S,
+          onClick: l,
+          disabled: i,
+          "aria-label": k,
           "data-component": e === "left" ? "horizontal-scroller-prev" : "horizontal-scroller-next",
           children: [
             /* @__PURE__ */ t(
-              T,
+              j,
               {
                 className: h("h-4 w-4", e === "left" && "rotate-180")
               }
             ),
-            /* @__PURE__ */ t("span", { className: "sr-only", children: S })
+            /* @__PURE__ */ t("span", { className: "sr-only", children: k })
           ]
         }
       );
-    }, W = () => {
-      const e = v ? v({ onClick: z, disabled: !n }) : /* @__PURE__ */ t(
-        w,
+    }, S = (() => {
+      const e = x ? x({ onClick: w, disabled: !n }) : /* @__PURE__ */ t(
+        y,
         {
           direction: "left",
-          onClick: z,
+          onClick: w,
           disabled: !n
         }
-      ), r = b ? b({ onClick: y, disabled: !o }) : /* @__PURE__ */ t(
-        w,
+      ), l = g ? g({ onClick: z, disabled: !s }) : /* @__PURE__ */ t(
+        y,
         {
           direction: "right",
-          onClick: y,
-          disabled: !o
+          onClick: z,
+          disabled: !s
         }
       );
-      return s === "split" ? /* @__PURE__ */ c(O, { children: [
-        /* @__PURE__ */ t("div", { className: "absolute left-0 top-1/2 z-20 -translate-y-1/2", children: e }),
-        /* @__PURE__ */ t("div", { className: "absolute right-0 top-1/2 z-20 -translate-y-1/2", children: r })
-      ] }) : s === "left" ? /* @__PURE__ */ c("div", { className: "absolute left-0 top-1/2 z-20 flex -translate-y-1/2 items-center gap-1", children: [
-        e,
-        r
-      ] }) : /* @__PURE__ */ c("div", { className: "absolute right-0 top-1/2 z-20 flex -translate-y-1/2 items-center gap-1", children: [
-        e,
-        r
-      ] });
-    }, j = () => s === "left" ? n && o ? "pl-20" : n || o ? "pl-12" : "" : s === "split" && n ? "pl-12" : "", I = () => s === "right" ? n && o ? "pr-20" : n || o ? "pr-12" : "" : s === "split" && o ? "pr-12" : "";
-    return /* @__PURE__ */ c(
+      return v === "split" ? {
+        left: n ? /* @__PURE__ */ t("div", { className: "flex-shrink-0", children: e }) : null,
+        right: s ? /* @__PURE__ */ t("div", { className: "flex-shrink-0", children: l }) : null
+      } : v === "left" ? {
+        left: n || s ? /* @__PURE__ */ a("div", { className: "flex-shrink-0 flex items-center gap-1", children: [
+          e,
+          l
+        ] }) : null,
+        right: null
+      } : {
+        left: null,
+        right: n || s ? /* @__PURE__ */ a("div", { className: "flex-shrink-0 flex items-center gap-1", children: [
+          e,
+          l
+        ] }) : null
+      };
+    })();
+    return /* @__PURE__ */ a(
       "div",
       {
         className: h(
-          "relative group min-w-0 w-full bg-transparent",
-          j(),
-          I(),
+          "flex items-center gap-2 min-w-0 w-full bg-transparent",
           N
         ),
-        style: { maxWidth: L },
+        style: { maxWidth: R },
         "data-component": "horizontal-scroller",
-        ...C,
+        ...B,
         children: [
-          W(),
+          S.left,
           /* @__PURE__ */ t(
             "div",
             {
-              ref: l,
+              ref: r,
               className: h(
-                "flex w-full overflow-x-auto overflow-y-hidden whitespace-nowrap",
-                p && "scrollbar-hide",
+                "flex flex-1 min-w-0 overflow-x-auto overflow-y-hidden whitespace-nowrap",
+                u && "scrollbar-hide",
                 "scroll-smooth"
               ),
               style: {
-                scrollbarWidth: p ? "none" : "auto",
-                msOverflowStyle: p ? "none" : "auto"
+                scrollbarWidth: u ? "none" : "auto",
+                msOverflowStyle: u ? "none" : "auto"
               },
               "data-component": "horizontal-scroller-viewport",
-              children: /* @__PURE__ */ c(
+              children: /* @__PURE__ */ a(
                 "div",
                 {
                   style: {
-                    width: `${i.getTotalSize()}px`,
+                    width: `${c.getTotalSize()}px`,
                     display: "flex",
                     position: "relative"
                   },
                   children: [
-                    /* @__PURE__ */ t("div", { style: { width: `${i.getVirtualItems()[0]?.start ?? 0}px`, flexShrink: 0 } }),
-                    i.getVirtualItems().map((e) => /* @__PURE__ */ t(
+                    /* @__PURE__ */ t("div", { style: { width: `${c.getVirtualItems()[0]?.start ?? 0}px`, flexShrink: 0 } }),
+                    c.getVirtualItems().map((e) => /* @__PURE__ */ t(
                       "div",
                       {
-                        ref: i.measureElement,
+                        ref: c.measureElement,
                         "data-index": e.index,
                         className: "flex-shrink-0",
-                        children: R(u[e.index], e.index)
+                        children: C(d[e.index], e.index)
                       },
                       e.key
                     ))
@@ -158,13 +162,14 @@ const F = a.forwardRef(
                 }
               )
             }
-          )
+          ),
+          S.right
         ]
       }
     );
   }
 );
-F.displayName = "HorizontalScroller";
+$.displayName = "HorizontalScroller";
 export {
-  F as default
+  $ as default
 };

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

@@ -46,4 +46,8 @@ export interface HorizontalScrollerProps<T = any> extends Omit<React.HTMLAttribu
      * Number of items to render outside visible area. Default 5.
      */
     overscan?: number;
+    /**
+     * Disable virtualization and render all items. Useful for small lists where keyboard navigation is important. Default false.
+     */
+    disableVirtualization?: boolean;
 }