From dc2fd9559d60315b1ae74e1f284cff40eadb22e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Vannicatte?=
 <20689156+shortcuts@users.noreply.github.com>
Date: Mon, 5 Jul 2021 10:58:11 +0200
Subject: [PATCH] feat(ts): use `Partial` exports (#4803)

---
 src/widgets/answers/answers.tsx               | 26 +++----
 src/widgets/breadcrumb/breadcrumb.tsx         | 26 +++----
 .../clear-refinements/clear-refinements.tsx   | 16 ++---
 .../current-refinements.tsx                   | 18 ++---
 src/widgets/geo-search/geo-search.ts          | 34 ++++-----
 .../hierarchical-menu/hierarchical-menu.tsx   | 36 +++++-----
 src/widgets/hits-per-page/hits-per-page.tsx   | 10 +--
 src/widgets/hits/hits.tsx                     | 20 +++---
 src/widgets/infinite-hits/infinite-hits.tsx   | 32 ++++-----
 src/widgets/menu-select/menu-select.tsx       | 20 +++---
 src/widgets/menu/menu.tsx                     | 32 ++++-----
 src/widgets/numeric-menu/numeric-menu.tsx     | 26 +++----
 src/widgets/pagination/pagination.tsx         | 40 +++++------
 src/widgets/panel/panel.tsx                   | 32 ++++-----
 src/widgets/powered-by/powered-by.tsx         | 10 +--
 .../query-rule-custom-data.tsx                | 12 ++--
 src/widgets/range-input/range-input.tsx       | 30 ++++----
 src/widgets/range-slider/range-slider.tsx     |  8 +--
 src/widgets/rating-menu/rating-menu.tsx       | 34 ++++-----
 .../refinement-list/refinement-list.tsx       | 72 +++++++++----------
 src/widgets/relevant-sort/relevant-sort.tsx   | 18 ++---
 src/widgets/search-box/search-box.tsx         | 32 ++++-----
 src/widgets/sort-by/sort-by.tsx               | 10 +--
 src/widgets/stats/stats.tsx                   | 14 ++--
 .../toggle-refinement/toggle-refinement.tsx   | 18 ++---
 src/widgets/voice-search/voice-search.tsx     | 18 ++---
 26 files changed, 322 insertions(+), 322 deletions(-)

diff --git a/src/widgets/answers/answers.tsx b/src/widgets/answers/answers.tsx
index abe6ecc880..b2dd8de456 100644
--- a/src/widgets/answers/answers.tsx
+++ b/src/widgets/answers/answers.tsx
@@ -49,11 +49,11 @@ const renderer = ({
   );
 };
 
-export type AnswersTemplates = {
+export type AnswersTemplates = Partial<{
   /**
    * Template to use for the header. This template will receive an object containing `hits` and `isLoading`.
    */
-  header?: Template<{
+  header: Template<{
     hits: Hit[];
     isLoading: boolean;
   }>;
@@ -61,45 +61,45 @@ export type AnswersTemplates = {
   /**
    * Template to use for the loader.
    */
-  loader?: Template;
+  loader: Template;
 
   /**
    * Template to use for each result. This template will receive an object containing a single record.
    */
-  item?: Template<Hit>;
-};
+  item: Template<Hit>;
+}>;
 
-export type AnswersCSSClasses = {
+export type AnswersCSSClasses = Partial<{
   /**
    * CSS class to add to the root element of the widget.
    */
-  root?: string | string[];
+  root: string | string[];
 
   /**
    * CSS class to add to the wrapping element when no results.
    */
-  emptyRoot?: string | string[];
+  emptyRoot: string | string[];
 
   /**
    * CSS classes to add to the header.
    */
-  header?: string | string[];
+  header: string | string[];
 
   /**
    * CSS classes to add to the loader.
    */
-  loader?: string | string[];
+  loader: string | string[];
 
   /**
    * CSS class to add to the list of results.
    */
-  list?: string | string[];
+  list: string | string[];
 
   /**
    * CSS class to add to each result.
    */
-  item?: string | string[];
-};
+  item: string | string[];
+}>;
 
 export type AnswersWidgetParams = {
   /**
diff --git a/src/widgets/breadcrumb/breadcrumb.tsx b/src/widgets/breadcrumb/breadcrumb.tsx
index bc7a3d899d..6836221f7d 100644
--- a/src/widgets/breadcrumb/breadcrumb.tsx
+++ b/src/widgets/breadcrumb/breadcrumb.tsx
@@ -52,54 +52,54 @@ const renderer = ({
   );
 };
 
-export type BreadcrumbCSSClasses = {
+export type BreadcrumbCSSClasses = Partial<{
   /**
    * CSS class to add to the root element of the widget.
    */
-  root?: string | string[];
+  root: string | string[];
 
   /**
    * CSS class to add to the root element of the widget if there are no refinements.
    */
-  noRefinementRoot?: string | string[];
+  noRefinementRoot: string | string[];
 
   /**
    * CSS class to add to the list element.
    */
-  list?: string | string[];
+  list: string | string[];
 
   /**
    * CSS class to add to the items of the list. The items contains the link and the separator.
    */
-  item?: string | string[];
+  item: string | string[];
 
   /**
    * CSS class to add to the selected item in the list: the last one or the home if there are no refinements.
    */
-  selectedItem?: string | string[];
+  selectedItem: string | string[];
 
   /**
    * CSS class to add to the separator.
    */
-  separator?: string | string[];
+  separator: string | string[];
 
   /**
    * CSS class to add to the links in the items.
    */
-  link?: string | string[];
-};
+  link: string | string[];
+}>;
 
-export type BreadcrumbTemplates = {
+export type BreadcrumbTemplates = Partial<{
   /**
    * Label of the breadcrumb's first element.
    */
-  home?: Template;
+  home: Template;
 
   /**
    * Symbol used to separate the elements of the breadcrumb.
    */
-  separator?: Template;
-};
+  separator: Template;
+}>;
 
 export type BreadcrumbWidgetParams = {
   /**
diff --git a/src/widgets/clear-refinements/clear-refinements.tsx b/src/widgets/clear-refinements/clear-refinements.tsx
index 83de9e8ddf..f0248060a2 100644
--- a/src/widgets/clear-refinements/clear-refinements.tsx
+++ b/src/widgets/clear-refinements/clear-refinements.tsx
@@ -45,29 +45,29 @@ const renderer = ({ containerNode, cssClasses, renderState, templates }) => (
   );
 };
 
-export type ClearRefinementsCSSClasses = {
+export type ClearRefinementsCSSClasses = Partial<{
   /**
    * CSS class to add to the wrapper element.
    */
-  root?: string | string[];
+  root: string | string[];
 
   /**
    * CSS class to add to the button of the widget.
    */
-  button?: string | string[];
+  button: string | string[];
 
   /**
    * CSS class to add to the button when there are no refinements.
    */
-  disabledButton?: string | string[];
-};
+  disabledButton: string | string[];
+}>;
 
-export type ClearRefinementsTemplates = {
+export type ClearRefinementsTemplates = Partial<{
   /**
    * Template for the content of the button
    */
-  resetLabel?: Template;
-};
+  resetLabel: Template;
+}>;
 
 export type ClearRefinementsWidgetParams = {
   /**
diff --git a/src/widgets/current-refinements/current-refinements.tsx b/src/widgets/current-refinements/current-refinements.tsx
index c915e4c2c1..4969dc622c 100644
--- a/src/widgets/current-refinements/current-refinements.tsx
+++ b/src/widgets/current-refinements/current-refinements.tsx
@@ -14,42 +14,42 @@ import {
 import { component } from '../../lib/suit';
 import { WidgetFactory } from '../../types';
 
-export type CurrentRefinementsCSSClasses = {
+export type CurrentRefinementsCSSClasses = Partial<{
   /**
    * CSS class to add to the root element.
    */
-  root?: string | string[];
+  root: string | string[];
 
   /**
    * CSS class to add to the list element.
    */
-  list?: string | string[];
+  list: string | string[];
 
   /**
    * CSS class to add to the each item element.
    */
-  item?: string | string[];
+  item: string | string[];
 
   /**
    * CSS class to add to the label element.
    */
-  label?: string | string[];
+  label: string | string[];
 
   /**
    * CSS class to add to the category element.
    */
-  category?: string | string[];
+  category: string | string[];
 
   /**
    * CSS class to add to the categoryLabel element.
    */
-  categoryLabel?: string | string[];
+  categoryLabel: string | string[];
 
   /**
    * CSS class to add to the delete element.
    */
-  delete?: string | string[];
-};
+  delete: string | string[];
+}>;
 
 export type CurrentRefinementsWidgetParams = {
   /**
diff --git a/src/widgets/geo-search/geo-search.ts b/src/widgets/geo-search/geo-search.ts
index a070526ef7..ba7420c361 100644
--- a/src/widgets/geo-search/geo-search.ts
+++ b/src/widgets/geo-search/geo-search.ts
@@ -21,39 +21,39 @@ import { GeoLoc, Template, WidgetFactory } from '../../types';
 const withUsage = createDocumentationMessageGenerator({ name: 'geo-search' });
 const suit = component('GeoSearch');
 
-export type GeoSearchTemplates = {
+export type GeoSearchTemplates = Partial<{
   /** Template to use for the marker. */
-  HTMLMarker?: Template<GeoHit>;
+  HTMLMarker: Template<GeoHit>;
   /** Template for the reset button. */
-  reset?: Template;
+  reset: Template;
   /** Template for the toggle label. */
-  toggle?: Template;
+  toggle: Template;
   /** Template for the redo button. */
-  redo?: Template;
-};
+  redo: Template;
+}>;
 
 export type GeoSearchComponentTemplates = Required<GeoSearchTemplates>;
 
-export type GeoSearchCSSClasses = {
+export type GeoSearchCSSClasses = Partial<{
   /** The root div of the widget. */
-  root?: string | string[];
+  root: string | string[];
   /** The map container of the widget. */
-  map?: string | string[];
+  map: string | string[];
   /** The control element of the widget. */
-  control?: string | string[];
+  control: string | string[];
   /** The label of the control element. */
-  label?: string | string[];
+  label: string | string[];
   /** The selected label of the control element. */
-  selectedLabel?: string | string[];
+  selectedLabel: string | string[];
   /** The input of the control element. */
-  input?: string | string[];
+  input: string | string[];
   /** The redo search button. */
-  redo?: string | string[];
+  redo: string | string[];
   /** The disabled redo search button. */
-  disabledRedo?: string | string[];
+  disabledRedo: string | string[];
   /** The reset refinement button. */
-  reset?: string | string[];
-};
+  reset: string | string[];
+}>;
 
 export type GeoSearchMarker<TOptions> = {
   /**
diff --git a/src/widgets/hierarchical-menu/hierarchical-menu.tsx b/src/widgets/hierarchical-menu/hierarchical-menu.tsx
index 68715fd459..f18602207e 100644
--- a/src/widgets/hierarchical-menu/hierarchical-menu.tsx
+++ b/src/widgets/hierarchical-menu/hierarchical-menu.tsx
@@ -31,11 +31,11 @@ const withUsage = createDocumentationMessageGenerator({
 });
 const suit = component('HierarchicalMenu');
 
-type HierarchicalMenuTemplates = {
+type HierarchicalMenuTemplates = Partial<{
   /**
    * Item template, provided with `name`, `count`, `isRefined`, `url` data properties.
    */
-  item?: Template<{
+  item: Template<{
     name: string;
     count: number;
     isRefined: boolean;
@@ -44,59 +44,59 @@ type HierarchicalMenuTemplates = {
   /**
    * Template used for the show more text, provided with `isShowingMore` data property.
    */
-  showMoreText?: Template<{ isShowingMore: boolean }>;
-};
+  showMoreText: Template<{ isShowingMore: boolean }>;
+}>;
 
-export type HierarchicalMenuCSSClasses = {
+export type HierarchicalMenuCSSClasses = Partial<{
   /**
    * CSS class to add to the root element.
    */
-  root?: string | string[];
+  root: string | string[];
   /**
    * CSS class to add to the root element when no refinements.
    */
-  noRefinementRoot?: string | string[];
+  noRefinementRoot: string | string[];
   /**
    * CSS class to add to the list element.
    */
-  list?: string | string[];
+  list: string | string[];
   /**
    * CSS class to add to the child list element.
    */
-  childList?: string | string[];
+  childList: string | string[];
   /**
    * CSS class to add to each item element.
    */
-  item?: string | string[];
+  item: string | string[];
   /**
    * CSS class to add to each selected item element.
    */
-  selectedItem?: string | string[];
+  selectedItem: string | string[];
   /**
    * CSS class to add to each parent item element.
    */
-  parentItem?: string | string[];
+  parentItem: string | string[];
   /**
    * CSS class to add to each link (when using the default template).
    */
-  link?: string | string[];
+  link: string | string[];
   /**
    * CSS class to add to each label (when using the default template).
    */
-  label?: string | string[];
+  label: string | string[];
   /**
    * CSS class to add to each count element (when using the default template).
    */
-  count?: string | string[];
+  count: string | string[];
   /**
    * CSS class to add to the show more element.
    */
-  showMore?: string | string[];
+  showMore: string | string[];
   /**
    * CSS class to add to the disabled show more element.
    */
-  disabledShowMore?: string | string[];
-};
+  disabledShowMore: string | string[];
+}>;
 
 export type HierarchicalMenuComponentCSSClasses = ComponentCSSClasses<
   HierarchicalMenuCSSClasses
diff --git a/src/widgets/hits-per-page/hits-per-page.tsx b/src/widgets/hits-per-page/hits-per-page.tsx
index 8f2acec743..f036236bf1 100644
--- a/src/widgets/hits-per-page/hits-per-page.tsx
+++ b/src/widgets/hits-per-page/hits-per-page.tsx
@@ -43,22 +43,22 @@ const renderer = ({ containerNode, cssClasses }) => (
   );
 };
 
-export type HitsPerPageCSSClasses = {
+export type HitsPerPageCSSClasses = Partial<{
   /**
    * CSS classes added to the outer `<div>`.
    */
-  root?: string | string[];
+  root: string | string[];
 
   /**
    * CSS classes added to the parent `<select>`.
    */
-  select?: string | string[];
+  select: string | string[];
 
   /**
    * CSS classes added to each `<option>`.
    */
-  option?: string | string[];
-};
+  option: string | string[];
+}>;
 
 export type HitsPerPageWidgetParams = {
   /**
diff --git a/src/widgets/hits/hits.tsx b/src/widgets/hits/hits.tsx
index 3cdaa5faa8..9554a919d6 100644
--- a/src/widgets/hits/hits.tsx
+++ b/src/widgets/hits/hits.tsx
@@ -64,48 +64,48 @@ const renderer = ({
   );
 };
 
-export type HitsCSSClasses = {
+export type HitsCSSClasses = Partial<{
   /**
    * CSS class to add to the wrapping element.
    */
-  root?: string | string[];
+  root: string | string[];
 
   /**
    * CSS class to add to the wrapping element when no results.
    */
-  emptyRoot?: string | string[];
+  emptyRoot: string | string[];
 
   /**
    * CSS class to add to the list of results.
    */
-  list?: string | string[];
+  list: string | string[];
 
   /**
    * CSS class to add to each result.
    */
-  item?: string | string[];
-};
+  item: string | string[];
+}>;
 
-export type HitsTemplates = {
+export type HitsTemplates = Partial<{
   /**
    * Template to use when there are no results.
    *
    * @default 'No Results'
    */
-  empty?: Template;
+  empty: Template;
 
   /**
    * Template to use for each result. This template will receive an object containing a single record.
    *
    * @default ''
    */
-  item?: TemplateWithBindEvent<
+  item: TemplateWithBindEvent<
     Hit & {
       // @deprecated the index in the hits array, use __position instead, which is the absolute position
       __hitIndex: number;
     }
   >;
-};
+}>;
 
 export type HitsWidgetParams = {
   /**
diff --git a/src/widgets/infinite-hits/infinite-hits.tsx b/src/widgets/infinite-hits/infinite-hits.tsx
index f5a205145f..3c3dc47840 100644
--- a/src/widgets/infinite-hits/infinite-hits.tsx
+++ b/src/widgets/infinite-hits/infinite-hits.tsx
@@ -34,74 +34,74 @@ const withUsage = createDocumentationMessageGenerator({
 const suit = component('InfiniteHits');
 const InfiniteHitsWithInsightsListener = withInsightsListener(InfiniteHits);
 
-export type InfiniteHitsCSSClasses = {
+export type InfiniteHitsCSSClasses = Partial<{
   /**
    * The root element of the widget.
    */
-  root?: string | string[];
+  root: string | string[];
 
   /**
    * The root container without results.
    */
-  emptyRoot?: string | string[];
+  emptyRoot: string | string[];
 
   /**
    * The list of results.
    */
-  list?: string | string[];
+  list: string | string[];
 
   /**
    * The list item.
    */
-  item?: string | string[];
+  item: string | string[];
 
   /**
    * The “Show previous” button.
    */
-  loadPrevious?: string | string[];
+  loadPrevious: string | string[];
 
   /**
    * The disabled “Show previous” button.
    */
-  disabledLoadPrevious?: string | string[];
+  disabledLoadPrevious: string | string[];
 
   /**
    * The “Show more” button.
    */
-  loadMore?: string | string[];
+  loadMore: string | string[];
 
   /**
    * The disabled “Show more” button.
    */
-  disabledLoadMore?: string | string[];
-};
+  disabledLoadMore: string | string[];
+}>;
 
-export type InfiniteHitsTemplates = {
+export type InfiniteHitsTemplates = Partial<{
   /**
    * The template to use when there are no results.
    */
-  empty?: Template<{ results: SearchResults }>;
+  empty: Template<{ results: SearchResults }>;
 
   /**
    * The template to use for the “Show previous” label.
    */
-  showPreviousText?: Template;
+  showPreviousText: Template;
 
   /**
    * The template to use for the “Show more” label.
    */
-  showMoreText?: Template;
+  showMoreText: Template;
 
   /**
    * The template to use for each result.
    */
-  item?: TemplateWithBindEvent<
+  item: TemplateWithBindEvent<
     Hit & {
       // @deprecated the index in the hits array, use __position instead, which is the absolute position
       __hitIndex: number;
     }
   >;
-};
+}>;
 
 export type InfiniteHitsWidgetParams = {
   /**
diff --git a/src/widgets/menu-select/menu-select.tsx b/src/widgets/menu-select/menu-select.tsx
index a854fada1b..1f1978f799 100644
--- a/src/widgets/menu-select/menu-select.tsx
+++ b/src/widgets/menu-select/menu-select.tsx
@@ -24,30 +24,30 @@ import { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
 const withUsage = createDocumentationMessageGenerator({ name: 'menu-select' });
 const suit = component('MenuSelect');
 
-export type MenuSelectCSSClasses = {
+export type MenuSelectCSSClasses = Partial<{
   /**
    * CSS class to add to the root element.
    */
-  root?: string | string[];
+  root: string | string[];
   /**
    * CSS class to add to the root when there are no items to display
    */
-  noRefinementRoot?: string | string[];
+  noRefinementRoot: string | string[];
   /**
    * CSS class to add to the select element.
    */
-  select?: string | string[];
+  select: string | string[];
   /**
    * CSS class to add to the option element.
    */
-  option?: string | string[];
-};
+  option: string | string[];
+}>;
 
-export type MenuSelectTemplates = {
+export type MenuSelectTemplates = Partial<{
   /**
    * Item template, provided with `label`, `count`, `isRefined` and `value` data properties.
    */
-  item?: Template<{
+  item: Template<{
     label: string;
     value: string;
     count: number;
@@ -56,8 +56,8 @@ export type MenuSelectTemplates = {
   /**
    * Label of the "see all" option in the select.
    */
-  defaultOption?: Template;
-};
+  defaultOption: Template;
+}>;
 
 export type MenuSelectWidgetParams = {
   /**
diff --git a/src/widgets/menu/menu.tsx b/src/widgets/menu/menu.tsx
index 070691190e..efcf9c41af 100644
--- a/src/widgets/menu/menu.tsx
+++ b/src/widgets/menu/menu.tsx
@@ -26,54 +26,54 @@ import { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
 const withUsage = createDocumentationMessageGenerator({ name: 'menu' });
 const suit = component('Menu');
 
-export type MenuCSSClasses = {
+export type MenuCSSClasses = Partial<{
   /**
    * CSS class to add to the root element.
    */
-  root?: string | string[];
+  root: string | string[];
   /**
    * CSS class to add to the root element when no refinements.
    */
-  noRefinementRoot?: string | string[];
+  noRefinementRoot: string | string[];
   /**
    * CSS class to add to the list element.
    */
-  list?: string | string[];
+  list: string | string[];
   /**
    * CSS class to add to each item element.
    */
-  item?: string | string[];
+  item: string | string[];
   /**
    * CSS class to add to each selected item element.
    */
-  selectedItem?: string | string[];
+  selectedItem: string | string[];
   /**
    * CSS class to add to each link (when using the default template).
    */
-  link?: string | string[];
+  link: string | string[];
   /**
    * CSS class to add to each label (when using the default template).
    */
-  label?: string | string[];
+  label: string | string[];
   /**
    * CSS class to add to each count element (when using the default template).
    */
-  count?: string | string[];
+  count: string | string[];
   /**
    * CSS class to add to the show more button.
    */
-  showMore?: string | string[];
+  showMore: string | string[];
   /**
    * CSS class to add to the disabled show more button.
    */
-  disabledShowMore?: string | string[];
-};
+  disabledShowMore: string | string[];
+}>;
 
-export type MenuTemplates = {
+export type MenuTemplates = Partial<{
   /**
    * Item template. The string template gets the same values as the function.
    */
-  item?: Template<{
+  item: Template<{
     count: number;
     cssClasses: MenuCSSClasses;
     isRefined: boolean;
@@ -84,10 +84,10 @@ export type MenuTemplates = {
   /**
    * Template used for the show more text, provided with `isShowingMore` data property.
    */
-  showMoreText?: Template<{
+  showMoreText: Template<{
     isShowingMore: boolean;
   }>;
-};
+}>;
 
 export type MenuComponentCSSClasses = ComponentCSSClasses<MenuCSSClasses>;
 
diff --git a/src/widgets/numeric-menu/numeric-menu.tsx b/src/widgets/numeric-menu/numeric-menu.tsx
index 8867b225a5..7a2bf10103 100644
--- a/src/widgets/numeric-menu/numeric-menu.tsx
+++ b/src/widgets/numeric-menu/numeric-menu.tsx
@@ -51,57 +51,57 @@ const renderer = ({
   );
 };
 
-export type NumericMenuCSSClasses = {
+export type NumericMenuCSSClasses = Partial<{
   /**
    * CSS class to add to the root element.
    */
-  root?: string | string[];
+  root: string | string[];
 
   /**
    * CSS class to add to the root element when no refinements.
    */
-  noRefinementRoot?: string | string[];
+  noRefinementRoot: string | string[];
 
   /**
    * CSS class to add to the list element.
    */
-  list?: string | string[];
+  list: string | string[];
 
   /**
    * CSS class to add to each item element.
    */
-  item?: string | string[];
+  item: string | string[];
 
   /**
    * CSS class to add to each selected item element.
    */
-  selectedItem?: string | string[];
+  selectedItem: string | string[];
 
   /**
    * CSS class to add to each label element.
    */
-  label?: string | string[];
+  label: string | string[];
 
   /**
    * CSS class to add to each label text element.
    */
-  labelText?: string | string[];
+  labelText: string | string[];
 
   /**
    * CSS class to add to each radio element (when using the default template).
    */
-  radio?: string | string[];
-};
+  radio: string | string[];
+}>;
 
 export type NumericMenuComponentCSSClasses = ComponentCSSClasses<
   NumericMenuCSSClasses
 >;
 
-export type NumericMenuTemplates = {
+export type NumericMenuTemplates = Partial<{
   /**
    * Item template, provided with `label` (the name in the configuration), `isRefined`, `url`, `value` (the setting for the filter) data properties.
    */
-  item?: Template<{
+  item: Template<{
     /**
      * The name of the attribute.
      */
@@ -135,7 +135,7 @@ export type NumericMenuTemplates = {
      */
     cssClasses: NumericMenuComponentCSSClasses;
   }>;
-};
+}>;
 
 export type NumericMenuComponentTemplates = Required<NumericMenuTemplates>;
 
diff --git a/src/widgets/pagination/pagination.tsx b/src/widgets/pagination/pagination.tsx
index c452b5cb67..a9562442ed 100644
--- a/src/widgets/pagination/pagination.tsx
+++ b/src/widgets/pagination/pagination.tsx
@@ -78,89 +78,89 @@ const renderer = ({
   );
 };
 
-export type PaginationCSSClasses = {
+export type PaginationCSSClasses = Partial<{
   /**
    * CSS classes added to the root element of the widget.
    */
-  root?: string | string[];
+  root: string | string[];
 
   /**
    * CSS class to add to the root element of the widget if there are no refinements.
    */
-  noRefinementRoot?: string | string[];
+  noRefinementRoot: string | string[];
 
   /**
    * CSS classes added to the wrapping `<ul>`.
    */
-  list?: string | string[];
+  list: string | string[];
 
   /**
    * CSS classes added to each `<li>`.
    */
-  item?: string | string[];
+  item: string | string[];
 
   /**
    * CSS classes added to the first `<li>`.
    */
-  firstPageItem?: string | string[];
+  firstPageItem: string | string[];
 
   /**
    * CSS classes added to the last `<li>`.
    */
-  lastPageItem?: string | string[];
+  lastPageItem: string | string[];
 
   /**
    * CSS classes added to the previous `<li>`.
    */
-  previousPageItem?: string | string[];
+  previousPageItem: string | string[];
 
   /**
    * CSS classes added to the next `<li>`.
    */
-  nextPageItem?: string | string[];
+  nextPageItem: string | string[];
 
   /**
    * CSS classes added to page `<li>`.
    */
-  pageItem?: string | string[];
+  pageItem: string | string[];
 
   /**
    * CSS classes added to the selected `<li>`.
    */
-  selectedItem?: string | string[];
+  selectedItem: string | string[];
 
   /**
    * CSS classes added to the disabled `<li>`.
    */
-  disabledItem?: string | string[];
+  disabledItem: string | string[];
 
   /**
    * CSS classes added to each link.
    */
-  link?: string | string[];
-};
+  link: string | string[];
+}>;
 
-export type PaginationTemplates = {
+export type PaginationTemplates = Partial<{
   /**
    * Label for the Previous link.
    */
-  previous?: string;
+  previous: string;
 
   /**
    * Label for the Next link.
    */
-  next?: string;
+  next: string;
 
   /**
    * Label for the First link.
    */
-  first?: string;
+  first: string;
 
   /**
    * Label for the Last link.
    */
-  last?: string;
-};
+  last: string;
+}>;
 
 export type PaginationWidgetParams = {
   /**
diff --git a/src/widgets/panel/panel.tsx b/src/widgets/panel/panel.tsx
index f2eb82e9de..1a091709d5 100644
--- a/src/widgets/panel/panel.tsx
+++ b/src/widgets/panel/panel.tsx
@@ -12,52 +12,52 @@ import { component } from '../../lib/suit';
 import Panel from '../../components/Panel/Panel';
 import { Template, RenderOptions, WidgetFactory } from '../../types';
 
-export type PanelCSSClasses = {
+export type PanelCSSClasses = Partial<{
   /**
    * CSS classes to add to the root element of the widget.
    */
-  root?: string | string[];
+  root: string | string[];
 
   /**
    * CSS classes to add to the root element of the widget when there's no refinements.
    */
-  noRefinementRoot?: string | string[];
+  noRefinementRoot: string | string[];
 
   /**
    * CSS classes to add to the root element when collapsible (`collapse` is defined).
    */
-  collapsibleRoot?: string | string[];
+  collapsibleRoot: string | string[];
 
   /**
    * CSS classes to add to the root element when collapsed.
    */
-  collapsedRoot?: string | string[];
+  collapsedRoot: string | string[];
 
   /**
    * CSS classes to add to the collapse button element.
    */
-  collapseButton?: string | string[];
+  collapseButton: string | string[];
 
   /**
    * CSS classes to add to the collapse icon of the button.
    */
-  collapseIcon?: string | string[];
+  collapseIcon: string | string[];
 
   /**
    * CSS classes to add to the header.
    */
-  header?: string | string[];
+  header: string | string[];
 
   /**
    * CSS classes to add to the body.
    */
-  body?: string | string[];
+  body: string | string[];
 
   /**
    * CSS classes to add to the footer.
    */
-  footer?: string | string[];
-};
+  footer: string | string[];
+}>;
 
 type AnyWidgetFactory = WidgetFactory<
   {
@@ -70,22 +70,22 @@ type AnyWidgetFactory = WidgetFactory<
   any
 >;
 
-export type PanelTemplates<TWidget extends AnyWidgetFactory> = {
+export type PanelTemplates<TWidget extends AnyWidgetFactory> = Partial<{
   /**
    * Template to use for the header.
    */
-  header?: Template<PanelRenderOptions<TWidget>>;
+  header: Template<PanelRenderOptions<TWidget>>;
 
   /**
    * Template to use for the footer.
    */
-  footer?: Template<PanelRenderOptions<TWidget>>;
+  footer: Template<PanelRenderOptions<TWidget>>;
 
   /**
    * Template to use for collapse button.
    */
-  collapseButtonText?: Template<{ collapsed: boolean }>;
-};
+  collapseButtonText: Template<{ collapsed: boolean }>;
+}>;
 
 type GetWidgetRenderState<TWidgetFactory extends AnyWidgetFactory> = ReturnType<
   TWidgetFactory
diff --git a/src/widgets/powered-by/powered-by.tsx b/src/widgets/powered-by/powered-by.tsx
index d2ab338371..528762dce2 100644
--- a/src/widgets/powered-by/powered-by.tsx
+++ b/src/widgets/powered-by/powered-by.tsx
@@ -37,22 +37,22 @@ const renderer = ({
   }
 };
 
-export type PoweredByCSSClasses = {
+export type PoweredByCSSClasses = Partial<{
   /**
    * CSS class to add to the wrapping element.
    */
-  root?: string | string[];
+  root: string | string[];
 
   /**
    * CSS class to add to the link.
    */
-  link?: string | string[];
+  link: string | string[];
 
   /**
    * CSS class to add to the SVG logo.
    */
-  logo?: string | string[];
-};
+  logo: string | string[];
+}>;
 
 export type PoweredByWidgetParams = {
   /**
diff --git a/src/widgets/query-rule-custom-data/query-rule-custom-data.tsx b/src/widgets/query-rule-custom-data/query-rule-custom-data.tsx
index 8eb6405adb..a5ce9d0714 100644
--- a/src/widgets/query-rule-custom-data/query-rule-custom-data.tsx
+++ b/src/widgets/query-rule-custom-data/query-rule-custom-data.tsx
@@ -19,13 +19,13 @@ import CustomData, {
 } from '../../components/QueryRuleCustomData/QueryRuleCustomData';
 import { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
 
-export type QueryRuleCustomDataCSSClasses = {
-  root?: string | string[];
-};
+export type QueryRuleCustomDataCSSClasses = Partial<{
+  root: string | string[];
+}>;
 
-export type QueryRuleCustomDataTemplates = {
-  default?: Template<{ items: any[] }>;
-};
+export type QueryRuleCustomDataTemplates = Partial<{
+  default: Template<{ items: any[] }>;
+}>;
 
 type QueryRuleCustomDataWidgetParams = {
   container: string | HTMLElement;
diff --git a/src/widgets/range-input/range-input.tsx b/src/widgets/range-input/range-input.tsx
index ee11189e71..1e63e68111 100644
--- a/src/widgets/range-input/range-input.tsx
+++ b/src/widgets/range-input/range-input.tsx
@@ -24,57 +24,57 @@ const defaultTemplates: RangeInputTemplates = {
   submitText: 'Go',
 };
 
-export type RangeInputTemplates = {
+export type RangeInputTemplates = Partial<{
   /**
    * The label of the separator, between min and max.
    * @default "to"
    */
-  separatorText?: Template;
+  separatorText: Template;
   /**
    * The label of the submit button
    * @default "Go"
    */
-  submitText?: Template;
-};
+  submitText: Template;
+}>;
 
-export type RangeInputCSSClasses = {
+export type RangeInputCSSClasses = Partial<{
   /**
    * CSS class to add to the root element.
    */
-  root?: string | string[];
+  root: string | string[];
   /**
    * CSS class to add to the root element when there's no refinements.
    */
-  noRefinement?: string | string[];
+  noRefinement: string | string[];
   /**
    * CSS class to add to the form element.
    */
-  form?: string | string[];
+  form: string | string[];
   /**
    * CSS class to add to the label element.
    */
-  label?: string | string[];
+  label: string | string[];
   /**
    * CSS class to add to the input element.
    */
-  input?: string | string[];
+  input: string | string[];
   /**
    * CSS class to add to the min input element.
    */
-  inputMin?: string | string[];
+  inputMin: string | string[];
   /**
    * CSS class to add to the max input element.
    */
-  separator?: string | string[];
+  separator: string | string[];
   /**
    * CSS class to add to the separator of the form.
    */
-  inputMax?: string | string[];
+  inputMax: string | string[];
   /**
    * CSS class to add to the submit button of the form.
    */
-  submit?: string | string[];
-};
+  submit: string | string[];
+}>;
 
 export type RangeInputWidgetParams = {
   /**
diff --git a/src/widgets/range-slider/range-slider.tsx b/src/widgets/range-slider/range-slider.tsx
index 30a6b9f6b0..f84e62ac48 100644
--- a/src/widgets/range-slider/range-slider.tsx
+++ b/src/widgets/range-slider/range-slider.tsx
@@ -64,16 +64,16 @@ const renderer = ({
   );
 };
 
-export type RangeSliderCssClasses = {
+export type RangeSliderCssClasses = Partial<{
   /**
    * CSS class to add to the root element.
    */
-  root?: string | string[];
+  root: string | string[];
   /**
    * CSS class to add to the disabled root element.
    */
-  disabledRoot?: string | string[];
-};
+  disabledRoot: string | string[];
+}>;
 
 type RangeSliderTooltipOptions = {
   /**
diff --git a/src/widgets/rating-menu/rating-menu.tsx b/src/widgets/rating-menu/rating-menu.tsx
index 88f844f4a3..4e19bbda80 100644
--- a/src/widgets/rating-menu/rating-menu.tsx
+++ b/src/widgets/rating-menu/rating-menu.tsx
@@ -26,68 +26,68 @@ import { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
 const withUsage = createDocumentationMessageGenerator({ name: 'rating-menu' });
 const suit = component('RatingMenu');
 
-export type RatingMenuTemplates = {
+export type RatingMenuTemplates = Partial<{
   /**
    * Item template, provided with `name`, `count`, `isRefined`, `url` data properties.
    */
-  item?: Template<{
+  item: Template<{
     name: string;
     count: number;
     isRefined: boolean;
     url: string;
   }>;
-};
+}>;
 
-export type RatingMenuCSSClasses = {
+export type RatingMenuCSSClasses = Partial<{
   /**
    * CSS class to add to the root element.
    */
-  root?: string | string[];
+  root: string | string[];
   /**
    * CSS class to add to the root element when there's no refinements.
    */
-  noRefinementRoot?: string | string[];
+  noRefinementRoot: string | string[];
   /**
    * CSS class to add to the list element.
    */
-  list?: string | string[];
+  list: string | string[];
   /**
    * CSS class to add to each item element.
    */
-  item?: string | string[];
+  item: string | string[];
   /**
    * CSS class to add the selected item element.
    */
-  selectedItem?: string | string[];
+  selectedItem: string | string[];
   /**
    * CSS class to add a disabled item element.
    */
-  disabledItem?: string | string[];
+  disabledItem: string | string[];
   /**
    * CSS class to add to each link element.
    */
-  link?: string | string[];
+  link: string | string[];
   /**
    * CSS class to add to each star element (when using the default template).
    */
-  starIcon?: string | string[];
+  starIcon: string | string[];
   /**
    * CSS class to add to each full star element (when using the default template).
    */
-  fullStarIcon?: string | string[];
+  fullStarIcon: string | string[];
   /**
    * CSS class to add to each empty star element (when using the default template).
    */
-  emptyStarIcon?: string | string[];
+  emptyStarIcon: string | string[];
   /**
    * CSS class to add to each label.
    */
-  label?: string | string[];
+  label: string | string[];
   /**
    * CSS class to add to each counter.
    */
-  count?: string | string[];
-};
+  count: string | string[];
+}>;
 
 export type RatingMenuComponentCSSClasses = ComponentCSSClasses<
   RatingMenuCSSClasses
diff --git a/src/widgets/refinement-list/refinement-list.tsx b/src/widgets/refinement-list/refinement-list.tsx
index 67c27b4b1c..d3ea1bddc0 100644
--- a/src/widgets/refinement-list/refinement-list.tsx
+++ b/src/widgets/refinement-list/refinement-list.tsx
@@ -29,72 +29,72 @@ const withUsage = createDocumentationMessageGenerator({
 const suit = component('RefinementList');
 const searchBoxSuit = component('SearchBox');
 
-export type RefinementListOwnCSSClasses = {
+export type RefinementListOwnCSSClasses = Partial<{
   /**
    * CSS class to add to the root element.
    */
-  root?: string | string[];
+  root: string | string[];
   /**
    * CSS class to add to the root element when no refinements.
    */
-  noRefinementRoot?: string | string[];
+  noRefinementRoot: string | string[];
   /**
    * CSS class to add to the root element with no results.
    */
-  noResults?: string | string[];
+  noResults: string | string[];
   /**
    * CSS class to add to the list element.
    */
-  list?: string | string[];
+  list: string | string[];
   /**
    * CSS class to add to each item element.
    */
-  item?: string | string[];
+  item: string | string[];
   /**
    * CSS class to add to each selected element.
    */
-  selectedItem?: string | string[];
+  selectedItem: string | string[];
   /**
    * CSS class to add to each label element (when using the default template).
    */
-  label?: string | string[];
+  label: string | string[];
   /**
    * CSS class to add to each checkbox element (when using the default template).
    */
-  checkbox?: string | string[];
+  checkbox: string | string[];
   /**
    * CSS class to add to each label text element.
    */
-  labelText?: string | string[];
+  labelText: string | string[];
   /**
    * CSS class to add to the show more element
    */
-  showMore?: string | string[];
+  showMore: string | string[];
   /**
    * CSS class to add to the disabled show more element
    */
-  disabledShowMore?: string | string[];
+  disabledShowMore: string | string[];
   /**
    * CSS class to add to each count element (when using the default template).
    */
-  count?: string | string[];
+  count: string | string[];
   /**
    * CSS class to add to the searchable container.
    */
-  searchBox?: string | string[];
-};
+  searchBox: string | string[];
+}>;
 
-type RefinementListSearchableCSSClasses = {
-  searchableRoot?: string | string[];
-  searchableForm?: string | string[];
-  searchableInput?: string | string[];
-  searchableSubmit?: string | string[];
-  searchableSubmitIcon?: string | string[];
-  searchableReset?: string | string[];
-  searchableResetIcon?: string | string[];
-  searchableLoadingIndicator?: string | string[];
-  searchableLoadingIcon?: string | string[];
-};
+type RefinementListSearchableCSSClasses = Partial<{
+  searchableRoot: string | string[];
+  searchableForm: string | string[];
+  searchableInput: string | string[];
+  searchableSubmit: string | string[];
+  searchableSubmitIcon: string | string[];
+  searchableReset: string | string[];
+  searchableResetIcon: string | string[];
+  searchableLoadingIndicator: string | string[];
+  searchableLoadingIcon: string | string[];
+}>;
 
 export type RefinementListCSSClasses = RefinementListOwnCSSClasses &
   RefinementListSearchableCSSClasses;
@@ -130,35 +130,35 @@ export type RefinementListItemData = {
   cssClasses: RefinementListCSSClasses;
 };
 
-export type RefinementListOwnTemplates = {
+export type RefinementListOwnTemplates = Partial<{
   /**
    * Item template, provided with `label`, `highlighted`, `value`, `count`, `isRefined`, `url` data properties.
    */
-  item?: Template<RefinementListItemData>;
+  item: Template<RefinementListItemData>;
   /**
    * Template used for the show more text, provided with `isShowingMore` data property.
    */
-  showMoreText?: Template;
+  showMoreText: Template;
   /**
    * Templates to use for search for facet values when there are no results.
    */
-  searchableNoResults?: Template;
-};
+  searchableNoResults: Template;
+}>;
 
-type RefinementListSearchableTemplates = {
+type RefinementListSearchableTemplates = Partial<{
   /**
    * Templates to use for search for facet values submit button.
    */
-  searchableSubmit?: SearchBoxTemplates['submit'];
+  searchableSubmit: SearchBoxTemplates['submit'];
   /**
    * Templates to use for search for facet values reset button.
    */
-  searchableReset?: SearchBoxTemplates['reset'];
+  searchableReset: SearchBoxTemplates['reset'];
   /**
    * Templates to use for the search for facet values loading indicator.
    */
-  searchableLoadingIndicator?: SearchBoxTemplates['loadingIndicator'];
-};
+  searchableLoadingIndicator: SearchBoxTemplates['loadingIndicator'];
+}>;
 
 export type RefinementListTemplates = RefinementListOwnTemplates &
   RefinementListSearchableTemplates;
diff --git a/src/widgets/relevant-sort/relevant-sort.tsx b/src/widgets/relevant-sort/relevant-sort.tsx
index 0eddce4783..7eb8c4c1a7 100644
--- a/src/widgets/relevant-sort/relevant-sort.tsx
+++ b/src/widgets/relevant-sort/relevant-sort.tsx
@@ -20,16 +20,16 @@ import RelevantSort, {
 import defaultTemplates from './defaultTemplates';
 import { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
 
-export type RelevantSortCSSClasses = {
-  root?: string;
-  text?: string;
-  button?: string;
-};
+export type RelevantSortCSSClasses = Partial<{
+  root: string;
+  text: string;
+  button: string;
+}>;
 
-export type RelevantSortTemplates = {
-  text?: Template<{ isRelevantSorted: boolean }>;
-  button?: Template<{ isRelevantSorted: boolean }>;
-};
+export type RelevantSortTemplates = Partial<{
+  text: Template<{ isRelevantSorted: boolean }>;
+  button: Template<{ isRelevantSorted: boolean }>;
+}>;
 
 export type RelevantSortWidgetParams = {
   container: string | HTMLElement;
diff --git a/src/widgets/search-box/search-box.tsx b/src/widgets/search-box/search-box.tsx
index 57e86b4bae..8373089598 100644
--- a/src/widgets/search-box/search-box.tsx
+++ b/src/widgets/search-box/search-box.tsx
@@ -22,59 +22,59 @@ import defaultTemplates from './defaultTemplates';
 const withUsage = createDocumentationMessageGenerator({ name: 'search-box' });
 const suit = component('SearchBox');
 
-export type SearchBoxTemplates = {
+export type SearchBoxTemplates = Partial<{
   /**
    * Template used for displaying the submit button. Can accept a function or a Hogan string.
    */
-  submit?: Template;
+  submit: Template;
   /**
    * Template used for displaying the reset button. Can accept a function or a Hogan string.
    */
-  reset?: Template;
+  reset: Template;
   /**
    * Template used for displaying the loading indicator. Can accept a function or a Hogan string.
    */
-  loadingIndicator?: Template;
-};
+  loadingIndicator: Template;
+}>;
 
-export type SearchBoxCSSClasses = {
+export type SearchBoxCSSClasses = Partial<{
   /**
    * CSS class to add to the wrapping `<div>`
    */
-  root?: string | string[];
+  root: string | string[];
   /**
    * CSS class to add to the form
    */
-  form?: string | string[];
+  form: string | string[];
   /**
    * CSS class to add to the input.
    */
-  input?: string | string[];
+  input: string | string[];
   /**
    * CSS classes added to the submit button.
    */
-  submit?: string | string[];
+  submit: string | string[];
   /**
    * CSS classes added to the submit icon.
    */
-  submitIcon?: string | string[];
+  submitIcon: string | string[];
   /**
    * CSS classes added to the reset button.
    */
-  reset?: string | string[];
+  reset: string | string[];
   /**
    * CSS classes added to the reset icon.
    */
-  resetIcon?: string | string[];
+  resetIcon: string | string[];
   /**
    * CSS classes added to the loading indicator element.
    */
-  loadingIndicator?: string | string[];
+  loadingIndicator: string | string[];
   /**
    * CSS classes added to the loading indicator icon.
    */
-  loadingIcon?: string | string[];
-};
+  loadingIcon: string | string[];
+}>;
 
 export type SearchBoxWidgetParams = {
   /**
diff --git a/src/widgets/sort-by/sort-by.tsx b/src/widgets/sort-by/sort-by.tsx
index b057095ab1..6dc3235385 100644
--- a/src/widgets/sort-by/sort-by.tsx
+++ b/src/widgets/sort-by/sort-by.tsx
@@ -19,20 +19,20 @@ import { Renderer, TransformItems, WidgetFactory } from '../../types';
 const withUsage = createDocumentationMessageGenerator({ name: 'sort-by' });
 const suit = component('SortBy');
 
-export type SortByWidgetCssClasses = {
+export type SortByWidgetCssClasses = Partial<{
   /**
    * CSS classes added to the outer `<div>`.
    */
-  root?: string | string[];
+  root: string | string[];
   /**
    * CSS classes added to the parent `<select>`.
    */
-  select?: string | string[];
+  select: string | string[];
   /**
    * CSS classes added to each `<option>`.
    */
-  option?: string | string[];
-};
+  option: string | string[];
+}>;
 
 export type SortByIndexDefinition = {
   /**
diff --git a/src/widgets/stats/stats.tsx b/src/widgets/stats/stats.tsx
index 6138ecde3d..c00ed36ff8 100644
--- a/src/widgets/stats/stats.tsx
+++ b/src/widgets/stats/stats.tsx
@@ -19,30 +19,30 @@ import { Renderer, Template, WidgetFactory } from '../../types';
 const withUsage = createDocumentationMessageGenerator({ name: 'stats' });
 const suit = component('Stats');
 
-export type StatsCSSClasses = {
+export type StatsCSSClasses = Partial<{
   /**
    * CSS class to add to the root element.
    */
-  root?: string | string[];
+  root: string | string[];
 
   /**
    * CSS class to add to the text span element.
    */
-  text?: string | string[];
-};
+  text: string | string[];
+}>;
 
-export type StatsTemplates = {
+export type StatsTemplates = Partial<{
   /**
    * Text template, provided with `hasManyResults`, `hasNoResults`, `hasOneResult`, `hitsPerPage`, `nbHits`, `nbSortedHits`, `nbPages`, `areHitsSorted`, `page`, `processingTimeMS`, `query`.
    */
-  text?: Template<
+  text: Template<
     {
       hasManyResults: boolean;
       hasNoResults: boolean;
       hasOneResult: boolean;
     } & StatsRenderState
   >;
-};
+}>;
 
 export type StatsWidgetParams = {
   /**
diff --git a/src/widgets/toggle-refinement/toggle-refinement.tsx b/src/widgets/toggle-refinement/toggle-refinement.tsx
index 107e2c098b..962773c8b7 100644
--- a/src/widgets/toggle-refinement/toggle-refinement.tsx
+++ b/src/widgets/toggle-refinement/toggle-refinement.tsx
@@ -69,31 +69,31 @@ const renderer = ({
   );
 };
 
-export type ToggleRefinementCSSClasses = {
+export type ToggleRefinementCSSClasses = Partial<{
   /**
    * CSS class to add to the root element.
    */
-  root?: string | string[];
+  root: string | string[];
   /**
    * CSS class to add to the label wrapping element.
    */
-  label?: string | string[];
+  label: string | string[];
   /**
    * CSS class to add to the checkbox.
    */
-  checkbox?: string | string[];
+  checkbox: string | string[];
   /**
    * CSS class to add to the label text.
    */
-  labelText?: string | string[];
-};
+  labelText: string | string[];
+}>;
 
-export type ToggleRefinementTemplates = {
+export type ToggleRefinementTemplates = Partial<{
   /**
    * the text that describes the toggle action
    */
-  labelText?: Template<ToggleRefinementValue>;
-};
+  labelText: Template<ToggleRefinementValue>;
+}>;
 
 export type ToggleRefinementWidgetParams = {
   /**
diff --git a/src/widgets/voice-search/voice-search.tsx b/src/widgets/voice-search/voice-search.tsx
index fe7d831e22..f63fa395d3 100644
--- a/src/widgets/voice-search/voice-search.tsx
+++ b/src/widgets/voice-search/voice-search.tsx
@@ -24,11 +24,11 @@ import { CreateVoiceSearchHelper } from '../../lib/voiceSearchHelper/types';
 const withUsage = createDocumentationMessageGenerator({ name: 'voice-search' });
 const suit = component('VoiceSearch');
 
-export type VoiceSearchCSSClasses = {
-  root?: string | string[];
-  button?: string | string[];
-  status?: string | string[];
-};
+export type VoiceSearchCSSClasses = Partial<{
+  root: string | string[];
+  button: string | string[];
+  status: string | string[];
+}>;
 
 type VoiceSearchTemplateProps = {
   status: string;
@@ -39,10 +39,10 @@ type VoiceSearchTemplateProps = {
   isBrowserSupported: boolean;
 };
 
-export type VoiceSearchTemplates = {
-  buttonText?: Template<VoiceSearchTemplateProps>;
-  status?: Template<VoiceSearchTemplateProps>;
-};
+export type VoiceSearchTemplates = Partial<{
+  buttonText: Template<VoiceSearchTemplateProps>;
+  status: Template<VoiceSearchTemplateProps>;
+}>;
 
 export type VoiceSearchWidgetParams = {
   container: string | HTMLElement;