From 26b7faedb062ae765cd9b0e99a028644799aaa8f Mon Sep 17 00:00:00 2001
From: kabin thakuri <kabin@dzangolab.com>
Date: Fri, 9 Jan 2026 11:25:40 +0545
Subject: [PATCH 1/4] Revert "feat(ui/CountryPicker): add autoSortOptions prop
 and update descriptions in translations (#1669)"

This reverts commit 9f5a17bb4eba347d2f8c10dac3c0c8f02ff51143.
---
 .../components/FormWidgets/CountryPicker.tsx  |  59 ++---
 apps/demo/src/locales/en/ui.json              |   1 -
 apps/demo/src/locales/fr/ui.json              |   1 -
 .../src/FormWidgets/CountryPicker/index.tsx   | 207 ++++++------------
 4 files changed, 95 insertions(+), 173 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx b/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx
index 92110f2a4..ef37e5c66 100644
--- a/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx
+++ b/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx
@@ -19,136 +19,129 @@ export const CountryPickerDemo = () => {
   const locale = i18n.language;
 
   const data = [
-    {
-      default: "true",
-      description: t("countryPicker.propertiesDescription.autoSortOptions"),
-      id: 1,
-      prop: "autoSortOptions",
-      type: "boolean",
-    },
     {
       default: "[]",
       description: t("countryPicker.propertiesDescription.exclude"),
-      id: 2,
+      id: 1,
       prop: "exclude",
       type: "string[]",
     },
     {
       default: '"en"',
       description: t("countryPicker.propertiesDescription.fallbackLocale"),
-      id: 3,
+      id: 2,
       prop: "fallbackLocale",
       type: "string",
     },
     {
       default: "[]",
       description: t("countryPicker.propertiesDescription.favorites"),
-      id: 4,
+      id: 3,
       prop: "favorites",
       type: "string[]",
     },
     {
       default: "true",
       description: t("countryPicker.propertiesDescription.flags"),
-      id: 5,
+      id: 4,
       prop: "flags",
       type: "Boolean",
     },
     {
       default: "-",
       description: t("countryPicker.propertiesDescription.flagsPath"),
-      id: 6,
+      id: 5,
       prop: "flagsPath",
       type: "(code: string) => string",
     },
     {
       default: "left",
       description: t("countryPicker.propertiesDescription.flagsPosition"),
-      id: 7,
+      id: 6,
       prop: "flagsPosition",
       type: "left | right | right-edge",
     },
     {
       default: "rectangular",
       description: t("countryPicker.propertiesDescription.flagsStyle"),
-      id: 8,
+      id: 7,
       prop: "flagsStyle",
       type: "circle | rectangular | square",
     },
     {
       default: "-",
       description: t("countryPicker.propertiesDescription.groups"),
-      id: 9,
+      id: 8,
       prop: "groups",
       type: "GroupData",
     },
     {
       default: "[]",
       description: t("countryPicker.propertiesDescription.include"),
-      id: 10,
+      id: 9,
       prop: "include",
       type: "string[]",
     },
     {
       default: "true",
       description: t("countryPicker.propertiesDescription.includeFavorites"),
-      id: 11,
+      id: 10,
       prop: "includeFavorites",
       type: "boolean",
     },
     {
       default: "-",
       description: t("countryPicker.propertiesDescription.label"),
-      id: 12,
+      id: 11,
       prop: "label",
       type: "string",
     },
     {
       default: '"en"',
       description: t("countryPicker.propertiesDescription.locale"),
-      id: 13,
+      id: 12,
       prop: "locale",
       type: "string",
     },
     {
       default: "{ en: defaultEnCatalogue }",
       description: t("countryPicker.propertiesDescription.i18n"),
-      id: 14,
+      id: 13,
       prop: "locales",
       type: "Record<string, Record<string, string>>",
     },
     {
       default: "false",
       description: t("countryPicker.propertiesDescription.multiple"),
-      id: 15,
+      id: 14,
       prop: "multiple",
       type: "boolean",
     },
     {
       default: "-",
       description: t("countryPicker.propertiesDescription.name"),
-      id: 16,
+      id: 15,
       prop: "name",
       type: "string",
     },
     {
       default: "-",
       description: t("countryPicker.propertiesDescription.onChange"),
-      id: 17,
+      id: 16,
       prop: "onChange",
       type: "(value: string | string[]) => void",
     },
     {
       default: "-",
       description: t("countryPicker.propertiesDescription.placeholder"),
-      id: 18,
+      id: 17,
       prop: "placeholder",
       type: "string",
     },
     {
       default: "-",
       description: t("countryPicker.propertiesDescription.value"),
-      id: 19,
+      id: 18,
       prop: "value",
       type: "string | string[]",
     },
@@ -417,6 +410,7 @@ const selectedLocale = i18n.language;
 
       <Section title={t("countryPicker.favorites")}>
         <CountryPicker
+          autoSortOptions={false}
           favorites={["NP", "US", "GB"]}
           label={t("countryPicker.labels.single")}
           locale={locale}
@@ -431,6 +425,7 @@ const [singleSelectValue, setSingleSelectValue] = useState<string>("");
 const selectedLocale = i18n.language;
 
 <CountryPicker
+  autoSortOptions={false}
   favorites={["NP", "US", "GB"]} 
   label={t("countryPicker.labels.single")}
   locale={selectedLocale}
@@ -442,6 +437,7 @@ const selectedLocale = i18n.language;
 
       <Section title={t("countryPicker.includeFavorites")}>
         <CountryPicker
+          autoSortOptions={false}
           favorites={["NP", "US", "GB"]}
           includeFavorites={false}
           label={t("countryPicker.labels.single")}
@@ -457,6 +453,7 @@ const [singleSelectValue, setSingleSelectValue] = useState<string>("");
 const selectedLocale = i18n.language;
 
 <CountryPicker
+  autoSortOptions={false}
   favorites={["NP", "US", "GB"]} 
   includeFavorites={false}
   label={t("countryPicker.labels.single")}
@@ -469,6 +466,7 @@ const selectedLocale = i18n.language;
 
       <Section title={t("countryPicker.groupingDefault")}>
         <CountryPicker
+          autoSortOptions={false}
           groups={{
             "European Union": defaultGroups?.EU || [],
             ASEAN: defaultGroups?.ASEAN || [],
@@ -487,6 +485,7 @@ const selectedLocale = i18n.language;
 import { CountryPicker, defaultGroups } from "@prefabs.tech/react-ui";
 
 <CountryPicker
+  autoSortOptions={false}
   groups={{
     "European Union": defaultGroups.EU,
     "ASEAN": defaultGroups.ASEAN
@@ -503,6 +502,7 @@ import { CountryPicker, defaultGroups } from "@prefabs.tech/react-ui";
 
       <Section title={t("countryPicker.groupingCustom")}>
         <CountryPicker
+          autoSortOptions={false}
           groups={{
             "North America HQ": ["US", "CA"],
             "Offshore Dev Center": ["IN", "VN", "PH"],
@@ -526,6 +526,7 @@ const myRegions = {
 };
 
 <CountryPicker
+  autoSortOptions={false}
   groups={myRegions}
   label={t("countryPicker.labels.single")}
   locale={locale}
@@ -540,10 +541,10 @@ const myRegions = {
       <Section title={t("countryPicker.groupingFavorites")}>
         <CountryPicker
           autoSortOptions={false}
-          favorites={["US", "FR"]}
+          favorites={["FR", "US"]}
           groups={{
-            "North America": ["US", "CA"],
             Europe: ["FR", "DE", "IT", "ES"],
+            "North America": ["US", "CA"],
           }}
           label={t("countryPicker.labels.single")}
           locale={locale}
@@ -558,10 +559,10 @@ const myRegions = {
           exampleCode='
 <CountryPicker
   autoSortOptions={false}
-  favorites={["US", "FR"]}
+  favorites={["FR", "US"]}
   groups={{
-    "North America": ["US", "CA"],
     "Europe": ["FR", "DE", "IT", "ES"],
+    "North America": ["US", "CA"]
   }}
   label={t("countryPicker.labels.single")}
   locale={locale}
diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json
index a9d406e24..925ad50e5 100644
--- a/apps/demo/src/locales/en/ui.json
+++ b/apps/demo/src/locales/en/ui.json
@@ -147,7 +147,6 @@
       "single": "Select a country..."
     },
     "propertiesDescription": {
-      "autoSortOptions":"By default, options are sorted alphabetically. If false, countries are sorted by priority in the order groups → favorites → include → fallback-locale translations, preserving the defined order.",
       "data": "Custom country data to overwrite existing entries or add new ones.",
       "exclude": "An array of country codes to remove from the list.",
       "fallbackLocale": "Locale used when active locale translation is missing.",
diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json
index 4e92a5aba..9a8f1ab24 100644
--- a/apps/demo/src/locales/fr/ui.json
+++ b/apps/demo/src/locales/fr/ui.json
@@ -147,7 +147,6 @@
       "single": "Select a country... (fr)"
     },
     "propertiesDescription": {
-      "autoSortOptions":"By default, options are sorted alphabetically. If false, countries are sorted by priority in the order groups → favorites → include → fallback-locale translations, preserving the defined order. (fr)",
       "data": "Custom country data to overwrite existing entries or add new ones. (fr)",
       "exclude": "An array of country codes to remove from the list. (fr)",
       "fallbackLocale": "Locale used when active locale translation is missing. (fr)",
diff --git a/packages/ui/src/FormWidgets/CountryPicker/index.tsx b/packages/ui/src/FormWidgets/CountryPicker/index.tsx
index 266a4085c..7fd01c325 100644
--- a/packages/ui/src/FormWidgets/CountryPicker/index.tsx
+++ b/packages/ui/src/FormWidgets/CountryPicker/index.tsx
@@ -4,7 +4,7 @@ import { getFallbackTranslation } from "../../utils/CountryPicker";
 import { Select, ISelectProperties } from "../Select";
 import defaultGroups from "./groups.json";
 
-import type { Option, GroupedOption } from "../Select";
+import type { Option } from "../Select";
 
 export type Translation = Record<string, string>;
 export type Locales = Record<string, Translation>;
@@ -19,7 +19,6 @@ export type CountryPickerProperties<T> = Omit<
   ISelectProperties<T>,
   "options"
 > & {
-  autoSortOptions?: boolean;
   exclude?: string[];
   fallbackLocale?: string;
   favorites?: string[];
@@ -52,48 +51,22 @@ const getBaseOptions = <T,>(
 
   const baseOptions: Option<T>[] = [];
 
-  if (include?.length) {
-    include.forEach((code) => {
-      if (exclude?.includes(code)) {
-        return;
-      }
-
-      if (!fallbackData[code]) {
-        return;
-      }
-
-      baseOptions.push({
-        value: code as unknown as T,
-        label: getLabel(code, locale, locales, fallbackData[code]),
-      });
-    });
-
-    return baseOptions;
-  }
-
   Object.entries(fallbackData).forEach(([code, fallbackLabel]) => {
-    if (exclude?.includes(code)) {
+    if (exclude && exclude.includes(code)) {
       return;
     }
 
-    baseOptions.push({
-      value: code as unknown as T,
-      label: getLabel(code, locale, locales, fallbackData[code]),
-    });
+    if (include && !include.includes(code)) {
+      return;
+    }
+
+    const label = locales?.[locale]?.[code] || fallbackLabel || code;
+    baseOptions.push({ value: code as unknown as T, label });
   });
 
   return baseOptions;
 };
 
-const getFavoriteOptions = <T,>(
-  baseOptions: Option<T>[],
-  favorites: string[],
-) => {
-  return favorites
-    .map((code) => baseOptions.find((option) => String(option.value) === code))
-    .filter(Boolean) as Option<T>[];
-};
-
 const getFlagClass = (
   code: string | undefined,
   position: string,
@@ -113,46 +86,55 @@ const getFlagClass = (
 const getGroups = <T,>(
   groups: Groups,
   list: Option<T>[],
-): GroupedOption<T>[] => {
-  const optionMap = new Map(
-    list.map((option) => [String(option.value), option]),
-  );
-
-  return Object.entries(groups).reduce<GroupedOption<T>[]>(
-    (groupedOptions, [groupLabel, groupCodes]) => {
-      const options = groupCodes
-        .map((code) => optionMap.get(code))
-        .filter(Boolean) as Option<T>[];
+): { label: string; options: Option<T>[] }[] => {
+  const groupedResult: { label: string; options: Option<T>[] }[] = [];
 
-      if (options.length) {
-        groupedOptions.push({ label: groupLabel, options });
-      }
+  Object.entries(groups).forEach(([groupLabel, groupCodes]) => {
+    const groupOptions = list.filter((option) =>
+      groupCodes.includes(String(option.value)),
+    );
 
-      return groupedOptions;
-    },
-    [],
-  );
-};
+    if (groupOptions.length > 0) {
+      groupedResult.push({
+        label: groupLabel,
+        options: groupOptions,
+      });
+    }
+  });
 
-const getLabel = (
-  code: string,
-  locale: string,
-  locales: Locales | undefined,
-  fallbackLabel?: string,
-) => {
-  return locales?.[locale]?.[code] || fallbackLabel || code;
+  return groupedResult;
 };
 
 const getOptions = <T,>({
-  baseOptions,
+  exclude,
+  fallbackLocale = "en",
   favorites,
   groups,
+  include,
   includeFavorites = true,
   labels,
+  locale = "en",
+  locales,
 }: Pick<
   CountryPickerProperties<T>,
-  "favorites" | "groups" | "includeFavorites" | "labels"
-> & { baseOptions: Option<T>[] }) => {
+  | "exclude"
+  | "fallbackLocale"
+  | "favorites"
+  | "groups"
+  | "include"
+  | "includeFavorites"
+  | "labels"
+  | "locale"
+  | "locales"
+>) => {
+  const baseOptions = getBaseOptions<T>(
+    exclude,
+    fallbackLocale,
+    include,
+    locale,
+    locales,
+  );
+
   if (favorites && favorites.length > 0) {
     return getOptionsWithFavorites(
       baseOptions,
@@ -177,7 +159,9 @@ const getOptionsWithFavorites = <T,>(
   groups?: Groups,
   labels?: CountryPickerLabels,
 ) => {
-  const favoriteOptions = getFavoriteOptions(baseOptions, favorites);
+  const favoriteOptions = baseOptions.filter((option) =>
+    favorites.includes(String(option.value)),
+  );
 
   const mainOptions = includeFavorites
     ? baseOptions
@@ -202,32 +186,6 @@ const getOptionsWithFavorites = <T,>(
   ];
 };
 
-const getSortedOptions = <T,>(
-  isOptionsGrouped: boolean,
-  hasFavoriteOptions: boolean,
-  options: Option<T>[] | GroupedOption<T>[],
-) => {
-  if (!isOptionsGrouped) {
-    return [...(options as Option<T>[])].sort(sortByLabel);
-  }
-
-  const sortedOptionsGroup = (options as GroupedOption<T>[]).map((group) => {
-    return {
-      ...group,
-      options: [...(group.options as Option<T>[])].sort(sortByLabel),
-    };
-  });
-
-  if (hasFavoriteOptions) {
-    return [
-      sortedOptionsGroup[0],
-      ...sortedOptionsGroup.slice(1).sort(sortByLabel),
-    ];
-  }
-
-  return sortedOptionsGroup.sort(sortByLabel);
-};
-
 const renderCountryOption = <T,>(
   option: Option<T>,
   {
@@ -256,23 +214,7 @@ const renderCountryOption = <T,>(
   );
 };
 
-const sortByLabel = <T,>(
-  optionA: Option<T> | GroupedOption<T>,
-  optionB: Option<T> | GroupedOption<T>,
-) => {
-  if (!optionA.label) {
-    return 1;
-  }
-
-  if (!optionB.label) {
-    return -1;
-  }
-
-  return optionA.label.localeCompare(optionB.label);
-};
-
 export const CountryPicker = <T extends string | number>({
-  autoSortOptions = true,
   exclude,
   fallbackLocale = "en",
   favorites,
@@ -288,47 +230,29 @@ export const CountryPicker = <T extends string | number>({
   locale = "en",
   ...properties
 }: CountryPickerProperties<T>) => {
-  const baseOptions = useMemo(() => {
-    return getBaseOptions<T>(
-      exclude,
-      fallbackLocale,
-      include,
-      locale,
-      locales,
-    ) as Option<T>[];
-  }, [exclude, fallbackLocale, include, locale, locales]);
-
   const options = useMemo(() => {
     return getOptions<T>({
-      baseOptions,
+      exclude,
+      fallbackLocale,
       favorites,
       groups,
+      include,
       includeFavorites,
       labels,
+      locale,
+      locales,
     });
-  }, [baseOptions, favorites, groups, includeFavorites, labels]);
-
-  const favoriteOptions = useMemo(() => {
-    return favorites?.length ? getFavoriteOptions(baseOptions, favorites) : [];
-  }, [baseOptions, favorites]);
-
-  const isOptionsGrouped = useMemo(() => {
-    return (
-      Array.isArray(options) && options.length > 0 && "options" in options[0]
-    );
-  }, [options]);
-
-  const sortedOptions = useMemo<Option<T>[] | GroupedOption<T>[]>(() => {
-    if (!autoSortOptions) {
-      return options as Option<T>[] | GroupedOption<T>[];
-    }
-
-    return getSortedOptions(
-      isOptionsGrouped,
-      !!favoriteOptions.length,
-      options,
-    );
-  }, [autoSortOptions, favoriteOptions, isOptionsGrouped, options]);
+  }, [
+    exclude,
+    fallbackLocale,
+    favorites,
+    groups,
+    include,
+    includeFavorites,
+    labels,
+    locale,
+    locales,
+  ]);
 
   const handleOnChange = useCallback(
     (value: T | T[]) => {
@@ -358,8 +282,7 @@ export const CountryPicker = <T extends string | number>({
   return (
     <Select
       {...(properties as ISelectProperties<T>)}
-      autoSortOptions={false}
-      options={sortedOptions}
+      options={options}
       renderOption={properties.renderOption ?? handleRenderOption}
       onChange={handleOnChange}
     />

From 8ed9fc580c9e328ca45b9587595c43c6def87e85 Mon Sep 17 00:00:00 2001
From: kabin thakuri <kabin@dzangolab.com>
Date: Fri, 9 Jan 2026 15:26:02 +0545
Subject: [PATCH 2/4] refactor(ui/country-picker): optimize logic for sorting
 and getting options

---
 .../components/FormWidgets/CountryPicker.tsx  |  61 ++++---
 apps/demo/src/locales/en/ui.json              |   1 +
 apps/demo/src/locales/fr/ui.json              |   1 +
 .../src/FormWidgets/CountryPicker/index.tsx   | 157 ++++++++++++++----
 4 files changed, 158 insertions(+), 62 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx b/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx
index ef37e5c66..3686b0947 100644
--- a/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx
+++ b/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx
@@ -19,129 +19,136 @@ export const CountryPickerDemo = () => {
   const locale = i18n.language;
 
   const data = [
+    {
+      default: "true",
+      description: t("countryPicker.propertiesDescription.autoSortOptions"),
+      id: 1,
+      prop: "autoSortOptions",
+      type: "boolean",
+    },
     {
       default: "[]",
       description: t("countryPicker.propertiesDescription.exclude"),
-      id: 1,
+      id: 2,
       prop: "exclude",
       type: "string[]",
     },
     {
       default: '"en"',
       description: t("countryPicker.propertiesDescription.fallbackLocale"),
-      id: 2,
+      id: 3,
       prop: "fallbackLocale",
       type: "string",
     },
     {
       default: "[]",
       description: t("countryPicker.propertiesDescription.favorites"),
-      id: 3,
+      id: 4,
       prop: "favorites",
       type: "string[]",
     },
     {
       default: "true",
       description: t("countryPicker.propertiesDescription.flags"),
-      id: 4,
+      id: 5,
       prop: "flags",
       type: "Boolean",
     },
     {
       default: "-",
       description: t("countryPicker.propertiesDescription.flagsPath"),
-      id: 5,
+      id: 6,
       prop: "flagsPath",
       type: "(code: string) => string",
     },
     {
       default: "left",
       description: t("countryPicker.propertiesDescription.flagsPosition"),
-      id: 6,
+      id: 7,
       prop: "flagsPosition",
       type: "left | right | right-edge",
     },
     {
       default: "rectangular",
       description: t("countryPicker.propertiesDescription.flagsStyle"),
-      id: 7,
+      id: 8,
       prop: "flagsStyle",
       type: "circle | rectangular | square",
     },
     {
       default: "-",
       description: t("countryPicker.propertiesDescription.groups"),
-      id: 8,
+      id: 9,
       prop: "groups",
       type: "GroupData",
     },
     {
       default: "[]",
       description: t("countryPicker.propertiesDescription.include"),
-      id: 9,
+      id: 10,
       prop: "include",
       type: "string[]",
     },
     {
       default: "true",
       description: t("countryPicker.propertiesDescription.includeFavorites"),
-      id: 10,
+      id: 11,
       prop: "includeFavorites",
       type: "boolean",
     },
     {
       default: "-",
       description: t("countryPicker.propertiesDescription.label"),
-      id: 11,
+      id: 12,
       prop: "label",
       type: "string",
     },
     {
       default: '"en"',
       description: t("countryPicker.propertiesDescription.locale"),
-      id: 12,
+      id: 13,
       prop: "locale",
       type: "string",
     },
     {
       default: "{ en: defaultEnCatalogue }",
       description: t("countryPicker.propertiesDescription.i18n"),
-      id: 13,
+      id: 14,
       prop: "locales",
       type: "Record<string, Record<string, string>>",
     },
     {
       default: "false",
       description: t("countryPicker.propertiesDescription.multiple"),
-      id: 14,
+      id: 15,
       prop: "multiple",
       type: "boolean",
     },
     {
       default: "-",
       description: t("countryPicker.propertiesDescription.name"),
-      id: 15,
+      id: 16,
       prop: "name",
       type: "string",
     },
     {
       default: "-",
       description: t("countryPicker.propertiesDescription.onChange"),
-      id: 16,
+      id: 17,
       prop: "onChange",
       type: "(value: string | string[]) => void",
     },
     {
       default: "-",
       description: t("countryPicker.propertiesDescription.placeholder"),
-      id: 17,
+      id: 18,
       prop: "placeholder",
       type: "string",
     },
     {
       default: "-",
       description: t("countryPicker.propertiesDescription.value"),
-      id: 18,
+      id: 19,
       prop: "value",
       type: "string | string[]",
     },
@@ -410,7 +417,6 @@ const selectedLocale = i18n.language;
 
       <Section title={t("countryPicker.favorites")}>
         <CountryPicker
-          autoSortOptions={false}
           favorites={["NP", "US", "GB"]}
           label={t("countryPicker.labels.single")}
           locale={locale}
@@ -425,7 +431,6 @@ const [singleSelectValue, setSingleSelectValue] = useState<string>("");
 const selectedLocale = i18n.language;
 
 <CountryPicker
-  autoSortOptions={false}
   favorites={["NP", "US", "GB"]} 
   label={t("countryPicker.labels.single")}
   locale={selectedLocale}
@@ -437,7 +442,6 @@ const selectedLocale = i18n.language;
 
       <Section title={t("countryPicker.includeFavorites")}>
         <CountryPicker
-          autoSortOptions={false}
           favorites={["NP", "US", "GB"]}
           includeFavorites={false}
           label={t("countryPicker.labels.single")}
@@ -453,7 +457,6 @@ const [singleSelectValue, setSingleSelectValue] = useState<string>("");
 const selectedLocale = i18n.language;
 
 <CountryPicker
-  autoSortOptions={false}
   favorites={["NP", "US", "GB"]} 
   includeFavorites={false}
   label={t("countryPicker.labels.single")}
@@ -466,7 +469,6 @@ const selectedLocale = i18n.language;
 
       <Section title={t("countryPicker.groupingDefault")}>
         <CountryPicker
-          autoSortOptions={false}
           groups={{
             "European Union": defaultGroups?.EU || [],
             ASEAN: defaultGroups?.ASEAN || [],
@@ -485,7 +487,6 @@ const selectedLocale = i18n.language;
 import { CountryPicker, defaultGroups } from "@prefabs.tech/react-ui";
 
 <CountryPicker
-  autoSortOptions={false}
   groups={{
     "European Union": defaultGroups.EU,
     "ASEAN": defaultGroups.ASEAN
@@ -502,7 +503,6 @@ import { CountryPicker, defaultGroups } from "@prefabs.tech/react-ui";
 
       <Section title={t("countryPicker.groupingCustom")}>
         <CountryPicker
-          autoSortOptions={false}
           groups={{
             "North America HQ": ["US", "CA"],
             "Offshore Dev Center": ["IN", "VN", "PH"],
@@ -526,7 +526,6 @@ const myRegions = {
 };
 
 <CountryPicker
-  autoSortOptions={false}
   groups={myRegions}
   label={t("countryPicker.labels.single")}
   locale={locale}
@@ -541,10 +540,10 @@ const myRegions = {
       <Section title={t("countryPicker.groupingFavorites")}>
         <CountryPicker
           autoSortOptions={false}
-          favorites={["FR", "US"]}
+          favorites={["US", "FR"]}
           groups={{
-            Europe: ["FR", "DE", "IT", "ES"],
             "North America": ["US", "CA"],
+            Europe: ["FR", "DE", "IT", "ES"],
           }}
           label={t("countryPicker.labels.single")}
           locale={locale}
@@ -559,10 +558,10 @@ const myRegions = {
           exampleCode='
 <CountryPicker
   autoSortOptions={false}
-  favorites={["FR", "US"]}
+  favorites={["US", "FR"]}
   groups={{
-    "Europe": ["FR", "DE", "IT", "ES"],
-    "North America": ["US", "CA"]
+    "North America": ["US", "CA"],
+    Europe: ["FR", "DE", "IT", "ES"],
   }}
   label={t("countryPicker.labels.single")}
   locale={locale}
diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json
index 925ad50e5..a9d406e24 100644
--- a/apps/demo/src/locales/en/ui.json
+++ b/apps/demo/src/locales/en/ui.json
@@ -147,6 +147,7 @@
       "single": "Select a country..."
     },
     "propertiesDescription": {
+      "autoSortOptions":"By default, options are sorted alphabetically. If false, countries are sorted by priority in the order groups → favorites → include → fallback-locale translations, preserving the defined order.",
       "data": "Custom country data to overwrite existing entries or add new ones.",
       "exclude": "An array of country codes to remove from the list.",
       "fallbackLocale": "Locale used when active locale translation is missing.",
diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json
index 9a8f1ab24..4e92a5aba 100644
--- a/apps/demo/src/locales/fr/ui.json
+++ b/apps/demo/src/locales/fr/ui.json
@@ -147,6 +147,7 @@
       "single": "Select a country... (fr)"
     },
     "propertiesDescription": {
+      "autoSortOptions":"By default, options are sorted alphabetically. If false, countries are sorted by priority in the order groups → favorites → include → fallback-locale translations, preserving the defined order. (fr)",
       "data": "Custom country data to overwrite existing entries or add new ones. (fr)",
       "exclude": "An array of country codes to remove from the list. (fr)",
       "fallbackLocale": "Locale used when active locale translation is missing. (fr)",
diff --git a/packages/ui/src/FormWidgets/CountryPicker/index.tsx b/packages/ui/src/FormWidgets/CountryPicker/index.tsx
index 7fd01c325..3668e4929 100644
--- a/packages/ui/src/FormWidgets/CountryPicker/index.tsx
+++ b/packages/ui/src/FormWidgets/CountryPicker/index.tsx
@@ -4,7 +4,7 @@ import { getFallbackTranslation } from "../../utils/CountryPicker";
 import { Select, ISelectProperties } from "../Select";
 import defaultGroups from "./groups.json";
 
-import type { Option } from "../Select";
+import type { Option, GroupedOption as OptionGroup } from "../Select";
 
 export type Translation = Record<string, string>;
 export type Locales = Record<string, Translation>;
@@ -19,6 +19,7 @@ export type CountryPickerProperties<T> = Omit<
   ISelectProperties<T>,
   "options"
 > & {
+  autoSortOptions?: boolean;
   exclude?: string[];
   fallbackLocale?: string;
   favorites?: string[];
@@ -51,17 +52,34 @@ const getBaseOptions = <T,>(
 
   const baseOptions: Option<T>[] = [];
 
-  Object.entries(fallbackData).forEach(([code, fallbackLabel]) => {
-    if (exclude && exclude.includes(code)) {
-      return;
-    }
+  if (include?.length) {
+    include.forEach((code) => {
+      if (exclude?.includes(code)) {
+        return;
+      }
+
+      if (!fallbackData[code]) {
+        return;
+      }
+
+      baseOptions.push({
+        value: code as unknown as T,
+        label: getLabel(code, locale, locales, fallbackData[code]),
+      });
+    });
 
-    if (include && !include.includes(code)) {
+    return baseOptions;
+  }
+
+  Object.entries(fallbackData).forEach(([code, fallbackLabel]) => {
+    if (exclude?.includes(code)) {
       return;
     }
 
-    const label = locales?.[locale]?.[code] || fallbackLabel || code;
-    baseOptions.push({ value: code as unknown as T, label });
+    baseOptions.push({
+      value: code as unknown as T,
+      label: getLabel(code, locale, locales, fallbackLabel),
+    });
   });
 
   return baseOptions;
@@ -83,29 +101,38 @@ const getFlagClass = (
     .filter(Boolean)
     .join(" ");
 
-const getGroups = <T,>(
-  groups: Groups,
-  list: Option<T>[],
-): { label: string; options: Option<T>[] }[] => {
-  const groupedResult: { label: string; options: Option<T>[] }[] = [];
+const getLabel = (
+  code: string,
+  locale: string,
+  locales: Locales | undefined,
+  fallbackLabel?: string,
+) => {
+  return locales?.[locale]?.[code] || fallbackLabel || code;
+};
 
-  Object.entries(groups).forEach(([groupLabel, groupCodes]) => {
-    const groupOptions = list.filter((option) =>
-      groupCodes.includes(String(option.value)),
-    );
+const getGroups = <T,>(groups: Groups, list: Option<T>[]): OptionGroup<T>[] => {
+  const optionMap = new Map(
+    list.map((option) => [String(option.value), option]),
+  );
 
-    if (groupOptions.length > 0) {
-      groupedResult.push({
-        label: groupLabel,
-        options: groupOptions,
-      });
-    }
-  });
+  return Object.entries(groups).reduce<OptionGroup<T>[]>(
+    (groupedOptions, [groupLabel, groupCodes]) => {
+      const options = groupCodes
+        .map((code) => optionMap.get(code))
+        .filter(Boolean) as Option<T>[];
 
-  return groupedResult;
+      if (options.length) {
+        groupedOptions.push({ label: groupLabel, options });
+      }
+
+      return groupedOptions;
+    },
+    [],
+  );
 };
 
 const getOptions = <T,>({
+  autoSortOptions = true,
   exclude,
   fallbackLocale = "en",
   favorites,
@@ -117,6 +144,7 @@ const getOptions = <T,>({
   locales,
 }: Pick<
   CountryPickerProperties<T>,
+  | "autoSortOptions"
   | "exclude"
   | "fallbackLocale"
   | "favorites"
@@ -136,20 +164,30 @@ const getOptions = <T,>({
   );
 
   if (favorites && favorites.length > 0) {
-    return getOptionsWithFavorites(
+    const optionsWithFavorites = getOptionsWithFavorites(
       baseOptions,
       favorites,
       includeFavorites,
       groups,
       labels,
     );
+
+    const hasFavoriteOptions = optionsWithFavorites[0].options.length > 0;
+
+    return getSortedOptions(
+      autoSortOptions,
+      optionsWithFavorites,
+      hasFavoriteOptions,
+    );
   }
 
   if (groups && Object.keys(groups).length > 0) {
-    return getGroups(groups, baseOptions);
+    const optionGroups = getGroups(groups, baseOptions);
+
+    return getSortedOptions(autoSortOptions, optionGroups);
   }
 
-  return baseOptions;
+  return getSortedOptions(autoSortOptions, baseOptions);
 };
 
 const getOptionsWithFavorites = <T,>(
@@ -159,9 +197,9 @@ const getOptionsWithFavorites = <T,>(
   groups?: Groups,
   labels?: CountryPickerLabels,
 ) => {
-  const favoriteOptions = baseOptions.filter((option) =>
-    favorites.includes(String(option.value)),
-  );
+  const favoriteOptions = favorites
+    .map((code) => baseOptions.find((option) => String(option.value) === code))
+    .filter(Boolean) as Option<T>[];
 
   const mainOptions = includeFavorites
     ? baseOptions
@@ -186,6 +224,44 @@ const getOptionsWithFavorites = <T,>(
   ];
 };
 
+const getSortedOptions = <T,>(
+  autoSortOptions: boolean,
+  options: Option<T>[] | OptionGroup<T>[],
+  hasFavoriteOptions?: boolean,
+) => {
+  if (!autoSortOptions) {
+    return options as Option<T>[] | OptionGroup<T>[];
+  }
+
+  if (!hasOptionGroup(options)) {
+    return [...(options as Option<T>[])].sort(sortByLabel);
+  }
+
+  const sortedOptionsGroup = (options as OptionGroup<T>[]).map((group) => {
+    return {
+      ...group,
+      options: [...(group.options as Option<T>[])].sort(sortByLabel),
+    };
+  });
+
+  if (hasFavoriteOptions) {
+    return [
+      sortedOptionsGroup[0],
+      ...sortedOptionsGroup.slice(1).sort(sortByLabel),
+    ];
+  }
+
+  return sortedOptionsGroup.sort(sortByLabel);
+};
+
+const hasOptionGroup = <T,>(
+  options: Option<T>[] | OptionGroup<T>[],
+): options is OptionGroup<T>[] => {
+  return (
+    Array.isArray(options) && options.length > 0 && "options" in options[0]
+  );
+};
+
 const renderCountryOption = <T,>(
   option: Option<T>,
   {
@@ -214,7 +290,23 @@ const renderCountryOption = <T,>(
   );
 };
 
+const sortByLabel = <T,>(
+  optionA: Option<T> | OptionGroup<T>,
+  optionB: Option<T> | OptionGroup<T>,
+) => {
+  if (!optionA.label) {
+    return 1;
+  }
+
+  if (!optionB.label) {
+    return -1;
+  }
+
+  return optionA.label.localeCompare(optionB.label);
+};
+
 export const CountryPicker = <T extends string | number>({
+  autoSortOptions = true,
   exclude,
   fallbackLocale = "en",
   favorites,
@@ -232,6 +324,7 @@ export const CountryPicker = <T extends string | number>({
 }: CountryPickerProperties<T>) => {
   const options = useMemo(() => {
     return getOptions<T>({
+      autoSortOptions,
       exclude,
       fallbackLocale,
       favorites,
@@ -243,6 +336,7 @@ export const CountryPicker = <T extends string | number>({
       locales,
     });
   }, [
+    autoSortOptions,
     exclude,
     fallbackLocale,
     favorites,
@@ -282,6 +376,7 @@ export const CountryPicker = <T extends string | number>({
   return (
     <Select
       {...(properties as ISelectProperties<T>)}
+      autoSortOptions={false}
       options={options}
       renderOption={properties.renderOption ?? handleRenderOption}
       onChange={handleOnChange}

From 41de6b595902919ce395a90064f724ca128dbe14 Mon Sep 17 00:00:00 2001
From: kabin thakuri <kabin@dzangolab.com>
Date: Fri, 9 Jan 2026 15:29:31 +0545
Subject: [PATCH 3/4] chore(ui/CountryPicker): update get label method order

---
 .../ui/src/FormWidgets/CountryPicker/index.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/FormWidgets/CountryPicker/index.tsx b/packages/ui/src/FormWidgets/CountryPicker/index.tsx
index 3668e4929..046301200 100644
--- a/packages/ui/src/FormWidgets/CountryPicker/index.tsx
+++ b/packages/ui/src/FormWidgets/CountryPicker/index.tsx
@@ -101,15 +101,6 @@ const getFlagClass = (
     .filter(Boolean)
     .join(" ");
 
-const getLabel = (
-  code: string,
-  locale: string,
-  locales: Locales | undefined,
-  fallbackLabel?: string,
-) => {
-  return locales?.[locale]?.[code] || fallbackLabel || code;
-};
-
 const getGroups = <T,>(groups: Groups, list: Option<T>[]): OptionGroup<T>[] => {
   const optionMap = new Map(
     list.map((option) => [String(option.value), option]),
@@ -131,6 +122,15 @@ const getGroups = <T,>(groups: Groups, list: Option<T>[]): OptionGroup<T>[] => {
   );
 };
 
+const getLabel = (
+  code: string,
+  locale: string,
+  locales: Locales | undefined,
+  fallbackLabel?: string,
+) => {
+  return locales?.[locale]?.[code] || fallbackLabel || code;
+};
+
 const getOptions = <T,>({
   autoSortOptions = true,
   exclude,

From 869f0ab7f17a5fee6e7f40d3f8368525e2cb1c31 Mon Sep 17 00:00:00 2001
From: kabin thakuri <kabin@dzangolab.com>
Date: Fri, 9 Jan 2026 17:04:13 +0545
Subject: [PATCH 4/4] chore(ui/CountryPicker): improve hasOptionGroup type
 guard for options validation

---
 packages/ui/src/FormWidgets/CountryPicker/index.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/FormWidgets/CountryPicker/index.tsx b/packages/ui/src/FormWidgets/CountryPicker/index.tsx
index 046301200..29165dca6 100644
--- a/packages/ui/src/FormWidgets/CountryPicker/index.tsx
+++ b/packages/ui/src/FormWidgets/CountryPicker/index.tsx
@@ -258,7 +258,12 @@ const hasOptionGroup = <T,>(
   options: Option<T>[] | OptionGroup<T>[],
 ): options is OptionGroup<T>[] => {
   return (
-    Array.isArray(options) && options.length > 0 && "options" in options[0]
+    Array.isArray(options) &&
+    options.length > 0 &&
+    options.every(
+      (option): option is OptionGroup<T> =>
+        typeof option === "object" && "options" in option,
+    )
   );
 };