impact-nova 2.2.6 → 2.2.8

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

@@ -1,17 +1,18 @@
 import { jsxs as w, jsx as t } from "react/jsx-runtime";
-import { memo as T } from "react";
-import { Checkmark as Y, ChevronRight as F } from "impact-nova-icons";
-import { Badge as H } from "../../../data-display/badge/badge.js";
-import { OverflowTooltip as J } from "../../../feedback/tooltip/overflow-tooltip.js";
+import { memo as Y } from "react";
+import { useSuppressOptionClickForTextSelection as J } from "../hooks/useSuppressOptionClickForTextSelection.js";
+import { Checkmark as K, ChevronRight as L } from "impact-nova-icons";
+import { Badge as Q } from "../../../data-display/badge/badge.js";
+import { OverflowTooltip as U } from "../../../feedback/tooltip/overflow-tooltip.js";
 import { cn as m } from "../../../../lib/utils.js";
-import { selectOptionVariants as K } from "../select.variants.js";
-import { isSelected as L } from "../utils/select.js";
-import { Submenu as Q } from "./Submenu.js";
-function U({
+import { selectOptionVariants as W } from "../select.variants.js";
+import { isSelected as X } from "../utils/select.js";
+import { Submenu as Z } from "./Submenu.js";
+function _({
   option: e,
-  virtualRow: s,
-  measureElement: j,
-  selectFieldId: C,
+  virtualRow: o,
+  measureElement: P,
+  selectFieldId: j,
   id: v,
   isMulti: f,
   isReadOnly: u,
@@ -20,62 +21,64 @@ function U({
   showSequence: I,
   selected: r,
   isOptDisabled: n,
-  indeterminate: h,
-  selectedCount: N,
-  isParentSelectable: y,
-  highlighted: z,
-  activeSubmenu: B,
-  setActiveSubmenu: $,
-  optionLabel: V,
-  optionLabelString: E,
-  sequence: d,
-  internalValue: G,
-  renderOption: S,
+  indeterminate: p,
+  selectedCount: S,
+  isParentSelectable: N,
+  highlighted: O,
+  activeSubmenu: z,
+  setActiveSubmenu: y,
+  optionLabel: B,
+  optionLabelString: T,
+  sequence: s,
+  internalValue: V,
+  renderOption: $,
   onSelect: b,
-  getGroupStats: P
+  getGroupStats: C
 }) {
-  const x = v || "default", p = String(e.value || ""), l = c && e.isGroup, g = a && e.isSubmenuParent, k = I && !l && !g;
+  const h = v || "default", x = String(e.value || ""), l = c && e.isGroup, k = a && e.isSubmenuParent, g = I && !l && !k, { onOptionPointerDown: E, onOptionDoubleClick: F, createOptionClickHandler: G } = J(), H = () => {
+    n || (c && e.isGroup || a && e.isSubmenuParent) && !N || b(e);
+  };
   return /* @__PURE__ */ w(
     "div",
     {
-      "data-index": s.index,
-      ref: j,
+      "data-index": o.index,
+      ref: P,
       className: "absolute start-0 w-full pb-[2px]",
       style: {
-        transform: `translateY(${s.start}px)`,
+        transform: `translateY(${o.start}px)`,
         width: "100%"
       },
-      "data-testid": `select-option-wrapper-${x}-${p}`,
+      "data-testid": `select-option-wrapper-${h}-${x}`,
       children: [
         /* @__PURE__ */ t(
           "div",
           {
-            id: `${C}-option-${s.index}`,
+            id: `${j}-option-${o.index}`,
             className: m(
-              K({
+              W({
                 disabled: n,
                 readOnly: u,
                 selected: r && !n && !(c && e.isGroup) && !(a && e.isSubmenuParent),
-                highlighted: z && !n
+                highlighted: O && !n
               })
             ),
             style: {
               paddingInlineStart: `${e.depth * 16 + 12}px`
             },
-            onClick: () => {
-              n || (c && e.isGroup || a && e.isSubmenuParent) && !y || b(e);
-            },
+            onPointerDown: E,
+            onDoubleClick: F,
+            onClick: G(H),
             onMouseEnter: () => {
-              a && e.isSubmenuParent ? $(e.value) : $(null);
+              a && e.isSubmenuParent ? y(e.value) : y(null);
             },
-            "data-testid": `select-option-${x}-${p}`,
+            "data-testid": `select-option-${h}-${x}`,
             "data-state": r ? "checked" : "unchecked",
             "data-disabled": n || void 0,
             "data-component": "select-option",
             role: "option",
             "aria-selected": r,
             "aria-disabled": n || void 0,
-            children: S ? S(
+            children: $ ? $(
               {
                 onClick: () => {
                 },
@@ -85,16 +88,16 @@ function U({
               },
               e
             ) : /* @__PURE__ */ w("div", { className: "flex items-center flex-1 overflow-hidden", children: [
-              f && (c && e.isGroup || a && e.isSubmenuParent ? y : !0) && /* @__PURE__ */ t(
+              f && (c && e.isGroup || a && e.isSubmenuParent ? N : !0) && /* @__PURE__ */ t(
                 "span",
                 {
                   "aria-hidden": "true",
                   className: m(
                     "mr-[7px] flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border border-stroke-field bg-canvas-elevated",
-                    (r || h) && "border-brand bg-accent text-brand",
+                    (r || p) && "border-brand bg-accent text-brand",
                     (n || u) && "opacity-50"
                   ),
-                  children: r && !h ? /* @__PURE__ */ t(Y, { className: "h-3.5 w-3.5" }) : h ? /* @__PURE__ */ t("span", { className: "block h-0.5 w-2.5 bg-current" }) : null
+                  children: r && !p ? /* @__PURE__ */ t(K, { className: "h-3.5 w-3.5" }) : p ? /* @__PURE__ */ t("span", { className: "block h-0.5 w-2.5 bg-current" }) : null
                 }
               ),
               /* @__PURE__ */ w(
@@ -102,72 +105,72 @@ function U({
                 {
                   className: m(
                     "flex min-w-0 flex-1 items-center overflow-hidden",
-                    k ? "justify-between gap-2" : "gap-2"
+                    g ? "justify-between gap-2" : "gap-2"
                   ),
                   children: [
                     /* @__PURE__ */ t(
-                      J,
+                      U,
                       {
                         triggerClassName: m(
-                          "block min-w-0 truncate",
-                          k && "flex-1",
-                          l ? "text-xs font-semibold text-content-icon uppercase tracking-wider" : r && !g ? "font-medium" : "font-normal",
+                          "block min-w-0 truncate select-text",
+                          g && "flex-1",
+                          l ? "text-xs font-semibold text-content-icon uppercase tracking-wider" : r && !k ? "font-medium" : "font-normal",
                           !l && "text-[14px]"
                         ),
-                        content: E,
+                        content: T,
                         side: "top",
                         variant: "tertiary",
                         children: /* @__PURE__ */ t(
                           "span",
                           {
-                            "data-testid": `select-option-label-${x}-${p}`,
+                            "data-testid": `select-option-label-${h}-${x}`,
                             "data-state": r ? "checked" : "unchecked",
-                            children: V
+                            children: B
                           }
                         )
                       }
                     ),
-                    (l || g) && N > 0 && /* @__PURE__ */ t("span", { className: "inline-flex shrink-0 items-center justify-center rounded-full bg-brand-tint px-1.5 py-0.5 text-xs font-medium text-brand-on-subtle", children: N }),
-                    k && /* @__PURE__ */ t("span", { className: "flex h-5 w-6 shrink-0 items-center justify-center", children: d !== void 0 && d > 0 ? /* @__PURE__ */ t(
-                      H,
+                    (l || k) && S > 0 && /* @__PURE__ */ t("span", { className: "inline-flex shrink-0 items-center justify-center rounded-full bg-brand-tint px-1.5 py-0.5 text-xs font-medium text-brand-on-subtle", children: S }),
+                    g && /* @__PURE__ */ t("span", { className: "flex h-5 w-6 shrink-0 items-center justify-center", children: s !== void 0 && s > 0 ? /* @__PURE__ */ t(
+                      Q,
                       {
                         variant: "outline",
                         color: "primary",
                         size: "sm",
-                        "data-testid": `select-option-sequence-${d}`,
-                        children: d.toString()
+                        "data-testid": `select-option-sequence-${s}`,
+                        children: s.toString()
                       }
                     ) : null })
                   ]
                 }
               ),
-              a && e.isSubmenuParent && /* @__PURE__ */ t(F, { size: "12px", className: "text-content-icon" })
+              a && e.isSubmenuParent && /* @__PURE__ */ t(L, { size: "12px", className: "text-content-icon" })
             ] })
           }
         ),
-        a && B === e.value && e.isSubmenuParent && /* @__PURE__ */ t(
-          Q,
+        a && z === e.value && e.isSubmenuParent && /* @__PURE__ */ t(
+          Z,
           {
             parentOption: e,
             isMulti: !!f,
             isReadOnly: !!u,
-            isSelected: (i) => L(i, G, !!f),
+            isSelected: (i) => X(i, V, !!f),
             getIndeterminateState: (i) => {
-              const o = P(i);
-              return o ? o.selected > 0 && o.selected < o.total : !1;
+              const d = C(i);
+              return d ? d.selected > 0 && d.selected < d.total : !1;
             },
-            getSelectedCount: (i) => P(i)?.selected || 0,
+            getSelectedCount: (i) => C(i)?.selected || 0,
             handleSelect: b,
             id: v
           }
         )
       ]
     },
-    s.key
+    o.key
   );
 }
-const D = T(U);
+const ie = Y(_);
 export {
-  D as SelectOptionRow,
-  U as SelectOptionRowInner
+  ie as SelectOptionRow,
+  _ as SelectOptionRowInner
 };

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

@@ -1,27 +1,28 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import * as i from "@radix-ui/react-popover";
-import { Checkbox as k } from "../../checkbox/checkbox.js";
+import { Checkbox as P } from "../../checkbox/checkbox.js";
 import "react";
 import { OverflowTooltip as y } from "../../../feedback/tooltip/overflow-tooltip.js";
-import { ChevronRight as A, Checkmark as w } from "impact-nova-icons";
-import { cn as f } from "../../../../lib/utils.js";
-import { useOverlayPortalContainer as P } from "../../../../lib/overlay/overlay-portal-context.js";
-import { OVERLAY_NESTED_FLOATING_INSTANT_HIDE_CLASS as D } from "../../../../lib/overlay/overlay-host.constants.js";
-const L = ({
+import { ChevronRight as A, Checkmark as O } from "impact-nova-icons";
+import { cn as v } from "../../../../lib/utils.js";
+import { useOverlayPortalContainer as T } from "../../../../lib/overlay/overlay-portal-context.js";
+import { OVERLAY_NESTED_FLOATING_INSTANT_HIDE_CLASS as _ } from "../../../../lib/overlay/overlay-host.constants.js";
+import { useSuppressOptionClickForTextSelection as E } from "../hooks/useSuppressOptionClickForTextSelection.js";
+const R = ({
   parentOption: n,
-  isMulti: d,
+  isMulti: u,
   isReadOnly: l,
-  isSelected: v,
-  getIndeterminateState: x,
-  getSelectedCount: g,
-  handleSelect: h
+  isSelected: x,
+  getIndeterminateState: g,
+  getSelectedCount: h,
+  handleSelect: C
 }) => {
-  const C = P(), u = "children" in n && Array.isArray(n.children) ? n.children : null;
-  if (!u) return null;
+  const k = T(), { onOptionPointerDown: S, onOptionDoubleClick: N, createOptionClickHandler: w } = E(), d = "children" in n && Array.isArray(n.children) ? n.children : null;
+  if (!d) return null;
   const c = String(n.value || "");
   return /* @__PURE__ */ s(i.Root, { open: !0, children: [
     /* @__PURE__ */ t(i.Anchor, { className: "absolute inset-0 pointer-events-none" }),
-    /* @__PURE__ */ t(i.Portal, { container: C, children: /* @__PURE__ */ t(
+    /* @__PURE__ */ t(i.Portal, { container: k, children: /* @__PURE__ */ t(
       i.Content,
       {
         side: "right",
@@ -33,35 +34,39 @@ const L = ({
         onOpenAutoFocus: (e) => e.preventDefault(),
         onInteractOutside: (e) => e.preventDefault(),
         onFocusOutside: (e) => e.preventDefault(),
-        className: f(
+        className: v(
           "select-submenu-container z-50 min-w-[180px] max-h-[300px] overflow-auto rounded-xl bg-canvas-elevated py-1 shadow-elevation-floating",
-          D
+          _
         ),
         "data-component": "select-menu",
-        children: u.map((e) => {
-          const a = v(e), N = x(e), o = e.isDisabled, m = g(e), r = "children" in e && Array.isArray(e.children) && e.children.length > 0, p = e.isParentSelectable !== !1, b = String(e.value || "");
+        children: d.map((e) => {
+          const o = x(e), D = g(e), r = e.isDisabled, m = h(e), a = "children" in e && Array.isArray(e.children) && e.children.length > 0, p = e.isParentSelectable !== !1, b = String(e.value || "");
           return /* @__PURE__ */ s(
             "div",
             {
-              className: f(
+              className: v(
                 "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" : l ? "cursor-default" : "cursor-pointer hover:bg-canvas-muted",
-                a && !o && !r ? "bg-brand-subtle text-content" : "text-content"
+                r ? "cursor-not-allowed bg-canvas-readonly opacity-50" : l ? "cursor-default" : "cursor-pointer hover:bg-canvas-muted",
+                o && !r && !a ? "bg-brand-subtle text-content" : "text-content"
               ),
-              onClick: (S) => {
-                S.stopPropagation(), !o && !l && p && h(e);
+              onPointerDown: S,
+              onDoubleClick: N,
+              onClick: (f) => {
+                f.stopPropagation(), w(() => {
+                  !r && !l && p && C(e);
+                })(f);
               },
               "data-testid": `select-submenu-option-${c}-${b}`,
-              "data-state": a ? "checked" : "unchecked",
-              "data-disabled": o || void 0,
+              "data-state": o ? "checked" : "unchecked",
+              "data-disabled": r || void 0,
               "data-component": "select-option",
               children: [
                 /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [
-                  d && p && /* @__PURE__ */ t(
-                    k,
+                  u && p && /* @__PURE__ */ t(
+                    P,
                     {
-                      checked: N ? "indeterminate" : a,
-                      disabled: o || l,
+                      checked: D ? "indeterminate" : o,
+                      disabled: r || l,
                       onChange: () => {
                       }
                     }
@@ -69,7 +74,7 @@ const L = ({
                   /* @__PURE__ */ t(
                     y,
                     {
-                      triggerClassName: "block truncate text-[14px] font-medium leading-5 min-w-0",
+                      triggerClassName: "block truncate select-text text-[14px] font-medium leading-5 min-w-0",
                       content: String(e.label || ""),
                       side: "top",
                       variant: "tertiary",
@@ -77,20 +82,20 @@ const L = ({
                         "span",
                         {
                           "data-testid": `select-submenu-option-label-${c}-${b}`,
-                          "data-state": a ? "checked" : "unchecked",
+                          "data-state": o ? "checked" : "unchecked",
                           children: e.label
                         }
                       )
                     }
                   ),
-                  r && m > 0 && /* @__PURE__ */ s("span", { className: "text-xs text-secondary-foreground font-medium", children: [
+                  a && m > 0 && /* @__PURE__ */ s("span", { className: "text-xs text-secondary-foreground font-medium", children: [
                     "(",
                     m,
                     ")"
                   ] })
                 ] }),
-                r && /* @__PURE__ */ t(A, { size: "sm", className: "text-content-icon" }),
-                !d && a && !r && /* @__PURE__ */ t(w, { className: "h-4 w-4 text-brand" })
+                a && /* @__PURE__ */ t(A, { size: "sm", className: "text-content-icon" }),
+                !u && o && !a && /* @__PURE__ */ t(O, { className: "h-4 w-4 text-brand" })
               ]
             },
             e.value
@@ -101,5 +106,5 @@ const L = ({
   ] });
 };
 export {
-  L as Submenu
+  R as Submenu
 };

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

@@ -0,0 +1,5 @@
+export declare function useSuppressOptionClickForTextSelection(): {
+    onOptionPointerDown: (event: React.PointerEvent<HTMLElement>) => void;
+    onOptionDoubleClick: (event: React.MouseEvent<HTMLElement>) => void;
+    createOptionClickHandler: (onOptionClick: () => void) => (event: React.MouseEvent<HTMLElement>) => void;
+};

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

@@ -0,0 +1,28 @@
+import { useRef as u, useCallback as t } from "react";
+import { shouldSuppressOptionClickForTextSelection as p } from "../utils/shouldSuppressOptionClickForTextSelection.js";
+function a() {
+  const n = u(null), i = t(
+    (o) => {
+      o.button === 0 && (n.current = {
+        clientX: o.clientX,
+        clientY: o.clientY
+      });
+    },
+    []
+  ), e = t(
+    (o) => {
+      o.stopPropagation();
+    },
+    []
+  ), r = t(
+    (o) => (c) => {
+      const l = n.current;
+      n.current = null, !p(l, c) && o();
+    },
+    []
+  );
+  return { onOptionPointerDown: i, onOptionDoubleClick: e, createOptionClickHandler: r };
+}
+export {
+  a as useSuppressOptionClickForTextSelection
+};