Merged in fix/LOY-398-fix-language-select (pull request #3227)

fix(LOY-398): fix language select by creating FormSelect wrapper

* fix(LOY-398): fix language select by creating FormSelect wrapper


Approved-by: Erik Tiekstra
Approved-by: Anton Gunnarsson

packages/design-system/lib/components/Form/FormSelect/index.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { useController } from 'react-hook-form'
+
+import { Select } from '../../Select'
+
+import { SelectProps } from '../../Select/types'
+
+export function FormSelect({ label, items, name }: SelectProps) {
+  const { field, fieldState } = useController({
+    name,
+  })
+  return (
+    <Select
+      items={items}
+      label={label}
+      isInvalid={fieldState.invalid}
+      name={name}
+      onBlur={field.onBlur}
+      onSelectionChange={(c) => field.onChange(c ?? '')}
+      selectedKey={field.value}
+      data-testid={name}
+    />
+  )
+}

packages/design-system/package.json

@@ -30,6 +30,7 @@
     "./Form/Checkbox": "./lib/components/Form/Checkbox/index.tsx",
     "./Form/Country": "./lib/components/Form/Country/index.tsx",
     "./Form/Date": "./lib/components/Form/Date/index.tsx",
+    "./Form/Select": "./lib/components/Form/FormSelect/index.tsx",
     "./Form/ErrorMessage": "./lib/components/Form/ErrorMessage/index.tsx",
     "./Form/RadioButtonsGroup": "./lib/components/Form/RadioButtonsGroup/index.tsx",
     "./Form/PaymentOption": "./lib/components/Form/PaymentOption/PaymentOption.tsx",