Add default selections to KeywordSearchWidget

Author: valentinogagliardi

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres
 to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.2.0] - 2023-14-02
+
+## Added
+
+- ability to pass default selections to `KeywordSearchWidget`
+
 ## [3.1.0] - 2023-14-02
 
 ## [3.0.3-0] (beta) - 2023-13-02

cypress/component/KeywordSearchWidget.cy.tsx

@@ -315,6 +315,50 @@ describe('<KeywordSearchWidget />', () => {
         'aria-checked',
         'false'
       )
+
+      cy.log('Re-render with new props, providing a default selection.')
+      cy.findByText('Land (cryosphere)').click()
+      cy.findByText('Atmosphere (physical)').click()
+      cy.findByText('Global').click()
+
+      rerender(
+        <KeywordSearchWidget
+          defaultSelections={{
+            'Variable domain': ['Atmosphere (composition)', 'Land (cryosphere)']
+          }}
+          categories={[
+            {
+              category: 'Spatial coverage',
+              groups: {
+                Global: 27,
+                Europe: 12
+              }
+            },
+            {
+              category: 'Temporal coverage',
+              groups: {
+                Past: 18
+              }
+            },
+            {
+              category: 'Variable domain',
+              groups: {
+                'Atmosphere (composition)': 12,
+                'Atmosphere (physical)': 22,
+                'Land (cryosphere)': 12
+              }
+            }
+          ]}
+        />
+      )
+
+      cy.findByLabelText('Atmosphere (physical)').should(
+        'have.attr',
+        'aria-checked',
+        'false'
+      )
+
+      cy.findByLabelText('Global').should('have.attr', 'aria-checked', 'true')
     })
   })
 })

src/widgets/KeywordSearchWidget.tsx

@@ -11,6 +11,11 @@ export type KeywordCategory = {
 export interface KeywordSearchWidgetProps {
   categories: KeywordCategory[]
 
+  /**
+   * Optional default selections. This is used to control checkbox selections.
+   */
+  defaultSelections?: Selections
+
   /**
    * Keyword change handlers. Invoked when the user selects/deselects a keyword.
    */
@@ -40,6 +45,7 @@ type Selections = Record<string, string[]>
  */
 const KeywordSearchWidget = ({
   categories,
+  defaultSelections,
   onKeywordSelection,
   keywordQueryParam = 'kw',
   keywordQueryParamTransformer,
@@ -60,8 +66,15 @@ const KeywordSearchWidget = ({
       (nextState, keywordCategory) => {
         nextState[keywordCategory.category] = [
           ...intersection(
-            new Set(Object.keys(keywordCategory.groups)),
-            new Set(selections[keywordCategory.category] || [])
+            intersection(
+              new Set(Object.keys(keywordCategory.groups)),
+              new Set(selections[keywordCategory.category] || [])
+            ),
+            new Set(
+              (defaultSelections &&
+                defaultSelections[keywordCategory.category]) ||
+                selections[keywordCategory.category]
+            )
           )
         ]