impact-nova 2.1.0-alpha.4 → 2.1.0-alpha.6

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

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

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

@@ -82,8 +82,9 @@ export interface SelectProps<OptionType extends Option = Option, IsMulti extends
     defaultValue?: PropsValue<OptionType>;
     /**
      * Callback fired when the value changes.
-     * Optional - if not provided, component will use internal state only.
-     * Use `onMenuClose` for batched updates when menu closes.
+     * Optional - if not provided, the select keeps in-menu edits locally and
+     * commits through `onMenuClose` when the menu closes (controlled mode).
+     * Use `onChange` for immediate parent updates on every selection.
      */
     onChange?: (newValue: OnChangeValue<OptionType, IsMulti>, actionMeta: ActionMeta<OptionType>) => void;
     /**

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

@@ -11,7 +11,7 @@ const s = e(
       },
       error: {
         true: "border-destructive focus-visible:ring-destructive",
-        false: "border-stroke-field hover:border-stroke focus-visible:border-brand focus-visible:ring-1 focus-visible:ring-focus-ring"
+        false: "border-stroke-field hover:border-stroke-strong focus-visible:border-brand focus-visible:ring-1 focus-visible:ring-brand"
       },
       disabled: {
         true: "bg-canvas-disabled cursor-not-allowed opacity-75",
@@ -22,7 +22,7 @@ const s = e(
         false: ""
       },
       open: {
-        true: "ring-1 ring-focus-ring border-brand",
+        true: "ring-1 ring-brand border-brand",
         false: ""
       }
     },
@@ -54,11 +54,11 @@ const s = e(
         false: ""
       },
       selected: {
-        true: "bg-brand-subtle text-foreground",
+        true: "bg-brand-tint text-content",
         false: ""
       },
       highlighted: {
-        true: "ring-2 ring-inset ring-brand bg-brand-subtle",
+        true: "ring-2 ring-inset ring-brand bg-brand-tint",
         false: ""
       }
     },

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

@@ -1,4 +1,4 @@
-import { Option, Group, MultiValue, SingleValue, InvertedSelection } from '../select.types';
+import { Option, Group, MultiValue, SingleValue, InvertedSelection, PropsValue } from '../select.types';
 export declare const cx: (...classes: (string | undefined | null | false)[]) => string;
 export declare const isInvertedSelection: <OptionType extends Option>(value: MultiValue<OptionType>) => value is InvertedSelection;
 export declare const isOptionArray: <OptionType extends Option>(value: MultiValue<OptionType>) => value is readonly OptionType[];
@@ -10,3 +10,4 @@ export declare const getSequence: <OptionType extends Option>(option: Option | {
     value: string;
 }, showSequence: boolean, isMulti: boolean, selectionOrder: string[] | undefined, internalValue: MultiValue<OptionType> | SingleValue<OptionType> | undefined) => number | undefined;
 export declare const getSelectedCount: <OptionType extends Option>(option: Option, isMulti: boolean, internalValue: MultiValue<OptionType> | OptionType | null) => number;
+export declare function cloneSelectValue<OptionType extends Option>(value: PropsValue<OptionType> | undefined | null, isMulti: boolean): PropsValue<OptionType>;