@yuno-payments/dashboard-design-system 2.9.3 → 2.9.4

package/dist/components/molecules/select/search-select.js

@@ -1,125 +1,135 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
+import { j as t } from "../../../_virtual/jsx-runtime.js";
 import * as l from "react";
-import { cn as a, getDirection as A } from "../../../lib/utils.js";
-import { FieldLabel as B } from "../../../vendor/shadcn/field.js";
+import { cn as c, getDirection as A } from "../../../lib/utils.js";
+import { FieldLabel as J } from "../../../vendor/shadcn/field.js";
 import { Icon as b } from "../../atoms/icon/icon.js";
-import { Combobox as H, ComboboxTrigger as J, ComboboxContent as K } from "../../../vendor/shadcn/combobox.js";
-import { Command as M, CommandInput as P, CommandList as Q, CommandEmpty as U, CommandGroup as W, CommandItem as G } from "../../../vendor/shadcn/command.js";
+import { Combobox as M, ComboboxTrigger as P, ComboboxContent as Q } from "../../../vendor/shadcn/combobox.js";
+import { Command as U, CommandInput as W, CommandList as X, CommandEmpty as Y, CommandGroup as Z, CommandItem as _ } from "../../../vendor/shadcn/command.js";
 import { Typography as x } from "../../atoms/typography/typography.js";
-const X = l.forwardRef(
+const E = "__yuno_search_select_no_highlight__", $ = "end", ee = l.forwardRef(
   ({
     label: j,
-    description: N,
+    description: C,
     error: u,
-    optional: L = !1,
+    optional: G = !1,
     placeholder: k = "Select an option",
-    value: r,
-    defaultValue: p,
-    onChange: h,
+    value: s,
+    defaultValue: h,
+    onChange: p,
     disabled: f = !1,
-    options: c = [],
+    options: o = [],
     groups: i = [],
-    className: E,
+    className: I,
     id: g,
-    searchPlaceholder: z = "Search",
-    maxHeight: F = 300
-  }, I) => {
-    const [o, C] = l.useState(!1), [v, S] = l.useState(""), d = i.length > 0, w = c.length > 0, D = l.useCallback(() => {
-      if (!r) return null;
+    searchPlaceholder: T = "Search",
+    maxHeight: V = 300
+  }, z) => {
+    const [r, N] = l.useState(!1), [S, v] = l.useState(""), [D, O] = l.useState(E), F = l.useCallback((e) => {
+      O(E), N(e);
+    }, []), d = i.length > 0, w = o.length > 0, H = l.useCallback(() => {
+      if (!s) return null;
       if (d)
-        for (const s of i) {
-          const n = s.options.find((t) => t.value === r);
-          if (n) return n.label;
+        for (const e of i) {
+          const a = e.options.find((n) => n.value === s);
+          if (a) return a.label;
         }
       else if (w) {
-        const s = c.find((n) => n.value === r);
-        if (s) return s.label;
+        const e = o.find((a) => a.value === s);
+        if (e) return e.label;
       }
       return null;
-    }, [r, i, c, d, w]), R = l.useCallback(
-      (s) => {
-        if (!s)
-          return { filteredOptions: c, filteredGroups: i };
-        const n = s.toLowerCase();
+    }, [s, i, o, d, w]), R = l.useCallback(
+      (e) => {
+        if (!e)
+          return { filteredOptions: o, filteredGroups: i };
+        const a = e.toLowerCase();
         if (d) {
-          const t = i.map((m) => ({
+          const n = i.map((m) => ({
             ...m,
             options: m.options.filter(
-              (V) => V.label.toLowerCase().includes(n)
+              (K) => K.label.toLowerCase().includes(a)
             )
           })).filter((m) => m.options.length > 0);
-          return { filteredOptions: [], filteredGroups: t };
+          return { filteredOptions: [], filteredGroups: n };
         } else
-          return { filteredOptions: c.filter(
-            (m) => m.label.toLowerCase().includes(n)
+          return { filteredOptions: o.filter(
+            (m) => m.label.toLowerCase().includes(a)
           ), filteredGroups: [] };
       },
-      [c, i, d]
-    ), { filteredOptions: T, filteredGroups: q } = R(v);
+      [o, i, d]
+    ), { filteredOptions: q, filteredGroups: B } = R(S);
     l.useEffect(() => {
-      o && setTimeout(() => {
+      r && setTimeout(() => {
         document.querySelector(
           '[data-slot="command-input"]'
         )?.focus();
       }, 0);
-    }, [o]), l.useEffect(() => {
-      o || S("");
-    }, [o]), l.useEffect(() => {
-      p && !r && h?.(p);
-    }, [p, r, h]);
-    const y = (s) => {
-      f || (h?.(s), C(!1));
-    }, O = D();
-    return /* @__PURE__ */ e.jsxs("div", { dir: A(), className: a("w-full", E), children: [
-      j && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 mb-2", children: [
-        /* @__PURE__ */ e.jsx(
-          B,
+    }, [r]), l.useEffect(() => {
+      if (!r || !s) return;
+      const e = setTimeout(() => {
+        document.querySelector(
+          '[data-slot="command-list"] [data-selected-option="true"]'
+        )?.scrollIntoView({ block: $ });
+      }, 0);
+      return () => clearTimeout(e);
+    }, [r, s]), l.useEffect(() => {
+      r || v("");
+    }, [r]), l.useEffect(() => {
+      h && !s && p?.(h);
+    }, [h, s, p]);
+    const y = (e) => {
+      f || (p?.(e), N(!1));
+    }, L = H();
+    return /* @__PURE__ */ t.jsxs("div", { dir: A(), className: c("w-full", I), children: [
+      j && /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-1 mb-2", children: [
+        /* @__PURE__ */ t.jsx(
+          J,
           {
             htmlFor: g,
-            className: a(f && "text-muted-foreground"),
+            className: c(f && "text-muted-foreground"),
             children: j
           }
         ),
-        L && /* @__PURE__ */ e.jsx(x, { variant: "sm", className: "text-muted-foreground", children: "(Optional)" })
+        G && /* @__PURE__ */ t.jsx(x, { variant: "sm", className: "text-muted-foreground", children: "(Optional)" })
       ] }),
-      N && !u && /* @__PURE__ */ e.jsx(
+      C && !u && /* @__PURE__ */ t.jsx(
         x,
         {
           variant: "sm",
-          className: a(
+          className: c(
             "text-muted-foreground mb-2",
             f && "text-muted-"
           ),
-          children: N
+          children: C
         }
       ),
-      /* @__PURE__ */ e.jsxs(H, { open: o, onOpenChange: C, children: [
-        /* @__PURE__ */ e.jsx(J, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ t.jsxs(M, { open: r, onOpenChange: F, children: [
+        /* @__PURE__ */ t.jsx(P, { asChild: !0, children: /* @__PURE__ */ t.jsxs(
           "button",
           {
-            ref: I,
+            ref: z,
             id: g,
             type: "button",
             disabled: f,
             role: "combobox",
-            "aria-expanded": o,
+            "aria-expanded": r,
             "aria-haspopup": "listbox",
-            className: a(
+            className: c(
               "flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-input px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:text-muted- shadow-xs [&>span]:min-w-0 [&>span]:truncate",
               u && "border-destructive"
             ),
             children: [
-              /* @__PURE__ */ e.jsx(
+              /* @__PURE__ */ t.jsx(
                 "span",
                 {
-                  className: a(
+                  className: c(
                     "truncate",
-                    !O && "text-muted-foreground"
+                    !L && "text-muted-foreground"
                   ),
-                  children: O || k
+                  children: L || k
                 }
               ),
-              /* @__PURE__ */ e.jsx(
+              /* @__PURE__ */ t.jsx(
                 b,
                 {
                   name: "CaretDown",
@@ -130,79 +140,89 @@ const X = l.forwardRef(
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(K, { className: "p-0", align: "start", children: /* @__PURE__ */ e.jsxs(M, { shouldFilter: !1, children: [
-          /* @__PURE__ */ e.jsx(
-            P,
-            {
-              placeholder: z,
-              value: v,
-              onValueChange: S
-            }
-          ),
-          /* @__PURE__ */ e.jsxs(Q, { style: { maxHeight: F }, children: [
-            /* @__PURE__ */ e.jsx(U, { children: /* @__PURE__ */ e.jsx(
-              x,
-              {
-                variant: "sm",
-                className: "text-muted-foreground py-6 text-center",
-                children: "No results found."
-              }
-            ) }),
-            d ? q.map((s, n) => /* @__PURE__ */ e.jsxs(W, { children: [
-              s.label && /* @__PURE__ */ e.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: s.label }),
-              s.options.map((t) => /* @__PURE__ */ e.jsxs(
-                G,
+        /* @__PURE__ */ t.jsx(Q, { className: "p-0", align: "start", children: /* @__PURE__ */ t.jsxs(
+          U,
+          {
+            shouldFilter: !1,
+            value: D,
+            onValueChange: O,
+            children: [
+              /* @__PURE__ */ t.jsx(
+                W,
                 {
-                  value: t.value,
-                  onSelect: () => y(t.value),
-                  className: a(
-                    "cursor-pointer",
-                    r === t.value && "bg-accent"
-                  ),
-                  children: [
-                    /* @__PURE__ */ e.jsxs("span", { className: "flex items-center", children: [
-                      t.icon && /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-flex items-center", children: t.icon }),
-                      t.label
-                    ] }),
-                    r === t.value && /* @__PURE__ */ e.jsx(
-                      b,
-                      {
-                        name: "Check",
-                        size: "sm",
-                        className: "ml-auto"
-                      }
-                    )
-                  ]
-                },
-                t.value
-              ))
-            ] }, n)) : T.map((s) => /* @__PURE__ */ e.jsxs(
-              G,
-              {
-                value: s.value,
-                onSelect: () => y(s.value),
-                className: a(
-                  "cursor-pointer",
-                  r === s.value && "bg-accent"
-                ),
-                children: [
-                  /* @__PURE__ */ e.jsxs("span", { className: "flex items-center", children: [
-                    s.icon && /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-flex items-center", children: s.icon }),
-                    s.label
-                  ] }),
-                  r === s.value && /* @__PURE__ */ e.jsx(b, { name: "Check", size: "sm", className: "ml-auto" })
-                ]
-              },
-              s.value
-            ))
-          ] })
-        ] }) })
+                  placeholder: T,
+                  value: S,
+                  onValueChange: v
+                }
+              ),
+              /* @__PURE__ */ t.jsxs(X, { style: { maxHeight: V }, children: [
+                /* @__PURE__ */ t.jsx(Y, { children: /* @__PURE__ */ t.jsx(
+                  x,
+                  {
+                    variant: "sm",
+                    className: "text-muted-foreground py-6 text-center",
+                    children: "No results found."
+                  }
+                ) }),
+                d ? B.map((e, a) => /* @__PURE__ */ t.jsxs(Z, { children: [
+                  e.label && /* @__PURE__ */ t.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: e.label }),
+                  e.options.map((n) => /* @__PURE__ */ t.jsxs(
+                    _,
+                    {
+                      value: n.value,
+                      onSelect: () => y(n.value),
+                      "data-selected-option": s === n.value ? !0 : void 0,
+                      className: c(
+                        "cursor-pointer",
+                        s === n.value && "bg-accent"
+                      ),
+                      children: [
+                        /* @__PURE__ */ t.jsxs("span", { className: "flex items-center", children: [
+                          n.icon && /* @__PURE__ */ t.jsx("span", { className: "mr-2 inline-flex items-center", children: n.icon }),
+                          n.label
+                        ] }),
+                        s === n.value && /* @__PURE__ */ t.jsx(
+                          b,
+                          {
+                            name: "Check",
+                            size: "sm",
+                            className: "ml-auto"
+                          }
+                        )
+                      ]
+                    },
+                    n.value
+                  ))
+                ] }, a)) : q.map((e) => /* @__PURE__ */ t.jsxs(
+                  _,
+                  {
+                    value: e.value,
+                    onSelect: () => y(e.value),
+                    "data-selected-option": s === e.value ? !0 : void 0,
+                    className: c(
+                      "cursor-pointer",
+                      s === e.value && "bg-accent"
+                    ),
+                    children: [
+                      /* @__PURE__ */ t.jsxs("span", { className: "flex items-center", children: [
+                        e.icon && /* @__PURE__ */ t.jsx("span", { className: "mr-2 inline-flex items-center", children: e.icon }),
+                        e.label
+                      ] }),
+                      s === e.value && /* @__PURE__ */ t.jsx(b, { name: "Check", size: "sm", className: "ml-auto" })
+                    ]
+                  },
+                  e.value
+                ))
+              ] })
+            ]
+          }
+        ) })
       ] }),
-      u && /* @__PURE__ */ e.jsx(x, { variant: "sm", className: "text-destructive mt-2", children: u })
+      u && /* @__PURE__ */ t.jsx(x, { variant: "sm", className: "text-destructive mt-2", children: u })
     ] });
   }
 );
-X.displayName = "SearchSelect";
+ee.displayName = "SearchSelect";
 export {
-  X as SearchSelect
+  ee as SearchSelect
 };