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

package/dist/components/primitives/iris/iris.js

@@ -1,109 +1,110 @@
-import { jsx as t, jsxs as g } from "react/jsx-runtime";
+import { jsx as t, jsxs as I } from "react/jsx-runtime";
 import * as x from "react";
-import { Alan as C } from "impact-nova-icons";
-import { Button as p } from "../button/button.js";
+import { Alan as b } from "impact-nova-icons";
+import { Button as w } from "../button/button.js";
 import { Popover as B, PopoverTrigger as z, PopoverContent as k } from "../../feedback/popover/popover.js";
 import { OverflowTooltip as A } from "../../feedback/tooltip/overflow-tooltip.js";
-import { createComponent as f } from "../../../lib/primitives/create-component.js";
+import { createComponent as g } from "../../../lib/primitives/create-component.js";
 import { cn as l } from "../../../lib/utils.js";
-import { IrisAlanGradientIcon as I } from "./iris-alan-gradient-icon.js";
-import { irisButtonToButtonSize as V, irisButtonVariants as O, irisChromeWrapperVariants as P, irisIconChromeWrapperVariants as T, irisIconFilledButtonVariants as S, irisIconButtonToButtonSize as j, irisIconButtonVariants as y, irisMenuVariants as M } from "./iris.variants.js";
+import { IrisAlanGradientIcon as v } from "./iris-alan-gradient-icon.js";
+import { irisButtonToButtonSize as T, irisButtonVariants as V, irisChromeWrapperVariants as O, irisIconChromeWrapperVariants as P, irisIconFilledButtonVariants as y, irisIconButtonToButtonSize as S, irisIconButtonVariants as j, irisMenuVariants as M } from "./iris.variants.js";
 import { IrisControlProvider as _, IrisControlRegion as $ } from "./iris-control-region.js";
 import { IrisAgentCursor as ii } from "./iris-agent-cursor.js";
-import { useIrisControl as ni } from "./iris-control-context.js";
+import { useIrisControl as oi } from "./iris-control-context.js";
 const G = {
   sm: 14,
   md: 16,
   lg: 16
-}, U = f(
+}, U = g(
   "IrisButton",
   ({
-    className: n,
+    className: o,
     size: i = "md",
-    shape: o = "default",
+    shape: n = "default",
     children: e,
     type: s = "button",
     ...r
-  }, a) => /* @__PURE__ */ t("span", { className: P({ shape: o }), children: /* @__PURE__ */ g(
-    p,
+  }, a) => /* @__PURE__ */ t("span", { className: O({ shape: n }), children: /* @__PURE__ */ I(
+    w,
     {
       ref: a,
       type: s,
       variant: "ghost",
-      size: V[i],
+      size: T[i],
       "data-component": "iris-button",
       "data-size": i,
-      "data-shape": o,
-      className: l(O({ size: i }), n),
+      "data-shape": n,
+      className: l(V({ size: i }), o),
       ...r,
       children: [
-        /* @__PURE__ */ t(I, { size: G[i] }),
+        /* @__PURE__ */ t(v, { size: G[i] }),
         e ?? "Ask Iris"
       ]
     }
   ) })
-), R = f(
+), R = g(
   "IrisIconButton",
   ({
-    className: n,
+    className: o,
     appearance: i = "outline",
-    size: o = "md",
+    size: n = "md",
     shape: e = "default",
     type: s = "button",
     "aria-label": r = "Ask Iris",
     ...a
-  }, m) => {
-    const c = T({ appearance: i, shape: e }), d = i === "filled" ? /* @__PURE__ */ t(C, { size: 16, className: "text-brand-foreground" }) : /* @__PURE__ */ t(I, { size: 16 });
-    return i === "filled" ? /* @__PURE__ */ t("span", { className: c, children: /* @__PURE__ */ t(
+  }, d) => {
+    const m = P({ appearance: i, shape: e }), c = i === "filled" ? /* @__PURE__ */ t(b, { size: 16, className: "text-brand-foreground" }) : /* @__PURE__ */ t(v, { size: 16 });
+    return i === "filled" ? /* @__PURE__ */ t("span", { className: m, children: /* @__PURE__ */ t(
       "button",
       {
-        ref: m,
+        ref: d,
         type: s,
         "data-component": "iris-icon-button",
         "data-appearance": i,
-        "data-size": o,
+        "data-size": n,
         "data-shape": e,
         "aria-label": r,
-        className: l(S({ size: o }), n),
+        className: l(y({ size: n }), o),
         ...a,
-        children: d
+        children: c
       }
-    ) }) : /* @__PURE__ */ t("span", { className: c, children: /* @__PURE__ */ t(
-      p,
+    ) }) : /* @__PURE__ */ t("span", { className: m, children: /* @__PURE__ */ t(
+      w,
       {
-        ref: m,
+        ref: d,
         type: s,
         variant: "ghost",
-        size: j[o],
+        size: S[n],
         "data-component": "iris-icon-button",
         "data-appearance": i,
-        "data-size": o,
+        "data-size": n,
         "data-shape": e,
         "aria-label": r,
-        className: l(y({ size: o }), n),
+        className: l(j({ size: n }), o),
         ...a,
-        children: d
+        children: c
       }
     ) });
   }
-), N = f(
+), C = g(
   "IrisMenu",
   ({
-    className: n,
+    className: o,
     appearance: i = "loading",
-    children: o,
+    children: n,
     onAskInChat: e,
     askInChatLabel: s = "Ask in chat",
-    ...r
-  }, a) => {
-    const m = i === "loading" || i === "status", c = i === "card", d = /* @__PURE__ */ g(
+    overflowTooltipContent: r,
+    ...a
+  }, d) => {
+    const m = i === "loading" || i === "status", c = i === "card", f = r ?? (typeof n == "string" ? n : void 0), u = /* @__PURE__ */ I(
       "div",
       {
-        ref: a,
+        ref: d,
         "data-component": "iris-menu",
         "data-appearance": i,
-        className: l(M({ appearance: i }), n),
-        ...r,
+        className: l(M({ appearance: i }), o),
+        ...a,
         children: [
           m && /* @__PURE__ */ t(
             "span",
@@ -112,7 +113,7 @@ const G = {
                 "inline-flex shrink-0 items-center justify-center",
                 i === "status" ? "size-4" : "size-6"
               ),
-              children: /* @__PURE__ */ t(I, { size: i === "status" ? 16 : 20 })
+              children: /* @__PURE__ */ t(v, { size: i === "status" ? 16 : 20 })
             }
           ),
           /* @__PURE__ */ t(
@@ -133,12 +134,13 @@ const G = {
                   variant: "secondary",
                   side: "top",
                   sideOffset: 10,
-                  children: o
+                  content: f,
+                  children: n
                 }
-              ) : o
+              ) : n
             }
           ),
-          c && e && /* @__PURE__ */ t(p, { variant: "outline", size: "sm", className: "max-h-7 capitalize", onClick: e, children: s })
+          c && e && /* @__PURE__ */ t(w, { variant: "outline", size: "sm", className: "max-h-7 capitalize", onClick: e, children: s })
         ]
       }
     );
@@ -149,66 +151,66 @@ const G = {
           "iris-edge-wash-shell iris-edge-wash-shell--menu rounded-xl motion-reduce:animate-none",
           i === "status" && "iris-edge-wash-shell--fluid iris-edge-wash-shell--menu-plain"
         ),
-        children: d
+        children: u
       }
-    ) : d;
+    ) : u;
   }
-), X = f(
+), X = g(
   "IrisInsight",
   ({
-    status: n = "idle",
+    status: o = "idle",
     iconSize: i = "md",
-    iconAppearance: o = "outline",
+    iconAppearance: n = "outline",
     loadingLabel: e = "Gathering insights...",
     onTriggerClick: s,
     onAskInChat: r,
     askInChatLabel: a,
-    className: m,
-    children: c
-  }, d) => {
-    const [w, v] = x.useState(!1), u = n === "loading" || n === "ready", b = n === "loading";
+    className: d,
+    children: m
+  }, c) => {
+    const [f, u] = x.useState(!1), h = o === "loading" || o === "ready", N = o === "loading";
     return x.useEffect(() => {
-      n === "loading" && v(!0);
-    }, [n]), /* @__PURE__ */ t(
+      o === "loading" && u(!0);
+    }, [o]), /* @__PURE__ */ t(
       "div",
       {
-        ref: d,
+        ref: c,
         "data-component": "iris",
-        "data-status": n,
-        className: l("relative inline-flex items-start", m),
-        children: /* @__PURE__ */ g(
+        "data-status": o,
+        className: l("relative inline-flex items-start", d),
+        children: /* @__PURE__ */ I(
           B,
           {
-            open: u ? w : !1,
-            onOpenChange: (h) => {
-              u && v(h);
+            open: h ? f : !1,
+            onOpenChange: (p) => {
+              h && u(p);
             },
             children: [
               /* @__PURE__ */ t(z, { asChild: !0, children: /* @__PURE__ */ t(
                 R,
                 {
                   size: i,
-                  appearance: b ? "filled" : o,
-                  "aria-expanded": w && u,
-                  onClick: (h) => {
-                    n === "idle" && (s?.(), h.preventDefault());
+                  appearance: N ? "filled" : n,
+                  "aria-expanded": f && h,
+                  onClick: (p) => {
+                    o === "idle" && (s?.(), p.preventDefault());
                   }
                 }
               ) }),
-              u && /* @__PURE__ */ t(
+              h && /* @__PURE__ */ t(
                 k,
                 {
                   align: "end",
                   side: "bottom",
                   sideOffset: 7,
                   className: "w-auto border-0 bg-transparent p-0 shadow-none motion-reduce:animate-none",
-                  children: n === "loading" ? /* @__PURE__ */ t(N, { appearance: "loading", children: e }) : /* @__PURE__ */ t(
-                    N,
+                  children: o === "loading" ? /* @__PURE__ */ t(C, { appearance: "loading", children: e }) : /* @__PURE__ */ t(
+                    C,
                     {
                       appearance: "card",
                       onAskInChat: r,
                       askInChatLabel: a,
-                      children: c
+                      children: m
                     }
                   )
                 }
@@ -227,6 +229,6 @@ export {
   $ as IrisControlRegion,
   R as IrisIconButton,
   X as IrisInsight,
-  N as IrisMenu,
-  ni as useIrisControl
+  C as IrisMenu,
+  oi as useIrisControl
 };

package/dist/components/primitives/iris/iris.types.d.ts

@@ -19,6 +19,8 @@ export type IrisMenuProps = React.HTMLAttributes<HTMLDivElement> & {
     appearance?: IrisMenuAppearance;
     onAskInChat?: () => void;
     askInChatLabel?: string;
+    /** Tooltip body when `children` is not a plain string (e.g. formatted insight copy). */
+    overflowTooltipContent?: React.ReactNode;
 };
 export type IrisInsightStatus = "idle" | "loading" | "ready";
 export type IrisInsightProps = {

package/dist/form-react/Fields/VirtualizedListField.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { FormFieldProps } from '../types/reactHookForm.types';
+export declare const VirtualizedListField: FC<FormFieldProps>;

package/dist/form-react/Fields/VirtualizedListField.js

@@ -0,0 +1,174 @@
+import { jsx as i, jsxs as x } from "react/jsx-runtime";
+import { useState as b } from "react";
+import { Controller as k } from "react-hook-form";
+import { ChoiceCardGroup as I, ChoiceCard as j, ChoiceCardIndicator as q, ChoiceCardContent as z, ChoiceCardTitle as D } from "../../components/forms/choice-card/choice-card.js";
+import { SkuPickerChrome as B } from "../../components/data/expandable-list-item/sku-picker-chrome.js";
+import { cn as S } from "../../lib/utils.js";
+import { getFieldTestId as M } from "../utils/fieldTestIds.js";
+function P(e) {
+  if (!Array.isArray(e))
+    return [];
+  const r = [];
+  for (const t of e)
+    typeof t == "string" && r.push(t);
+  return r;
+}
+function y(e, r, t) {
+  if (t === "single") {
+    const l = Array.from(r).find((o) => !e.includes(o));
+    return l ? [l] : Array.from(r).slice(0, 1);
+  }
+  const a = [];
+  for (const l of e)
+    r.has(l) && a.push(l);
+  for (const l of r)
+    e.includes(l) || a.push(l);
+  return a;
+}
+function d(e) {
+  return typeof e.label == "string" ? e.label : e.value;
+}
+function E(e, r, t) {
+  const a = r.trim().toLowerCase(), l = e.filter(
+    (o) => d(o).toLowerCase().includes(a)
+  );
+  return t ? l.sort(
+    (o, f) => d(o).localeCompare(d(f))
+  ) : l;
+}
+function G(e, r) {
+  let t = 0;
+  for (const a of e)
+    if (a.isDisabled !== !0 && (t += 1, !r.includes(a.value)))
+      return !1;
+  return t > 0;
+}
+function R(e, r) {
+  const t = [];
+  for (const a of r) {
+    const l = e.find((o) => o.value === a);
+    if (l && (t.push(d(l)), t.length === 5))
+      break;
+  }
+  return t;
+}
+function _(e) {
+  const r = e.view === "card";
+  return /* @__PURE__ */ i(
+    I,
+    {
+      type: "multiple",
+      value: e.selected ? [e.option.value] : [],
+      onValueChange: (t) => {
+        t.includes(e.option.value) !== e.selected && e.onToggle();
+      },
+      disabled: e.disabled,
+      className: "min-w-0 w-full",
+      children: /* @__PURE__ */ x(
+        j,
+        {
+          value: e.option.value,
+          size: "sm",
+          disabled: e.disabled,
+          "aria-label": d(e.option),
+          className: S(
+            "w-full min-w-0 items-center",
+            !r && "justify-start gap-3 rounded-none border-0 bg-transparent p-0 shadow-none hover:border-0 data-[selected]:border-0 data-[selected]:bg-transparent data-[selected]:shadow-none"
+          ),
+          children: [
+            /* @__PURE__ */ i(
+              q,
+              {
+                className: r ? "order-last self-center" : "order-first self-center"
+              }
+            ),
+            /* @__PURE__ */ i(z, { className: "min-w-0", children: /* @__PURE__ */ i(D, { className: "whitespace-normal normal-case", children: d(e.option) }) })
+          ]
+        }
+      )
+    }
+  );
+}
+const X = ({
+  field: e,
+  validationRules: r,
+  isDisabled: t,
+  formHelpers: a
+}) => {
+  const [l, o] = b(""), [f, N] = b(!1), [m, A] = b("card");
+  if (e.fieldType !== "virtualized_list") return null;
+  const C = e.options ?? [], g = e.selectionMode ?? "multi", L = a.form.control, h = E(C, l, f);
+  return /* @__PURE__ */ i(
+    k,
+    {
+      name: e.id,
+      control: L,
+      disabled: t,
+      rules: r,
+      render: ({ field: u, fieldState: p }) => {
+        const c = P(u.value), v = !!p.error, w = v ? p.error?.message : e.helpText, T = (n) => {
+          if (t || n.isDisabled === !0)
+            return;
+          const s = new Set(c);
+          s.has(n.value) ? s.delete(n.value) : s.add(n.value), u.onChange(y(c, s, g));
+        }, V = () => {
+          if (g === "single") {
+            const s = h.find((O) => O.isDisabled !== !0);
+            u.onChange(s ? [s.value] : []);
+            return;
+          }
+          const n = new Set(c);
+          for (const s of h)
+            s.isDisabled !== !0 && n.add(s.value);
+          u.onChange(y(c, n, "multi"));
+        };
+        return /* @__PURE__ */ x("div", { "data-testid": M(e.id), children: [
+          /* @__PURE__ */ i(
+            B,
+            {
+              collapsible: e.collapsible,
+              defaultCollapsed: e.defaultCollapsed,
+              title: e.label,
+              required: e.isRequired,
+              emptyLabel: "None selected",
+              searchLabel: e.label ? `Search ${e.label}` : "Search",
+              showBack: !1,
+              view: m,
+              search: l,
+              sortAlphabetically: f,
+              selectedCount: c.length,
+              allSelected: G(h, c),
+              previewCodes: R(C, c),
+              onSearchChange: o,
+              onViewChange: A,
+              onToggleSort: () => N((n) => !n),
+              onSelectAll: V,
+              onClear: () => u.onChange([]),
+              children: /* @__PURE__ */ i(
+                "div",
+                {
+                  className: m === "card" ? "grid w-full grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-3" : "flex w-full flex-col gap-2",
+                  children: h.map((n) => /* @__PURE__ */ i(
+                    _,
+                    {
+                      option: n,
+                      selected: c.includes(n.value),
+                      disabled: t || n.isDisabled === !0,
+                      view: m,
+                      onToggle: () => T(n)
+                    },
+                    n.value
+                  ))
+                }
+              )
+            }
+          ),
+          w ? /* @__PURE__ */ i("p", { className: S("mt-1 text-xs", v ? "text-destructive" : "text-content-tertiary"), children: w }) : null
+        ] });
+      }
+    }
+  );
+};
+export {
+  X as VirtualizedListField
+};

package/dist/form-react/fields.d.ts

@@ -14,6 +14,7 @@ export { SelectField } from './Fields/SelectField';
 export { CheckboxField } from './Fields/CheckboxField';
 export { SwitchField } from './Fields/SwitchField';
 export { ChipsField } from './Fields/ChipsField';
+export { VirtualizedListField } from './Fields/VirtualizedListField';
 export { DateInputField } from './Fields/DateInputField';
 export { FillFormByPasteField } from './Fields/FillFormByPasteField';
 export { FillFormByFileUploadField } from './Fields/FillFormByFileUploadField';

package/dist/form-react/fields.js

@@ -1,50 +1,52 @@
-import { TextField as r } from "./Fields/TextField.js";
+import { TextField as o } from "./Fields/TextField.js";
 import { TextAreaField as t } from "./Fields/TextAreaField.js";
 import { ButtonsGroupField as d } from "./Fields/ButtonsGroupField.js";
 import { RadioField as F } from "./Fields/RadioField.js";
 import { DateRangeField as m } from "./Fields/DateRangeField.js";
 import { WeekRangeField as a } from "./Fields/WeekRangePicker.js";
 import { MonthRangeField as n } from "./Fields/MonthRangeField.js";
-import { FileUploadField as h } from "./Fields/FileUploadField.js";
+import { FileUploadField as u } from "./Fields/FileUploadField.js";
 import { SelectField as R } from "./Fields/SelectField.js";
 import { CheckboxField as g } from "./Fields/CheckboxField.js";
-import { SwitchField as B } from "./Fields/SwitchField.js";
-import { ChipsField as b } from "./Fields/ChipsField.js";
-import { DateInputField as C } from "./Fields/DateInputField.js";
-import { FillFormByPasteField as W } from "./Fields/FillFormByPasteField.js";
-import { FillFormByFileUploadField as y } from "./Fields/FillFormByFileUploadField.js";
-import { NumericComboboxField as U } from "./Fields/NumericComboboxField.js";
+import { SwitchField as s } from "./Fields/SwitchField.js";
+import { ChipsField as T } from "./Fields/ChipsField.js";
+import { VirtualizedListField as C } from "./Fields/VirtualizedListField.js";
+import { DateInputField as W } from "./Fields/DateInputField.js";
+import { FillFormByPasteField as y } from "./Fields/FillFormByPasteField.js";
+import { FillFormByFileUploadField as U } from "./Fields/FillFormByFileUploadField.js";
+import { NumericComboboxField as w } from "./Fields/NumericComboboxField.js";
 import { MultiMonthPickerField as A } from "./Fields/MultiMonthPickerField.js";
 import { MultiWeekPickerField as I } from "./Fields/MultiWeekPickerField.js";
-import { TextFieldWithBackendValidation as V } from "./Fields/TextFieldWithBackendValidation.js";
+import { TextFieldWithBackendValidation as N } from "./Fields/TextFieldWithBackendValidation.js";
 import { SliderRangeField as q } from "./Fields/SliderRangeField.js";
-import { RichTextField as z } from "./Fields/RichTextField.js";
-import { YearPickerField as H } from "./Fields/YearPickerField.js";
-import { MultiYearPickerField as K } from "./Fields/MultiYearPickerField.js";
-import { YearRangePickerField as O } from "./Fields/YearRangePickerField.js";
+import { RichTextField as E } from "./Fields/RichTextField.js";
+import { YearPickerField as J } from "./Fields/YearPickerField.js";
+import { MultiYearPickerField as O } from "./Fields/MultiYearPickerField.js";
+import { YearRangePickerField as X } from "./Fields/YearRangePickerField.js";
 export {
   d as ButtonsGroupField,
   g as CheckboxField,
-  b as ChipsField,
-  C as DateInputField,
+  T as ChipsField,
+  W as DateInputField,
   m as DateRangeField,
-  h as FileUploadField,
-  y as FillFormByFileUploadField,
-  W as FillFormByPasteField,
+  u as FileUploadField,
+  U as FillFormByFileUploadField,
+  y as FillFormByPasteField,
   n as MonthRangeField,
   A as MultiMonthPickerField,
   I as MultiWeekPickerField,
-  K as MultiYearPickerField,
-  U as NumericComboboxField,
+  O as MultiYearPickerField,
+  w as NumericComboboxField,
   F as RadioField,
-  z as RichTextField,
+  E as RichTextField,
   R as SelectField,
   q as SliderRangeField,
-  B as SwitchField,
+  s as SwitchField,
   t as TextAreaField,
-  r as TextField,
-  V as TextFieldWithBackendValidation,
+  o as TextField,
+  N as TextFieldWithBackendValidation,
+  C as VirtualizedListField,
   a as WeekRangeField,
-  H as YearPickerField,
-  O as YearRangePickerField
+  J as YearPickerField,
+  X as YearRangePickerField
 };

package/dist/form-react/registry/defaultFieldRegistrations.d.ts

@@ -1,5 +1,5 @@
 /**
- * Register all 26 built-in field types. Safe to call multiple times — runs once.
+ * Register all built-in field types. Safe to call multiple times — runs once.
  *
  * Consumers must call this at app startup (or use `registerFieldType` selectively)
  * before rendering any `FieldRenderer` / `ReactHooksForm`.

package/dist/form-react/registry/defaultFieldRegistrations.js

@@ -2,11 +2,11 @@ import { registerFieldType as e } from "./fieldRegistry.js";
 import { SelectField as r } from "../Fields/SelectField.js";
 import { ButtonsGroupField as o } from "../Fields/ButtonsGroupField.js";
 import { RadioField as t } from "../Fields/RadioField.js";
-import { TextField as m } from "../Fields/TextField.js";
-import { TextAreaField as l } from "../Fields/TextAreaField.js";
+import { TextField as l } from "../Fields/TextField.js";
+import { TextAreaField as m } from "../Fields/TextAreaField.js";
 import { DateRangeField as d } from "../Fields/DateRangeField.js";
-import { DateInputField as p } from "../Fields/DateInputField.js";
-import { WeekRangeField as a } from "../Fields/WeekRangePicker.js";
+import { DateInputField as a } from "../Fields/DateInputField.js";
+import { WeekRangeField as p } from "../Fields/WeekRangePicker.js";
 import { MonthRangeField as f } from "../Fields/MonthRangeField.js";
 import { MultiWeekPickerField as F } from "../Fields/MultiWeekPickerField.js";
 import { MultiMonthPickerField as _ } from "../Fields/MultiMonthPickerField.js";
@@ -14,21 +14,22 @@ import { FileUploadField as n } from "../Fields/FileUploadField.js";
 import { FillFormByPasteField as c } from "../Fields/FillFormByPasteField.js";
 import { FillFormByFileUploadField as u } from "../Fields/FillFormByFileUploadField.js";
 import { ChipsField as k } from "../Fields/ChipsField.js";
+import { VirtualizedListField as s } from "../Fields/VirtualizedListField.js";
 import { TextFieldWithBackendValidation as b } from "../Fields/TextFieldWithBackendValidation.js";
 import { SwitchField as g } from "../Fields/SwitchField.js";
 import { CheckboxField as h } from "../Fields/CheckboxField.js";
-import { LabelField as s } from "../Fields/LabelField.js";
-import { DividerField as x } from "../Fields/DividerField.js";
-import { DividerWithLabelField as y } from "../Fields/DividerWithLabelField.js";
+import { LabelField as x } from "../Fields/LabelField.js";
+import { DividerField as y } from "../Fields/DividerField.js";
+import { DividerWithLabelField as v } from "../Fields/DividerWithLabelField.js";
 import { NumericComboboxField as w } from "../Fields/NumericComboboxField.js";
 import { SliderRangeField as P } from "../Fields/SliderRangeField.js";
 import { YearPickerField as R } from "../Fields/YearPickerField.js";
-import { MultiYearPickerField as v } from "../Fields/MultiYearPickerField.js";
-import { YearRangePickerField as D } from "../Fields/YearRangePickerField.js";
+import { MultiYearPickerField as D } from "../Fields/MultiYearPickerField.js";
+import { YearRangePickerField as M } from "../Fields/YearRangePickerField.js";
 let i = !1;
-function ie() {
-  i || (i = !0, e("divider", x), e("divider_with_label", y), e("label", s), e("select", r), e("button_group", o), e("radio", t), e("text", m), e("numeric_combobox", w), e("text_area", l), e("date", p), e("date_range", d), e("week_range", a), e("multi_week_picker", F), e("month_range", f), e("multi_month_picker", _), e("file_upload", n), e("fill_form_by_paste", c), e("fill_form_by_file_upload", u), e("chips", k), e("text_with_backend_validation", b), e("switch", g), e("checkbox", h), e("slider_range", P), e("year_picker", R), e("multi_year_picker", v), e("year_range", D));
+function oe() {
+  i || (i = !0, e("divider", y), e("divider_with_label", v), e("label", x), e("select", r), e("button_group", o), e("radio", t), e("text", l), e("numeric_combobox", w), e("text_area", m), e("date", a), e("date_range", d), e("week_range", p), e("multi_week_picker", F), e("month_range", f), e("multi_month_picker", _), e("file_upload", n), e("fill_form_by_paste", c), e("fill_form_by_file_upload", u), e("chips", k), e("virtualized_list", s), e("text_with_backend_validation", b), e("switch", g), e("checkbox", h), e("slider_range", P), e("year_picker", R), e("multi_year_picker", D), e("year_range", M));
 }
 export {
-  ie as registerDefaultFieldTypes
+  oe as registerDefaultFieldTypes
 };

package/dist/form-react/types/fields.types.d.ts

@@ -488,6 +488,26 @@ export type ChipsField = BaseField & {
     /** When true in single mode, re-clicking the active chip clears the selection. */
     allowDeselect?: boolean;
 };
+/**
+ * Controlled multi/single select rendered with the virtualized list.
+ * Form state is a JSON array of selected option values (`string[]`).
+ */
+export type VirtualizedListField = BaseField & {
+    fieldType: "virtualized_list";
+    options: Array<Option>;
+    /** `multi` stores every selected value. `single` stores at most one. Default: multi. */
+    selectionMode?: "single" | "multi";
+    /** Selected option values when the form first mounts. */
+    defaultSelectedValues?: string[];
+    /** Row height in pixels. Default: 44. */
+    estimateSize?: number;
+    /** Scroll viewport height in pixels. Default: 240. */
+    viewportHeight?: number;
+    /** Fold search and choices behind the label, with the selection summary on the header. */
+    collapsible?: boolean;
+    /** Start folded. Ignored unless `collapsible` is set. */
+    defaultCollapsed?: boolean;
+};
 export type DividerField = BaseField & {
     fieldType: "divider";
     className?: string;
@@ -549,6 +569,6 @@ export type RichTextField = BaseField & {
     /** Minimum editor height in px. Default: 150 */
     minHeight?: number;
 };
-export type IField = FileUploadField | ButtonsGroupField | SelectField | DateInputField | DateRangeField | WeekRangeField | MonthRangeField | MultiMonthPickerField | TextAreaField | RadioField | TextField | NumericComboboxField | CopyPasteField | FillFormByFileUploadField | TextFieldWithBackendValidation | ChipsField | DividerField | DividerWithLabelField | LabelField | SwitchField | CheckboxField | YearPickerField | MultiYearPickerField | YearRangePickerField | MultiWeekRangeField | SliderRangeField | RichTextField | ObjectFieldConfig | ArrayFieldConfig;
+export type IField = FileUploadField | ButtonsGroupField | SelectField | DateInputField | DateRangeField | WeekRangeField | MonthRangeField | MultiMonthPickerField | TextAreaField | RadioField | TextField | NumericComboboxField | CopyPasteField | FillFormByFileUploadField | TextFieldWithBackendValidation | ChipsField | VirtualizedListField | DividerField | DividerWithLabelField | LabelField | SwitchField | CheckboxField | YearPickerField | MultiYearPickerField | YearRangePickerField | MultiWeekRangeField | SliderRangeField | RichTextField | ObjectFieldConfig | ArrayFieldConfig;
 /** Discriminant string union for every built-in field type */
 export type FieldType = IField["fieldType"];