@kopexa/sight
Version:
Kopexa Sight Design System — React component library for GRC applications
111 lines (108 loc) • 4.3 kB
JavaScript
"use client";
import {
FlagIcon
} from "./chunk-RJCX7W2Y.mjs";
import {
getCountries,
toAlpha2,
toFormat
} from "./chunk-FYWJTHFZ.mjs";
// src/components/country-picker/country-picker.tsx
import { Button } from "@kopexa/button";
import { Combobox } from "@kopexa/combobox";
import { useSafeIntl } from "@kopexa/i18n";
import { cn } from "@kopexa/shared-utils";
import { countryPicker } from "@kopexa/theme";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
function norm(s) {
return s.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase().trim();
}
function CountryPicker({
value,
defaultValue,
onChange,
valueFormat = "alpha2",
locale,
placeholder = "Select country",
searchPlaceholder = "Search countries\u2026",
emptyMessage = "No countries found.",
showCode = true,
disabled,
className,
id
}) {
var _a, _b, _c, _d;
const intl = useSafeIntl();
const resolvedLocale = locale != null ? locale : intl.locale;
const s = countryPicker();
const items = useMemo(() => getCountries(resolvedLocale), [resolvedLocale]);
const byA2 = useMemo(() => {
const m = /* @__PURE__ */ new Map();
for (const c of items) m.set(c.alpha2, c);
return m;
}, [items]);
const selected = value != null ? (_b = byA2.get((_a = toAlpha2(value)) != null ? _a : "")) != null ? _b : null : void 0;
const defaultSelected = defaultValue != null ? (_d = byA2.get((_c = toAlpha2(defaultValue)) != null ? _c : "")) != null ? _d : null : void 0;
const filter = (item, query) => {
const country = item;
const q = norm(query);
if (!q) return true;
return norm(country.name).includes(q) || country.alpha2.toLowerCase().startsWith(q) || country.alpha3.toLowerCase().startsWith(q);
};
return /* @__PURE__ */ jsxs(
Combobox,
{
items,
value: selected,
defaultValue: defaultSelected,
onValueChange: (value2) => {
var _a2;
const country = value2;
onChange == null ? void 0 : onChange(
country ? (_a2 = toFormat(country.alpha2, valueFormat)) != null ? _a2 : null : null
);
},
itemToStringLabel: (value2) => {
var _a2;
return (_a2 = value2 == null ? void 0 : value2.name) != null ? _a2 : "";
},
isItemEqualToValue: (a, b) => (a == null ? void 0 : a.alpha2) === (b == null ? void 0 : b.alpha2),
filter,
disabled,
variant: "inside",
children: [
/* @__PURE__ */ jsxs(
Combobox.Trigger,
{
id,
className: cn("w-full border-input bg-background px-3", className),
render: /* @__PURE__ */ jsx(Button, { variant: "outline", mode: "input" }),
children: [
/* @__PURE__ */ jsx(Combobox.Value, { children: (country) => country ? /* @__PURE__ */ jsxs("span", { className: s.value(), children: [
/* @__PURE__ */ jsx(FlagIcon, { code: country.alpha2, "aria-hidden": true }),
/* @__PURE__ */ jsx("span", { className: s.valueName(), children: country.name })
] }) : /* @__PURE__ */ jsx("span", { className: s.valuePlaceholder(), children: placeholder }) }),
/* @__PURE__ */ jsx(Combobox.Icon, {})
]
}
),
/* @__PURE__ */ jsxs(Combobox.Content, { className: "pt-0", children: [
/* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(Combobox.Input, { placeholder: searchPlaceholder }) }),
/* @__PURE__ */ jsx(Combobox.Empty, { children: emptyMessage }),
/* @__PURE__ */ jsx(Combobox.List, { maxHeight: 320, children: (country) => /* @__PURE__ */ jsxs(Combobox.Item, { value: country, children: [
/* @__PURE__ */ jsxs("span", { className: s.item(), children: [
/* @__PURE__ */ jsx(FlagIcon, { code: country.alpha2, "aria-hidden": true }),
/* @__PURE__ */ jsx("span", { className: s.itemName(), children: country.name }),
showCode && /* @__PURE__ */ jsx("span", { className: s.itemCode(), children: toFormat(country.alpha2, valueFormat) })
] }),
/* @__PURE__ */ jsx(Combobox.ItemIndicator, {})
] }, country.alpha2) })
] })
]
}
);
}
export {
CountryPicker
};