@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

package/dist/es/components/fundamental/country-dropdown.js

@@ -0,0 +1,215 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useState as L, useMemo as c, useCallback as C } from "react";
+import { useVirtualizer as G } from "@tanstack/react-virtual";
+import { Check as M, ChevronDown as U } from "lucide-react";
+import { Button as F } from "./button.js";
+import { CommandItem as Y, Command as J, CommandInput as Q, CommandList as Z, CommandEmpty as _, CommandGroup as q } from "./command.js";
+import { Popover as K, PopoverTrigger as W, PopoverContent as X } from "./popover.js";
+import { Flag as V } from "./flag.js";
+import { cn as ee } from "../../lib/utils.js";
+import { countries as ae } from "country-data-list";
+const te = (a) => a <= 12 ? "s" : a <= 16 ? "m" : a <= 20 ? "l" : "xl", re = 8, j = () => ae.all.filter((a) => ["assigned", "officially assigned"].includes(a.status) && !["AQ", "BV", "HM", "GS"].includes(a.alpha2)).map((a) => ({
+  name: a.name,
+  alpha2: a.alpha2,
+  alpha3: a.alpha3,
+  numeric: a.numeric || "000",
+  // Fallback for numeric code
+  emoji: a.emoji
+})).sort((a, s) => a.name.localeCompare(s.name));
+function fe({
+  value: a,
+  onValueChange: s,
+  placeholder: p = "Select country...",
+  searchPlaceholder: l = "Search countries...",
+  disabled: n = !1,
+  className: A,
+  flagSize: b = 16,
+  showFlag: h = !0,
+  showCode: g = !1,
+  variant: u = "default",
+  priorityCountries: v = ["US", "GB", "CA", "AU", "DE", "FR", "JP", "CN", "IN", "BR"],
+  trigger: D,
+  clearable: H
+}) {
+  const [N, T] = L(!1), [f, z] = L(""), [P, k] = L(null), m = c(() => j(), []), x = c(() => te(b), [b]), w = c(() => {
+    const e = v.map((S) => m.find((R) => R.alpha2 === S)).filter(Boolean), r = m.filter(
+      (S) => !v.includes(S.alpha2)
+    );
+    return [...e, ...r];
+  }, [m, v]), d = c(() => {
+    if (!f) return w;
+    const e = f.toLowerCase();
+    return w.filter(
+      (r) => r.name.toLowerCase().includes(e) || r.alpha2.toLowerCase().includes(e) || r.alpha3.toLowerCase().includes(e)
+    );
+  }, [w, f]), B = d.length > re, I = Math.min(d.length * 40, 300), y = G({
+    count: B ? d.length : 0,
+    getScrollElement: () => P,
+    estimateSize: () => 40,
+    // Approximate height of each item
+    overscan: 5
+    // Render 5 extra items outside viewport for smooth scrolling
+  }), o = c(() => m.find((e) => e.alpha2 === a), [m, a]), E = C(
+    (e) => {
+      s?.(e), T(!1);
+    },
+    [s]
+  ), $ = C(
+    (e, r) => /* @__PURE__ */ i(
+      Y,
+      {
+        value: `${e.name} ${e.alpha2} ${e.alpha3}`,
+        onSelect: () => E(e.alpha2),
+        className: "flex items-center gap-[var(--space-s)] cursor-pointer",
+        "data-index": r,
+        children: [
+          h && /* @__PURE__ */ t(
+            V,
+            {
+              country: e.alpha2,
+              size: x
+            }
+          ),
+          /* @__PURE__ */ t("span", { className: "flex-1", children: e.name }),
+          g && /* @__PURE__ */ t("span", { className: "text-body-sm text-[var(--color-text-secondary)]", children: e.alpha2 }),
+          a === e.alpha2 && /* @__PURE__ */ t(M, { className: "h-4 w-4 text-[var(--color-icon-brand-bold)]" })
+        ]
+      },
+      e.alpha2
+    ),
+    [h, x, g, a, E]
+  ), O = () => u === "slim" && o ? /* @__PURE__ */ t("div", { className: "flex items-center", children: h && /* @__PURE__ */ t(
+    V,
+    {
+      country: o.alpha2,
+      size: x
+    }
+  ) }) : o ? /* @__PURE__ */ i("div", { className: "flex items-center gap-[var(--space-s)]", children: [
+    h && /* @__PURE__ */ t(
+      V,
+      {
+        country: o.alpha2,
+        size: x
+      }
+    ),
+    /* @__PURE__ */ t("span", { className: "flex-1 truncate text-left", children: o.name }),
+    g && /* @__PURE__ */ t("span", { className: "text-body-sm text-[var(--color-text-secondary)]", children: o.alpha2 })
+  ] }) : /* @__PURE__ */ t("span", { className: "text-[var(--color-text-secondary)]", children: p });
+  return /* @__PURE__ */ i(K, { open: N, onOpenChange: T, children: [
+    /* @__PURE__ */ t(W, { asChild: !0, children: D ? D({ open: N, selectedCountry: o, placeholder: p, disabled: n }) : /* @__PURE__ */ i(
+      F,
+      {
+        variant: "default",
+        role: "combobox",
+        "aria-expanded": N,
+        disabled: n,
+        className: ee(
+          "justify-between",
+          u === "slim" ? "w-auto px-[var(--space-s)]" : "w-full",
+          A
+        ),
+        children: [
+          O(),
+          u !== "slim" && /* @__PURE__ */ t(U, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ t(
+      X,
+      {
+        className: "w-[var(--radix-popover-trigger-width)] min-w-[300px] p-0",
+        align: "start",
+        children: /* @__PURE__ */ i(J, { shouldFilter: !1, children: [
+          /* @__PURE__ */ t(
+            Q,
+            {
+              placeholder: l,
+              className: "h-9",
+              value: f,
+              onValueChange: z,
+              clearable: H,
+              onClear: () => z("")
+            }
+          ),
+          /* @__PURE__ */ i(Z, { className: "max-h-[300px]", children: [
+            /* @__PURE__ */ t(_, { children: "No country found" }),
+            /* @__PURE__ */ t(q, { children: B ? (
+              // Virtualized rendering for large lists
+              /* @__PURE__ */ t(
+                "div",
+                {
+                  ref: k,
+                  className: "h-[300px] overflow-y-auto overflow-x-hidden",
+                  style: { contain: "strict" },
+                  children: /* @__PURE__ */ t(
+                    "div",
+                    {
+                      style: {
+                        height: `${y.getTotalSize()}px`,
+                        width: "100%",
+                        position: "relative"
+                      },
+                      children: y.getVirtualItems().map((e) => {
+                        const r = d[e.index];
+                        return r ? /* @__PURE__ */ t(
+                          "div",
+                          {
+                            "data-index": e.index,
+                            ref: y.measureElement,
+                            style: {
+                              position: "absolute",
+                              top: 0,
+                              left: 0,
+                              width: "100%",
+                              transform: `translateY(${e.start}px)`
+                            },
+                            children: $(r, e.index)
+                          },
+                          e.key
+                        ) : null;
+                      })
+                    }
+                  )
+                }
+              )
+            ) : (
+              // Direct rendering for small lists with dynamic height
+              /* @__PURE__ */ t(
+                "div",
+                {
+                  style: {
+                    maxHeight: `${I}px`,
+                    overflowY: "auto"
+                  },
+                  children: d.map((e, r) => $(e, r))
+                }
+              )
+            ) })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+function xe() {
+  const a = c(() => j(), []), s = C(
+    (l) => a.find(
+      (n) => n.alpha2 === l || n.alpha3 === l || n.numeric === l
+    ),
+    [a]
+  ), p = C(
+    (l) => a.find(
+      (n) => n.name.toLowerCase() === l.toLowerCase()
+    ),
+    [a]
+  );
+  return {
+    countries: a,
+    getCountryByCode: s,
+    getCountryByName: p
+  };
+}
+export {
+  fe as CountryDropdown,
+  xe as useCountryData
+};