impact-nova 0.1.13 → 1.1.0

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

@@ -1,85 +1,89 @@
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { createPortal as k } from "react-dom";
-import { Checkbox as w } from "../../checkbox.js";
-import { ChevronRight as S, Checkmark as C } from "../../../../icons/index.js";
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-popover";
+import { Checkbox as y } from "../../checkbox.js";
+import { ChevronRight as C, Checkmark as w } from "../../../../icons/index.js";
 import { cn as N } from "../../../../lib/utils.js";
-const V = ({
-  parentOption: a,
-  parentRect: l,
+const D = ({
+  parentOption: o,
   isMulti: c,
-  isReadOnly: o,
-  isSelected: f,
-  getIndeterminateState: p,
-  getSelectedCount: x,
-  handleSelect: h,
-  id: A
+  isReadOnly: l,
+  isSelected: b,
+  getIndeterminateState: f,
+  getSelectedCount: h,
+  handleSelect: x,
+  id: S
 }) => {
-  const d = "children" in a && Array.isArray(a.children) ? a.children : null;
-  return d ? k(
-    /* @__PURE__ */ r(
-      "div",
+  const d = "children" in o && Array.isArray(o.children) ? o.children : null;
+  if (!d) return null;
+  const u = String(o.value || "");
+  return /* @__PURE__ */ s(i.Root, { open: !0, children: [
+    /* @__PURE__ */ t(i.Anchor, { className: "absolute inset-0 pointer-events-none" }),
+    /* @__PURE__ */ t(i.Portal, { children: /* @__PURE__ */ t(
+      i.Content,
       {
-        className: "select-submenu-container absolute z-[10000] bg-white rounded-lg shadow-xl ring-1 ring-black ring-opacity-5 overflow-auto py-1 min-w-[180px]",
-        style: {
-          top: l.top - 4,
-          left: l.right + 8,
-          maxHeight: "300px"
-        },
+        side: "right",
+        sideOffset: 8,
+        align: "start",
+        avoidCollisions: !0,
+        collisionPadding: 8,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        className: "select-submenu-container z-50 bg-white rounded-lg shadow-xl ring-1 ring-black ring-opacity-5 overflow-auto py-1 min-w-[180px] max-h-[300px]",
+        "data-component": "select-menu",
         children: d.map((e) => {
-          const t = f(e), y = p(e), n = e.isDisabled, u = x(e), s = "children" in e && Array.isArray(e.children) && e.children.length > 0, m = e.isParentSelectable !== !1, b = String(e.value || ""), g = String(a.value || "");
-          return /* @__PURE__ */ i(
+          const n = b(e), v = f(e), a = e.isDisabled, m = h(e), r = "children" in e && Array.isArray(e.children) && e.children.length > 0, p = e.isParentSelectable !== !1, g = String(e.value || "");
+          return /* @__PURE__ */ s(
             "div",
             {
               className: N(
                 "relative cursor-default select-none py-2 px-3 flex items-center justify-between",
-                n ? "opacity-50 cursor-not-allowed bg-[#f5f5f5]" : o ? "cursor-default" : "hover:bg-indigo-100 cursor-pointer",
-                t && !n && !s ? "bg-indigo-50 text-indigo-900" : "text-gray-900"
+                a ? "opacity-50 cursor-not-allowed bg-[#f5f5f5]" : l ? "cursor-default" : "hover:bg-indigo-100 cursor-pointer",
+                n && !a && !r ? "bg-indigo-50 text-indigo-900" : "text-gray-900"
               ),
-              onClick: (v) => {
-                v.stopPropagation(), !n && !o && m && h(e);
+              onClick: (k) => {
+                k.stopPropagation(), !a && !l && p && x(e);
               },
-              "data-testid": `select-submenu-option-${g}-${b}`,
-              "data-selected": t,
-              "data-disabled": n,
+              "data-testid": `select-submenu-option-${u}-${g}`,
+              "data-state": n ? "checked" : "unchecked",
+              "data-disabled": a || void 0,
+              "data-component": "select-option",
               children: [
-                /* @__PURE__ */ i("div", { className: "flex items-center gap-2 flex-1", children: [
-                  c && m && /* @__PURE__ */ r(
-                    w,
+                /* @__PURE__ */ s("div", { className: "flex items-center gap-2 flex-1", children: [
+                  c && p && /* @__PURE__ */ t(
+                    y,
                     {
-                      checked: y ? "indeterminate" : t,
-                      disabled: n || o,
+                      checked: v ? "indeterminate" : n,
+                      disabled: a || l,
                       onChange: () => {
                       }
                     }
                   ),
-                  /* @__PURE__ */ r(
+                  /* @__PURE__ */ t(
                     "span",
                     {
                       className: "block truncate",
-                      "data-testid": `select-submenu-option-label-${g}-${b}`,
-                      "data-selected": t,
+                      "data-testid": `select-submenu-option-label-${u}-${g}`,
+                      "data-state": n ? "checked" : "unchecked",
                       title: String(e.label || ""),
                       children: e.label
                     }
                   ),
-                  s && u > 0 && /* @__PURE__ */ i("span", { className: "text-xs text-gray-500 font-medium", children: [
+                  r && m > 0 && /* @__PURE__ */ s("span", { className: "text-xs text-gray-500 font-medium", children: [
                     "(",
-                    u,
+                    m,
                     ")"
                   ] })
                 ] }),
-                s && /* @__PURE__ */ r(S, { size: "sm", color: "#7a8294" }),
-                !c && t && !s && /* @__PURE__ */ r(C, { className: "h-4 w-4 text-indigo-600" })
+                r && /* @__PURE__ */ t(C, { size: "sm", color: "#7a8294" }),
+                !c && n && !r && /* @__PURE__ */ t(w, { className: "h-4 w-4 text-indigo-600" })
               ]
             },
             e.value
           );
         })
       }
-    ),
-    document.body
-  ) : null;
+    ) })
+  ] });
 };
 export {
-  V as default
+  D as default
 };