react-country-choices 0.2.1

package/dist/index.css

@@ -0,0 +1,65 @@
+/* src/components/styles/Checkbox.css */
+.checkbox-group-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 10px;
+  border: 1px solid #d4d4d4;
+  border-radius: 8px;
+  background-color: #fefefe;
+  font-family: Arial, sans-serif;
+}
+.checkbox-country-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 10px;
+  border-radius: 5px;
+  transition: background 0.2s ease;
+  cursor: pointer;
+}
+.checkbox-country-item:hover {
+  background-color: #f0f0f0;
+}
+.checkbox-country-item input[type=checkbox] {
+  transform: scale(1.2);
+  cursor: pointer;
+}
+.checkbox-country-flag {
+  border-radius: 3px;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+}
+
+/* src/components/styles/Select.css */
+.country-option {
+  display: flex;
+  padding: 1rem;
+}
+.country-overall {
+  margin-top: 1rem;
+}
+.country-option:hover,
+.isSelected {
+  background-color: rgba(0, 200, 222, 0.51);
+}
+.country-option span {
+  margin-left: 0.5rem;
+}
+.container-textField {
+  position: relative;
+}
+.selected-country-choice {
+  position: absolute;
+  height: 50%;
+  left: 1%;
+  top: 22%;
+}
+.selected-country-choice img {
+  object-fit: contain;
+  height: 100%;
+}
+#country-select {
+  padding-left: 70px;
+}

package/dist/index.d.mts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type CountryCheckboxProps = {
+    translateTo?: string;
+    flags?: boolean;
+    desc?: boolean;
+    onChangeCountry: (countries: string[]) => void;
+    defaultSelected?: string[];
+};
+
+type CountrySelectProps = {
+    translateTo?: string;
+    flags?: boolean;
+    desc?: boolean;
+    onChangeCountry: (countryName: string) => void;
+    label?: string;
+};
+
+declare const Country: {
+    Select: React.FC<CountrySelectProps>;
+    Checkbox: React.FC<CountryCheckboxProps>;
+};
+
+/** === Types === */
+type CountryParameters = {
+    translateTo: string;
+    flags: boolean | null;
+    desc: boolean | null;
+};
+type CountryOption$1 = {
+    name: string;
+    flag: string;
+};
+type CountryContextValue = {
+    parameters: CountryParameters;
+    setParameters: React__default.Dispatch<React__default.SetStateAction<CountryParameters>>;
+    newCountries: CountryOption$1[];
+};
+declare const useCountryContext: () => CountryContextValue;
+declare const CountryContextProvider: ({ children }: {
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+type CountryOption = {
+    name: string;
+    flag: string;
+};
+
+export { CountryContextProvider, type CountryOption, Country as default, useCountryContext };

package/dist/index.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type CountryCheckboxProps = {
+    translateTo?: string;
+    flags?: boolean;
+    desc?: boolean;
+    onChangeCountry: (countries: string[]) => void;
+    defaultSelected?: string[];
+};
+
+type CountrySelectProps = {
+    translateTo?: string;
+    flags?: boolean;
+    desc?: boolean;
+    onChangeCountry: (countryName: string) => void;
+    label?: string;
+};
+
+declare const Country: {
+    Select: React.FC<CountrySelectProps>;
+    Checkbox: React.FC<CountryCheckboxProps>;
+};
+
+/** === Types === */
+type CountryParameters = {
+    translateTo: string;
+    flags: boolean | null;
+    desc: boolean | null;
+};
+type CountryOption$1 = {
+    name: string;
+    flag: string;
+};
+type CountryContextValue = {
+    parameters: CountryParameters;
+    setParameters: React__default.Dispatch<React__default.SetStateAction<CountryParameters>>;
+    newCountries: CountryOption$1[];
+};
+declare const useCountryContext: () => CountryContextValue;
+declare const CountryContextProvider: ({ children }: {
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+type CountryOption = {
+    name: string;
+    flag: string;
+};
+
+export { CountryContextProvider, type CountryOption, Country as default, useCountryContext };

package/dist/index.js

@@ -0,0 +1,269 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CountryContextProvider: () => CountryContextProvider,
+  default: () => index_default,
+  useCountryContext: () => useCountryContext
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/imports/Checkbox.tsx
+var import_react2 = require("react");
+
+// src/components/context/CountryContext.tsx
+var import_axios = __toESM(require("axios"));
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CountryContext = (0, import_react.createContext)(void 0);
+var useCountryContext = () => {
+  const ctx = (0, import_react.useContext)(CountryContext);
+  if (!ctx) {
+    throw new Error("useCountryContext must be used within a CountryContextProvider");
+  }
+  return ctx;
+};
+var CountryContextProvider = ({ children }) => {
+  const [parameters, setParameters] = (0, import_react.useState)({
+    translateTo: "",
+    flags: null,
+    desc: null
+  });
+  const [countries, setCountries] = (0, import_react.useState)([]);
+  const [newCountries, setNewCountries] = (0, import_react.useState)([]);
+  const formatCountries = (0, import_react.useMemo)(
+    () => ({
+      name: "",
+      flag: ""
+    }),
+    []
+  );
+  (0, import_react.useEffect)(() => {
+    const getAllCountries = async () => {
+      var _a;
+      try {
+        const response = await import_axios.default.get(
+          "https://restcountries.com/v3.1/all?fields=name,flags,translations"
+        );
+        setCountries((_a = response.data) != null ? _a : []);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    getAllCountries();
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const safeLower = (v) => String(v != null ? v : "").toLowerCase();
+    const getTranslatedName = (c, code) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+      if (!code || code === "eng") return (_b = (_a = c.name) == null ? void 0 : _a.common) != null ? _b : "";
+      if (code === "") return (_d = (_c = c.name) == null ? void 0 : _c.common) != null ? _d : "";
+      return (_i = (_h = (_f = (_e = c.translations) == null ? void 0 : _e[code]) == null ? void 0 : _f.common) != null ? _h : (_g = c.name) == null ? void 0 : _g.common) != null ? _i : "";
+    };
+    const treatCountries = () => {
+      const code = parameters.translateTo;
+      const sorted = [...countries].sort((a, b) => {
+        const an = getTranslatedName(a, code);
+        const bn = getTranslatedName(b, code);
+        return safeLower(an).localeCompare(safeLower(bn));
+      });
+      setNewCountries(
+        sorted.map((country) => {
+          var _a, _b;
+          return {
+            ...formatCountries,
+            name: getTranslatedName(country, code),
+            flag: (_b = (_a = country.flags) == null ? void 0 : _a.png) != null ? _b : ""
+          };
+        })
+      );
+    };
+    treatCountries();
+  }, [countries, parameters, formatCountries]);
+  (0, import_react.useEffect)(() => {
+    const handleOrder = () => {
+      if (parameters.desc === true) {
+        const sortedDesc = [...newCountries].sort(
+          (a, b) => {
+            var _a, _b;
+            return String((_a = b.name) != null ? _a : "").toLowerCase().localeCompare(String((_b = a.name) != null ? _b : "").toLowerCase());
+          }
+        );
+        setNewCountries(sortedDesc);
+      }
+    };
+    handleOrder();
+  }, [parameters.desc]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CountryContext.Provider, { value: { parameters, setParameters, newCountries }, children });
+};
+
+// src/components/imports/Checkbox.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Checkbox = ({
+  translateTo = "",
+  flags = false,
+  desc = null,
+  onChangeCountry,
+  defaultSelected = []
+}) => {
+  const { newCountries, setParameters } = useCountryContext();
+  const [selectedCountries, setSelectedCountries] = (0, import_react2.useState)(
+    Array.isArray(defaultSelected) ? defaultSelected : []
+  );
+  (0, import_react2.useEffect)(() => {
+    setParameters((state) => ({
+      ...state,
+      translateTo,
+      flags,
+      desc
+    }));
+  }, [translateTo, flags, desc, setParameters]);
+  const selectedSet = (0, import_react2.useMemo)(() => new Set(selectedCountries), [selectedCountries]);
+  const handleCheckboxChange = (countryName) => {
+    setSelectedCountries((prev) => {
+      const exists = prev.includes(countryName);
+      const updated = exists ? prev.filter((n) => n !== countryName) : [...prev, countryName];
+      onChangeCountry(updated);
+      return updated;
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "checkbox-group-container", children: newCountries.map((country) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "checkbox-country-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "input",
+      {
+        type: "checkbox",
+        value: country.name,
+        checked: selectedSet.has(country.name),
+        onChange: () => handleCheckboxChange(country.name)
+      }
+    ),
+    flags && country.flag ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "img",
+      {
+        src: country.flag,
+        alt: `${country.name} flag`,
+        height: 20,
+        className: "checkbox-country-flag"
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: country.name })
+  ] }, country.name)) });
+};
+var Checkbox_default = Checkbox;
+
+// src/components/imports/Select.tsx
+var import_react3 = require("react");
+var import_material = require("@mui/material");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Select = ({
+  translateTo = "",
+  flags = false,
+  desc = null,
+  onChangeCountry,
+  label = "Select..."
+}) => {
+  const [selectedOption, setSelectedOption] = (0, import_react3.useState)({
+    name: "",
+    flag: ""
+  });
+  const { setParameters, newCountries } = useCountryContext();
+  (0, import_react3.useEffect)(() => {
+    setSelectedOption(null);
+    setParameters((state) => ({
+      ...state,
+      translateTo,
+      flags,
+      desc
+    }));
+  }, [translateTo, flags, desc, setParameters]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_material.Autocomplete,
+    {
+      id: "country-select",
+      className: "country-overall",
+      options: newCountries,
+      value: selectedOption,
+      onChange: (_event, value) => {
+        setSelectedOption(value);
+        if (value == null ? void 0 : value.name) onChangeCountry(value.name);
+      },
+      getOptionLabel: (option) => {
+        var _a;
+        return (_a = option == null ? void 0 : option.name) != null ? _a : "";
+      },
+      isOptionEqualToValue: (option, value) => option.name === value.name,
+      renderOption: (optionProps, option) => {
+        var _a;
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { ...optionProps, className: "country-option", children: [
+          flags ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "img",
+            {
+              height: 20,
+              src: (_a = option.flag) != null ? _a : "",
+              alt: `${option.name} flag`
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: option.name })
+        ] });
+      },
+      renderInput: (params) => {
+        var _a;
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "container-textField", children: [
+          flags ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "img",
+            {
+              className: "selected-country-choice",
+              src: (_a = selectedOption == null ? void 0 : selectedOption.flag) != null ? _a : "",
+              alt: ""
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material.TextField, { ...params, label })
+        ] });
+      }
+    }
+  );
+};
+var Select_default = Select;
+
+// src/Country.ts
+var Country = {
+  "Select": Select_default,
+  "Checkbox": Checkbox_default
+};
+var Country_default = Country;
+
+// src/index.ts
+var index_default = Country_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CountryContextProvider,
+  useCountryContext
+});

package/dist/index.mjs

@@ -0,0 +1,237 @@
+// src/components/imports/Checkbox.tsx
+import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+
+// src/components/context/CountryContext.tsx
+import axios from "axios";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var CountryContext = createContext(void 0);
+var useCountryContext = () => {
+  const ctx = useContext(CountryContext);
+  if (!ctx) {
+    throw new Error("useCountryContext must be used within a CountryContextProvider");
+  }
+  return ctx;
+};
+var CountryContextProvider = ({ children }) => {
+  const [parameters, setParameters] = useState({
+    translateTo: "",
+    flags: null,
+    desc: null
+  });
+  const [countries, setCountries] = useState([]);
+  const [newCountries, setNewCountries] = useState([]);
+  const formatCountries = useMemo(
+    () => ({
+      name: "",
+      flag: ""
+    }),
+    []
+  );
+  useEffect(() => {
+    const getAllCountries = async () => {
+      var _a;
+      try {
+        const response = await axios.get(
+          "https://restcountries.com/v3.1/all?fields=name,flags,translations"
+        );
+        setCountries((_a = response.data) != null ? _a : []);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    getAllCountries();
+  }, []);
+  useEffect(() => {
+    const safeLower = (v) => String(v != null ? v : "").toLowerCase();
+    const getTranslatedName = (c, code) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+      if (!code || code === "eng") return (_b = (_a = c.name) == null ? void 0 : _a.common) != null ? _b : "";
+      if (code === "") return (_d = (_c = c.name) == null ? void 0 : _c.common) != null ? _d : "";
+      return (_i = (_h = (_f = (_e = c.translations) == null ? void 0 : _e[code]) == null ? void 0 : _f.common) != null ? _h : (_g = c.name) == null ? void 0 : _g.common) != null ? _i : "";
+    };
+    const treatCountries = () => {
+      const code = parameters.translateTo;
+      const sorted = [...countries].sort((a, b) => {
+        const an = getTranslatedName(a, code);
+        const bn = getTranslatedName(b, code);
+        return safeLower(an).localeCompare(safeLower(bn));
+      });
+      setNewCountries(
+        sorted.map((country) => {
+          var _a, _b;
+          return {
+            ...formatCountries,
+            name: getTranslatedName(country, code),
+            flag: (_b = (_a = country.flags) == null ? void 0 : _a.png) != null ? _b : ""
+          };
+        })
+      );
+    };
+    treatCountries();
+  }, [countries, parameters, formatCountries]);
+  useEffect(() => {
+    const handleOrder = () => {
+      if (parameters.desc === true) {
+        const sortedDesc = [...newCountries].sort(
+          (a, b) => {
+            var _a, _b;
+            return String((_a = b.name) != null ? _a : "").toLowerCase().localeCompare(String((_b = a.name) != null ? _b : "").toLowerCase());
+          }
+        );
+        setNewCountries(sortedDesc);
+      }
+    };
+    handleOrder();
+  }, [parameters.desc]);
+  return /* @__PURE__ */ jsx(CountryContext.Provider, { value: { parameters, setParameters, newCountries }, children });
+};
+
+// src/components/imports/Checkbox.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Checkbox = ({
+  translateTo = "",
+  flags = false,
+  desc = null,
+  onChangeCountry,
+  defaultSelected = []
+}) => {
+  const { newCountries, setParameters } = useCountryContext();
+  const [selectedCountries, setSelectedCountries] = useState2(
+    Array.isArray(defaultSelected) ? defaultSelected : []
+  );
+  useEffect2(() => {
+    setParameters((state) => ({
+      ...state,
+      translateTo,
+      flags,
+      desc
+    }));
+  }, [translateTo, flags, desc, setParameters]);
+  const selectedSet = useMemo2(() => new Set(selectedCountries), [selectedCountries]);
+  const handleCheckboxChange = (countryName) => {
+    setSelectedCountries((prev) => {
+      const exists = prev.includes(countryName);
+      const updated = exists ? prev.filter((n) => n !== countryName) : [...prev, countryName];
+      onChangeCountry(updated);
+      return updated;
+    });
+  };
+  return /* @__PURE__ */ jsx2("div", { className: "checkbox-group-container", children: newCountries.map((country) => /* @__PURE__ */ jsxs("label", { className: "checkbox-country-item", children: [
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "checkbox",
+        value: country.name,
+        checked: selectedSet.has(country.name),
+        onChange: () => handleCheckboxChange(country.name)
+      }
+    ),
+    flags && country.flag ? /* @__PURE__ */ jsx2(
+      "img",
+      {
+        src: country.flag,
+        alt: `${country.name} flag`,
+        height: 20,
+        className: "checkbox-country-flag"
+      }
+    ) : null,
+    /* @__PURE__ */ jsx2("span", { children: country.name })
+  ] }, country.name)) });
+};
+var Checkbox_default = Checkbox;
+
+// src/components/imports/Select.tsx
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { Autocomplete, TextField } from "@mui/material";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Select = ({
+  translateTo = "",
+  flags = false,
+  desc = null,
+  onChangeCountry,
+  label = "Select..."
+}) => {
+  const [selectedOption, setSelectedOption] = useState3({
+    name: "",
+    flag: ""
+  });
+  const { setParameters, newCountries } = useCountryContext();
+  useEffect3(() => {
+    setSelectedOption(null);
+    setParameters((state) => ({
+      ...state,
+      translateTo,
+      flags,
+      desc
+    }));
+  }, [translateTo, flags, desc, setParameters]);
+  return /* @__PURE__ */ jsx3(
+    Autocomplete,
+    {
+      id: "country-select",
+      className: "country-overall",
+      options: newCountries,
+      value: selectedOption,
+      onChange: (_event, value) => {
+        setSelectedOption(value);
+        if (value == null ? void 0 : value.name) onChangeCountry(value.name);
+      },
+      getOptionLabel: (option) => {
+        var _a;
+        return (_a = option == null ? void 0 : option.name) != null ? _a : "";
+      },
+      isOptionEqualToValue: (option, value) => option.name === value.name,
+      renderOption: (optionProps, option) => {
+        var _a;
+        return /* @__PURE__ */ jsxs2("li", { ...optionProps, className: "country-option", children: [
+          flags ? /* @__PURE__ */ jsx3(
+            "img",
+            {
+              height: 20,
+              src: (_a = option.flag) != null ? _a : "",
+              alt: `${option.name} flag`
+            }
+          ) : null,
+          /* @__PURE__ */ jsx3("span", { children: option.name })
+        ] });
+      },
+      renderInput: (params) => {
+        var _a;
+        return /* @__PURE__ */ jsxs2("div", { className: "container-textField", children: [
+          flags ? /* @__PURE__ */ jsx3(
+            "img",
+            {
+              className: "selected-country-choice",
+              src: (_a = selectedOption == null ? void 0 : selectedOption.flag) != null ? _a : "",
+              alt: ""
+            }
+          ) : null,
+          /* @__PURE__ */ jsx3(TextField, { ...params, label })
+        ] });
+      }
+    }
+  );
+};
+var Select_default = Select;
+
+// src/Country.ts
+var Country = {
+  "Select": Select_default,
+  "Checkbox": Checkbox_default
+};
+var Country_default = Country;
+
+// src/index.ts
+var index_default = Country_default;
+export {
+  CountryContextProvider,
+  index_default as default,
+  useCountryContext
+};

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "react-country-choices",
+  "version": "0.2.1",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": ["dist"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean --external react --external react-dom --external axios --external @mui/material --external @emotion/react --external @emotion/styled",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@mui/material": ">=5",
+    "@emotion/react": ">=11",
+    "@emotion/styled": ">=11"
+  },
+  "dependencies": {
+    "axios": "^1.7.2"
+  },
+  "devDependencies": {
+    "@mui/material": "^7.3.8",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}