City-of-Helsinki · khalima · Jan 23, 2025 · Jan 15, 2025 · Jan 15, 2025 · Jan 15, 2025
diff --git a/.github/workflows/visual-regression-cleanup.yml b/.github/workflows/visual-regression-cleanup.yml
diff --git a/dist/css/ckeditor.min.css b/dist/css/ckeditor.min.css
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/dist/js/district-and-project-search.min.js b/dist/js/district-and-project-search.min.js
diff --git a/dist/js/health-station-search.min.js b/dist/js/health-station-search.min.js
diff --git a/dist/js/job-search.min.js b/dist/js/job-search.min.js
diff --git a/dist/js/linkedevents.min.js b/dist/js/linkedevents.min.js
diff --git a/dist/js/maternity-and-child-health-clinic-search.min.js b/dist/js/maternity-and-child-health-clinic-search.min.js
diff --git a/dist/js/news-archive.min.js b/dist/js/news-archive.min.js
diff --git a/dist/js/ploughing-schedule.min.js b/dist/js/ploughing-schedule.min.js
diff --git a/dist/js/school-search.min.js b/dist/js/school-search.min.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,8 +33,9 @@
     "classnames": "^2.3.1",
     "focus-trap": "^7.5.4",
     "glob": "^11.0.0",
-    "hds-design-tokens": "^3.3.0",
-    "hds-react": "^3.3.0",
+    "hds-core": "^4.1.0",
+    "hds-design-tokens": "^4.1.0",
+    "hds-react": "^4.1.0",
     "html-react-parser": "^5.0.11",
     "husky": "^9.0.0",
     "hyphenopoly": "^6.0.0",

diff --git a/src/js/react/apps/district-and-project-search/components/results/ResultsSort.tsx b/src/js/react/apps/district-and-project-search/components/results/ResultsSort.tsx
@@ -24,20 +24,22 @@ const ResultsSort = () => {
   return (
     <div className="district-project-search-form__filter hdbt-search__filter">
       <Select
-        label={Drupal.t('Sort search results', {}, { context: 'District and project search form label' })}
-        options={sortOptions}
-        onChange={(option: OptionType) => {
-          setSort(option);
+        clearable={false}
+        onChange={(_selectedOptions, clickedOption) => {
+          setSort(clickedOption);
           setUrlParams({
             ...urlParams,
-            sort: option.value,
+            sort: clickedOption.value,
           });
         }}
-        value={sort}
+        options={sortOptions}
         style={{ minWidth: '280px' }}
+        texts={{
+          label: Drupal.t('Sort search results', {}, { context: 'District and project search form label' }),
+        }}
+        value={[sort]}
       />
     </div>
-
   );
 };
 

diff --git a/src/js/react/apps/district-and-project-search/containers/FormContainer.tsx b/src/js/react/apps/district-and-project-search/containers/FormContainer.tsx
@@ -1,24 +1,34 @@
-import { useEffect } from 'react';
-import { useAtom, useAtomValue, useSetAtom } from 'jotai';
-import { Accordion, IconLocation, Button, TextInput, Combobox } from 'hds-react';
+import {useEffect, useState} from 'react';
+import {useAtom, useAtomValue, useSetAtom} from 'jotai';
+import {
+  Accordion,
+  AccordionSize,
+  Button,
+  ButtonPresetTheme,
+  ButtonVariant,
+  defaultFilter,
+  IconLocation,
+  Select,
+  TextInput
+} from 'hds-react';
 
 import {
-  urlAtom,
-  urlUpdateAtom,
-  titleAtom,
   districtsAtom,
   districtSelectionAtom,
-  themesAtom,
-  themeSelectionAtom,
   phasesAtom,
   phaseSelectionAtom,
+  themesAtom,
+  themeSelectionAtom,
+  titleAtom,
   typesAtom,
-  typeSelectionAtom
+  typeSelectionAtom,
+  urlAtom,
+  urlUpdateAtom
 } from '../store';
 import SelectionsContainer from './SelectionsContainer';
 import SearchComponents from '../enum/SearchComponents';
 import transformDropdownsValues from '../helpers/Params';
-import { ComponentMap } from '../helpers/helpers';
+import {ComponentMap} from '../helpers/helpers';
 import type OptionType from '../types/OptionType';
 import URLParams from '../types/URLParams';
 
@@ -28,12 +38,16 @@ const FormContainer = () => {
   const [title, setTitle] = useAtom(titleAtom);
   const districtOptions = useAtomValue(districtsAtom);
   const [districtSelection, setDistrictFilter] = useAtom(districtSelectionAtom);
+  const [districtSelectOpen, setDistrictSelectOpen] = useState(false);
   const themeOptions = useAtomValue(themesAtom);
   const [themeSelection, setThemeFilter] = useAtom(themeSelectionAtom);
+  const [themeSelectOpen, setThemeSelectOpen] = useState(false);
   const phaseOptions = useAtomValue(phasesAtom);
   const [phaseSelection, setPhaseFilter] = useAtom(phaseSelectionAtom);
+  const [phaseSelectOpen, setPhaseSelectOpen] = useState(false);
   const typeOptions = useAtomValue(typesAtom);
   const [typeSelection, setTypeFilter] = useAtom(typeSelectionAtom);
+  const [typeSelectOpen, setTypeSelectOpen] = useState(false);
 
   // Set form control values from url parameters on load
   useEffect(() => {
@@ -70,106 +84,134 @@ const FormContainer = () => {
           <TextInput
             id="district-or-project-name"
             label={Drupal.t('Name of residential area or project', {}, { context: 'District and project search form label' })}
-            placeholder={Drupal.t('For example, Pasila', {}, { context: 'District and project search form label' })}
             onChange={handleTitleChange}
-            value={title}
+            placeholder={Drupal.t('For example, Pasila', {}, { context: 'District and project search form label' })}
             type='search'
+            value={title}
           />
-          <Combobox
-            multiselect
+          <Select
+            filter={defaultFilter}
+            icon={<IconLocation />}
             id={SearchComponents.DISTRICTS}
-            // @ts-ignore
+            multiSelect
+            noTags
+            onChange={(selectedOptions, clickedOption) => {
+              setDistrictFilter(selectedOptions);
+              if (clickedOption) setDistrictSelectOpen(true);
+            }}
+            onBlur={() => setDistrictSelectOpen(false)}
+            open={districtSelectOpen}
             options={districtOptions}
-            value={districtSelection}
-            onChange={setDistrictFilter}
-            icon={<IconLocation />}
-            label={residentialAreaLabel}
-            placeholder={Drupal.t('All areas', {}, { context: 'District and project search form label' })}
-            clearButtonAriaLabel={Drupal.t('Clear @label selection', { '@label': residentialAreaLabel }, { context: 'React search clear selection label' })}
-            selectedItemRemoveButtonAriaLabel={Drupal.t('Remove item', {}, { context: 'React search remove item aria label' })}
-            toggleButtonAriaLabel={Drupal.t('Open the combobox', {}, { context: 'React search open dropdown aria label' })}
+            texts={{
+              clearButtonAriaLabel_one: Drupal.t('Clear @label selection', {'@label': residentialAreaLabel}, { context: 'React search clear selection label' }),
+              clearButtonAriaLabel_multiple: Drupal.t('Clear @label selection', {'@label': residentialAreaLabel}, { context: 'React search clear selection label' }),
+              label: residentialAreaLabel,
+              placeholder: Drupal.t('All areas', {}, { context: 'District and project search form label' }),
+            }}
             theme={{
+              '--checkbox-background-selected': 'var(--hdbt-color-black)',
               '--focus-outline-color': 'var(--hdbt-color-black)',
-              '--multiselect-checkbox-background-selected': 'var(--hdbt-color-black)',
               '--placeholder-color': 'var(--hdbt-color-black)',
             }}
+            value={districtSelection}
           />
         </div>
         <Accordion
           className='district-project-search-form__additional-filters'
-          size='s'
-          initiallyOpen={accordionInitiallyOpen}
-          headingLevel={3}
           heading={Drupal.t('Refine the project search', {}, { context: 'District and project search' })}
+          headingLevel={3}
+          initiallyOpen={accordionInitiallyOpen}
           language={window.drupalSettings.path.currentLanguage || 'fi'}
+          size={AccordionSize.Small}
           theme={{
             '--header-font-size': 'var(--fontsize-heading-xxs)',
             '--header-line-height': 'var(--lineheight-s)',
           }}
         >
           <div className='district-project-search-form__filters'>
-            <Combobox
-              multiselect
+            <Select
+              filter={defaultFilter}
               id={SearchComponents.THEME}
-              // @ts-ignore
+              multiSelect
+              noTags
+              onChange={(selectedOptions, clickedOption) => {
+                setThemeFilter(selectedOptions);
+                if (clickedOption) setThemeSelectOpen(true);
+              }}
+              onBlur={() => setThemeSelectOpen(false)}
+              open={themeSelectOpen}
               options={themeOptions}
-              value={themeSelection}
-              onChange={setThemeFilter}
-              label={projectThemeLabel}
-              placeholder={Drupal.t('All themes', {}, { context: 'District and project search form label' })}
-              clearButtonAriaLabel={Drupal.t('Clear @label selection', { '@label': projectThemeLabel }, { context: 'React search clear selection label' })}
-              selectedItemRemoveButtonAriaLabel={Drupal.t('Remove item', {}, { context: 'React search remove item aria label' })}
-              toggleButtonAriaLabel={Drupal.t('Open the combobox', {}, { context: 'React search open dropdown aria label' })}
+              texts={{
+                clearButtonAriaLabel_one: Drupal.t('Clear @label selection', {'@label': projectThemeLabel}, { context: 'React search clear selection label' }),
+                clearButtonAriaLabel_multiple: Drupal.t('Clear @label selection', {'@label': projectThemeLabel}, { context: 'React search clear selection label' }),
+                label: projectThemeLabel,
+                placeholder: Drupal.t('All themes', {}, { context: 'District and project search form label' }),
+              }}
               theme={{
+                '--checkbox-background-selected': 'var(--hdbt-color-black)',
                 '--focus-outline-color': 'var(--hdbt-color-black)',
-                '--multiselect-checkbox-background-selected': 'var(--hdbt-color-black)',
                 '--placeholder-color': 'var(--hdbt-color-black)',
               }}
+              value={themeSelection}
             />
-            <Combobox
-              multiselect
+            <Select
+              filter={defaultFilter}
               id={SearchComponents.PHASE}
-              // @ts-ignore
+              multiSelect
+              noTags
+              onChange={(selectedOptions, clickedOption) => {
+                setPhaseFilter(selectedOptions);
+                if (clickedOption) setPhaseSelectOpen(true);
+              }}
+              onBlur={() => setPhaseSelectOpen(false)}
+              open={phaseSelectOpen}
               options={phaseOptions}
-              value={phaseSelection}
-              onChange={setPhaseFilter}
-              label={projectStageLabel}
-              placeholder={Drupal.t('All stages', {}, { context: 'District and project search form label' })}
-              clearButtonAriaLabel={Drupal.t('Clear @label selection', { '@label': projectStageLabel }, { context: 'React search clear selection label' })}
-              selectedItemRemoveButtonAriaLabel={Drupal.t('Remove item', {}, { context: 'React search remove item aria label' })}
-              toggleButtonAriaLabel={Drupal.t('Open the combobox', {}, { context: 'React search open dropdown aria label' })}
+              texts={{
+                clearButtonAriaLabel_one: Drupal.t('Clear @label selection', {'@label': projectStageLabel}, { context: 'React search clear selection label' }),
+                clearButtonAriaLabel_multiple: Drupal.t('Clear @label selection', {'@label': projectStageLabel}, { context: 'React search clear selection label' }),
+                label: projectStageLabel,
+                placeholder: Drupal.t('All stages', {}, { context: 'District and project search form label' }),
+              }}
               theme={{
+                '--checkbox-background-selected': 'var(--hdbt-color-black)',
                 '--focus-outline-color': 'var(--hdbt-color-black)',
-                '--multiselect-checkbox-background-selected': 'var(--hdbt-color-black)',
                 '--placeholder-color': 'var(--hdbt-color-black)',
               }}
+              value={phaseSelection}
             />
-            <Combobox
-              multiselect
+            <Select
+              filter={defaultFilter}
               id={SearchComponents.TYPE}
-              // @ts-ignore
+              multiSelect
+              noTags
+              onChange={(selectedOptions, clickedOption) => {
+                setTypeFilter(selectedOptions);
+                if (clickedOption) setTypeSelectOpen(true);
+              }}
+              onBlur={() => setTypeSelectOpen(false)}
+              open={typeSelectOpen}
               options={typeOptions}
-              value={typeSelection}
-              onChange={setTypeFilter}
-              label={projectTypeLabel}
-              placeholder={Drupal.t('All types', {}, { context: 'District and project search form label' })}
-              clearButtonAriaLabel={Drupal.t('Clear @label selection', { '@label': projectTypeLabel }, { context: 'React search clear selection label' })}
-              selectedItemRemoveButtonAriaLabel={Drupal.t('Remove item', {}, { context: 'React search remove item aria label' })}
-              toggleButtonAriaLabel={Drupal.t('Open the combobox', {}, { context: 'React search open dropdown aria label' })}
+              texts={{
+                clearButtonAriaLabel_one: Drupal.t('Clear @label selection', {'@label': projectTypeLabel}, { context: 'React search clear selection label' }),
+                clearButtonAriaLabel_multiple: Drupal.t('Clear @label selection', {'@label': projectTypeLabel}, { context: 'React search clear selection label' }),
+                label: projectTypeLabel,
+                placeholder: Drupal.t('All types', {}, { context: 'District and project search form label' }),
+              }}
               theme={{
+                '--checkbox-background-selected': 'var(--hdbt-color-black)',
                 '--focus-outline-color': 'var(--hdbt-color-black)',
-                '--multiselect-checkbox-background-selected': 'var(--hdbt-color-black)',
                 '--placeholder-color': 'var(--hdbt-color-black)',
               }}
+              value={typeSelection}
             />
           </div>
         </Accordion>
         <div className='district-project-search-form__submit'>
           <Button
             className='district-project-search-form__submit-button'
+            theme={ButtonPresetTheme.Black}
             type='submit'
-            variant='primary'
-            theme='black'
+            variant={ButtonVariant.Primary}
           >
             {Drupal.t('Search', {}, { context: 'React search: submit button label' })}
           </Button>