impact-nova 2.2.1 → 2.2.3

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

@@ -1,129 +1,134 @@
-import { jsx as u, jsxs as ee } from "react/jsx-runtime";
-import ut, { useState as x, useRef as S } from "react";
-import * as te from "@radix-ui/react-popover";
+import { jsx as u, jsxs as te } from "react/jsx-runtime";
+import mt, { useState as A, useRef as S } from "react";
+import * as le from "@radix-ui/react-popover";
 import { useVirtualizer as dt } from "@tanstack/react-virtual";
-import { SelectMenuFooter as mt } from "./components/SelectMenuFooter.js";
-import { SelectMenuHeader as ft } from "./components/SelectMenuHeader.js";
-import { SelectMenuListBody as pt } from "./components/SelectMenuListBody.js";
-import { SelectMenuPanel as St } from "./components/SelectMenuPanel.js";
-import { SelectTrigger as ht } from "./components/SelectTrigger.js";
-import { cn as le } from "../../../lib/utils.js";
-import { useFieldChrome as gt } from "../../../lib/primitives/use-field-chrome.js";
-import { isOptionArray as bt, getSequence as Ot } from "./utils/select.js";
-import { useImpactNovaI18n as Mt } from "../../../i18n/use-impact-nova-i18n.js";
-import { useFlattenOptions as Ct } from "./hooks/useFlattenOptions.js";
+import { SelectMenuFooter as ft } from "./components/SelectMenuFooter.js";
+import { SelectMenuHeader as pt } from "./components/SelectMenuHeader.js";
+import { SelectMenuListBody as St } from "./components/SelectMenuListBody.js";
+import { SelectMenuPanel as ht } from "./components/SelectMenuPanel.js";
+import { SelectTrigger as gt } from "./components/SelectTrigger.js";
+import { cn as oe } from "../../../lib/utils.js";
+import { useFieldChrome as bt } from "../../../lib/primitives/use-field-chrome.js";
+import { isOptionArray as Ot, getSequence as Mt } from "./utils/select.js";
+import { useImpactNovaI18n as Ct } from "../../../i18n/use-impact-nova-i18n.js";
+import { useFlattenOptions as yt } from "./hooks/useFlattenOptions.js";
 import { useSelectKeyboardHandlers as It } from "./hooks/useSelectKeyboardHandlers.js";
-import { useSelectValueState as Vt } from "./hooks/useSelectValueState.js";
-import { useSelectMenuHeight as vt } from "./hooks/useSelectMenuHeight.js";
-import { useSelectMenuScroll as Lt } from "./hooks/useSelectMenuScroll.js";
+import { useSelectValueState as vt } from "./hooks/useSelectValueState.js";
+import { useSelectMenuHeight as Lt } from "./hooks/useSelectMenuHeight.js";
+import { useSelectMenuScroll as Vt } from "./hooks/useSelectMenuScroll.js";
 import { useSelectOpenEffects as xt } from "./hooks/useSelectOpenEffects.js";
-import { useSelectOutsideScrollLock as yt } from "./hooks/useSelectOutsideScrollLock.js";
-import { useSelectSearchFocus as At } from "./hooks/useSelectSearchFocus.js";
-import { useSelectSelectionHandlers as Rt } from "./hooks/useSelectSelectionHandlers.js";
+import { useSelectOutsideScrollLock as At } from "./hooks/useSelectOutsideScrollLock.js";
+import { useSelectSearchFocus as Rt } from "./hooks/useSelectSearchFocus.js";
+import { useSelectSelectionHandlers as wt } from "./hooks/useSelectSelectionHandlers.js";
 import { useSelectionModel as Pt } from "./hooks/useSelectionModel.js";
-import { useVisibleStats as wt } from "./hooks/useVisibleStats.js";
+import { useVisibleStats as Dt } from "./hooks/useVisibleStats.js";
+import { useOverlayNestedLayerDismiss as Nt } from "../../../lib/overlay/overlay-portal-context.js";
 import { SELECT_ALL_INDEX as qt } from "./select.constants.js";
-import { getSelectableOptionIndices as Dt } from "./utils/getSelectableOptionIndices.js";
-function oe(y) {
+import { getSelectableOptionIndices as Et } from "./utils/getSelectableOptionIndices.js";
+function ne(R) {
   const {
     options: C,
-    value: ne,
-    defaultValue: se,
-    onChange: N,
-    isMulti: re,
-    multiple: ie,
-    isDisabled: ae,
-    disabled: ce,
-    isLoading: r,
-    isClearable: ue = !0,
+    value: se,
+    defaultValue: re,
+    onChange: T,
+    isMulti: ie,
+    multiple: ae,
+    isDisabled: ce,
+    disabled: ue,
+    isLoading: i,
+    isClearable: me = !0,
     isSearchable: h = !0,
     placeholder: de,
     // menuPortalTarget is kept for API compatibility but no longer used (Radix handles portalling)
-    menuPortalTarget: Ft,
-    autoFocus: me,
-    closeMenuOnSelect: fe,
-    defaultMenuIsOpen: pe = !1,
-    scrollToSelectedOnOpen: Se = !1,
+    menuPortalTarget: Tt,
+    autoFocus: fe,
+    closeMenuOnSelect: pe,
+    defaultMenuIsOpen: Se = !1,
+    scrollToSelectedOnOpen: he = !1,
     maxSelectableOptions: g,
-    showSequence: T,
-    selectionOrder: he,
-    label: d,
-    required: ge,
-    isRequired: be,
-    error: Oe,
-    helperText: Me,
-    helperTextPosition: Ce = "absolute",
-    id: m,
+    showSequence: H,
+    selectionOrder: ge,
+    label: m,
+    required: be,
+    isRequired: Oe,
+    error: Me,
+    helperText: Ce,
+    helperTextPosition: ye = "absolute",
+    id: d,
     className: Ie,
-    parentClassName: Ve,
-    onMenuScrollToBottom: ve,
-    totalCount: Le,
+    parentClassName: ve,
+    onMenuScrollToBottom: Le,
+    estimateRowSize: y,
+    totalCount: Ve,
     name: xe,
-    isSelectAllEnabled: A = !0,
+    isSelectAllEnabled: w = !0,
     isReadOnly: n = !1,
     searchPosition: b = "menu",
-    footerContent: H,
-    onInputChange: ye,
+    footerContent: z,
+    onInputChange: Ae,
     getOptionLabel: B,
-    renderOption: Ae,
-    onMenuOpen: Re,
+    renderOption: Re,
+    onMenuOpen: we,
     onMenuClose: K,
-    labelOrientation: z = "top",
+    labelOrientation: $ = "top",
     size: Pe = "default",
-    leftContent: we,
-    ignoreCase: qe,
-    ignoreAccents: De,
+    leftContent: De,
+    ignoreCase: Ne,
+    ignoreAccents: qe,
     matchFrom: Ee,
     stringify: Fe,
-    trim: Ne,
-    filterOption: Te,
+    trim: Te,
+    filterOption: He,
     enableSubMenus: I = !1,
-    enableGroups: R = !1,
-    enableInvertedSelection: He,
-    fetchError: V,
+    enableGroups: P = !1,
+    enableInvertedSelection: ze,
+    fetchError: v,
     onRefetch: Be,
     menuWidth: Ke,
-    onClearAll: ze,
-    onFocus: $e,
-    onBlur: _e
-  } = y, t = ie ?? re ?? !1, i = ce ?? ae ?? !1, je = ge ?? be ?? !1, ke = fe ?? !t, { t: O } = Mt(), P = de ?? O("select.placeholder"), [l, $] = x(pe), [f, v] = x(""), {
-    usesMenuSession: Ge,
-    currentValue: s,
-    setCurrentValue: We,
-    beginMenuSession: Xe,
-    endMenuSession: Je
-  } = Vt({
-    value: ne,
-    defaultValue: se,
+    onClearAll: $e,
+    onFocus: _e,
+    onBlur: je
+  } = R, t = ae ?? ie ?? !1, s = ue ?? ce ?? !1, ke = be ?? Oe ?? !1, Ge = pe ?? !t, { t: O } = Ct(), D = de ?? O("select.placeholder"), [l, _] = A(Se), [f, L] = A(""), {
+    usesMenuSession: We,
+    currentValue: r,
+    setCurrentValue: Xe,
+    beginMenuSession: Je,
+    endMenuSession: Qe
+  } = vt({
+    value: se,
+    defaultValue: re,
     isMulti: !!t,
-    onChange: N
-  }), [Qe, _] = x(null), [a, j] = x(-1), k = S(!1), Ue = ut.useId(), p = m ?? Ue, G = `${p}-listbox`, Ye = l && a >= 0 ? a === qt ? `${p}-option-select-all` : `${p}-option-${a}` : void 0, W = S(null), w = S(null), Ze = S(null), q = S(null), D = S(null);
-  At(l, h, b, D);
-  const { flatOptions: o, isProcessing: c, totalOptionsCount: X, workerSelectAll: et } = Ct(C, f, {
-    ignoreCase: qe,
-    ignoreAccents: De,
+    onChange: T
+  }), [Ue, j] = A(null), [a, k] = A(-1), G = S(!1), Ye = mt.useId(), p = d ?? Ye, W = `${p}-listbox`, Ze = l && a >= 0 ? a === qt ? `${p}-option-select-all` : `${p}-option-${a}` : void 0, X = S(null), N = S(null), et = S(null), q = S(null), E = S(null);
+  Rt(l, h, b, E);
+  const { flatOptions: o, isProcessing: c, totalOptionsCount: J, workerSelectAll: tt } = yt(C, f, {
+    ignoreCase: Ne,
+    ignoreAccents: qe,
     matchFrom: Ee,
     stringify: Fe,
-    trim: Ne,
-    filterOption: Te,
+    trim: Te,
+    filterOption: He,
     enableSubMenus: I,
-    enableGroups: R
-  }), tt = vt(
+    enableGroups: P
+  }), lt = Lt(
     l,
-    !!r,
+    !!i,
     c,
-    w
-  ), M = Pt(s, t ?? !1), { stats: J, getGroupStats: lt } = wt(
+    N
+  ), M = Pt(r, t ?? !1), { stats: Q, getGroupStats: ot } = Dt(
     o,
-    X,
+    J,
     f,
     M,
-    s,
+    r,
     t ?? !1
-  ), L = dt({
+  ), V = dt({
     count: o.length,
     getScrollElement: () => q.current,
-    estimateSize: () => 34,
+    // Estimates only seed unmeasured rows — mounted rows self-measure via
+    // `measureElement` refs. Consumers rendering taller custom `renderOption`
+    // rows should pass `estimateRowSize` to keep scroll offsets sane.
+    estimateSize: (e) => typeof y == "function" ? y(e) : typeof y == "number" ? y : 34,
     overscan: 5
   });
   xt({
@@ -131,237 +136,237 @@ function oe(y) {
     isSearchable: h,
     searchPosition: b,
     isReadOnly: n,
-    isLoading: r,
+    isLoading: i,
     isProcessing: c,
-    fetchError: V,
+    fetchError: v,
     isMulti: t,
-    isSelectAllEnabled: A,
+    isSelectAllEnabled: w,
     flatOptions: o,
     searchValue: f,
     highlightedIndex: a,
-    setHighlightedIndex: j,
-    openedViaKeyboardRef: k,
-    scrollToSelectedOnOpen: Se,
+    setHighlightedIndex: k,
+    openedViaKeyboardRef: G,
+    scrollToSelectedOnOpen: he,
     selectionModel: M,
-    internalValue: s,
-    rowVirtualizer: L
-  }), Lt({
+    internalValue: r,
+    rowVirtualizer: V
+  }), Vt({
     isOpen: l,
-    isLoading: r,
+    isLoading: i,
     isProcessing: c,
     flatOptions: o,
     listRef: q,
-    rowVirtualizer: L,
-    onMenuScrollToBottom: ve
+    rowVirtualizer: V,
+    onMenuScrollToBottom: Le
   });
-  const E = (e) => {
-    if (!(i && e))
-      if ($(e), e)
-        Xe(), Re?.();
+  const x = (e) => {
+    if (!(s && e))
+      if (_(e), e)
+        Je(), we?.();
       else {
-        const F = Ge ? Je() : s, at = t && bt(F) ? F.map((ct) => ct.value) : void 0;
-        K?.(F, at), v(""), _(null);
+        const F = We ? Qe() : r, ct = t && Ot(F) ? F.map((ut) => ut.value) : void 0;
+        K?.(F, ct), L(""), j(null);
       }
   };
-  yt(l, w);
-  const Q = (e) => B ? B(e) : e.label, { handleSelect: U, handleSelectAll: Y, clearValue: ot } = Rt({
+  Nt(l && !s, x), At(l, N);
+  const U = (e) => B ? B(e) : e.label, { handleSelect: Y, handleSelectAll: Z, clearValue: nt } = wt({
     isMulti: t,
-    isDisabled: i,
+    isDisabled: s,
     isReadOnly: n,
-    internalValue: s,
-    setInternalValue: We,
-    onChange: N,
+    internalValue: r,
+    setInternalValue: Xe,
+    onChange: T,
     onMenuClose: K,
-    onClearAll: ze,
+    onClearAll: $e,
     enableSubMenus: I,
-    enableGroups: R,
-    enableInvertedSelection: He,
+    enableGroups: P,
+    enableInvertedSelection: ze,
     maxSelectableOptions: g,
-    closeMenuOnSelect: ke,
+    closeMenuOnSelect: Ge,
     options: C,
     flatOptions: o,
     searchValue: f,
     selectionModel: M,
-    visibleStats: J,
-    workerSelectAll: et,
-    setIsOpen: $,
-    setSearchValue: v
-  }), nt = (e) => Ot(
+    visibleStats: Q,
+    workerSelectAll: tt,
+    setIsOpen: _,
+    setSearchValue: L
+  }), st = (e) => Mt(
     e,
-    T ?? !1,
+    H ?? !1,
     t ?? !1,
-    he,
-    s
-  ), st = () => Dt({
-    isLoading: !!r,
+    ge,
+    r
+  ), rt = () => Et({
+    isLoading: !!i,
     isProcessing: c,
-    fetchError: V,
+    fetchError: v,
     isMulti: t,
-    isSelectAllEnabled: A,
+    isSelectAllEnabled: w,
     isReadOnly: n,
     flatOptions: o,
     enableSubMenus: I
-  }), { handleTriggerKeyDown: rt, handleSearchKeyDown: it } = It({
-    isDisabled: i,
+  }), { handleTriggerKeyDown: it, handleSearchKeyDown: at } = It({
+    isDisabled: s,
     isReadOnly: n,
     isOpen: l,
     isSearchable: h,
     searchPosition: b,
-    getSelectableIndices: st,
+    getSelectableIndices: rt,
     highlightedIndex: a,
-    setHighlightedIndex: j,
+    setHighlightedIndex: k,
     flatOptions: o,
-    rowVirtualizer: L,
-    handleOpenChange: E,
-    handleSelect: U,
-    handleSelectAll: Y,
-    openedViaKeyboardRef: k,
-    searchInputRef: D,
-    triggerRef: W
-  }), Z = gt({
-    label: d,
-    helperText: Me,
-    helperTextPosition: Ce,
-    labelOrientation: z,
-    error: Oe,
-    required: je,
-    disabled: i,
-    className: le(z === "left" && "w-fit items-center"),
-    rootClassName: Ve
+    rowVirtualizer: V,
+    handleOpenChange: x,
+    handleSelect: Y,
+    handleSelectAll: Z,
+    openedViaKeyboardRef: G,
+    searchInputRef: E,
+    triggerRef: X
+  }), ee = bt({
+    label: m,
+    helperText: Ce,
+    helperTextPosition: ye,
+    labelOrientation: $,
+    error: Me,
+    required: ke,
+    disabled: s,
+    className: oe($ === "left" && "w-fit items-center"),
+    rootClassName: ve
   });
   return /* @__PURE__ */ u(
     "div",
     {
-      "data-testid": `select-${m || "default"}`,
+      "data-testid": `select-${d || "default"}`,
       "data-component": "select",
-      children: Z.wrapControl(
-        /* @__PURE__ */ ee(te.Root, { open: l && !i, onOpenChange: E, modal: !1, children: [
-          /* @__PURE__ */ u(te.Anchor, { asChild: !0, children: /* @__PURE__ */ u(
-            ht,
+      children: ee.wrapControl(
+        /* @__PURE__ */ te(le.Root, { open: l && !s, onOpenChange: x, modal: !1, children: [
+          /* @__PURE__ */ u(le.Anchor, { asChild: !0, children: /* @__PURE__ */ u(
+            gt,
             {
-              triggerRef: W,
-              inputRef: Ze,
+              triggerRef: X,
+              inputRef: et,
               selectFieldId: p,
-              listboxId: G,
-              id: m,
+              listboxId: W,
+              id: d,
               className: Ie,
               size: Pe,
-              error: Z.hasError,
-              isDisabled: i,
+              error: ee.hasError,
+              isDisabled: s,
               isReadOnly: n,
               isOpen: l,
-              isLoading: r,
+              isLoading: i,
               isProcessing: c,
-              isClearable: ue,
+              isClearable: me,
               isSearchable: h,
               searchPosition: b,
               searchValue: f,
-              setSearchValue: v,
-              autoFocus: me,
+              setSearchValue: L,
+              autoFocus: fe,
               name: xe,
-              label: d,
-              placeholder: P,
-              leftContent: we,
-              activeDescendantId: Ye,
-              internalValue: s,
-              totalCount: Le,
-              totalOptionsCount: X,
+              label: m,
+              placeholder: D,
+              leftContent: De,
+              activeDescendantId: Ze,
+              internalValue: r,
+              totalCount: Ve,
+              totalOptionsCount: J,
               formatSelectedCount: (e) => O("select.selectedCount", { count: e }),
-              resolveOptionLabel: Q,
+              resolveOptionLabel: U,
               isMulti: t,
-              onFocus: $e,
-              onBlur: _e,
-              onKeyDown: rt,
-              onToggle: () => E(!l),
-              onClear: ot
+              onFocus: _e,
+              onBlur: je,
+              onKeyDown: it,
+              onToggle: () => x(!l),
+              onClear: nt
             }
           ) }),
-          /* @__PURE__ */ ee(
-            St,
+          /* @__PURE__ */ te(
+            ht,
             {
-              menuRef: w,
-              menuMinHeight: tt,
+              menuRef: N,
+              menuMinHeight: lt,
               menuWidth: Ke,
               isReadOnly: n,
-              id: m,
-              menuLabel: String(d || P),
+              id: d,
+              menuLabel: String(m || D),
               children: [
                 /* @__PURE__ */ u(
-                  ft,
+                  pt,
                   {
-                    id: m,
+                    id: d,
                     selectFieldId: p,
                     isReadOnly: n,
-                    isDisabled: i,
+                    isDisabled: s,
                     isMulti: t,
                     isSearchable: h,
                     searchPosition: b,
-                    fetchError: V,
-                    isLoading: r,
+                    fetchError: v,
+                    isLoading: i,
                     isProcessing: c,
-                    isSelectAllEnabled: A ?? !1,
+                    isSelectAllEnabled: w ?? !1,
                     flatOptionsLength: o.length,
-                    searchInputRef: D,
+                    searchInputRef: E,
                     searchValue: f,
                     searchPlaceholder: O("select.searchHere"),
                     highlightedIndex: a,
                     maxSelectableOptions: g,
-                    visibleStats: J,
+                    visibleStats: Q,
                     selectAllLabel: O("select.selectAll"),
                     unselectAllLabel: O("select.unselectAll"),
                     onSearchChange: (e) => {
-                      v(e), ye?.(e);
+                      L(e), Ae?.(e);
                     },
-                    onSearchKeyDown: it,
-                    onSelectAll: Y
+                    onSearchKeyDown: at,
+                    onSelectAll: Z
                   }
                 ),
                 /* @__PURE__ */ u(
                   "div",
                   {
-                    className: le(
+                    className: oe(
                       "flex min-h-0 flex-1 flex-col overflow-hidden",
-                      !(H || g || C.length > 5e3) && "rounded-b-[12px]"
+                      !(z || g || C.length > 5e3) && "rounded-b-[12px]"
                     ),
                     children: /* @__PURE__ */ u(
-                      pt,
+                      St,
                       {
-                        fetchError: V,
+                        fetchError: v,
                         onRefetch: Be,
                         flatOptions: o,
-                        isLoading: r,
+                        isLoading: i,
                         isProcessing: c,
                         isMulti: t,
                         isReadOnly: n,
-                        enableGroups: R,
+                        enableGroups: P,
                         enableSubMenus: I,
-                        showSequence: T,
+                        showSequence: H,
                         maxSelectableOptions: g,
                         listRef: q,
-                        listboxId: G,
-                        listboxLabel: d ? String(d) : P,
-                        rowVirtualizer: L,
+                        listboxId: W,
+                        listboxLabel: m ? String(m) : D,
+                        rowVirtualizer: V,
                         selectFieldId: p,
-                        id: m,
+                        id: d,
                         highlightedIndex: a,
-                        activeSubmenu: Qe,
-                        setActiveSubmenu: _,
-                        internalValue: s,
+                        activeSubmenu: Ue,
+                        setActiveSubmenu: j,
+                        internalValue: r,
                         selectionMode: M.mode,
                         selectionSet: M.set,
-                        resolveOptionLabel: Q,
-                        getSequenceForOption: nt,
-                        renderOption: Ae,
-                        onSelect: U,
-                        getGroupStats: lt
+                        resolveOptionLabel: U,
+                        getSequenceForOption: st,
+                        renderOption: Re,
+                        onSelect: Y,
+                        getGroupStats: ot
                       }
                     )
                   }
                 ),
                 /* @__PURE__ */ u(
-                  mt,
+                  ft,
                   {
-                    footerContent: H,
+                    footerContent: z,
                     maxSelectableOptions: g,
                     optionCount: C.length
                   }
@@ -374,11 +379,11 @@ function oe(y) {
     }
   );
 }
-oe.displayName = "Select";
-function Et(y) {
-  return oe(y);
+ne.displayName = "Select";
+function Ft(R) {
+  return ne(R);
 }
-Et.displayName = "Select";
+Ft.displayName = "Select";
 export {
-  Et as Select
+  Ft as Select
 };

package/dist/components/forms/select/select.types.d.ts

@@ -155,6 +155,14 @@ export interface SelectProps<OptionType extends Option = Option, IsMulti extends
     isRequired?: boolean;
     /** Infinite scroll / async pagination callback. */
     onMenuScrollToBottom?: () => void;
+    /**
+     * Estimated option row height (px) for virtualization, used until rows are
+     * measured. Pass a number, or a per-index function when row heights vary.
+     * Strongly recommended whenever `renderOption` renders rows taller than the
+     * default single-line height.
+     * @default 34
+     */
+    estimateRowSize?: number | ((index: number) => number);
     /**
      * Total options in the remote dataset (async pagination).
      * Used for "Selected (N)" when `enableInvertedSelection` is on.