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

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

@@ -1,37 +1,35 @@
 import { jsx as o } from "react/jsx-runtime";
-import * as n from "@radix-ui/react-popover";
+import * as i from "@radix-ui/react-popover";
 import { cn as r } from "../../../../lib/utils.js";
-function x({
-  menuRef: l,
+function v({
+  menuRef: n,
   menuMinHeight: t,
-  menuWidth: s,
+  menuWidth: l,
   isReadOnly: a,
   id: d,
-  menuLabel: p,
-  onClose: i,
-  children: c
+  menuLabel: s,
+  children: p
 }) {
-  return /* @__PURE__ */ o(n.Portal, { children: /* @__PURE__ */ o(
-    n.Content,
+  return /* @__PURE__ */ o(i.Portal, { children: /* @__PURE__ */ o(
+    i.Content,
     {
-      ref: l,
+      ref: n,
       side: "bottom",
       sideOffset: 4,
       align: "start",
       avoidCollisions: !0,
       collisionPadding: 8,
-      "aria-label": p,
+      "aria-label": s,
       onOpenAutoFocus: (e) => e.preventDefault(),
-      onInteractOutside: i,
-      onFocusOutside: i,
       onWheel: (e) => e.stopPropagation(),
       style: {
-        width: s || "var(--radix-popover-trigger-width)",
-        maxHeight: "var(--radix-popover-content-available-height)"
+        width: l ?? "var(--radix-popover-trigger-width)",
+        minWidth: "var(--radix-popover-trigger-width)",
+        maxHeight: "min(320px, var(--radix-popover-content-available-height, 320px))"
       },
       className: r(
-        "z-[100] flex flex-col overflow-hidden rounded-[12px] p-0 text-base shadow-[0px_1px_6px_0px_rgba(26,39,124,0.14)] focus:outline-none sm:text-sm border-none pointer-events-auto",
-        a ? "bg-disabled-surface" : "bg-canvas"
+        "z-50 flex flex-col overflow-hidden rounded-[12px] p-0 text-base shadow-[0px_1px_6px_0px_rgba(26,39,124,0.14)] focus:outline-none sm:text-sm border-none pointer-events-auto",
+        a ? "bg-disabled-surface" : "bg-canvas-elevated"
       ),
       "data-testid": `select-menu-${d || "default"}`,
       "data-component": "select-menu",
@@ -40,17 +38,17 @@ function x({
         {
           className: r(
             "flex min-h-0 flex-1 flex-col overflow-hidden rounded-[12px]",
-            a ? "bg-disabled-surface" : "bg-canvas"
+            a ? "bg-disabled-surface" : "bg-canvas-elevated"
           ),
           style: {
             minHeight: t ? `${t}px` : void 0
           },
-          children: c
+          children: p
         }
       )
     }
   ) });
 }
 export {
-  x as SelectMenuPanel
+  v as SelectMenuPanel
 };

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

@@ -1,7 +1,8 @@
 import { FocusEvent, KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'react';
 import { MultiValue, Option, SingleValue } from '../select.types';
+import * as React from "react";
 export interface SelectTriggerProps<OptionType extends Option = Option> {
-    triggerRef: RefObject<HTMLDivElement | null>;
+    triggerRef: RefObject<HTMLButtonElement | null>;
     inputRef: RefObject<HTMLInputElement | null>;
     selectFieldId: string;
     listboxId: string;
@@ -31,10 +32,12 @@ export interface SelectTriggerProps<OptionType extends Option = Option> {
     formatSelectedCount: (count: number) => string;
     resolveOptionLabel: (option: OptionType | Option) => ReactNode;
     isMulti?: boolean;
-    onFocus?: (event: FocusEvent<HTMLDivElement>) => void;
-    onBlur?: (event: FocusEvent<HTMLDivElement>) => void;
-    onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
-    onOpenChange: (open: boolean) => void;
+    onFocus?: (event: FocusEvent<HTMLButtonElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLButtonElement>) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    onToggle: () => void;
     onClear: (event: MouseEvent) => void;
 }
-export declare function SelectTrigger<OptionType extends Option = Option>({ triggerRef, inputRef, selectFieldId, listboxId, id, className, size, error, isDisabled, isReadOnly, isOpen, isLoading, isProcessing, isClearable, isSearchable, searchPosition, searchValue, setSearchValue, autoFocus, name, label, placeholder, leftContent, activeDescendantId, internalValue, totalCount, totalOptionsCount, formatSelectedCount, resolveOptionLabel, isMulti, onFocus, onBlur, onKeyDown, onOpenChange, onClear, }: SelectTriggerProps<OptionType>): import("react/jsx-runtime").JSX.Element;
+export declare const SelectTrigger: <OptionType extends Option = Option>(props: SelectTriggerProps<OptionType> & {
+    ref?: React.ForwardedRef<HTMLButtonElement>;
+}) => React.ReactElement | null;

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

@@ -1,166 +1,162 @@
-import { jsx as e, jsxs as l, Fragment as H } from "react/jsx-runtime";
-import { LoadingSpinner as J, Cross as K, ChevronRight as Q } from "impact-nova-icons";
-import { cn as f } from "../../../../lib/utils.js";
-import { selectTriggerVariants as U } from "../select.variants.js";
-import { hasClearableSelectValue as W } from "../utils/hasClearableSelectValue.js";
-import { SelectTriggerValue as X } from "./SelectTriggerValue.js";
-function tt({
-  triggerRef: x,
-  inputRef: g,
-  selectFieldId: h,
-  listboxId: b,
-  id: c,
-  className: v,
+import { jsx as t, jsxs as c, Fragment as H } from "react/jsx-runtime";
+import * as J from "react";
+import { LoadingSpinner as K, Cross as Q, ChevronRight as U } from "impact-nova-icons";
+import { cn as g } from "../../../../lib/utils.js";
+import { selectTriggerVariants as W } from "../select.variants.js";
+import { hasClearableSelectValue as X } from "../utils/hasClearableSelectValue.js";
+import { SelectTriggerValue as Y } from "./SelectTriggerValue.js";
+function Z(...i) {
+  return (n) => {
+    for (const r of i)
+      r && (typeof r == "function" ? r(n) : r.current = n);
+  };
+}
+function _({
+  triggerRef: i,
+  inputRef: n,
+  selectFieldId: r,
+  listboxId: x,
+  id: s,
+  className: h,
   size: w = "default",
-  error: N,
+  error: b,
   isDisabled: a,
-  isReadOnly: n,
-  isOpen: r,
-  isLoading: C,
-  isProcessing: P,
-  isClearable: k,
-  isSearchable: z,
-  searchPosition: S,
-  searchValue: y,
-  setSearchValue: j,
-  autoFocus: T,
-  name: V,
-  label: i,
-  placeholder: s,
-  leftContent: d,
-  activeDescendantId: $,
-  internalValue: u,
-  totalCount: D,
-  totalOptionsCount: F,
-  formatSelectedCount: I,
-  resolveOptionLabel: L,
-  isMulti: m,
-  onFocus: q,
-  onBlur: A,
-  onKeyDown: B,
-  onOpenChange: p,
-  onClear: E
-}) {
-  const G = k && !n && !a && W(m, u);
-  return /* @__PURE__ */ e(
-    "div",
+  isReadOnly: l,
+  isOpen: o,
+  isLoading: v,
+  isProcessing: N,
+  isClearable: C,
+  isSearchable: S,
+  searchPosition: k,
+  searchValue: P,
+  setSearchValue: T,
+  autoFocus: y,
+  name: z,
+  label: f,
+  placeholder: d,
+  leftContent: m,
+  activeDescendantId: j,
+  internalValue: p,
+  totalCount: V,
+  totalOptionsCount: $,
+  formatSelectedCount: F,
+  resolveOptionLabel: I,
+  isMulti: u,
+  onFocus: L,
+  onBlur: R,
+  onKeyDown: q,
+  onToggle: A,
+  onClear: B
+}, D) {
+  const E = C && !l && !a && X(u, p);
+  return /* @__PURE__ */ t(
+    "button",
     {
-      ref: x,
-      className: f(
-        U({
+      type: "button",
+      ref: Z(D, i),
+      disabled: a,
+      className: g(
+        W({
           size: w,
-          error: !!N,
+          error: !!b,
           disabled: !!a,
-          readOnly: n,
-          open: r
+          readOnly: l,
+          open: o
         }),
-        v
+        h
       ),
-      id: h,
-      tabIndex: a ? -1 : 0,
-      onFocus: q,
-      onBlur: A,
+      id: r,
+      onFocus: L,
+      onBlur: R,
       role: "combobox",
-      "aria-expanded": r,
+      "aria-expanded": o,
       "aria-haspopup": "listbox",
-      "aria-controls": b,
-      "aria-activedescendant": $,
-      "aria-label": i ? String(i) : s,
-      "aria-disabled": a || void 0,
+      "aria-controls": x,
+      "aria-activedescendant": j,
+      "aria-label": f ? String(f) : d,
       "data-component": "select-trigger",
       "data-disabled": a || void 0,
-      "data-state": r ? "open" : "closed",
-      onKeyDown: B,
-      onPointerDown: (t) => {
-        if (a || n) return;
-        const o = t.target;
-        o.closest("[data-chevron-button]") || o.closest("[data-clear-button]") || (t.preventDefault(), p(!r));
+      "data-state": o ? "open" : "closed",
+      onKeyDown: q,
+      onClick: (e) => {
+        if (e.target.closest("[data-clear-button]")) {
+          e.preventDefault(), e.stopPropagation();
+          return;
+        }
+        a || l || A();
       },
-      onClick: (t) => {
-        const o = t.target;
-        (o.closest("[data-chevron-button]") || o.closest("[data-clear-button]")) && (t.preventDefault(), t.stopPropagation());
+      onPointerDown: (e) => {
+        e.target.closest("[data-clear-button]") && (e.preventDefault(), e.stopPropagation());
       },
-      children: /* @__PURE__ */ l("div", { className: "flex items-center justify-between w-full min-w-0 max-w-full", children: [
-        d ? /* @__PURE__ */ e("div", { className: "flex items-center text-content-muted shrink-0", children: d }) : null,
-        /* @__PURE__ */ l(
+      children: /* @__PURE__ */ c("div", { className: "flex items-center justify-between w-full min-w-0 max-w-full", children: [
+        m ? /* @__PURE__ */ t("div", { className: "flex items-center text-content-icon shrink-0", children: m }) : null,
+        /* @__PURE__ */ c(
           "div",
           {
-            className: "flex-1 flex items-center overflow-hidden min-w-0 max-w-full",
-            "data-testid": `select-value-${c || "default"}`,
+            className: "flex-1 flex items-center overflow-hidden min-w-0 max-w-full text-left",
+            "data-testid": `select-value-${s || "default"}`,
             children: [
-              /* @__PURE__ */ e(
-                X,
+              /* @__PURE__ */ t(
+                Y,
                 {
-                  isMulti: m,
+                  isMulti: u,
                   isDisabled: a,
-                  internalValue: u,
-                  totalCount: D,
-                  totalOptionsCount: F,
-                  formatSelectedCount: I,
-                  resolveOptionLabel: L,
-                  placeholder: /* @__PURE__ */ e(
+                  internalValue: p,
+                  totalCount: V,
+                  totalOptionsCount: $,
+                  formatSelectedCount: F,
+                  resolveOptionLabel: I,
+                  placeholder: /* @__PURE__ */ t(
                     "span",
                     {
                       className: "text-content-placeholder font-normal text-[14px] truncate min-w-0 block",
-                      "data-testid": `select-placeholder-${c || "default"}`,
+                      "data-testid": `select-placeholder-${s || "default"}`,
                       "data-has-value": !1,
-                      children: s
+                      children: d
                     }
                   )
                 }
               ),
-              z && r && S === "trigger" && !n ? /* @__PURE__ */ e(
+              S && o && k === "trigger" && !l ? /* @__PURE__ */ t(
                 "input",
                 {
-                  ref: g,
+                  ref: n,
                   type: "text",
-                  className: "flex-1 min-w-[50px] border-none p-0 focus:ring-0 text-sm outline-none h-full",
-                  value: y,
-                  onChange: (t) => {
-                    j(t.target.value);
+                  className: "flex-1 min-w-[50px] border-none p-0 focus:ring-0 text-sm outline-none h-full bg-transparent",
+                  value: P,
+                  onChange: (e) => {
+                    T(e.target.value);
                   },
-                  onClick: (t) => t.stopPropagation(),
-                  autoFocus: T,
-                  name: V || void 0
+                  onClick: (e) => e.stopPropagation(),
+                  autoFocus: y,
+                  name: z || void 0
                 }
               ) : null
             ]
           }
         ),
-        /* @__PURE__ */ e("div", { className: "flex items-center gap-1 text-content-muted shrink-0", children: !r && (C || P) ? /* @__PURE__ */ e(J, { size: "14px" }) : /* @__PURE__ */ l(H, { children: [
-          G ? /* @__PURE__ */ e(
-            "button",
+        /* @__PURE__ */ t("div", { className: "flex items-center gap-1 text-content-icon shrink-0", children: !o && (v || N) ? /* @__PURE__ */ t(K, { size: "14px" }) : /* @__PURE__ */ c(H, { children: [
+          E ? /* @__PURE__ */ t(
+            "span",
             {
-              type: "button",
+              role: "presentation",
               "data-clear-button": !0,
               "aria-label": "Clear selection",
-              onPointerDown: (t) => {
-                t.preventDefault(), t.stopPropagation(), E(t);
+              className: "hover:text-content-secondary p-0.5 cursor-pointer z-10 relative inline-flex",
+              onPointerDown: (e) => {
+                e.preventDefault(), e.stopPropagation(), B(e);
               },
-              className: "hover:text-content-secondary p-0.5 cursor-pointer z-10 relative border-0 bg-transparent",
-              children: /* @__PURE__ */ e(K, { size: "11px", className: "text-content-muted" })
+              children: /* @__PURE__ */ t(Q, { size: "11px", className: "text-content-icon" })
             }
           ) : null,
-          /* @__PURE__ */ e(
-            "button",
+          /* @__PURE__ */ t(
+            U,
             {
-              type: "button",
-              "data-chevron-button": !0,
-              "aria-label": r ? "Close dropdown" : "Open dropdown",
-              "aria-expanded": r,
-              onPointerDown: (t) => {
-                t.preventDefault(), t.stopPropagation(), p(!r);
-              },
-              className: "hover:text-content-secondary p-0.5 cursor-pointer z-10 relative border-0 bg-transparent",
-              children: /* @__PURE__ */ e(
-                Q,
-                {
-                  size: "16px",
-                  className: f(
-                    "transition-transform duration-200",
-                    r ? "-rotate-90" : "rotate-90"
-                  )
-                }
+              size: "16px",
+              "aria-hidden": !0,
+              className: g(
+                "transition-transform duration-200 shrink-0",
+                o ? "-rotate-90" : "rotate-90"
               )
             }
           )
@@ -169,6 +165,8 @@ function tt({
     }
   );
 }
+const M = J.forwardRef(_);
+M.displayName = "SelectTrigger";
 export {
-  tt as SelectTrigger
+  M as SelectTrigger
 };

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

@@ -5,15 +5,15 @@ import { ChevronRight as N, Checkmark as S } from "impact-nova-icons";
 import { cn as w } from "../../../../lib/utils.js";
 const $ = ({
   parentOption: n,
-  isMulti: u,
+  isMulti: d,
   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 u = "children" in n && Array.isArray(n.children) ? n.children : null;
+  if (!u) 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" }),
@@ -29,9 +29,9 @@ const $ = ({
         onOpenAutoFocus: (e) => e.preventDefault(),
         onInteractOutside: (e) => e.preventDefault(),
         onFocusOutside: (e) => e.preventDefault(),
-        className: "select-submenu-container z-[100] min-w-[180px] max-h-[300px] overflow-auto rounded-xl bg-canvas-elevated py-1 shadow-elevation-floating",
+        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) => {
+        children: u.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",
@@ -50,7 +50,7 @@ const $ = ({
               "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(
+                  d && p && /* @__PURE__ */ t(
                     C,
                     {
                       checked: g ? "indeterminate" : a,
@@ -69,14 +69,14 @@ const $ = ({
                       children: e.label
                     }
                   ),
-                  s && m > 0 && /* @__PURE__ */ r("span", { className: "text-xs text-content-muted font-medium", children: [
+                  s && m > 0 && /* @__PURE__ */ r("span", { className: "text-xs text-secondary-foreground 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" })
+                !d && a && !s && /* @__PURE__ */ t(S, { className: "h-4 w-4 text-brand" })
               ]
             },
             e.value

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

@@ -18,7 +18,7 @@ export interface UseSelectKeyboardHandlersParams {
     handleSelectAll: () => void | Promise<void>;
     openedViaKeyboardRef: MutableRefObject<boolean>;
     searchInputRef: RefObject<HTMLInputElement | null>;
-    triggerRef: RefObject<HTMLDivElement | null>;
+    triggerRef: RefObject<HTMLButtonElement | null>;
 }
 export declare function useSelectKeyboardHandlers(params: UseSelectKeyboardHandlersParams): {
     handleTriggerKeyDown: (e: ReactKeyboardEvent) => void;

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

@@ -0,0 +1,19 @@
+import { Option, PropsValue } from '../select.types';
+export interface UseSelectValueStateParams<OptionType> {
+    value: PropsValue<OptionType> | undefined;
+    defaultValue: PropsValue<OptionType> | undefined;
+    isMulti: boolean;
+    onChange?: unknown;
+}
+export interface UseSelectValueStateResult<OptionType> {
+    usesMenuSession: boolean;
+    currentValue: PropsValue<OptionType>;
+    setCurrentValue: (next: PropsValue<OptionType>) => void;
+    beginMenuSession: () => void;
+    endMenuSession: () => PropsValue<OptionType> | undefined;
+}
+/**
+ * Controlled selects without `onChange` keep edits in a menu session so
+ * `onMenuClose` can batch-commit without stale `value` props.
+ */
+export declare function useSelectValueState<OptionType extends Option = Option>({ value, defaultValue, isMulti, onChange, }: UseSelectValueStateParams<OptionType>): UseSelectValueStateResult<OptionType>;

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

@@ -0,0 +1,41 @@
+import { useState as i, useRef as v, useCallback as r } from "react";
+import { cloneSelectValue as M } from "../utils/select.js";
+function h({
+  value: c,
+  defaultValue: V,
+  isMulti: s,
+  onChange: f
+}) {
+  const u = c !== void 0, e = u && f === void 0, [S, d] = i(
+    V ?? (s ? [] : null)
+  ), [a, l] = i(null), o = v(null), t = u ? c : S, m = e && a !== null ? a : t, p = r(
+    (n) => {
+      if (!u) {
+        d(n);
+        return;
+      }
+      e && (o.current = n, l(n));
+    },
+    [u, e]
+  ), C = r(() => {
+    if (!e)
+      return;
+    const n = M(t, s);
+    o.current = n, l(n);
+  }, [e, t, s]), b = r(() => {
+    if (!e)
+      return;
+    const n = o.current ?? t;
+    return o.current = null, l(null), n;
+  }, [e, t]);
+  return {
+    usesMenuSession: e,
+    currentValue: m,
+    setCurrentValue: p,
+    beginMenuSession: C,
+    endMenuSession: b
+  };
+}
+export {
+  h as useSelectValueState
+};

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

@@ -1,13 +1,14 @@
 import { Select as n } from "./select.js";
-import { cx as r, getIndeterminateState as i, getLeafOptions as c, getSelectedCount as S, getSequence as a, isInvertedSelection as d, isOptionArray as g, isSelected as l } from "./utils/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,
-  c as getLeafOptions,
+  l as getLeafOptions,
   S as getSelectedCount,
   a as getSequence,
   d as isInvertedSelection,
   g as isOptionArray,
-  l as isSelected
+  p as isSelected
 };