impact-nova 2.0.9 → 2.1.0-alpha.10

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

@@ -0,0 +1,3 @@
+export { Select } from './select';
+export * from './select.types';
+export * from './utils/select';

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

@@ -0,0 +1,14 @@
+import { Select as n } from "./select.js";
+import { cloneSelectValue as c, cx as r, getIndeterminateState as i, getLeafOptions as l, getSelectedCount as S, getSequence as a, isInvertedSelection as d, isOptionArray as g, isSelected as p } from "./utils/select.js";
+export {
+  n as Select,
+  c as cloneSelectValue,
+  r as cx,
+  i as getIndeterminateState,
+  l as getLeafOptions,
+  S as getSelectedCount,
+  a as getSequence,
+  d as isInvertedSelection,
+  g as isOptionArray,
+  p as isSelected
+};

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

@@ -0,0 +1,2 @@
+/** Keyboard highlight index for the "Select All" row in multi-select menus. */
+export declare const SELECT_ALL_INDEX = -2;

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

@@ -0,0 +1,4 @@
+const E = -2;
+export {
+  E as SELECT_ALL_INDEX
+};

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { SelectProps, Option, Group } from './select.types';
+declare function Select<OptionType extends Option = Option, IsMulti extends boolean = false, GroupType extends Group = Group>(props: SelectProps<OptionType, IsMulti, GroupType>): React.ReactElement;
+declare namespace Select {
+    var displayName: string;
+}
+export { Select };
+export type { SelectProps } from './select.types';

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

@@ -0,0 +1,384 @@
+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 { 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 { 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 { 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 { useSelectionModel as Pt } from "./hooks/useSelectionModel.js";
+import { useVisibleStats as wt } from "./hooks/useVisibleStats.js";
+import { SELECT_ALL_INDEX as qt } from "./select.constants.js";
+import { getSelectableOptionIndices as Dt } from "./utils/getSelectableOptionIndices.js";
+function oe(y) {
+  const {
+    options: C,
+    value: ne,
+    defaultValue: se,
+    onChange: N,
+    isMulti: re,
+    multiple: ie,
+    isDisabled: ae,
+    disabled: ce,
+    isLoading: r,
+    isClearable: ue = !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,
+    maxSelectableOptions: g,
+    showSequence: T,
+    selectionOrder: he,
+    label: d,
+    required: ge,
+    isRequired: be,
+    error: Oe,
+    helperText: Me,
+    helperTextPosition: Ce = "absolute",
+    id: m,
+    className: Ie,
+    parentClassName: Ve,
+    onMenuScrollToBottom: ve,
+    totalCount: Le,
+    name: xe,
+    isSelectAllEnabled: A = !0,
+    isReadOnly: n = !1,
+    searchPosition: b = "menu",
+    footerContent: H,
+    onInputChange: ye,
+    getOptionLabel: B,
+    renderOption: Ae,
+    onMenuOpen: Re,
+    onMenuClose: K,
+    labelOrientation: z = "top",
+    size: Pe = "default",
+    leftContent: we,
+    ignoreCase: qe,
+    ignoreAccents: De,
+    matchFrom: Ee,
+    stringify: Fe,
+    trim: Ne,
+    filterOption: Te,
+    enableSubMenus: I = !1,
+    enableGroups: R = !1,
+    enableInvertedSelection: He,
+    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,
+    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,
+    matchFrom: Ee,
+    stringify: Fe,
+    trim: Ne,
+    filterOption: Te,
+    enableSubMenus: I,
+    enableGroups: R
+  }), tt = vt(
+    l,
+    !!r,
+    c,
+    w
+  ), M = Pt(s, t ?? !1), { stats: J, getGroupStats: lt } = wt(
+    o,
+    X,
+    f,
+    M,
+    s,
+    t ?? !1
+  ), L = dt({
+    count: o.length,
+    getScrollElement: () => q.current,
+    estimateSize: () => 34,
+    overscan: 5
+  });
+  xt({
+    isOpen: l,
+    isSearchable: h,
+    searchPosition: b,
+    isReadOnly: n,
+    isLoading: r,
+    isProcessing: c,
+    fetchError: V,
+    isMulti: t,
+    isSelectAllEnabled: A,
+    flatOptions: o,
+    searchValue: f,
+    highlightedIndex: a,
+    setHighlightedIndex: j,
+    openedViaKeyboardRef: k,
+    scrollToSelectedOnOpen: Se,
+    selectionModel: M,
+    internalValue: s,
+    rowVirtualizer: L
+  }), Lt({
+    isOpen: l,
+    isLoading: r,
+    isProcessing: c,
+    flatOptions: o,
+    listRef: q,
+    rowVirtualizer: L,
+    onMenuScrollToBottom: ve
+  });
+  const E = (e) => {
+    if (!(i && e))
+      if ($(e), e)
+        Xe(), Re?.();
+      else {
+        const F = Ge ? Je() : s, at = t && bt(F) ? F.map((ct) => ct.value) : void 0;
+        K?.(F, at), v(""), _(null);
+      }
+  };
+  yt(l, w);
+  const Q = (e) => B ? B(e) : e.label, { handleSelect: U, handleSelectAll: Y, clearValue: ot } = Rt({
+    isMulti: t,
+    isDisabled: i,
+    isReadOnly: n,
+    internalValue: s,
+    setInternalValue: We,
+    onChange: N,
+    onMenuClose: K,
+    onClearAll: ze,
+    enableSubMenus: I,
+    enableGroups: R,
+    enableInvertedSelection: He,
+    maxSelectableOptions: g,
+    closeMenuOnSelect: ke,
+    options: C,
+    flatOptions: o,
+    searchValue: f,
+    selectionModel: M,
+    visibleStats: J,
+    workerSelectAll: et,
+    setIsOpen: $,
+    setSearchValue: v
+  }), nt = (e) => Ot(
+    e,
+    T ?? !1,
+    t ?? !1,
+    he,
+    s
+  ), st = () => Dt({
+    isLoading: !!r,
+    isProcessing: c,
+    fetchError: V,
+    isMulti: t,
+    isSelectAllEnabled: A,
+    isReadOnly: n,
+    flatOptions: o,
+    enableSubMenus: I
+  }), { handleTriggerKeyDown: rt, handleSearchKeyDown: it } = It({
+    isDisabled: i,
+    isReadOnly: n,
+    isOpen: l,
+    isSearchable: h,
+    searchPosition: b,
+    getSelectableIndices: st,
+    highlightedIndex: a,
+    setHighlightedIndex: j,
+    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
+  });
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      "data-testid": `select-${m || "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,
+            {
+              triggerRef: W,
+              inputRef: Ze,
+              selectFieldId: p,
+              listboxId: G,
+              id: m,
+              className: Ie,
+              size: Pe,
+              error: Z.hasError,
+              isDisabled: i,
+              isReadOnly: n,
+              isOpen: l,
+              isLoading: r,
+              isProcessing: c,
+              isClearable: ue,
+              isSearchable: h,
+              searchPosition: b,
+              searchValue: f,
+              setSearchValue: v,
+              autoFocus: me,
+              name: xe,
+              label: d,
+              placeholder: P,
+              leftContent: we,
+              activeDescendantId: Ye,
+              internalValue: s,
+              totalCount: Le,
+              totalOptionsCount: X,
+              formatSelectedCount: (e) => O("select.selectedCount", { count: e }),
+              resolveOptionLabel: Q,
+              isMulti: t,
+              onFocus: $e,
+              onBlur: _e,
+              onKeyDown: rt,
+              onToggle: () => E(!l),
+              onClear: ot
+            }
+          ) }),
+          /* @__PURE__ */ ee(
+            St,
+            {
+              menuRef: w,
+              menuMinHeight: tt,
+              menuWidth: Ke,
+              isReadOnly: n,
+              id: m,
+              menuLabel: String(d || P),
+              children: [
+                /* @__PURE__ */ u(
+                  ft,
+                  {
+                    id: m,
+                    selectFieldId: p,
+                    isReadOnly: n,
+                    isDisabled: i,
+                    isMulti: t,
+                    isSearchable: h,
+                    searchPosition: b,
+                    fetchError: V,
+                    isLoading: r,
+                    isProcessing: c,
+                    isSelectAllEnabled: A ?? !1,
+                    flatOptionsLength: o.length,
+                    searchInputRef: D,
+                    searchValue: f,
+                    searchPlaceholder: O("select.searchHere"),
+                    highlightedIndex: a,
+                    maxSelectableOptions: g,
+                    visibleStats: J,
+                    selectAllLabel: O("select.selectAll"),
+                    unselectAllLabel: O("select.unselectAll"),
+                    onSearchChange: (e) => {
+                      v(e), ye?.(e);
+                    },
+                    onSearchKeyDown: it,
+                    onSelectAll: Y
+                  }
+                ),
+                /* @__PURE__ */ u(
+                  "div",
+                  {
+                    className: le(
+                      "flex min-h-0 flex-1 flex-col overflow-hidden",
+                      !(H || g || C.length > 5e3) && "rounded-b-[12px]"
+                    ),
+                    children: /* @__PURE__ */ u(
+                      pt,
+                      {
+                        fetchError: V,
+                        onRefetch: Be,
+                        flatOptions: o,
+                        isLoading: r,
+                        isProcessing: c,
+                        isMulti: t,
+                        isReadOnly: n,
+                        enableGroups: R,
+                        enableSubMenus: I,
+                        showSequence: T,
+                        maxSelectableOptions: g,
+                        listRef: q,
+                        listboxId: G,
+                        listboxLabel: d ? String(d) : P,
+                        rowVirtualizer: L,
+                        selectFieldId: p,
+                        id: m,
+                        highlightedIndex: a,
+                        activeSubmenu: Qe,
+                        setActiveSubmenu: _,
+                        internalValue: s,
+                        selectionMode: M.mode,
+                        selectionSet: M.set,
+                        resolveOptionLabel: Q,
+                        getSequenceForOption: nt,
+                        renderOption: Ae,
+                        onSelect: U,
+                        getGroupStats: lt
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ u(
+                  mt,
+                  {
+                    footerContent: H,
+                    maxSelectableOptions: g,
+                    optionCount: C.length
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      )
+    }
+  );
+}
+oe.displayName = "Select";
+function Et(y) {
+  return oe(y);
+}
+Et.displayName = "Select";
+export {
+  Et as Select
+};

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

@@ -0,0 +1,218 @@
+import { ReactNode } from 'react';
+import { FieldControlProps } from '../../../lib/primitives/field.types';
+/** Single select option — use `metadata` for app-specific fields instead of arbitrary keys. */
+export interface Option {
+    label: string | ReactNode;
+    value: string;
+    children?: Option[];
+    isDisabled?: boolean;
+    isParentSelectable?: boolean;
+    /**
+     * Optional initial/desired sequence number.
+     * When provided, used as a hint for sequence display.
+     * Actual sequence is determined by selection order in the array.
+     */
+    sequence?: number;
+    /** App-specific fields (e.g. SKU codes) — not used by Select internals. */
+    metadata?: Record<string, unknown>;
+}
+/** Option group heading with nested options. */
+export interface Group {
+    label: string | ReactNode;
+    options: Option[];
+    isParentSelectable?: boolean;
+    metadata?: Record<string, unknown>;
+}
+export type OptionsOrGroups<OptionType, GroupType> = Array<OptionType> | Array<GroupType>;
+export interface InvertedSelection {
+    isAllSelected: boolean;
+    excludedValues: string[];
+}
+export type SingleValue<OptionType> = OptionType | null;
+export type MultiValue<OptionType> = readonly OptionType[] | InvertedSelection;
+export type PropsValue<OptionType> = SingleValue<OptionType> | MultiValue<OptionType>;
+/** Why the select value changed — narrows `ActionMeta` for autocomplete. */
+export type SelectChangeAction = "select-option" | "deselect-option" | "remove-value" | "pop-value" | "set-value" | "clear" | "create-option";
+export type ActionMeta<OptionType extends Option = Option> = {
+    action: SelectChangeAction;
+    name?: string;
+} & ({
+    action: "select-option" | "deselect-option";
+    option?: OptionType;
+} | {
+    action: "remove-value" | "pop-value";
+    removedValue: OptionType;
+} | {
+    action: "create-option";
+    option: OptionType;
+} | {
+    action: "set-value" | "clear";
+});
+export type OnChangeValue<OptionType, IsMulti extends boolean> = IsMulti extends true ? MultiValue<OptionType> : SingleValue<OptionType>;
+/**
+ * @deprecated Slot overrides are not wired in Select — reserved for a future major.
+ * Use `renderOption` for custom option rows.
+ */
+export interface SelectComponentsConfig<OptionType extends Option = Option> {
+    Option?: React.ComponentType<{
+        option: OptionType;
+        selected: boolean;
+        disabled: boolean;
+        onClick: () => void;
+        className: string;
+    }>;
+    DropdownIndicator?: React.ComponentType<{
+        className?: string;
+    }>;
+    ClearIndicator?: React.ComponentType<{
+        onClick: () => void;
+        className?: string;
+    }>;
+    MultiValue?: React.ComponentType<{
+        option: OptionType;
+        onRemove: () => void;
+    }>;
+    MultiValueRemove?: React.ComponentType<{
+        onClick: () => void;
+    }>;
+}
+export interface SelectProps<OptionType extends Option = Option, IsMulti extends boolean = false, GroupType extends Group = Group> extends FieldControlProps {
+    /** Dropdown menu width (CSS length). */
+    menuWidth?: string;
+    /** Options or grouped options — each leaf needs `value` and `label`. */
+    options: OptionsOrGroups<OptionType, GroupType>;
+    /** Controlled value. */
+    value?: PropsValue<OptionType>;
+    /** Uncontrolled initial value. */
+    defaultValue?: PropsValue<OptionType>;
+    /**
+     * Fired on each selection change.
+     * Omit to batch commits through `onMenuClose` when the menu closes.
+     */
+    onChange?: (newValue: OnChangeValue<OptionType, IsMulti>, actionMeta: ActionMeta<OptionType>) => void;
+    /**
+     * @deprecated Use `multiple`. Removed in v4.
+     * @default false
+     */
+    isMulti?: IsMulti;
+    /** Enable multi-select. @default false */
+    multiple?: IsMulti;
+    /**
+     * @deprecated Use `disabled`. Removed in v4.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /** Show loading indicator in the menu. @default false */
+    isLoading?: boolean;
+    /** Show clear control when a value is set. @default true */
+    isClearable?: boolean;
+    /** Enable typeahead search. @default true */
+    isSearchable?: boolean;
+    /** Search input change (controlled search string). */
+    onInputChange?: (value: string) => void;
+    /** Placeholder when empty. @default i18n "Select..." */
+    placeholder?: string;
+    /**
+     * @deprecated Radix handles portalling — prop is ignored.
+     * @default document.body
+     */
+    menuPortalTarget?: HTMLElement | null;
+    /** Focus trigger on mount. */
+    autoFocus?: boolean;
+    /**
+     * Close menu after a selection.
+     * @default !multiple
+     */
+    closeMenuOnSelect?: boolean;
+    /** Open menu on mount (e.g. cell editors). @default false */
+    defaultMenuIsOpen?: boolean;
+    onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
+    /** Scroll to selected option when the menu opens. @default false */
+    scrollToSelectedOnOpen?: boolean;
+    /**
+     * @deprecated Not implemented — use `renderOption`.
+     */
+    components?: SelectComponentsConfig<OptionType>;
+    /** Form field name. */
+    name?: string;
+    /** Classes on the trigger. */
+    className?: string;
+    /** Classes on the outer field wrapper. */
+    parentClassName?: string;
+    /** BEM-style prefix for internal class names. */
+    classNamePrefix?: string;
+    /**
+     * Max selectable options in multi mode.
+     * Disables inverted selection when set.
+     */
+    maxSelectableOptions?: number;
+    /** Show sequence numbers for multi selections. @default false */
+    showSequence?: boolean;
+    /** Custom selection order (value strings). */
+    selectionOrder?: string[];
+    /** @deprecated Use `required` */
+    isRequired?: boolean;
+    /** Infinite scroll / async pagination callback. */
+    onMenuScrollToBottom?: () => void;
+    /**
+     * Total options in the remote dataset (async pagination).
+     * Used for "Selected (N)" when `enableInvertedSelection` is on.
+     */
+    totalCount?: number;
+    /** Show "Select all" in multi mode. @default true */
+    isSelectAllEnabled?: boolean;
+    /** Read-only — no edits. @default false */
+    isReadOnly?: boolean;
+    /** Where search renders. @default "menu" */
+    searchPosition?: "trigger" | "menu";
+    /** Sticky menu footer slot. */
+    footerContent?: ReactNode;
+    /** Content left of the trigger label. */
+    leftContent?: ReactNode;
+    /** Override option label resolution. */
+    getOptionLabel?: (option: OptionType) => string | ReactNode;
+    /** Fully custom option row. */
+    renderOption?: (props: {
+        onClick: () => void;
+        className: string;
+        selected: boolean;
+        disabled: boolean;
+    }, option: OptionType) => ReactNode;
+    onMenuOpen?: () => void;
+    /**
+     * Menu close — use for batched value commits.
+     * @param finalValue Final value when the menu closes.
+     * @param finalSelectionOrder Value order when applicable.
+     */
+    onMenuClose?: (finalValue?: OnChangeValue<OptionType, IsMulti>, finalSelectionOrder?: string[]) => void;
+    onClearAll?: () => void;
+    /** Case-insensitive search. @default true */
+    ignoreCase?: boolean;
+    /** Accent-insensitive search. @default true */
+    ignoreAccents?: boolean;
+    /** Match position for search. @default "any" */
+    matchFrom?: "any" | "start";
+    /** Stringify option for search. @default label */
+    stringify?: (option: OptionType) => string;
+    /** Trim search input. @default true */
+    trim?: boolean;
+    /** Custom filter — disables Web Worker optimization. */
+    filterOption?: (option: OptionType, inputValue: string) => boolean;
+    /** Hierarchical options (children). @default false */
+    enableSubMenus?: boolean;
+    /** Grouped options. @default false */
+    enableGroups?: boolean;
+    /**
+     * "Select all" returns `InvertedSelection` instead of all options.
+     * @default false
+     */
+    enableInvertedSelection?: boolean;
+    /** Async options error — shows retry UI instead of empty state. */
+    fetchError?: Error | null;
+    /** Refetch callback when `fetchError` is set. */
+    onRefetch?: (options?: {
+        throwOnError?: boolean;
+        cancelRefetch?: boolean;
+    }) => Promise<unknown>;
+}

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

@@ -0,0 +1,13 @@
+export declare const selectTriggerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "default" | null | undefined;
+    error?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    readOnly?: boolean | null | undefined;
+    open?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const selectOptionVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+    readOnly?: boolean | null | undefined;
+    selected?: boolean | null | undefined;
+    highlighted?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;