impact-nova 2.2.4 → 2.2.6

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

@@ -1,26 +1,28 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import * as l from "@radix-ui/react-popover";
+import * as i from "@radix-ui/react-popover";
 import { Checkbox as k } from "../../checkbox/checkbox.js";
-import { ChevronRight as A, Checkmark as y } from "impact-nova-icons";
+import "react";
+import { OverflowTooltip as y } from "../../../feedback/tooltip/overflow-tooltip.js";
+import { ChevronRight as A, Checkmark as w } from "impact-nova-icons";
 import { cn as f } from "../../../../lib/utils.js";
 import { useOverlayPortalContainer as P } from "../../../../lib/overlay/overlay-portal-context.js";
-import { OVERLAY_NESTED_FLOATING_INSTANT_HIDE_CLASS as w } from "../../../../lib/overlay/overlay-host.constants.js";
-const $ = ({
+import { OVERLAY_NESTED_FLOATING_INSTANT_HIDE_CLASS as D } from "../../../../lib/overlay/overlay-host.constants.js";
+const L = ({
   parentOption: n,
-  isMulti: u,
-  isReadOnly: i,
+  isMulti: d,
+  isReadOnly: l,
   isSelected: v,
   getIndeterminateState: x,
-  getSelectedCount: h,
-  handleSelect: g
+  getSelectedCount: g,
+  handleSelect: h
 }) => {
-  const N = P(), d = "children" in n && Array.isArray(n.children) ? n.children : null;
-  if (!d) return null;
+  const C = P(), u = "children" in n && Array.isArray(n.children) ? n.children : null;
+  if (!u) return null;
   const c = String(n.value || "");
-  return /* @__PURE__ */ s(l.Root, { open: !0, children: [
-    /* @__PURE__ */ t(l.Anchor, { className: "absolute inset-0 pointer-events-none" }),
-    /* @__PURE__ */ t(l.Portal, { container: N, children: /* @__PURE__ */ t(
-      l.Content,
+  return /* @__PURE__ */ s(i.Root, { open: !0, children: [
+    /* @__PURE__ */ t(i.Anchor, { className: "absolute inset-0 pointer-events-none" }),
+    /* @__PURE__ */ t(i.Portal, { container: C, children: /* @__PURE__ */ t(
+      i.Content,
       {
         side: "right",
         sideOffset: 8,
@@ -33,21 +35,21 @@ const $ = ({
         onFocusOutside: (e) => e.preventDefault(),
         className: f(
           "select-submenu-container z-50 min-w-[180px] max-h-[300px] overflow-auto rounded-xl bg-canvas-elevated py-1 shadow-elevation-floating",
-          w
+          D
         ),
         "data-component": "select-menu",
-        children: d.map((e) => {
-          const a = v(e), S = x(e), o = e.isDisabled, m = h(e), r = "children" in e && Array.isArray(e.children) && e.children.length > 0, p = e.isParentSelectable !== !1, b = String(e.value || "");
+        children: u.map((e) => {
+          const a = v(e), N = x(e), o = e.isDisabled, m = g(e), r = "children" in e && Array.isArray(e.children) && e.children.length > 0, p = e.isParentSelectable !== !1, b = String(e.value || "");
           return /* @__PURE__ */ s(
             "div",
             {
               className: f(
                 "relative flex h-[35px] cursor-default select-none items-center justify-between gap-1.5 rounded-[8px] px-3",
-                o ? "cursor-not-allowed bg-canvas-readonly opacity-50" : i ? "cursor-default" : "cursor-pointer hover:bg-canvas-muted",
+                o ? "cursor-not-allowed bg-canvas-readonly opacity-50" : l ? "cursor-default" : "cursor-pointer hover:bg-canvas-muted",
                 a && !o && !r ? "bg-brand-subtle text-content" : "text-content"
               ),
-              onClick: (C) => {
-                C.stopPropagation(), !o && !i && p && g(e);
+              onClick: (S) => {
+                S.stopPropagation(), !o && !l && p && h(e);
               },
               "data-testid": `select-submenu-option-${c}-${b}`,
               "data-state": a ? "checked" : "unchecked",
@@ -55,23 +57,30 @@ const $ = ({
               "data-component": "select-option",
               children: [
                 /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [
-                  u && p && /* @__PURE__ */ t(
+                  d && p && /* @__PURE__ */ t(
                     k,
                     {
-                      checked: S ? "indeterminate" : a,
-                      disabled: o || i,
+                      checked: N ? "indeterminate" : a,
+                      disabled: o || l,
                       onChange: () => {
                       }
                     }
                   ),
                   /* @__PURE__ */ t(
-                    "span",
+                    y,
                     {
-                      className: "block truncate text-[14px] font-medium leading-5",
-                      "data-testid": `select-submenu-option-label-${c}-${b}`,
-                      "data-state": a ? "checked" : "unchecked",
-                      title: String(e.label || ""),
-                      children: e.label
+                      triggerClassName: "block truncate text-[14px] font-medium leading-5 min-w-0",
+                      content: String(e.label || ""),
+                      side: "top",
+                      variant: "tertiary",
+                      children: /* @__PURE__ */ t(
+                        "span",
+                        {
+                          "data-testid": `select-submenu-option-label-${c}-${b}`,
+                          "data-state": a ? "checked" : "unchecked",
+                          children: e.label
+                        }
+                      )
                     }
                   ),
                   r && m > 0 && /* @__PURE__ */ s("span", { className: "text-xs text-secondary-foreground font-medium", children: [
@@ -81,7 +90,7 @@ const $ = ({
                   ] })
                 ] }),
                 r && /* @__PURE__ */ t(A, { size: "sm", className: "text-content-icon" }),
-                !u && a && !r && /* @__PURE__ */ t(y, { className: "h-4 w-4 text-brand" })
+                !d && a && !r && /* @__PURE__ */ t(w, { className: "h-4 w-4 text-brand" })
               ]
             },
             e.value
@@ -92,5 +101,5 @@ const $ = ({
   ] });
 };
 export {
-  $ as Submenu
+  L as Submenu
 };

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

@@ -1,3 +1,7 @@
 export { HorizontalScroller } from './horizontal-scroller';
 export { HorizontalScroller as default } from './horizontal-scroller';
 export * from './horizontal-scroller.types';
+export { ScrollOverflowAffordance } from './scroll-overflow-affordance';
+export type { ScrollOverflowAffordanceProps } from './scroll-overflow-affordance';
+export { useHorizontalScrollOverflow } from './use-horizontal-scroll-overflow';
+export type { HorizontalScrollOverflowState, UseHorizontalScrollOverflowOptions, } from './use-horizontal-scroll-overflow';

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

@@ -1,5 +1,9 @@
-import { HorizontalScroller as l, HorizontalScroller as a } from "./horizontal-scroller.js";
+import { HorizontalScroller as l, HorizontalScroller as e } from "./horizontal-scroller.js";
+import { ScrollOverflowAffordance as t } from "./scroll-overflow-affordance.js";
+import { useHorizontalScrollOverflow as c } from "./use-horizontal-scroll-overflow.js";
 export {
   l as HorizontalScroller,
-  a as default
+  t as ScrollOverflowAffordance,
+  e as default,
+  c as useHorizontalScrollOverflow
 };

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface ScrollOverflowAffordanceProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    children: React.ReactNode;
+    scrollStep?: number;
+    contentDependency?: unknown;
+    hideScrollbar?: boolean;
+    viewportClassName?: string;
+    viewportDataComponent?: string;
+}
+export declare function ScrollOverflowAffordance({ children, scrollStep, contentDependency, hideScrollbar, viewportClassName, viewportDataComponent, className, ...props }: ScrollOverflowAffordanceProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,124 @@
+import { jsxs as N, jsx as t } from "react/jsx-runtime";
+import "react";
+import { ChevronRight as D } from "impact-nova-icons";
+import { Button as A } from "../../primitives/button/button.js";
+import { useImpactNovaI18n as L } from "../../../i18n/use-impact-nova-i18n.js";
+import { cn as r } from "../../../lib/utils.js";
+import { useHorizontalScrollOverflow as R } from "./use-horizontal-scroll-overflow.js";
+const s = 48;
+function $(a, o) {
+  if (!(!a && !o))
+    return a && o ? `linear-gradient(to right, transparent, black ${s}px, black calc(100% - ${s}px), transparent)` : o ? `linear-gradient(to right, black, black calc(100% - ${s}px), transparent 100%)` : `linear-gradient(to right, transparent, black ${s}px, black)`;
+}
+const u = "pointer-events-none absolute top-0 z-10 h-full w-14";
+function F({
+  children: a,
+  scrollStep: o,
+  contentDependency: p,
+  hideScrollbar: i = !0,
+  viewportClassName: g,
+  viewportDataComponent: h = "scroll-overflow-affordance-viewport",
+  className: b,
+  ...w
+}) {
+  const { t: c } = L(), {
+    scrollRef: k,
+    canScrollLeft: n,
+    canScrollRight: l,
+    scrollLeft: f,
+    scrollRight: d
+  } = R({ scrollStep: o, contentDependency: p }), v = $(n, l), x = (e) => {
+    if (e.key === "ArrowLeft" && n) {
+      e.preventDefault(), f();
+      return;
+    }
+    e.key === "ArrowRight" && l && (e.preventDefault(), d());
+  }, m = (e, y, z) => {
+    if (z) return null;
+    const I = c(e === "left" ? "horizontalScroller.scrollLeft" : "horizontalScroller.scrollRight");
+    return /* @__PURE__ */ t(
+      A,
+      {
+        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: y,
+        "aria-label": I,
+        "data-component": e === "left" ? "scroll-overflow-affordance-prev" : "scroll-overflow-affordance-next",
+        tabIndex: -1,
+        children: /* @__PURE__ */ t(
+          D,
+          {
+            className: r(e === "left" && "rotate-180")
+          }
+        )
+      }
+    );
+  };
+  return /* @__PURE__ */ N(
+    "div",
+    {
+      className: r("relative min-w-0", b),
+      "data-component": "scroll-overflow-affordance",
+      ...w,
+      children: [
+        n ? /* @__PURE__ */ t(
+          "div",
+          {
+            "aria-hidden": !0,
+            "data-component": "scroll-overflow-affordance-fade-left",
+            className: r(
+              u,
+              "left-0 bg-gradient-to-r from-canvas-elevated from-10% via-canvas-elevated/90 via-50% to-transparent"
+            )
+          }
+        ) : null,
+        l ? /* @__PURE__ */ t(
+          "div",
+          {
+            "aria-hidden": !0,
+            "data-component": "scroll-overflow-affordance-fade-right",
+            className: r(
+              u,
+              "right-0 bg-gradient-to-l from-canvas-elevated from-10% via-canvas-elevated/90 via-50% to-transparent"
+            )
+          }
+        ) : null,
+        m("left", f, !n),
+        m("right", d, !l),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            ref: k,
+            tabIndex: 0,
+            onKeyDown: x,
+            className: r(
+              "overflow-x-auto overflow-y-hidden overscroll-x-contain scroll-smooth outline-none",
+              "[-webkit-overflow-scrolling:touch]",
+              "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+              i && "scrollbar-hide",
+              g
+            ),
+            style: {
+              scrollbarWidth: i ? "none" : "auto",
+              msOverflowStyle: i ? "none" : "auto",
+              WebkitMaskImage: v,
+              maskImage: v
+            },
+            "data-component": h,
+            children: a
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  F as ScrollOverflowAffordance
+};

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface UseHorizontalScrollOverflowOptions {
+    scrollStep?: number;
+    contentDependency?: unknown;
+}
+export interface HorizontalScrollOverflowState {
+    scrollRef: React.RefObject<HTMLDivElement | null>;
+    canScrollLeft: boolean;
+    canScrollRight: boolean;
+    scrollLeft: () => void;
+    scrollRight: () => void;
+}
+export declare function useHorizontalScrollOverflow({ scrollStep, contentDependency, }?: UseHorizontalScrollOverflowOptions): HorizontalScrollOverflowState;

package/dist/components/layout/horizontal-scroller/use-horizontal-scroll-overflow.js

@@ -0,0 +1,40 @@
+import * as t from "react";
+function m({
+  scrollStep: r = 200,
+  contentDependency: i
+} = {}) {
+  const l = t.useRef(null), [a, f] = t.useState(!1), [u, h] = t.useState(!1), s = t.useCallback(() => {
+    const e = l.current;
+    e && (f(e.scrollLeft > 0), h(
+      Math.ceil(e.scrollLeft + e.clientWidth) < e.scrollWidth
+    ));
+  }, []);
+  t.useEffect(() => {
+    const e = l.current;
+    if (!e) return;
+    s();
+    const o = () => s();
+    e.addEventListener("scroll", o, { passive: !0 });
+    const c = new ResizeObserver(() => s());
+    c.observe(e);
+    const n = e.firstElementChild;
+    return n && c.observe(n), () => {
+      e.removeEventListener("scroll", o), c.disconnect();
+    };
+  }, [s, i]);
+  const v = t.useCallback(() => {
+    l.current?.scrollBy({ left: -r, behavior: "smooth" });
+  }, [r]), b = t.useCallback(() => {
+    l.current?.scrollBy({ left: r, behavior: "smooth" });
+  }, [r]);
+  return {
+    scrollRef: l,
+    canScrollLeft: a,
+    canScrollRight: u,
+    scrollLeft: v,
+    scrollRight: b
+  };
+}
+export {
+  m as useHorizontalScrollOverflow
+};

package/dist/components/primitives/stepper/stepper.js

@@ -1,71 +1,90 @@
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import * as y from "react";
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import * as k from "react";
 import { Checkmark as I } from "impact-nova-icons";
 import { createComponent as j } from "../../../lib/primitives/create-component.js";
-import { cn as a } from "../../../lib/utils.js";
-import { useImpactNovaI18n as k } from "../../../i18n/use-impact-nova-i18n.js";
-import { iconVariants as z, stepVariants as D, stepperVariants as V } from "./stepper.variants.js";
+import { cn as o } from "../../../lib/utils.js";
+import { OverflowTooltip as u } from "../../feedback/tooltip/overflow-tooltip.js";
+import { useImpactNovaI18n as z } from "../../../i18n/use-impact-nova-i18n.js";
+import { iconVariants as D, stepVariants as V, stepperVariants as A } from "./stepper.variants.js";
 const R = j(
   "Stepper",
-  ({ className: u, currentStep: x, steps: n, orientation: e = "horizontal", onStepClick: s, ...v }, b) => {
-    const { t: N } = k(), g = n.length;
-    return /* @__PURE__ */ t(
+  ({ className: v, currentStep: f, steps: n, orientation: r = "horizontal", onStepClick: s, ...b }, g) => {
+    const { t: w } = z(), y = n.length;
+    return /* @__PURE__ */ e(
       "div",
       {
-        ref: b,
-        className: a(V({ orientation: e }), u),
-        "data-orientation": e,
+        ref: g,
+        className: o(A({ orientation: r }), v),
+        "data-orientation": r,
         "data-component": "stepper",
         role: "list",
-        ...v,
-        children: n.map((d, o) => {
-          const c = typeof d == "string" ? { label: d } : d, l = o + 1, f = l === x, h = l < x, i = c.disabled, r = h ? "completed" : f ? "active" : "default", w = N("stepper.stepOfTotal", { current: l, total: g });
-          return /* @__PURE__ */ p(y.Fragment, { children: [
+        ...b,
+        children: n.map((d, i) => {
+          const t = typeof d == "string" ? { label: d } : d, l = i + 1, x = l === f, h = l < f, c = t.disabled, a = h ? "completed" : x ? "active" : "default", N = w("stepper.stepOfTotal", { current: l, total: y });
+          return /* @__PURE__ */ p(k.Fragment, { children: [
             /* @__PURE__ */ p(
               "div",
               {
                 role: "listitem",
-                onClick: () => !i && s?.(o),
-                "aria-label": w,
-                "aria-current": f ? "step" : void 0,
-                tabIndex: s && !i ? 0 : void 0,
-                onKeyDown: s && !i ? (m) => {
-                  (m.key === "Enter" || m.key === " ") && (m.preventDefault(), s(o));
+                onClick: () => !c && s?.(i),
+                "aria-label": N,
+                "aria-current": x ? "step" : void 0,
+                tabIndex: s && !c ? 0 : void 0,
+                onKeyDown: s && !c ? (m) => {
+                  (m.key === "Enter" || m.key === " ") && (m.preventDefault(), s(i));
                 } : void 0,
                 "data-step": l,
-                "data-status": r,
-                "data-disabled": i || void 0,
-                className: a(
-                  D({ orientation: e, status: r }),
-                  e === "horizontal" && "min-w-[140px]",
-                  i ? "opacity-80 cursor-not-allowed" : s ? "cursor-pointer" : "cursor-default"
+                "data-status": a,
+                "data-disabled": c || void 0,
+                className: o(
+                  V({ orientation: r, status: a }),
+                  r === "horizontal" && "min-w-[140px]",
+                  c ? "opacity-80 cursor-not-allowed" : s ? "cursor-pointer" : "cursor-default"
                 ),
                 children: [
-                  /* @__PURE__ */ t("div", { className: a(z({ status: r }), "mr-2"), children: h ? /* @__PURE__ */ t(I, { className: "h-5 w-5 stroke-[3px]" }) : /* @__PURE__ */ t("span", { children: c.icon || l }) }),
-                  /* @__PURE__ */ p("div", { className: "flex flex-col justify-center overflow-hidden", children: [
-                    /* @__PURE__ */ t("div", { className: a(
-                      "text-[14px] leading-tight font-medium truncate max-w-[200px]",
-                      r === "completed" ? "text-success" : "text-content",
-                      r === "active" && e === "vertical" ? "text-brand" : ""
-                    ), children: c.label }),
-                    c.description && /* @__PURE__ */ t("div", { className: a(
-                      "text-[12px] leading-tight mt-0.5 truncate max-w-[200px]",
-                      r === "completed" ? "text-success" : "text-secondary-foreground"
-                    ), children: c.description })
+                  /* @__PURE__ */ e("div", { className: o(D({ status: a }), "mr-2"), children: h ? /* @__PURE__ */ e(I, { className: "h-5 w-5 stroke-[3px]" }) : /* @__PURE__ */ e("span", { children: t.icon || l }) }),
+                  /* @__PURE__ */ p("div", { className: "flex flex-col justify-center overflow-hidden min-w-0", children: [
+                    /* @__PURE__ */ e(
+                      u,
+                      {
+                        triggerClassName: o(
+                          "text-[14px] leading-tight font-medium truncate max-w-[200px] block",
+                          a === "completed" ? "text-success" : "text-content",
+                          a === "active" && r === "vertical" ? "text-brand" : ""
+                        ),
+                        content: t.label,
+                        side: "top",
+                        variant: "tertiary",
+                        children: t.label
+                      }
+                    ),
+                    t.description && /* @__PURE__ */ e(
+                      u,
+                      {
+                        triggerClassName: o(
+                          "text-[12px] leading-tight mt-0.5 truncate max-w-[200px] block",
+                          a === "completed" ? "text-success" : "text-secondary-foreground"
+                        ),
+                        content: t.description,
+                        side: "top",
+                        variant: "tertiary",
+                        children: t.description
+                      }
+                    )
                   ] })
                 ]
               }
             ),
-            o < n.length - 1 && /* @__PURE__ */ t(
+            i < n.length - 1 && /* @__PURE__ */ e(
               "div",
               {
-                className: a(
+                className: o(
                   "border-t border-dashed border-stroke-hairline transition-colors",
-                  e === "horizontal" ? "flex-1 min-w-[24px] mx-1 self-center" : "h-6 w-0 border-l ml-[12px] my-[-4px]"
+                  r === "horizontal" ? "flex-1 min-w-[24px] mx-1 self-center" : "h-6 w-0 border-l ml-[12px] my-[-4px]"
                 )
               }
             )
-          ] }, o);
+          ] }, i);
         })
       }
     );