SHARED(Frontend): Introduce NativeSelect to replace use of ComboBox on mobile phones.

Change LanguageSelect to use NativeSelect when on mobile phone.

Author: pkoivisto

frontend/packages/shared/CHANGELOG.MD

@@ -9,6 +9,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Released]
 
+## [1.10.0] - 2023-10-19
+
+### Added
+
+- New `NativeSelect` and `NativeSelectWithLabel` components for mobile phone use
+
+### Changed
+
+- `LanguageSelect` to use `NativeSelect` when rendered on mobile phone
+- `LanguageSelect` now requires `onLanguageChange` prop
+
 ## [1.9.29] - 2023-10-10
 
 ### Added

frontend/packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opetushallitus/kieli-ja-kaantajatutkinnot.shared",
-  "version": "1.9.29",
+  "version": "1.10.0",
   "description": "Shared Frontend Package",
   "exports": {
     "./components": "./src/components/index.tsx",

frontend/packages/shared/src/components/LanguageSelect/LanguageSelect.test.tsx

@@ -17,6 +17,7 @@ describe('LanguageSelect', () => {
           excludedLanguage="FI"
           primaryLanguages={['SV']}
           translateLanguage={jest.fn((l: string) => l)}
+          onLanguageChange={jest.fn()}
         />
       )
       .toJSON();

frontend/packages/shared/src/components/LanguageSelect/LanguageSelect.tsx

@@ -1,9 +1,11 @@
+import { useWindowProperties } from '../../hooks/useWindowProperties/useWindowProperties';
 import {
   AutoCompleteComboBox,
   ComboBoxOption,
   ComboBoxProps,
 } from '../../interfaces/comboBox';
 import { ComboBox, sortOptionsByLabels } from '../ComboBox/ComboBox';
+import { NativeSelect } from '../NativeSelect/NativeSelect';
 
 export const languageToComboBoxOption = (
   translate: (l: string) => string,
@@ -18,6 +20,7 @@ interface LanguageSelectProps {
   primaryLanguages?: Array<string>;
   excludedLanguage?: string;
   translateLanguage: (l: string) => string;
+  onLanguageChange: (l?: string) => void;
 }
 
 /**
@@ -39,10 +42,14 @@ export const LanguageSelect = ({
   primaryLanguages,
   excludedLanguage,
   translateLanguage,
+  onLanguageChange,
+  helperText,
+  showError,
+  value,
   ...rest
 }: LanguageSelectProps &
   Omit<ComboBoxProps, 'values'> &
-  AutoCompleteComboBox) => {
+  Omit<AutoCompleteComboBox, 'onChange'>) => {
   const includedLanguages = excludedLanguage
     ? languages.filter((language) => language !== excludedLanguage)
     : languages;
@@ -63,5 +70,28 @@ export const LanguageSelect = ({
     ...sortOptionsByLabels(secondaryOptions),
   ];
 
-  return <ComboBox {...rest} values={sortedOptions} />;
+  const { isPhone } = useWindowProperties();
+  if (isPhone) {
+    return (
+      <NativeSelect
+        placeholder={rest.label || ''}
+        values={sortedOptions}
+        value={value}
+        onChange={(e) => onLanguageChange(e.target.value as string)}
+        helperText={helperText}
+        showError={showError}
+      />
+    );
+  }
+
+  return (
+    <ComboBox
+      {...rest}
+      onChange={(_, v) => onLanguageChange(v?.value)}
+      values={sortedOptions}
+      value={value}
+      helperText={helperText}
+      showError={showError}
+    />
+  );
 };

frontend/packages/shared/src/components/NativeSelect/NativeSelect.tsx

@@ -0,0 +1,74 @@
+import {
+  FormControl,
+  FormHelperText,
+  Select,
+  SelectProps,
+} from '@mui/material';
+import { FC } from 'react';
+
+import { Variant } from '../../enums';
+import { ComboBoxOption } from '../../interfaces';
+import { Text } from '../Text/Text';
+
+interface CustomNativeSelectProps extends SelectProps {
+  helperText?: string;
+  showError?: boolean;
+  placeholder: string;
+  value: ComboBoxOption | null;
+  values: Array<ComboBoxOption>;
+}
+
+const CustomSelect = ({
+  value,
+  values,
+  placeholder,
+  ...rest
+}: CustomNativeSelectProps) => {
+  const options = [{ label: placeholder, value: '' }, ...values];
+
+  return (
+    <Select
+      variant={Variant.Outlined}
+      value={value?.value || ''}
+      {...rest}
+      native
+    >
+      {options.map(({ label, value }) => (
+        <option key={value} value={value}>
+          {label}
+        </option>
+      ))}
+    </Select>
+  );
+};
+
+export const NativeSelect: FC<CustomNativeSelectProps> = ({
+  showError,
+  helperText,
+  ...rest
+}) => {
+  return (
+    <FormControl fullWidth error={showError}>
+      <CustomSelect {...rest} />
+      {showError && <FormHelperText>{helperText}</FormHelperText>}
+    </FormControl>
+  );
+};
+
+export const NativeSelectWithLabel: FC<
+  CustomNativeSelectProps & { label: string }
+> = ({ id, showError, helperText, label, ...rest }) => {
+  const errorStyles = showError ? { color: 'error.main' } : {};
+
+  return (
+    <FormControl fullWidth error={showError}>
+      <label htmlFor={id}>
+        <Text sx={errorStyles}>
+          <b>{label}</b>
+        </Text>
+      </label>
+      <CustomSelect {...rest} />
+      {showError && <FormHelperText>{helperText}</FormHelperText>}
+    </FormControl>
+  );
+};

frontend/packages/shared/src/components/index.tsx

@@ -46,3 +46,7 @@ export { StyleCacheProvider } from './StyleCacheProvider/StyleCacheProvider';
 export { ScrollToTop } from './ScrollToTop/ScrollToTop';
 export { StackableMobileAppBar } from './StackableMobileAppBar/StackableMobileAppBar';
 export { WebLink } from './WebLink/WebLink';
+export {
+  NativeSelect,
+  NativeSelectWithLabel,
+} from './NativeSelect/NativeSelect';