fix: date and country selects now still uses the filtering in desktop

apps/scandic-web/components/TempDesignSystem/Form/Country/CountrySelect.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { useMemo } from "react"
+import { useController } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { Select } from "@scandic-hotels/design-system/Select"
+
+import { countries } from "@/constants/countries"
+
+import useLang from "@/hooks/useLang"
+
+import ErrorMessage from "../ErrorMessage"
+
+import type { CountryProps } from "./country"
+
+const prioCountryCode = ["DE", "DK", "FI", "NO", "SE"]
+
+export default function CountrySelect({
+  className = "",
+  label,
+  name = "country",
+  readOnly = false,
+  registerOptions = {},
+}: CountryProps) {
+  const lang = useLang()
+  const intl = useIntl()
+
+  const { field, formState, fieldState } = useController({
+    name,
+    rules: registerOptions,
+  })
+
+  const items = useMemo(() => {
+    function mapCountry(country: (typeof countries)[number]) {
+      return {
+        value: country.code,
+        label:
+          intl.formatDisplayName(country.code, { type: "region" }) ||
+          country.name,
+      }
+    }
+
+    const collator = new Intl.Collator(lang)
+    const prioCountries = countries
+      .filter((c) => prioCountryCode.includes(c.code))
+      .map(mapCountry)
+      .sort((a, b) => collator.compare(a.label, b.label))
+
+    const restCountries = countries
+      .filter((c) => !prioCountryCode.includes(c.code))
+      .map(mapCountry)
+      .sort((a, b) => collator.compare(a.label, b.label))
+
+    return [...prioCountries, ...restCountries]
+  }, [intl, lang])
+
+  return (
+    <div className={className}>
+      <Select
+        items={items}
+        label={label}
+        isReadOnly={readOnly}
+        isRequired={Boolean(registerOptions?.required)}
+        isInvalid={fieldState.invalid}
+        name={name}
+        onBlur={field.onBlur}
+        onSelectionChange={(c) => field.onChange(c ?? "")}
+        selectedKey={field.value}
+        data-testid={name}
+      />
+      <ErrorMessage errors={formState.errors} name={name} />
+    </div>
+  )
+}