impact-nova 2.2.1 → 2.2.3

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

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

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

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