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

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

@@ -29,7 +29,7 @@ import type { CountryProps } from "./country"
 
 const prioCountryCode = ["DE", "DK", "FI", "NO", "SE"]
 
-export default function CountrySelect({
+export default function CountryCombobox({
   // hack used since chrome does not respect autocomplete="off"
   autoComplete = "nope",
   className = "",

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>
+  )
+}

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

@@ -1,75 +1,20 @@
 "use client"
 
-import { useMemo } from "react"
-import { useController } from "react-hook-form"
-import { useIntl } from "react-intl"
+import { useMediaQuery } from "usehooks-ts"
 
-import { Select } from "@scandic-hotels/design-system/Select"
-
-import { countries } from "@/constants/countries"
-
-import useLang from "@/hooks/useLang"
-
-import ErrorMessage from "../ErrorMessage"
+import CountryCombobox from "./CountryCombobox"
+import CountrySelect from "./CountrySelect"
 
 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,
+export default function Country(props: CountryProps) {
+  const isDesktop = useMediaQuery("(min-width: 768px)", {
+    initializeWithValue: false,
   })
 
-  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>
+  return isDesktop ? (
+    <CountryCombobox {...props} />
+  ) : (
+    <CountrySelect {...props} />
   )
 }

apps/scandic-web/components/TempDesignSystem/Form/Date/index.tsx

@@ -3,6 +3,7 @@ import { parseDate } from "@internationalized/date"
 import { useEffect } from "react"
 import { useController, useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
+import { useMediaQuery } from "usehooks-ts"
 
 import { Select } from "@scandic-hotels/design-system/Select"
 
@@ -20,6 +21,9 @@ import styles from "./date.module.css"
 export default function DateSelect({ name, registerOptions = {} }: DateProps) {
   const intl = useIntl()
   const lang = useLang()
+  const isDesktop = useMediaQuery("(min-width: 768px)", {
+    initializeWithValue: false,
+  })
 
   const { control, setValue, formState, watch } = useFormContext()
   const { field, fieldState } = useController({
@@ -126,6 +130,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
             name={DateName.day}
             onSelectionChange={(key) => setValue(DateName.day, Number(key))}
             isRequired
+            enableFiltering={isDesktop}
             isInvalid={fieldState.invalid}
             onBlur={field.onBlur}
             defaultSelectedKey={dateValue?.day}
@@ -141,6 +146,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
             name={DateName.month}
             onSelectionChange={(key) => setValue(DateName.month, Number(key))}
             isRequired
+            enableFiltering={isDesktop}
             isInvalid={fieldState.invalid}
             onBlur={field.onBlur}
             defaultSelectedKey={dateValue?.month}
@@ -156,6 +162,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
             name={DateName.year}
             onSelectionChange={(key) => setValue(DateName.year, Number(key))}
             isRequired
+            enableFiltering={isDesktop}
             isInvalid={fieldState.invalid}
             onBlur={field.onBlur}
             defaultSelectedKey={dateValue?.year}

packages/design-system/lib/components/Select/Select.tsx

@@ -28,7 +28,7 @@ export function Select({
 }: SelectProps | SelectFilterProps) {
   const [isOpen, setIsOpen] = useState(false)
 
-  if ('enableFiltering' in props) {
+  if (props.enableFiltering) {
     return (
       <SelectFilter
         name={name}

packages/design-system/lib/components/Select/types.ts

@@ -17,6 +17,7 @@ export interface SelectProps extends ComponentProps<typeof Select> {
   name: string
   label: string
   onSelectionChange?: (key: Key | null) => void
+  enableFiltering?: false
 }
 
 export interface SelectItemProps extends ComponentProps<typeof ListBoxItem> {
@@ -32,5 +33,5 @@ export interface SelectFilterProps extends ComponentProps<typeof ComboBox> {
   name: string
   label: string
   onSelectionChange?: (key: Key | null) => void
-  enableFiltering: boolean
+  enableFiltering: true
 }