impact-nova 2.4.0 → 2.5.0

package/dist/components/flows/accordion-nested-list/accordion-nested-list.js

@@ -1,103 +1,118 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { useState as H, useCallback as u, useMemo as J } from "react";
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { useState as H, useCallback as f, useMemo as J } from "react";
 import { AccordionItem as K, AccordionTrigger as Q, AccordionContent as R, Accordion as N } from "../../primitives/accordion/accordion.js";
-import { Button as g } from "../../primitives/button/button.js";
+import { Button as y } from "../../primitives/button/button.js";
 import { NestedList as U } from "../../data/nested-list/nested-list.js";
 import { useAccordionNestedListState as X } from "./hooks/useAccordionNestedListState.js";
 import { SelectionMode as Y } from "../../data/nested-list/nested-list.types.js";
 import { cn as Z } from "../../../lib/utils.js";
 import { useImpactNovaI18n as $ } from "../../../i18n/use-impact-nova-i18n.js";
-const se = ({
+const ce = ({
   sections: l,
   onChange: m,
   onSubmit: h,
-  onCancel: f,
+  onCancel: u,
   enableApplyDiscard: C = !0,
-  submitButtonLabel: L,
-  cancelButtonLabel: S,
-  className: x = "",
-  enableSearch: B = !0,
-  enableDragDrop: k = !0,
-  enableSelectAll: D = !0,
-  selectionMode: I = Y.CASCADE_DOWN,
-  searchPlaceholder: V,
-  value: j,
-  onValueChange: P,
-  isMultiExpanded: n = !0,
-  defaultCollapseAll: w = !1,
-  validateApply: s
+  submitButtonLabel: g,
+  cancelButtonLabel: L,
+  className: S = "",
+  enableSearch: k = !0,
+  enableDragDrop: w = !0,
+  enableSelectAll: B = !0,
+  selectionMode: D = Y.CASCADE_DOWN,
+  searchPlaceholder: I,
+  value: V,
+  onValueChange: j,
+  isMultiExpanded: r = !0,
+  defaultCollapseAll: P = !1,
+  validateApply: c
 }) => {
-  const { t: i } = $(), M = L ?? i("nestedList.apply"), O = S ?? i("nestedList.reset"), T = V ?? i("nestedList.searchPlaceholder"), {
-    currentSections: a,
-    hasChanges: c,
+  const { t: i } = $(), M = g ?? i("nestedList.apply"), O = L ?? i("nestedList.reset"), T = I ?? i("nestedList.searchPlaceholder"), {
+    currentSections: n,
+    hasChanges: o,
     setCurrentSection: p,
-    saveAllSections: A,
-    discardAllSections: b
-  } = X({ sections: l }), [W, _] = H(() => w ? n ? [] : "" : l.length > 0 ? n ? [l[0].id] : l[0].id : n ? [] : ""), t = j ?? W, v = P ?? _, q = u(
-    (e, o) => {
-      p(e, o), m?.(e, o);
+    saveAllSections: x,
+    discardAllSections: v
+  } = X({ sections: l }), [W, _] = H(() => P ? r ? [] : "" : l.length > 0 ? r ? [l[0].id] : l[0].id : r ? [] : ""), a = V ?? W, b = j ?? _, q = f(
+    (e, s) => {
+      p(e, s), m?.(e, s);
     },
     [m, p]
-  ), z = u(() => {
-    A(), h?.(a);
-  }, [a, h, A]), F = u(() => {
-    b(), f?.();
-  }, [b, f]), G = J(() => c ? s ? s(a) : !0 : !1, [c, s, a]), y = l.map((e) => /* @__PURE__ */ d(K, { value: e.id, children: [
-    /* @__PURE__ */ r(Q, { children: e.label }),
-    /* @__PURE__ */ r(R, { className: "min-h-0 h-full", children: /* @__PURE__ */ r("div", { className: "h-full min-h-0 pb-2", children: /* @__PURE__ */ r(
-      U,
-      {
-        items: a[e.id] || [],
-        onChange: (o) => q(e.id, o),
-        enableApplyDiscard: !1,
-        enableSearch: B,
-        enableDragDrop: k,
-        enableSelectAll: D,
-        selectionMode: e.selectionMode ?? I,
-        searchPlaceholder: T,
-        className: "h-full"
-      }
-    ) }) })
-  ] }, e.id));
+  ), z = f(() => {
+    x(), h?.(n);
+  }, [n, h, x]), F = f(() => {
+    v(), u?.();
+  }, [v, u]), G = J(() => o ? c ? c(n) : !0 : !1, [o, c, n]), A = l.map((e) => /* @__PURE__ */ d(
+    K,
+    {
+      value: e.id,
+      className: "flex flex-col border-b-0 data-[state=open]:flex-1 data-[state=open]:min-h-0",
+      children: [
+        /* @__PURE__ */ t(Q, { className: "shrink-0", children: e.label }),
+        /* @__PURE__ */ t(
+          R,
+          {
+            className: "flex min-h-0 flex-1 flex-col px-0 pb-2 pt-0",
+            surfaceClassName: "overflow-hidden data-[state=open]:flex data-[state=open]:flex-1 data-[state=open]:min-h-0 data-[state=open]:flex-col data-[state=open]:overflow-hidden data-[state=open]:h-full data-[state=open]:animate-none",
+            children: /* @__PURE__ */ t(
+              U,
+              {
+                items: n[e.id] || [],
+                onChange: (s) => q(e.id, s),
+                enableApplyDiscard: !1,
+                enableSearch: k,
+                enableDragDrop: w,
+                enableSelectAll: B,
+                selectionMode: e.selectionMode ?? D,
+                searchPlaceholder: T,
+                className: "flex-1 min-h-0"
+              }
+            )
+          }
+        )
+      ]
+    },
+    e.id
+  ));
   return /* @__PURE__ */ d(
     "div",
     {
-      className: Z("flex flex-col h-full", x),
+      className: Z("flex min-h-0 flex-col", S),
       "data-component": "accordion-nested-list",
-      "data-has-changes": c ? "" : void 0,
+      "data-has-changes": o ? "" : void 0,
       children: [
-        /* @__PURE__ */ r("div", { className: "flex-1 min-h-0 overflow-y-auto", children: n ? /* @__PURE__ */ r(
+        /* @__PURE__ */ t("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: r ? /* @__PURE__ */ t(
           N,
           {
             type: "multiple",
-            value: Array.isArray(t) ? t : t ? [t] : [],
-            onValueChange: v,
-            className: "space-y-4",
-            children: y
+            value: Array.isArray(a) ? a : a ? [a] : [],
+            onValueChange: b,
+            className: "flex min-h-0 flex-1 flex-col overflow-hidden space-y-4",
+            children: A
           }
-        ) : /* @__PURE__ */ r(
+        ) : /* @__PURE__ */ t(
           N,
           {
             type: "single",
             collapsible: !0,
-            value: Array.isArray(t) ? t[0] ?? "" : t,
-            onValueChange: v,
-            className: "space-y-4",
-            children: y
+            value: Array.isArray(a) ? a[0] ?? "" : a,
+            onValueChange: b,
+            className: "flex min-h-0 flex-1 flex-col overflow-hidden space-y-4",
+            children: A
           }
         ) }),
         C && /* @__PURE__ */ d("div", { className: "flex-shrink-0 flex justify-end gap-2 pt-4 border-t mt-4", children: [
-          /* @__PURE__ */ r(
-            g,
+          /* @__PURE__ */ t(
+            y,
             {
               variant: "tertiary",
               onClick: F,
-              disabled: !c,
+              disabled: !o,
               children: O
             }
           ),
-          /* @__PURE__ */ r(
-            g,
+          /* @__PURE__ */ t(
+            y,
             {
               variant: "default",
               onClick: z,
@@ -111,5 +126,5 @@ const se = ({
   );
 };
 export {
-  se as AccordionNestedList
+  ce as AccordionNestedList
 };

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

@@ -1,189 +1,216 @@
-import { jsxs as k, jsx as s } from "react/jsx-runtime";
+import { jsxs as P, jsx as s } from "react/jsx-runtime";
 import * as o from "react";
-import { Cross as _, CalendarMonth as ee } from "impact-nova-icons";
-import { cn as te } from "../../../lib/utils.js";
-import { usePickerDismissActionsRef as ne, usePickerFooterDismissNudge as re, isDateInputInvalid as oe, resolveSingleValueDismissFlash as se, compareMonthSelection as ie, handlePickerSurfacePointerDown as ae, resolveDateInputOnBlur as ce, maskDateInput as le, parseDateInput as pe, resolveDateInputOnEnter as fe } from "./date-input-behavior.js";
-import { Input as de } from "../input/input.js";
-import { Popover as ue, PopoverAnchor as me, PopoverContent as he } from "../../feedback/popover/popover.js";
-import { Calendar as ye } from "../../data-display/calendar/calendar.js";
-import { Tooltip as w, TooltipTrigger as E, TooltipContent as V } from "../../feedback/tooltip/tooltip.js";
-import { useImpactNovaI18n as Me } from "../../../i18n/use-impact-nova-i18n.js";
-import { coerceSingleMonthApply as De, coerceSingleMonth as ge } from "./calendar-selection-adapters.js";
-import { buildDateBoundsMatcher as ke } from "../../../lib/date-bounds-matcher.js";
-const m = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, Ie = o.forwardRef(
+import { Cross as ne, CalendarMonth as re } from "impact-nova-icons";
+import { cn as oe } from "../../../lib/utils.js";
+import { usePickerDismissActionsRef as se, usePickerFooterDismissNudge as ie, isDateInputInvalid as ae, resolveSingleValueDismissFlash as ce, compareMonthSelection as le, handlePickerSurfacePointerDown as pe, maskDateInput as fe, parseDateInput as ue, resolveDateInputOnEnter as de, resolveDateInputOnBlur as me } from "./date-input-behavior.js";
+import { Input as he } from "../input/input.js";
+import { Popover as ye, PopoverAnchor as ge, PopoverContent as Me } from "../../feedback/popover/popover.js";
+import { Calendar as De } from "../../data-display/calendar/calendar.js";
+import { Tooltip as T, TooltipTrigger as O, TooltipContent as V } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as ke } from "../../../i18n/use-impact-nova-i18n.js";
+import { coerceSingleMonthApply as Pe, coerceSingleMonth as Ie } from "./calendar-selection-adapters.js";
+import { buildDateBoundsMatcher as Ce } from "../../../lib/date-bounds-matcher.js";
+const h = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, Se = o.forwardRef(
   ({
     value: t,
     onChange: p,
-    placeholder: v,
-    minDate: b,
-    maxDate: O,
-    startMonth: B,
-    endMonth: F,
-    showFooter: i = !0,
-    disabled: f,
+    placeholder: B,
+    minDate: F,
+    maxDate: j,
+    startMonth: v,
+    endMonth: K,
+    showFooter: c = !0,
+    disabled: i,
     className: Y,
-    ...j
-  }, K) => {
-    const { t: d } = Me(), z = v ?? d("datePicker.selectMonth"), I = o.useRef(null), C = o.useRef(null);
-    o.useImperativeHandle(K, () => I.current);
-    const [r, a] = o.useState(!1), R = ne(), { footerFlashKey: H, footerFlashTarget: $, popoverHandlers: L } = re(i, r, R, C), [y, c] = o.useState(t), [u, l] = o.useState(t ? m(t) : ""), [q, P] = o.useState(t ? new Date(t.year, t.month) : /* @__PURE__ */ new Date());
+    onBlur: z,
+    ...H
+  }, $) => {
+    const { t: u } = ke(), L = B ?? u("datePicker.selectMonth"), I = o.useRef(null), x = o.useRef(null);
+    o.useImperativeHandle($, () => I.current);
+    const [r, R] = o.useState(!1), f = o.useCallback(() => {
+      R(!1);
+    }, []), d = (e) => {
+      if (!i) {
+        if (e) {
+          R(!0);
+          return;
+        }
+        f();
+      }
+    }, b = se(), { footerFlashKey: q, footerFlashTarget: G, popoverHandlers: J } = ie(c, r, b, x), [M, a] = o.useState(t), [m, l] = o.useState(t ? h(t) : ""), [Q, C] = o.useState(t ? new Date(t.year, t.month) : /* @__PURE__ */ new Date());
     o.useEffect(() => {
-      r || (l(t ? m(t) : ""), c(t));
+      r || (l(t ? h(t) : ""), a(t));
     }, [r, t]), o.useEffect(() => {
-      r && (c(t), P(t ? new Date(t.year, t.month) : /* @__PURE__ */ new Date()), l(t ? m(t) : ""));
+      r && (a(t), C(t ? new Date(t.year, t.month) : /* @__PURE__ */ new Date()), l(t ? h(t) : ""));
     }, [r, t]);
-    const G = (e) => {
-      const n = ge(e);
-      c(n), n && l(m(n)), i || (p?.(n), a(!1));
-    }, x = (e) => {
-      const n = De(e, y);
-      p?.(n), a(!1);
+    const U = (e) => {
+      const n = Ie(e);
+      a(n), n && l(h(n)), c || (p?.(n), f());
+    }, w = (e) => {
+      const n = Pe(e, M);
+      p?.(n), f();
     }, S = () => {
-      c(t), l(t ? m(t) : ""), a(!1);
-    }, A = () => {
-      c(void 0), l(""), p?.(void 0), i || a(!1);
-    }, h = "MM/yyyy", M = t ? m(t) : "", D = o.useRef(!1), J = (e) => {
-      const n = le(e.target.value, h, u);
+      a(t), l(t ? h(t) : ""), f();
+    }, N = () => {
+      a(void 0), l(""), p?.(void 0), c || f();
+    }, y = "MM/yyyy", D = t ? h(t) : "", g = o.useRef(!1), W = (e) => {
+      const n = fe(e.target.value, y, m);
       if (l(n), n === "") {
-        c(void 0), i || p?.(void 0);
+        a(void 0), c || p?.(void 0);
         return;
       }
-      const { parsed: g, isValid: Z } = pe(n, h);
-      if (Z && g) {
-        const T = { month: g.getMonth(), year: g.getFullYear() };
-        c(T), P(g), i || p?.(T);
+      const { parsed: k, isValid: te } = ue(n, y);
+      if (te && k) {
+        const E = { month: k.getMonth(), year: k.getFullYear() };
+        a(E), C(k), c || p?.(E);
       }
-    }, Q = () => {
+    }, X = () => {
       if (r) return;
-      const e = ce(u, h, M);
+      const e = me(m, y, D);
       if (e.resetToCommitted) {
-        l(M), c(t);
+        l(D), a(t);
         return;
       }
       if (e.parsed) {
         const n = { month: e.parsed.getMonth(), year: e.parsed.getFullYear() };
-        l(e.display), c(n), i || p?.(n);
+        l(e.display), a(n), c || p?.(n);
         return;
       }
-      l(M), c(t);
-    }, U = () => {
-      if (r && i) {
-        x();
+      l(D), a(t);
+    }, Z = () => {
+      if (r && c) {
+        w();
         return;
       }
-      const e = fe(u, h);
+      const e = de(m, y);
       if (e.parsed) {
         const n = {
           month: e.parsed.getMonth(),
           year: e.parsed.getFullYear()
         };
-        i && (p?.(n), a(!1));
+        c && (p?.(n), f());
         return;
       }
-      r || (D.current = !0, a(!0));
-    }, N = M !== u, W = oe(u, h), X = o.useCallback(
-      () => se(
-        y,
+      r || (g.current = !0, d(!0));
+    }, A = D !== m, _ = ae(m, y), ee = o.useCallback(
+      () => ce(
+        M,
         t,
-        (e, n) => ie(e, n) === 0
+        (e, n) => le(e, n) === 0
       ),
-      [y, t]
+      [M, t]
     );
     return o.useLayoutEffect(() => {
-      R.current = {
+      b.current = {
         onDismiss: S,
-        resolveFlash: X
+        resolveFlash: ee
       };
-    }), /* @__PURE__ */ k(ue, { open: f ? !1 : r, onOpenChange: (e) => {
-      f || !e && i || a(e);
-    }, children: [
-      /* @__PURE__ */ s(me, { asChild: !0, children: /* @__PURE__ */ s(
+    }), /* @__PURE__ */ P(ye, { open: i ? !1 : r, onOpenChange: d, children: [
+      /* @__PURE__ */ s(ge, { asChild: !0, children: /* @__PURE__ */ s(
         "div",
         {
-          ref: C,
+          ref: x,
           "data-component": "month-picker",
           "data-state": r ? "open" : "closed",
-          "data-pending": N || void 0,
-          onPointerDown: (e) => ae({
-            disabled: f,
+          "data-pending": A || void 0,
+          onPointerDown: (e) => pe({
+            disabled: i,
             event: e,
-            onOpen: () => a(!0),
+            onOpen: () => d(!0),
             focusField: () => I.current?.focus()
           }),
           children: /* @__PURE__ */ s(
-            de,
+            he,
             {
               ref: I,
-              value: u,
-              onChange: J,
-              onBlur: Q,
-              onClick: () => !f && a(!0),
+              value: m,
+              onChange: W,
+              onBlur: (e) => {
+                X(), z?.(e);
+              },
+              onClick: () => !i && d(!0),
               onKeyDown: (e) => {
-                e.key === "Enter" && !f && (e.preventDefault(), U()), e.key === "ArrowDown" && !r && !f && (e.preventDefault(), D.current = !0, a(!0)), e.key === "Escape" && r && (e.preventDefault(), S());
+                e.key === "Enter" && !i && (e.preventDefault(), Z()), e.key === "ArrowDown" && !r && !i && (e.preventDefault(), g.current = !0, d(!0)), e.key === "Escape" && r && (e.preventDefault(), S());
               },
-              placeholder: r ? d("datePicker.monthYearFormat") : z,
-              disabled: f,
+              placeholder: r ? u("datePicker.monthYearFormat") : L,
+              disabled: i,
               "data-form-control": "input",
-              className: te(
+              className: oe(
                 "cursor-pointer",
-                W ? "text-destructive" : N ? "text-content-placeholder" : "",
+                _ ? "text-destructive" : A ? "text-content-placeholder" : "",
                 Y
               ),
-              suffix: /* @__PURE__ */ k("div", { className: "flex items-center gap-1", children: [
-                t && !f && /* @__PURE__ */ k(w, { children: [
-                  /* @__PURE__ */ s(E, { asChild: !0, children: /* @__PURE__ */ s(
+              suffix: /* @__PURE__ */ P("div", { className: "flex items-center gap-1", children: [
+                t && !i && /* @__PURE__ */ P(T, { children: [
+                  /* @__PURE__ */ s(O, { asChild: !0, children: /* @__PURE__ */ s(
                     "button",
                     {
                       type: "button",
                       tabIndex: 0,
-                      "aria-label": d("calendar.clear"),
+                      "aria-label": u("calendar.clear"),
                       onClick: (e) => {
-                        e.stopPropagation(), A();
+                        e.stopPropagation(), N();
                       },
                       className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
-                      children: /* @__PURE__ */ s(_, { className: "size-3 hover:text-content" })
+                      children: /* @__PURE__ */ s(ne, { className: "size-3 hover:text-content" })
                     }
                   ) }),
-                  /* @__PURE__ */ s(V, { variant: "tertiary", side: "top", children: d("calendar.clear") })
+                  /* @__PURE__ */ s(V, { variant: "tertiary", side: "top", children: u("calendar.clear") })
                 ] }),
-                /* @__PURE__ */ k(w, { children: [
-                  /* @__PURE__ */ s(E, { asChild: !0, children: /* @__PURE__ */ s(ee, { className: "h-4 w-4 text-secondary-foreground" }) }),
-                  /* @__PURE__ */ s(V, { variant: "tertiary", side: "top", children: d("datePicker.selectMonth") })
+                /* @__PURE__ */ P(T, { children: [
+                  /* @__PURE__ */ s(O, { asChild: !0, children: /* @__PURE__ */ s(
+                    "button",
+                    {
+                      type: "button",
+                      tabIndex: 0,
+                      "data-component": "calendar-trigger",
+                      "aria-label": u("datePicker.selectMonth"),
+                      onClick: (e) => {
+                        e.stopPropagation(), i || (r ? f() : d(!0));
+                      },
+                      onKeyDown: (e) => {
+                        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), i || (g.current = !0, r ? f() : d(!0)));
+                      },
+                      className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer",
+                      children: /* @__PURE__ */ s(re, { className: "h-4 w-4 text-secondary-foreground" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ s(V, { variant: "tertiary", side: "top", children: u("datePicker.selectMonth") })
                 ] })
               ] }),
-              ...j
+              ...H
             }
           )
         }
       ) }),
       /* @__PURE__ */ s(
-        he,
+        Me,
         {
           className: "w-auto p-0",
           align: "start",
-          "aria-label": d("datePicker.selectMonth"),
+          "aria-label": u("datePicker.selectMonth"),
           onOpenAutoFocus: (e) => {
-            D.current || e.preventDefault(), D.current = !1;
+            g.current || e.preventDefault(), g.current = !1;
           },
-          ...L,
+          ...J,
           children: /* @__PURE__ */ s(
-            ye,
+            De,
             {
               pickerType: "month",
               monthMode: "single",
-              selectedMonths: y,
-              footerFlashKey: H,
-              footerFlashTarget: $,
-              onMonthSelect: G,
-              month: q,
-              onMonthChange: P,
-              disabled: ke(b, O),
-              startMonth: B,
-              endMonth: F,
-              showFooter: i,
-              onApply: x,
+              selectedMonths: M,
+              footerFlashKey: q,
+              footerFlashTarget: G,
+              onMonthSelect: U,
+              month: Q,
+              onMonthChange: C,
+              disabled: Ce(F, j),
+              startMonth: v,
+              endMonth: K,
+              showFooter: c,
+              onApply: w,
               onCancel: S,
-              onClear: A
+              onClear: N
             }
           )
         }
@@ -191,7 +218,7 @@ const m = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, Ie =
     ] });
   }
 );
-Ie.displayName = "MonthPicker";
+Se.displayName = "MonthPicker";
 export {
-  Ie as MonthPicker
+  Se as MonthPicker
 };