impact-nova 2.1.0-alpha.3 → 2.1.0-alpha.5

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