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

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

@@ -0,0 +1,169 @@
+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",
+            !r && "items-center 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" : "order-first" }),
+            /* @__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"];

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

@@ -23,6 +23,8 @@ export type MultiMonthPickerFieldOutput = MonthSelection[] | null | undefined;
 /** Empty string is the unset default from getFieldDefaultValue */
 export type NumericComboboxFieldOutput = number | "" | null | undefined;
 export type ChipsFieldOutput = string | string[] | null | undefined;
+/** Selected option values. Single mode still stores a one-item array. */
+export type VirtualizedListFieldOutput = string[] | null | undefined;
 export type SwitchFieldOutput = boolean | null | undefined;
 export type CheckboxFieldOutput = boolean | null | undefined;
 export type SliderRangeFieldOutput = number[] | null | undefined;
@@ -36,7 +38,7 @@ export type PresentationalFieldOutput = null | undefined;
  * Union of all field output values (recursive for object / array nesting).
  * Defined independently of FieldTypeToOutputMap to avoid circular map lookups.
  */
-export type FieldOutputValue = FileUploadFieldOutput | ButtonsGroupFieldOutput | SelectFieldOutput | DateInputFieldOutput | DateRangeFieldOutput | WeekRangeFieldOutput | MultiWeekPickerFieldOutput | MonthRangeFieldOutput | MultiMonthPickerFieldOutput | TextAreaFieldOutput | RadioFieldOutput | TextFieldOutput | NumericComboboxFieldOutput | CopyPasteFieldOutput | FillFormByFileUploadFieldOutput | TextFieldWithBackendValidationOutput | ChipsFieldOutput | SwitchFieldOutput | CheckboxFieldOutput | SliderRangeFieldOutput | YearPickerFieldOutput | MultiYearPickerFieldOutput | YearRangePickerFieldOutput | RichTextFieldOutput | PresentationalFieldOutput | {
+export type FieldOutputValue = FileUploadFieldOutput | ButtonsGroupFieldOutput | SelectFieldOutput | DateInputFieldOutput | DateRangeFieldOutput | WeekRangeFieldOutput | MultiWeekPickerFieldOutput | MonthRangeFieldOutput | MultiMonthPickerFieldOutput | TextAreaFieldOutput | RadioFieldOutput | TextFieldOutput | NumericComboboxFieldOutput | CopyPasteFieldOutput | FillFormByFileUploadFieldOutput | TextFieldWithBackendValidationOutput | ChipsFieldOutput | VirtualizedListFieldOutput | SwitchFieldOutput | CheckboxFieldOutput | SliderRangeFieldOutput | YearPickerFieldOutput | MultiYearPickerFieldOutput | YearRangePickerFieldOutput | RichTextFieldOutput | PresentationalFieldOutput | {
     [key: string]: FieldOutputValue;
 } | Array<{
     [key: string]: FieldOutputValue;
@@ -62,6 +64,7 @@ export type FieldTypeToOutputMap = {
     fill_form_by_file_upload: FillFormByFileUploadFieldOutput;
     text_with_backend_validation: TextFieldWithBackendValidationOutput;
     chips: ChipsFieldOutput;
+    virtualized_list: VirtualizedListFieldOutput;
     switch: SwitchFieldOutput;
     checkbox: CheckboxFieldOutput;
     slider_range: SliderRangeFieldOutput;

package/dist/form-react/utils/fieldDefaults.utils.js

@@ -30,7 +30,7 @@ function u(e) {
     const t = e.min ?? 0;
     return e.range ? [t, e.max ?? 100] : [t];
   }
-  return e.fieldType === "year_picker" ? e.defaultValue != null ? { year: e.defaultValue } : null : e.fieldType === "multi_year_picker" ? e.defaultValue?.map((t) => ({ year: t })) ?? null : e.fieldType === "year_range" && e.defaultRange ? { from: { year: e.defaultRange.start }, to: { year: e.defaultRange.end } } : e.fieldType === "date" ? "" : e.fieldType === "select" ? [] : e.fieldType === "week_range" && e.defaultRange ? {
+  return e.fieldType === "year_picker" ? e.defaultValue != null ? { year: e.defaultValue } : null : e.fieldType === "multi_year_picker" ? e.defaultValue?.map((t) => ({ year: t })) ?? null : e.fieldType === "year_range" && e.defaultRange ? { from: { year: e.defaultRange.start }, to: { year: e.defaultRange.end } } : e.fieldType === "date" ? "" : e.fieldType === "select" ? [] : e.fieldType === "virtualized_list" ? e.defaultSelectedValues ?? [] : e.fieldType === "week_range" && e.defaultRange ? {
     start: e.defaultRange.start || null,
     end: e.defaultRange.end || null
   } : null;