impact-nova 2.0.9 → 2.1.0-alpha.2

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

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

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

@@ -0,0 +1,326 @@
+import { ReactNode } from 'react';
+import { FieldControlProps } from '../../../lib/primitives/field.types';
+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;
+    [key: string]: unknown;
+}
+export interface Group {
+    label: string | ReactNode;
+    options: Option[];
+    isParentSelectable?: boolean;
+    [key: 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>;
+export type ActionMeta<OptionType> = {
+    action: "select-option";
+    option?: OptionType;
+    name?: string;
+} | {
+    action: "deselect-option";
+    option?: OptionType;
+    name?: string;
+} | {
+    action: "remove-value";
+    removedValue: OptionType;
+    name?: string;
+} | {
+    action: "pop-value";
+    removedValue: OptionType;
+    name?: string;
+} | {
+    action: "set-value";
+    name?: string;
+} | {
+    action: "clear";
+    name?: string;
+} | {
+    action: "create-option";
+    option: OptionType;
+    name?: string;
+};
+export type OnChangeValue<OptionType, IsMulti extends boolean> = IsMulti extends true ? MultiValue<OptionType> : SingleValue<OptionType>;
+export interface SelectComponentsConfig {
+    Option?: React.ComponentType<Record<string, unknown>>;
+    DropdownIndicator?: React.ComponentType<Record<string, unknown>>;
+    ClearIndicator?: React.ComponentType<Record<string, unknown>>;
+    MultiValue?: React.ComponentType<Record<string, unknown>>;
+    MultiValueRemove?: React.ComponentType<Record<string, unknown>>;
+}
+export interface SelectProps<OptionType extends Option = Option, IsMulti extends boolean = boolean, GroupType extends Group = Group> extends FieldControlProps {
+    /**
+     * The width of the dropdown menu.
+     */
+    menuWidth?: string;
+    /**
+     * The array of options to display. Each option must have a `value` and `label`.
+     */
+    options: OptionsOrGroups<OptionType, GroupType>;
+    /**
+     * The current value of the select. Required for **controlled** components.
+     */
+    value?: PropsValue<OptionType>;
+    /**
+     * The initial value. Use this for **uncontrolled** components.
+     */
+    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.
+     */
+    onChange?: (newValue: OnChangeValue<OptionType, IsMulti>, actionMeta: ActionMeta<OptionType>) => void;
+    /**
+     * If `true`, the user can select multiple values.
+     * @deprecated Use `multiple`. Removed in v4.
+     * @default false
+     */
+    isMulti?: IsMulti;
+    /**
+     * Canonical multi-select flag (Component API Charter).
+     * @default false
+     */
+    multiple?: IsMulti;
+    /**
+     * If `true`, the component is disabled.
+     * @deprecated Use `disabled`. Removed in v4.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * If `true`, the component shows a loading indicator.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * If `true`, the user can clear the selected value.
+     * @default true
+     */
+    isClearable?: boolean;
+    /**
+     * If `true`, the user can search for options.
+     * @default true
+     */
+    isSearchable?: boolean;
+    /**
+     * Callback fired when the input value changes.
+     */
+    onInputChange?: (value: string) => void;
+    /**
+     * The short hint displayed in the input before the user enters a value.
+     * @default "Select..."
+     */
+    placeholder?: string;
+    /**
+     * The element to portal the menu to.
+     * @default document.body
+     */
+    menuPortalTarget?: HTMLElement | null;
+    /**
+     * If `true`, the input will be focused on mount.
+     */
+    autoFocus?: boolean;
+    /**
+     * If `true`, the menu will close after a selection is made.
+     * @default !isMulti
+     */
+    closeMenuOnSelect?: boolean;
+    /**
+     * If `true`, the menu will be open when the component mounts.
+     * Useful for cell editors that need the dropdown visible immediately.
+     * @default false
+     */
+    defaultMenuIsOpen?: boolean;
+    /**
+     * Callback fired when the component is focused.
+     */
+    onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
+    /**
+     * Callback fired when the component is blurred.
+     */
+    onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
+    /**
+     * If `true`, the menu will scroll to the selected option when opened.
+     * @default false
+     */
+    scrollToSelectedOnOpen?: boolean;
+    /**
+     * Custom components to replace the default ones.
+     */
+    components?: SelectComponentsConfig;
+    /**
+     * The name of the input field.
+     */
+    name?: string;
+    /**
+     * Additional class name for the trigger.
+     */
+    className?: string;
+    /**
+     * Additional class name for the parent container.
+     */
+    parentClassName?: string;
+    /**
+     * Prefix for the class names of the inner components.
+     */
+    classNamePrefix?: string;
+    /**
+     * Maximum number of selectable options.
+     * **Note**: Disables inverted selection logic.
+     */
+    maxSelectableOptions?: number;
+    /**
+     * If `true`, displays sequence numbers next to selected items.
+     * @default false
+     */
+    showSequence?: boolean;
+    /**
+     * Array of values to determine the order of selection.
+     */
+    selectionOrder?: string[];
+    /**
+     * @deprecated Use `required`
+     */
+    isRequired?: boolean;
+    /**
+     * Callback fired when the menu is scrolled to the bottom.
+     */
+    onMenuScrollToBottom?: () => void;
+    /**
+     * Total number of options in the complete dataset, including options that
+     * have not been fetched yet (async pagination). When provided AND the
+     * component is in multi-select with `enableInvertedSelection`, the trigger
+     * label "Selected (N)" uses this value instead of the count of loaded
+     * options. Leave undefined for non-paginated usage; behaviour is unchanged.
+     *
+     * The parent should pass the same total it intends "Select All" to
+     * represent on the server. During search you may either keep the
+     * unfiltered total (recommended) or pass the filtered total – the
+     * component renders whatever is given.
+     */
+    totalCount?: number;
+    /**
+     * If `true`, shows the "Select All" option in multi-select mode.
+     * @default true
+     */
+    isSelectAllEnabled?: boolean;
+    /**
+     * If `true`, the component is read-only.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * The position of the search input.
+     * @default "menu"
+     */
+    searchPosition?: "trigger" | "menu";
+    /**
+     * Content to display in the sticky footer.
+     */
+    footerContent?: ReactNode;
+    /**
+     * Content to display inside the trigger on the left.
+     */
+    leftContent?: ReactNode;
+    /**
+     * Function to customize the label of an option.
+     */
+    getOptionLabel?: (option: OptionType) => string | ReactNode;
+    /**
+     * Function to fully customize the rendering of an option.
+     */
+    renderOption?: (props: {
+        onClick: () => void;
+        className: string;
+        selected: boolean;
+        disabled: boolean;
+    }, option: OptionType) => ReactNode;
+    /**
+     * Callback fired when the menu opens.
+     */
+    onMenuOpen?: () => void;
+    /**
+     * Callback fired when the menu closes.
+     * @param finalValue - The final selected value when the menu closes (useful for batched updates)
+     * @param finalSelectionOrder - The final selection order (array of values) derived from finalValue array order
+     */
+    onMenuClose?: (finalValue?: OnChangeValue<OptionType, IsMulti>, finalSelectionOrder?: string[]) => void;
+    /**
+     * Callback fired when the clear button is clicked.
+     */
+    onClearAll?: () => void;
+    /**
+     * If `true`, search will be case-insensitive.
+     * @default true
+     */
+    ignoreCase?: boolean;
+    /**
+     * If `true`, search will ignore accents (e.g., 'e' matches 'é').
+     * @default true
+     */
+    ignoreAccents?: boolean;
+    /**
+     * Determines where the search match must start.
+     * @default "any"
+     */
+    matchFrom?: "any" | "start";
+    /**
+     * Function to convert an option to a string for searching.
+     * @default label
+     */
+    stringify?: (option: OptionType) => string;
+    /**
+     * If `true`, search input will be trimmed.
+     * @default true
+     */
+    trim?: boolean;
+    /**
+     * Custom filter function.
+     * **Note**: Disables Web Worker optimization.
+     */
+    filterOption?: (option: OptionType, inputValue: string) => boolean;
+    /**
+     * If `true`, enables submenu functionality (options with children).
+     * @default false
+     */
+    enableSubMenus?: boolean;
+    /**
+     * If `true`, enables group functionality (options with nested options).
+     * @default false
+     */
+    enableGroups?: boolean;
+    /**
+     * If `true`, "Select All" will return an InvertedSelection object.
+     * If `false` (default), it returns an array of all options.
+     * @default false
+     */
+    enableInvertedSelection?: boolean;
+    /**
+     * Error object from query/API call. When provided, shows error state instead of "No options found".
+     */
+    fetchError?: Error | null;
+    /**
+     * Callback to refetch options when an error occurs.
+     * Matches React Query's refetch function signature.
+     */
+    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;