@yuno-payments/dashboard-design-system 2.9.0 → 2.9.1-PYORK-145.1

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

@@ -1,110 +1,115 @@
 import { j as e } 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 d, getDirection as J } from "../../../lib/utils.js";
+import { FieldLabel as K } 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 L = "__yuno_search_select_no_highlight__", $ = l.forwardRef(
   ({
     label: j,
-    description: N,
+    description: C,
     error: u,
-    optional: L = !1,
-    placeholder: k = "Select an option",
-    value: r,
-    defaultValue: p,
-    onChange: h,
+    optional: k = !1,
+    placeholder: E = "Select an option",
+    value: n,
+    defaultValue: h,
+    onChange: p,
     disabled: f = !1,
-    options: c = [],
-    groups: i = [],
-    className: E,
-    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;
-      if (d)
-        for (const s of i) {
-          const n = s.options.find((t) => t.value === r);
-          if (n) return n.label;
+    options: r = [],
+    groups: o = [],
+    className: I,
+    id: N,
+    searchPlaceholder: V = "Search",
+    maxHeight: z = 300
+  }, F) => {
+    const [c, g] = l.useState(!1), [S, v] = l.useState(""), [H, O] = l.useState(L), T = l.useCallback(
+      (s) => {
+        O(s && n ? n : L), g(s);
+      },
+      [n]
+    ), m = o.length > 0, w = r.length > 0, D = l.useCallback(() => {
+      if (!n) return null;
+      if (m)
+        for (const s of o) {
+          const a = s.options.find((t) => t.value === n);
+          if (a) return a.label;
         }
       else if (w) {
-        const s = c.find((n) => n.value === r);
+        const s = r.find((a) => a.value === n);
         if (s) return s.label;
       }
       return null;
-    }, [r, i, c, d, w]), R = l.useCallback(
+    }, [n, o, r, m, w]), R = l.useCallback(
       (s) => {
         if (!s)
-          return { filteredOptions: c, filteredGroups: i };
-        const n = s.toLowerCase();
-        if (d) {
-          const t = i.map((m) => ({
-            ...m,
-            options: m.options.filter(
-              (V) => V.label.toLowerCase().includes(n)
+          return { filteredOptions: r, filteredGroups: o };
+        const a = s.toLowerCase();
+        if (m) {
+          const t = o.map((i) => ({
+            ...i,
+            options: i.options.filter(
+              (B) => B.label.toLowerCase().includes(a)
             )
-          })).filter((m) => m.options.length > 0);
+          })).filter((i) => i.options.length > 0);
           return { filteredOptions: [], filteredGroups: t };
         } else
-          return { filteredOptions: c.filter(
-            (m) => m.label.toLowerCase().includes(n)
+          return { filteredOptions: r.filter(
+            (i) => i.label.toLowerCase().includes(a)
           ), filteredGroups: [] };
       },
-      [c, i, d]
-    ), { filteredOptions: T, filteredGroups: q } = R(v);
+      [r, o, m]
+    ), { filteredOptions: q, filteredGroups: A } = R(S);
     l.useEffect(() => {
-      o && setTimeout(() => {
+      c && setTimeout(() => {
         document.querySelector(
           '[data-slot="command-input"]'
         )?.focus();
       }, 0);
-    }, [o]), l.useEffect(() => {
-      o || S("");
-    }, [o]), l.useEffect(() => {
-      p && !r && h?.(p);
-    }, [p, r, h]);
+    }, [c]), l.useEffect(() => {
+      c || v("");
+    }, [c]), l.useEffect(() => {
+      h && !n && p?.(h);
+    }, [h, n, p]);
     const y = (s) => {
-      f || (h?.(s), C(!1));
-    }, O = D();
-    return /* @__PURE__ */ e.jsxs("div", { dir: A(), className: a("w-full", E), children: [
+      f || (p?.(s), g(!1));
+    }, G = D();
+    return /* @__PURE__ */ e.jsxs("div", { dir: J(), className: d("w-full", I), children: [
       j && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 mb-2", children: [
         /* @__PURE__ */ e.jsx(
-          B,
+          K,
           {
-            htmlFor: g,
-            className: a(f && "text-muted-foreground"),
+            htmlFor: N,
+            className: d(f && "text-muted-foreground"),
             children: j
           }
         ),
-        L && /* @__PURE__ */ e.jsx(x, { variant: "sm", className: "text-muted-foreground", children: "(Optional)" })
+        k && /* @__PURE__ */ e.jsx(x, { variant: "sm", className: "text-muted-foreground", children: "(Optional)" })
       ] }),
-      N && !u && /* @__PURE__ */ e.jsx(
+      C && !u && /* @__PURE__ */ e.jsx(
         x,
         {
           variant: "sm",
-          className: a(
+          className: d(
             "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__ */ e.jsxs(M, { open: c, onOpenChange: T, children: [
+        /* @__PURE__ */ e.jsx(P, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
           "button",
           {
-            ref: I,
-            id: g,
+            ref: F,
+            id: N,
             type: "button",
             disabled: f,
             role: "combobox",
-            "aria-expanded": o,
+            "aria-expanded": c,
             "aria-haspopup": "listbox",
-            className: a(
+            className: d(
               "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"
             ),
@@ -112,11 +117,11 @@ const X = l.forwardRef(
               /* @__PURE__ */ e.jsx(
                 "span",
                 {
-                  className: a(
+                  className: d(
                     "truncate",
-                    !O && "text-muted-foreground"
+                    !G && "text-muted-foreground"
                   ),
-                  children: O || k
+                  children: G || E
                 }
               ),
               /* @__PURE__ */ e.jsx(
@@ -130,79 +135,81 @@ 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__ */ e.jsx(Q, { className: "p-0", align: "start", children: /* @__PURE__ */ e.jsxs(
+          U,
+          {
+            shouldFilter: !1,
+            value: H,
+            onValueChange: O,
+            children: [
+              /* @__PURE__ */ e.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: V,
+                  value: S,
+                  onValueChange: v
+                }
+              ),
+              /* @__PURE__ */ e.jsxs(X, { style: { maxHeight: z }, children: [
+                /* @__PURE__ */ e.jsx(Y, { children: /* @__PURE__ */ e.jsx(
+                  x,
+                  {
+                    variant: "sm",
+                    className: "text-muted-foreground py-6 text-center",
+                    children: "No results found."
+                  }
+                ) }),
+                m ? A.map((s, a) => /* @__PURE__ */ e.jsxs(Z, { 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(
+                    _,
+                    {
+                      value: t.value,
+                      onSelect: () => y(t.value),
+                      className: "cursor-pointer",
+                      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
+                        ] }),
+                        n === t.value && /* @__PURE__ */ e.jsx(
+                          b,
+                          {
+                            name: "Check",
+                            size: "sm",
+                            className: "ml-auto"
+                          }
+                        )
+                      ]
+                    },
+                    t.value
+                  ))
+                ] }, a)) : q.map((s) => /* @__PURE__ */ e.jsxs(
+                  _,
+                  {
+                    value: s.value,
+                    onSelect: () => y(s.value),
+                    className: "cursor-pointer",
+                    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
+                      ] }),
+                      n === s.value && /* @__PURE__ */ e.jsx(b, { name: "Check", size: "sm", className: "ml-auto" })
+                    ]
+                  },
+                  s.value
+                ))
+              ] })
+            ]
+          }
+        ) })
       ] }),
       u && /* @__PURE__ */ e.jsx(x, { variant: "sm", className: "text-destructive mt-2", children: u })
     ] });
   }
 );
-X.displayName = "SearchSelect";
+$.displayName = "SearchSelect";
 export {
-  X as SearchSelect
+  $ as SearchSelect
 };