impact-nova 2.0.9 → 2.1.0-alpha.1

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

@@ -0,0 +1,91 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import * as l from "@radix-ui/react-popover";
+import { Checkbox as C } from "../../checkbox/checkbox.js";
+import { ChevronRight as N, Checkmark as S } from "impact-nova-icons";
+import { cn as w } from "../../../../lib/utils.js";
+const $ = ({
+  parentOption: n,
+  isMulti: u,
+  isReadOnly: c,
+  isSelected: f,
+  getIndeterminateState: x,
+  getSelectedCount: v,
+  handleSelect: h
+}) => {
+  const d = "children" in n && Array.isArray(n.children) ? n.children : null;
+  if (!d) return null;
+  const i = String(n.value || "");
+  return /* @__PURE__ */ r(l.Root, { open: !0, children: [
+    /* @__PURE__ */ t(l.Anchor, { className: "absolute inset-0 pointer-events-none" }),
+    /* @__PURE__ */ t(l.Portal, { children: /* @__PURE__ */ t(
+      l.Content,
+      {
+        side: "right",
+        sideOffset: 8,
+        align: "start",
+        avoidCollisions: !0,
+        collisionPadding: 8,
+        "aria-label": String(n.label ?? i),
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onInteractOutside: (e) => e.preventDefault(),
+        onFocusOutside: (e) => e.preventDefault(),
+        className: "select-submenu-container z-50 min-w-[180px] max-h-[300px] overflow-auto rounded-xl bg-canvas-elevated py-1 shadow-elevation-floating",
+        "data-component": "select-menu",
+        children: d.map((e) => {
+          const a = f(e), g = x(e), o = e.isDisabled, m = v(e), s = "children" in e && Array.isArray(e.children) && e.children.length > 0, p = e.isParentSelectable !== !1, b = String(e.value || "");
+          return /* @__PURE__ */ r(
+            "div",
+            {
+              className: w(
+                "relative flex h-[35px] cursor-default select-none items-center justify-between gap-1.5 rounded-[8px] px-3",
+                o ? "cursor-not-allowed bg-canvas-readonly opacity-50" : c ? "cursor-default" : "cursor-pointer hover:bg-canvas-muted",
+                a && !o && !s ? "bg-brand-subtle text-content" : "text-content"
+              ),
+              onClick: (k) => {
+                k.stopPropagation(), !o && !c && p && h(e);
+              },
+              "data-testid": `select-submenu-option-${i}-${b}`,
+              "data-state": a ? "checked" : "unchecked",
+              "data-disabled": o || void 0,
+              "data-component": "select-option",
+              children: [
+                /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [
+                  u && p && /* @__PURE__ */ t(
+                    C,
+                    {
+                      checked: g ? "indeterminate" : a,
+                      disabled: o || c,
+                      onChange: () => {
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ t(
+                    "span",
+                    {
+                      className: "block truncate text-[14px] font-medium leading-5",
+                      "data-testid": `select-submenu-option-label-${i}-${b}`,
+                      "data-state": a ? "checked" : "unchecked",
+                      title: String(e.label || ""),
+                      children: e.label
+                    }
+                  ),
+                  s && m > 0 && /* @__PURE__ */ r("span", { className: "text-xs text-content-muted font-medium", children: [
+                    "(",
+                    m,
+                    ")"
+                  ] })
+                ] }),
+                s && /* @__PURE__ */ t(N, { size: "sm", className: "text-content-icon" }),
+                !u && a && !s && /* @__PURE__ */ t(S, { className: "h-4 w-4 text-brand" })
+              ]
+            },
+            e.value
+          );
+        })
+      }
+    ) })
+  ] });
+};
+export {
+  $ as Submenu
+};

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

@@ -0,0 +1,24 @@
+import { Option, Group, MultiValue } from '../select.types';
+export interface FlatOption extends Option {
+    depth: number;
+    isGroup?: boolean;
+    isSubmenuParent?: boolean;
+    parent?: FlatOption;
+    original: Option | Group;
+    naturalIndex?: number;
+}
+export declare const useFlattenOptions: <OptionType extends Option, GroupType extends Group>(options: (OptionType | GroupType)[], searchValue: string, config?: {
+    ignoreCase?: boolean;
+    ignoreAccents?: boolean;
+    matchFrom?: "any" | "start";
+    stringify?: (option: OptionType) => string;
+    trim?: boolean;
+    filterOption?: (option: OptionType, inputValue: string) => boolean;
+    enableSubMenus?: boolean;
+    enableGroups?: boolean;
+}) => {
+    flatOptions: FlatOption[];
+    isProcessing: boolean;
+    totalOptionsCount: number;
+    workerSelectAll: <OptionType_1 extends Option>(currentValues: MultiValue<OptionType_1>, isAllSelected: boolean, maxSelectableOptions: number | undefined) => Promise<MultiValue<OptionType_1>>;
+};

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

@@ -0,0 +1,199 @@
+import { useMemo as z, useState as W, useRef as N, useEffect as _ } from "react";
+import Y from "../workers/flatten.worker.js";
+const re = (m, c, x = {}) => {
+  const {
+    ignoreCase: l = !0,
+    ignoreAccents: a = !1,
+    matchFrom: h = "any",
+    stringify: y,
+    trim: f = !0,
+    filterOption: E,
+    enableSubMenus: d = !1,
+    enableGroups: g = !1
+  } = x, i = m.length > 3e3 && !y && !E, b = z(() => {
+    if (i) return [];
+    const s = /* @__PURE__ */ new WeakMap();
+    let e = c;
+    f && (e = e.trim()), l && (e = e.toLowerCase()), a && (e = e.normalize("NFD").replace(/[\u0300-\u036f]/g, ""));
+    const R = (r) => {
+      const n = r.label;
+      return typeof n == "string" ? n : String(n);
+    }, p = (r) => {
+      const n = s.get(r);
+      if (n !== void 0)
+        return n;
+      let u = y ? y(r) : R(r);
+      return f && (u = u.trim()), l && (u = u.toLowerCase()), a && (u = u.normalize("NFD").replace(/[\u0300-\u036f]/g, "")), s.set(r, u), u;
+    }, L = (r) => {
+      if (!e) return !0;
+      const n = p(r);
+      return e.length > n.length ? !1 : h === "start" ? n.startsWith(e) : n.includes(e);
+    }, O = (r) => E ? E(r, c) : L(r), A = (r, n = 0, M = { current: 0 }) => {
+      const u = [];
+      return r.forEach((o) => {
+        let F = [];
+        g && "options" in o && (F = o.options);
+        let H = [];
+        d && "children" in o && Array.isArray(o.children) && (H = o.children);
+        const I = g && F.length > 0, k = d && H.length > 0;
+        let q;
+        !I && !k && !o.isDisabled && (M.current++, q = M.current);
+        const v = !I && O(o);
+        if (I) {
+          const T = A(
+            F,
+            n,
+            M
+          ), w = T.length > 0;
+          (v || w) && (u.push({
+            ...o,
+            depth: n,
+            isGroup: !0,
+            isSubmenuParent: !1,
+            original: o
+          }), u.push(...T));
+        } else {
+          let T = !1;
+          if (k && e) {
+            const w = (X) => X.some((P) => O(P) ? !0 : "children" in P && Array.isArray(P.children) ? w(P.children) : !1);
+            T = w(H);
+          }
+          (v || T || !e && k) && u.push({
+            ...o,
+            depth: n,
+            isGroup: !1,
+            isSubmenuParent: k,
+            original: o,
+            naturalIndex: q
+          });
+        }
+      }), u;
+    };
+    return A(m, 0, { current: 0 });
+  }, [
+    m,
+    c,
+    l,
+    a,
+    h,
+    y,
+    f,
+    E,
+    i,
+    g,
+    d
+  ]), [U, K] = W([]), [j, B] = W(0), [J, C] = W(!1), t = N(null), S = N(0);
+  _(() => () => {
+    t.current && (t.current.terminate(), t.current = null);
+  }, []), _(() => {
+    i && (t.current || (t.current = new Y(), t.current.onmessage = (s) => {
+      const { type: e, id: R, result: p } = s.data;
+      e === "SEARCH_RESULT" && R === S.current && (K(p.result), B(p.totalLeafCount || p.result.length), C(!1));
+    }), t.current?.postMessage({
+      type: "SET_OPTIONS",
+      payload: m,
+      config: {
+        enableSubMenus: d,
+        enableGroups: g
+      }
+    }), S.current += 1, queueMicrotask(() => C(!0)), t.current?.postMessage({
+      type: "SEARCH",
+      id: S.current,
+      payload: {
+        searchValue: c,
+        config: {
+          ignoreCase: l,
+          ignoreAccents: a,
+          matchFrom: h,
+          trim: f
+        }
+      }
+    }));
+  }, [
+    m,
+    i,
+    d,
+    g,
+    l,
+    a,
+    h,
+    f,
+    c
+  ]);
+  const Q = z(() => i ? 0 : b.reduce((s, e) => !e.isGroup && !e.isSubmenuParent && !e.isDisabled ? s + 1 : s, 0), [i, b]);
+  return _(() => {
+    if (!i) return;
+    queueMicrotask(() => C(!0));
+    const s = S.current + 1;
+    S.current = s;
+    const e = setTimeout(() => {
+      t.current && t.current.postMessage({
+        type: "SEARCH",
+        id: s,
+        payload: {
+          searchValue: c,
+          config: {
+            ignoreCase: l,
+            ignoreAccents: a,
+            matchFrom: h,
+            trim: f,
+            enableSubMenus: d,
+            enableGroups: g
+          }
+        }
+      });
+    }, 300);
+    return () => {
+      clearTimeout(e);
+    };
+  }, [
+    b,
+    c,
+    l,
+    a,
+    h,
+    f,
+    y,
+    E,
+    i,
+    d,
+    g
+  ]), {
+    flatOptions: i ? U : b,
+    isProcessing: i ? J : !1,
+    totalOptionsCount: i ? j : Q,
+    workerSelectAll: (s, e, R) => new Promise((p) => {
+      if (!i || !t.current) {
+        p(s);
+        return;
+      }
+      const L = S.current + 1;
+      S.current = L, C(!0);
+      const O = (A) => {
+        const { type: D, id: G, result: r } = A.data;
+        D === "SELECT_ALL_RESULT" && G === L && (t.current?.removeEventListener("message", O), C(!1), p(r));
+      };
+      t.current.addEventListener("message", O), t.current.postMessage({
+        type: "SELECT_ALL",
+        id: L,
+        payload: {
+          currentValues: s,
+          isAllSelected: e,
+          maxSelectableOptions: R,
+          searchValue: c,
+          config: {
+            ignoreCase: l,
+            ignoreAccents: a,
+            matchFrom: h,
+            trim: f,
+            enableSubMenus: d,
+            enableGroups: g
+          }
+        }
+      });
+    })
+  };
+};
+export {
+  re as useFlattenOptions
+};

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

@@ -0,0 +1,26 @@
+import { MutableRefObject, RefObject, KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { Virtualizer } from '@tanstack/react-virtual';
+import { FlatOption } from '../hooks/useFlattenOptions';
+import { Option } from '../select.types';
+export interface UseSelectKeyboardHandlersParams {
+    isDisabled?: boolean;
+    isReadOnly: boolean;
+    isOpen: boolean;
+    isSearchable: boolean;
+    searchPosition: "menu" | "trigger" | string;
+    getSelectableIndices: () => number[];
+    highlightedIndex: number;
+    setHighlightedIndex: (index: number) => void;
+    flatOptions: FlatOption[];
+    rowVirtualizer: Virtualizer<HTMLDivElement, Element>;
+    handleOpenChange: (open: boolean) => void;
+    handleSelect: (option: FlatOption | Option) => void;
+    handleSelectAll: () => void | Promise<void>;
+    openedViaKeyboardRef: MutableRefObject<boolean>;
+    searchInputRef: RefObject<HTMLInputElement | null>;
+    triggerRef: RefObject<HTMLDivElement | null>;
+}
+export declare function useSelectKeyboardHandlers(params: UseSelectKeyboardHandlersParams): {
+    handleTriggerKeyDown: (e: ReactKeyboardEvent) => void;
+    handleSearchKeyDown: (e: ReactKeyboardEvent) => void;
+};

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

@@ -0,0 +1,49 @@
+import { handleMenuKeyboardEvent as l, OPEN_MENU_KEYS as i } from "../utils/selectKeyboardNavigation.js";
+function c(e) {
+  const t = () => ({
+    selectableIndices: e.getSelectableIndices(),
+    highlightedIndex: e.highlightedIndex,
+    flatOptionsLength: e.flatOptions.length,
+    setHighlightedIndex: e.setHighlightedIndex,
+    scrollToHighlight: (n) => {
+      e.rowVirtualizer.scrollToIndex(n, { align: "auto" });
+    },
+    onSelectAll: () => {
+      e.handleSelectAll();
+    },
+    onSelectHighlightedOption: () => {
+      const n = e.flatOptions[e.highlightedIndex];
+      n && !n.isDisabled && e.handleSelect(n);
+    },
+    onCloseMenu: () => e.handleOpenChange(!1),
+    onFocusTrigger: () => e.triggerRef.current?.focus()
+  });
+  return { handleTriggerKeyDown: (n) => {
+    if (!(e.isDisabled || e.isReadOnly)) {
+      if (n.key === "Tab") {
+        e.isOpen && e.handleOpenChange(!1);
+        return;
+      }
+      if (!e.isOpen) {
+        i.has(n.key) && (n.preventDefault(), e.openedViaKeyboardRef.current = !0, e.handleOpenChange(!0));
+        return;
+      }
+      if (e.isSearchable && e.searchPosition === "menu" && !e.isReadOnly && e.searchInputRef.current) {
+        document.activeElement !== e.searchInputRef.current && e.searchInputRef.current.focus();
+        return;
+      }
+      l(n, t(), {
+        allowSpaceToSelect: !0,
+        allowHomeEnd: !0
+      });
+    }
+  }, handleSearchKeyDown: (n) => {
+    l(n, t(), {
+      allowSpaceToSelect: !1,
+      allowHomeEnd: !1
+    });
+  } };
+}
+export {
+  c as useSelectKeyboardHandlers
+};

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

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare function useSelectMenuHeight(isOpen: boolean, isLoading: boolean, isProcessing: boolean, menuRef: RefObject<HTMLDivElement | null>): number | undefined;

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

@@ -0,0 +1,29 @@
+import { useState as g, useRef as h, useEffect as v } from "react";
+function b(u, f, m, o) {
+  const [l, c] = g(
+    void 0
+  ), t = h(0);
+  return v(() => {
+    if (t.current = 0, c(void 0), !u) return;
+    let n = null, r = null;
+    const s = () => {
+      const i = o.current;
+      if (!i) return !1;
+      const a = (e) => {
+        e > t.current && (t.current = e, c(e));
+      };
+      return n = new ResizeObserver((e) => {
+        for (const H of e)
+          a(H.contentRect.height);
+      }), n.observe(i), a(i.offsetHeight), !0;
+    }, M = requestAnimationFrame(() => {
+      s() || (r = setTimeout(s, 50));
+    });
+    return () => {
+      cancelAnimationFrame(M), r && clearTimeout(r), n?.disconnect();
+    };
+  }, [u, f, m, o]), l;
+}
+export {
+  b as useSelectMenuHeight
+};

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

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+import { Virtualizer } from '@tanstack/react-virtual';
+import { FlatOption } from '../hooks/useFlattenOptions';
+export interface UseSelectMenuScrollParams {
+    isOpen: boolean;
+    isLoading?: boolean;
+    isProcessing: boolean;
+    flatOptions: FlatOption[];
+    listRef: RefObject<HTMLDivElement | null>;
+    rowVirtualizer: Virtualizer<HTMLDivElement, Element>;
+    onMenuScrollToBottom?: () => void;
+}
+export declare function useSelectMenuScroll({ isOpen, isLoading, isProcessing, flatOptions, listRef, rowVirtualizer, onMenuScrollToBottom, }: UseSelectMenuScrollParams): void;

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

@@ -0,0 +1,43 @@
+import { useRef as x, useCallback as E, useEffect as s } from "react";
+function V({
+  isOpen: u,
+  isLoading: f,
+  isProcessing: a,
+  flatOptions: g,
+  listRef: c,
+  rowVirtualizer: m,
+  onMenuScrollToBottom: r
+}) {
+  const e = x(null), h = m.getVirtualItems(), l = h[h.length - 1], n = E(() => {
+    f || a || e.current || r && (r(), e.current = setTimeout(() => {
+      e.current = null;
+    }, 500));
+  }, [f, a, r]);
+  s(() => () => {
+    e.current && (clearTimeout(e.current), e.current = null);
+  }, []), s(() => {
+    if (!u || !c.current || !r)
+      return;
+    const t = c.current, i = () => {
+      const { scrollTop: d, scrollHeight: v, clientHeight: I } = t;
+      v - d - I <= 64 && n();
+    };
+    return t.addEventListener("scroll", i), i(), () => {
+      t.removeEventListener("scroll", i);
+    };
+  }, [u, c, r, n]), s(() => {
+    if (!u || !r || !l)
+      return;
+    const t = g.length - 1;
+    t < 0 || l.index < t - 1 || n();
+  }, [
+    u,
+    r,
+    g.length,
+    l,
+    n
+  ]);
+}
+export {
+  V as useSelectMenuScroll
+};

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

@@ -0,0 +1,26 @@
+import { MutableRefObject } from 'react';
+import { Virtualizer } from '@tanstack/react-virtual';
+import { FlatOption } from '../hooks/useFlattenOptions';
+import { SelectionModel } from '../hooks/useSelectionModel';
+import { Option } from '../select.types';
+export interface UseSelectOpenEffectsParams<OptionType extends Option> {
+    isOpen: boolean;
+    isSearchable: boolean;
+    searchPosition: string;
+    isReadOnly: boolean;
+    isLoading?: boolean;
+    isProcessing: boolean;
+    fetchError: unknown;
+    isMulti?: boolean;
+    isSelectAllEnabled: boolean;
+    flatOptions: FlatOption[];
+    searchValue: string;
+    highlightedIndex: number;
+    setHighlightedIndex: (index: number) => void;
+    openedViaKeyboardRef: MutableRefObject<boolean>;
+    scrollToSelectedOnOpen: boolean;
+    selectionModel: SelectionModel;
+    internalValue: OptionType | null | unknown;
+    rowVirtualizer: Virtualizer<HTMLDivElement, Element>;
+}
+export declare function useSelectOpenEffects<OptionType extends Option>({ isOpen, isSearchable, searchPosition, isReadOnly, isLoading, isProcessing, fetchError, isMulti, isSelectAllEnabled, flatOptions, searchValue, highlightedIndex, setHighlightedIndex, openedViaKeyboardRef, scrollToSelectedOnOpen, selectionModel, internalValue, rowVirtualizer, }: UseSelectOpenEffectsParams<OptionType>): void;

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

@@ -0,0 +1,92 @@
+import { useEffect as L } from "react";
+import { SELECT_ALL_INDEX as N } from "../select.constants.js";
+import { hasSelectAllRow as X } from "../utils/getSelectableOptionIndices.js";
+function J({
+  isOpen: m,
+  isSearchable: F,
+  searchPosition: T,
+  isReadOnly: e,
+  isLoading: a,
+  isProcessing: t,
+  fetchError: I,
+  isMulti: n,
+  isSelectAllEnabled: _,
+  flatOptions: u,
+  searchValue: B,
+  highlightedIndex: C,
+  setHighlightedIndex: r,
+  openedViaKeyboardRef: A,
+  scrollToSelectedOnOpen: q,
+  selectionModel: f,
+  internalValue: x,
+  rowVirtualizer: c
+}) {
+  L(() => {
+    if (!m) {
+      r(-1);
+      return;
+    }
+    if (A.current) {
+      if (A.current = !1, F && T === "menu" && !e) {
+        r(-1);
+        return;
+      }
+      r(
+        X({
+          isLoading: !!a,
+          isProcessing: t,
+          fetchError: I,
+          isMulti: n,
+          isSelectAllEnabled: _,
+          isReadOnly: e,
+          flatOptionsLength: u.length
+        }) ? N : 0
+      );
+    }
+  }, [
+    m,
+    F,
+    T,
+    e,
+    a,
+    t,
+    I,
+    n,
+    _,
+    u.length,
+    A,
+    r
+  ]), L(() => {
+    C !== -1 && r(0);
+  }, [B]), L(() => {
+    if (!m)
+      return;
+    const v = requestAnimationFrame(() => {
+      c.measure();
+    });
+    return () => cancelAnimationFrame(v);
+  }, [m, c]), L(() => {
+    if (!m || !q || t || u.length === 0)
+      return;
+    const v = u.findIndex((E) => n ? f.mode === "exclude" ? !f.set.has(E.value) : f.set.has(E.value) : x?.value === E.value);
+    if (v === -1)
+      return;
+    const D = setTimeout(() => {
+      c.scrollToIndex(v, { align: "center" });
+    }, 50);
+    return () => clearTimeout(D);
+  }, [
+    m,
+    q,
+    t,
+    u,
+    n,
+    f.mode,
+    f.set,
+    x,
+    c
+  ]);
+}
+export {
+  J as useSelectOpenEffects
+};

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

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare function useSelectOutsideScrollLock(isOpen: boolean, menuRef: RefObject<HTMLDivElement | null>): void;

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

@@ -0,0 +1,23 @@
+import { useEffect as u } from "react";
+function s(r, o) {
+  u(() => {
+    if (!r)
+      return;
+    const e = (t) => {
+      const n = t.target;
+      n && o.current?.contains(n) || (t.preventDefault(), t.stopPropagation());
+    };
+    return document.addEventListener("scroll", e, !0), document.addEventListener("wheel", e, {
+      passive: !1,
+      capture: !0
+    }), document.addEventListener("touchmove", e, {
+      passive: !1,
+      capture: !0
+    }), () => {
+      document.removeEventListener("scroll", e, !0), document.removeEventListener("wheel", e, !0), document.removeEventListener("touchmove", e, !0);
+    };
+  }, [r, o]);
+}
+export {
+  s as useSelectOutsideScrollLock
+};

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

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare function useSelectSearchFocus(isOpen: boolean, isSearchable: boolean, searchPosition: string, searchInputRef: RefObject<HTMLInputElement | null>): void;

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

@@ -0,0 +1,19 @@
+import { useEffect as n } from "react";
+function i(t, r, u, e) {
+  n(() => {
+    if (!(t && r && u === "menu"))
+      return;
+    let c = !1;
+    const o = () => {
+      !c && e.current && e.current.focus();
+    };
+    requestAnimationFrame(o);
+    const m = setTimeout(o, 50);
+    return () => {
+      c = !0, clearTimeout(m);
+    };
+  }, [t, r, u, e]);
+}
+export {
+  i as useSelectSearchFocus
+};