impact-nova 2.5.6 → 2.5.8

package/dist/components/forms/date-picker/year-picker.js

@@ -0,0 +1,176 @@
+import { jsx as r, jsxs as y } from "react/jsx-runtime";
+import * as t from "react";
+import { Cross as W, CalendarMonth as X } from "impact-nova-icons";
+import { cn as Z } from "../../../lib/utils.js";
+import { Input as _ } from "../input/input.js";
+import { Calendar as $ } from "../../data-display/calendar/calendar.js";
+import { Tooltip as x, TooltipTrigger as R, TooltipContent as D } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as ee } from "../../../i18n/use-impact-nova-i18n.js";
+import { buildDateBoundsMatcher as re } from "../../../lib/date-bounds-matcher.js";
+import { fiscalCalendarPassThrough as te } from "./fiscal-pass-through.js";
+import { DatePickerShell as ne } from "./date-picker-shell.js";
+import { usePickerDismissActionsRef as oe, usePickerFooterDismissNudge as ae, handleReadonlyPickerKeyDown as ie, handlePickerSurfacePointerDown as ce } from "./date-input-behavior.js";
+import { formatYearInput as se } from "../../data-display/calendar/calendar-fiscal-labels.js";
+import { viewMonthFromYear as le } from "../../data-display/calendar/calendar-year-utils.js";
+const pe = t.forwardRef(
+  ({
+    value: n,
+    onChange: d,
+    placeholder: Y,
+    minDate: v,
+    maxDate: N,
+    startMonth: S,
+    endMonth: A,
+    showFooter: s = !0,
+    disabled: o,
+    className: I,
+    calendarKind: O,
+    fiscalMode: T,
+    granularity: w,
+    fiscalMonthPattern: M,
+    fiscalYearStartMonth: K,
+    fiscalConfig: k,
+    showPresets: j,
+    showIntervalCaption: F = !1,
+    ...L
+  }, z) => {
+    const { t: a } = ee(), E = Y ?? a("datePicker.selectYear"), m = t.useRef(null), P = t.useRef(null);
+    t.useImperativeHandle(z, () => m.current);
+    const [i, c] = t.useState(!1), u = t.useRef(!1), g = oe(), { footerFlashKey: H, footerFlashTarget: V, popoverHandlers: B } = ae(s, i, g, P), [C, l] = t.useState(n), [q, G] = t.useState(le(n));
+    t.useEffect(() => {
+      i || l(n);
+    }, [i, n]);
+    const p = t.useCallback(() => c(!1), []), J = te({
+      calendarKind: O,
+      fiscalMode: T,
+      granularity: w,
+      fiscalMonthPattern: M,
+      fiscalYearStartMonth: K,
+      fiscalConfig: k,
+      showPresets: j
+    }), Q = (e) => {
+      const f = e && !Array.isArray(e) && !("from" in e) && !("to" in e) ? e : void 0;
+      l(f), s || (d?.(f), p());
+    }, U = () => {
+      d?.(C), p();
+    }, h = () => {
+      l(n), p();
+    }, b = () => {
+      l(void 0), d?.(void 0), s || p();
+    };
+    return t.useLayoutEffect(() => {
+      g.current = { onDismiss: h, resolveFlash: () => "cancel" };
+    }), /* @__PURE__ */ r(
+      ne,
+      {
+        open: i,
+        disabled: o,
+        ariaLabel: a("datePicker.selectYear"),
+        onOpenChange: (e) => {
+          o || c(e);
+        },
+        onOpenAutoFocus: (e) => {
+          u.current || e.preventDefault(), u.current = !1;
+        },
+        popoverHandlers: B,
+        trigger: /* @__PURE__ */ r(
+          "div",
+          {
+            ref: P,
+            "data-component": "year-picker",
+            "data-state": i ? "open" : "closed",
+            onPointerDown: (e) => ce({
+              disabled: o,
+              event: e,
+              onOpen: () => c(!0),
+              focusField: () => m.current?.focus()
+            }),
+            children: /* @__PURE__ */ r(
+              _,
+              {
+                ref: m,
+                value: n ? se(n, k?.fyLabel ?? "fy-long") : "",
+                readOnly: !0,
+                onKeyDown: (e) => ie(e, {
+                  disabled: o,
+                  open: i,
+                  onOpen: () => c(!0),
+                  onCancel: h,
+                  onKeyboardOpen: () => {
+                    u.current = !0;
+                  }
+                }),
+                onClick: () => !o && c(!0),
+                placeholder: E,
+                disabled: o,
+                "data-form-control": "input",
+                className: Z("cursor-pointer", I),
+                suffix: /* @__PURE__ */ y("div", { className: "flex items-center gap-1", children: [
+                  n && !o ? /* @__PURE__ */ y(x, { children: [
+                    /* @__PURE__ */ r(R, { asChild: !0, children: /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: 0,
+                        "aria-label": a("calendar.clear"),
+                        onClick: (e) => {
+                          e.stopPropagation(), b();
+                        },
+                        className: "inline-flex size-4 items-center justify-center border-none bg-transparent p-0",
+                        children: /* @__PURE__ */ r(W, { className: "size-3 hover:text-content" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ r(D, { variant: "tertiary", side: "top", children: a("calendar.clear") })
+                  ] }) : null,
+                  /* @__PURE__ */ y(x, { children: [
+                    /* @__PURE__ */ r(R, { asChild: !0, children: /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: 0,
+                        "data-component": "calendar-trigger",
+                        "aria-label": a("datePicker.selectYear"),
+                        onClick: (e) => {
+                          e.stopPropagation(), o || c((f) => !f);
+                        },
+                        className: "inline-flex items-center justify-center border-none bg-transparent p-0",
+                        children: /* @__PURE__ */ r(X, { className: "h-4 w-4 text-secondary-foreground" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ r(D, { variant: "tertiary", side: "top", children: a("datePicker.selectYear") })
+                  ] })
+                ] }),
+                ...L
+              }
+            )
+          }
+        ),
+        children: /* @__PURE__ */ r(
+          $,
+          {
+            pickerType: "year",
+            selectedYear: C,
+            footerFlashKey: H,
+            footerFlashTarget: V,
+            onYearSelect: Q,
+            month: q,
+            onMonthChange: G,
+            disabled: re(v, N),
+            startMonth: S,
+            endMonth: A,
+            showFooter: s,
+            onApply: U,
+            onCancel: h,
+            onClear: b,
+            showIntervalCaption: F,
+            ...J
+          }
+        )
+      }
+    );
+  }
+);
+pe.displayName = "YearPicker";
+export {
+  pe as YearPicker
+};

package/dist/components/forms/date-picker/year-range-picker.d.ts

@@ -0,0 +1,3 @@
+import { YearRangePickerProps } from './date-picker.types';
+import * as React from "react";
+export declare const YearRangePicker: React.ForwardRefExoticComponent<YearRangePickerProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/forms/date-picker/year-range-picker.js

@@ -0,0 +1,179 @@
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import * as t from "react";
+import { Cross as Z, CalendarMonth as _ } from "impact-nova-icons";
+import { cn as ee } from "../../../lib/utils.js";
+import { Input as re } from "../input/input.js";
+import { Calendar as te } from "../../data-display/calendar/calendar.js";
+import { Tooltip as x, TooltipTrigger as D, TooltipContent as Y } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as ne } from "../../../i18n/use-impact-nova-i18n.js";
+import { buildDateBoundsMatcher as oe } from "../../../lib/date-bounds-matcher.js";
+import { fiscalCalendarPassThrough as ae } from "./fiscal-pass-through.js";
+import { DatePickerShell as ie } from "./date-picker-shell.js";
+import { usePickerDismissActionsRef as ce, usePickerFooterDismissNudge as se, handleReadonlyPickerKeyDown as le, handlePickerSurfacePointerDown as fe } from "./date-input-behavior.js";
+import { formatYearInput as N } from "../../data-display/calendar/calendar-fiscal-labels.js";
+import { viewMonthFromYear as pe } from "../../data-display/calendar/calendar-year-utils.js";
+const de = t.forwardRef(
+  ({
+    value: n,
+    onChange: d,
+    placeholder: S,
+    minDate: v,
+    maxDate: A,
+    startMonth: I,
+    endMonth: M,
+    showFooter: l = !0,
+    disabled: o,
+    className: O,
+    calendarKind: T,
+    fiscalMode: w,
+    granularity: K,
+    fiscalMonthPattern: j,
+    fiscalYearStartMonth: F,
+    fiscalConfig: y,
+    showPresets: L,
+    showIntervalCaption: $ = !1,
+    ...z
+  }, E) => {
+    const { t: a } = ne(), H = S ?? a("datePicker.selectYearRange"), k = y?.fyLabel ?? "fy-long", m = t.useRef(null), P = t.useRef(null);
+    t.useImperativeHandle(E, () => m.current);
+    const [i, c] = t.useState(!1), u = t.useRef(!1), R = ce(), { footerFlashKey: V, footerFlashTarget: B, popoverHandlers: q } = se(l, i, R, P), [C, f] = t.useState(n), [G, J] = t.useState(pe(n?.from));
+    t.useEffect(() => {
+      i || f(n);
+    }, [i, n]);
+    const p = t.useCallback(() => c(!1), []), Q = ae({
+      calendarKind: T,
+      fiscalMode: w,
+      granularity: K,
+      fiscalMonthPattern: j,
+      fiscalYearStartMonth: F,
+      fiscalConfig: y,
+      showPresets: L
+    }), U = (e) => {
+      const s = e && !Array.isArray(e) && ("from" in e || "to" in e) ? e : void 0;
+      f(s), l || (d?.(s), s?.to && p());
+    }, W = () => {
+      d?.(C), p();
+    }, h = () => {
+      f(n), p();
+    }, b = () => {
+      f(void 0), d?.(void 0), l || p();
+    };
+    t.useLayoutEffect(() => {
+      R.current = { onDismiss: h, resolveFlash: () => "cancel" };
+    });
+    const X = n?.from ? `${N(n.from, k)}${n.to ? ` – ${N(n.to, k)}` : ""}` : "";
+    return /* @__PURE__ */ r(
+      ie,
+      {
+        open: i,
+        disabled: o,
+        ariaLabel: a("datePicker.selectYearRange"),
+        onOpenChange: (e) => {
+          o || c(e);
+        },
+        onOpenAutoFocus: (e) => {
+          u.current || e.preventDefault(), u.current = !1;
+        },
+        popoverHandlers: q,
+        trigger: /* @__PURE__ */ r(
+          "div",
+          {
+            ref: P,
+            "data-component": "year-range-picker",
+            "data-state": i ? "open" : "closed",
+            onPointerDown: (e) => fe({
+              disabled: o,
+              event: e,
+              onOpen: () => c(!0),
+              focusField: () => m.current?.focus()
+            }),
+            children: /* @__PURE__ */ r(
+              re,
+              {
+                ref: m,
+                value: X,
+                readOnly: !0,
+                onKeyDown: (e) => le(e, {
+                  disabled: o,
+                  open: i,
+                  onOpen: () => c(!0),
+                  onCancel: h,
+                  onKeyboardOpen: () => {
+                    u.current = !0;
+                  }
+                }),
+                onClick: () => !o && c(!0),
+                placeholder: H,
+                disabled: o,
+                "data-form-control": "input",
+                className: ee("cursor-pointer", O),
+                suffix: /* @__PURE__ */ g("div", { className: "flex items-center gap-1", children: [
+                  n?.from && !o ? /* @__PURE__ */ g(x, { children: [
+                    /* @__PURE__ */ r(D, { asChild: !0, children: /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: 0,
+                        "aria-label": a("calendar.clear"),
+                        onClick: (e) => {
+                          e.stopPropagation(), b();
+                        },
+                        className: "inline-flex size-4 items-center justify-center border-none bg-transparent p-0",
+                        children: /* @__PURE__ */ r(Z, { className: "size-3 hover:text-content" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ r(Y, { variant: "tertiary", side: "top", children: a("calendar.clear") })
+                  ] }) : null,
+                  /* @__PURE__ */ g(x, { children: [
+                    /* @__PURE__ */ r(D, { asChild: !0, children: /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: 0,
+                        "data-component": "calendar-trigger",
+                        "aria-label": a("datePicker.selectYearRange"),
+                        onClick: (e) => {
+                          e.stopPropagation(), o || c((s) => !s);
+                        },
+                        className: "inline-flex items-center justify-center border-none bg-transparent p-0",
+                        children: /* @__PURE__ */ r(_, { className: "h-4 w-4 text-secondary-foreground" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ r(Y, { variant: "tertiary", side: "top", children: a("datePicker.selectYearRange") })
+                  ] })
+                ] }),
+                ...z
+              }
+            )
+          }
+        ),
+        children: /* @__PURE__ */ r(
+          te,
+          {
+            pickerType: "year",
+            yearMode: "range",
+            selectedYear: C,
+            footerFlashKey: V,
+            footerFlashTarget: B,
+            onYearSelect: U,
+            month: G,
+            onMonthChange: J,
+            disabled: oe(v, A),
+            startMonth: I,
+            endMonth: M,
+            showFooter: l,
+            onApply: W,
+            onCancel: h,
+            onClear: b,
+            showIntervalCaption: $,
+            ...Q
+          }
+        )
+      }
+    );
+  }
+);
+de.displayName = "YearRangePicker";
+export {
+  de as YearRangePicker
+};

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

@@ -1,4 +1,4 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
+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";
@@ -8,25 +8,25 @@ import { useImpactNovaI18n as T } from "../../../i18n/use-impact-nova-i18n.js";
 function $({
   className: N,
   items: d,
-  renderItem: C,
+  renderItem: R,
   scrollStep: p = 200,
   hideScrollbar: u = !0,
   controlsPosition: v = "right",
   renderPrevious: x,
   renderNext: g,
-  maxWidth: R = "100%",
+  maxWidth: L = "100%",
   estimateSize: m = 200,
-  overscan: L = 5,
+  overscan: C = 5,
   ...B
 }, E) {
-  const { t: b } = T(), r = n.useRef(null), [o, H] = n.useState(!1), [s, I] = n.useState(!1);
+  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,
     horizontal: !0,
-    overscan: L
+    overscan: C
   }), V = c.getTotalSize(), f = n.useCallback(() => {
     const e = r.current;
     e && (H(e.scrollLeft > 0), I(
@@ -37,27 +37,23 @@ function $({
     const e = r.current;
     if (!e) return;
     f();
-    const l = () => f();
-    e.addEventListener("scroll", l);
-    const i = new ResizeObserver(() => {
+    const t = () => f();
+    e.addEventListener("scroll", t);
+    const a = new ResizeObserver(() => {
       f();
     });
-    return i.observe(e), () => {
-      e.removeEventListener("scroll", l), i.disconnect();
+    return a.observe(e), () => {
+      e.removeEventListener("scroll", t), a.disconnect();
     };
   }, [f, d, V]);
-  const w = () => {
+  const z = () => {
     r.current?.scrollBy({ left: -p, behavior: "smooth" });
-  }, z = () => {
+  }, b = () => {
     r.current?.scrollBy({ left: p, behavior: "smooth" });
-  }, S = ({
-    direction: e,
-    onClick: l,
-    disabled: i
-  }) => {
-    if (i) return null;
-    const k = b(e === "left" ? "horizontalScroller.scrollLeft" : "horizontalScroller.scrollRight");
-    return /* @__PURE__ */ a(
+  }, S = (e, t, a) => {
+    if (a) return null;
+    const k = w(e === "left" ? "horizontalScroller.scrollLeft" : "horizontalScroller.scrollRight");
+    return /* @__PURE__ */ i(
       O,
       {
         variant: "ghost",
@@ -65,67 +61,53 @@ function $({
         className: h(
           "h-8 w-8 rounded-md bg-canvas-muted text-content-tertiary hover:bg-brand-tint hover:text-brand"
         ),
-        onClick: l,
-        disabled: i,
+        onClick: t,
+        disabled: a,
         "aria-label": k,
         "data-component": e === "left" ? "horizontal-scroller-prev" : "horizontal-scroller-next",
         children: [
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ l(
             W,
             {
               className: h("h-4 w-4", e === "left" && "rotate-180")
             }
           ),
-          /* @__PURE__ */ t("span", { className: "sr-only", children: k })
+          /* @__PURE__ */ l("span", { className: "sr-only", children: k })
         ]
       }
     );
   }, y = (() => {
-    const e = x ? x({ onClick: w, disabled: !o }) : /* @__PURE__ */ t(
-      S,
-      {
-        direction: "left",
-        onClick: w,
-        disabled: !o
-      }
-    ), l = g ? g({ onClick: z, disabled: !s }) : /* @__PURE__ */ t(
-      S,
-      {
-        direction: "right",
-        onClick: z,
-        disabled: !s
-      }
-    );
+    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__ */ t("div", { className: "flex-shrink-0", children: e }) : null,
-      right: s ? /* @__PURE__ */ t("div", { className: "flex-shrink-0", children: l }) : null
+      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__ */ a("div", { className: "flex-shrink-0 flex items-center gap-1", children: [
+      left: o || s ? /* @__PURE__ */ i("div", { className: "flex-shrink-0 flex items-center gap-1", children: [
         e,
-        l
+        t
       ] }) : null,
       right: null
     } : {
       left: null,
-      right: o || s ? /* @__PURE__ */ a("div", { className: "flex-shrink-0 flex items-center gap-1", children: [
+      right: o || s ? /* @__PURE__ */ i("div", { className: "flex-shrink-0 flex items-center gap-1", children: [
         e,
-        l
+        t
       ] }) : null
     };
   })();
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ i(
     "div",
     {
       className: h(
         "flex items-center gap-2 min-w-0 w-full bg-transparent",
         N
       ),
-      style: { maxWidth: R },
+      style: { maxWidth: L },
       "data-component": "horizontal-scroller",
       ...B,
       children: [
         y.left,
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ l(
           "div",
           {
             ref: r,
@@ -140,7 +122,7 @@ function $({
               msOverflowStyle: u ? "none" : "auto"
             },
             "data-component": "horizontal-scroller-viewport",
-            children: /* @__PURE__ */ a(
+            children: /* @__PURE__ */ i(
               "div",
               {
                 style: {
@@ -149,7 +131,7 @@ function $({
                   position: "relative"
                 },
                 children: [
-                  /* @__PURE__ */ t(
+                  /* @__PURE__ */ l(
                     "div",
                     {
                       style: {
@@ -158,13 +140,13 @@ function $({
                       }
                     }
                   ),
-                  c.getVirtualItems().map((e) => /* @__PURE__ */ t(
+                  c.getVirtualItems().map((e) => /* @__PURE__ */ l(
                     "div",
                     {
                       ref: c.measureElement,
                       "data-index": e.index,
                       className: "flex-shrink-0",
-                      children: C(d[e.index], e.index)
+                      children: R(d[e.index], e.index)
                     },
                     e.key
                   ))