From f016326cb7103c8593af9be80d03407de37a7797 Mon Sep 17 00:00:00 2001
From: Eunjae Lee <eunjae.lee@algolia.com>
Date: Mon, 20 May 2019 14:52:39 +0200
Subject: [PATCH] fix(types): fix cssClasses of voiceSearch (#3783)

* fix(types): fix cssClasses of voiceSearch

* fix(types): handle the situation where type of cssClasses of voiceSearch changes

* fix(types): change type of cssClasses of voiceSearch to fit in with the component
---
 src/components/VoiceSearch/VoiceSearch.tsx | 13 ++++++++-----
 src/widgets/voice-search/voice-search.tsx  | 12 +++++++-----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/VoiceSearch/VoiceSearch.tsx b/src/components/VoiceSearch/VoiceSearch.tsx
index bea3bb818a..668bfb6df5 100644
--- a/src/components/VoiceSearch/VoiceSearch.tsx
+++ b/src/components/VoiceSearch/VoiceSearch.tsx
@@ -1,18 +1,21 @@
 import React from 'preact-compat';
 import Template from '../Template/Template';
 
-import {
-  VoiceSearchCSSClasses,
-  VoiceSearchTemplates,
-} from '../../widgets/voice-search/voice-search';
+import { VoiceSearchTemplates } from '../../widgets/voice-search/voice-search';
 
 import {
   VoiceListeningState,
   ToggleListening,
 } from '../../lib/voiceSearchHelper';
 
+export type VoiceSearchComponentCSSClasses = {
+  root: string;
+  button: string;
+  status: string;
+};
+
 export type VoiceSearchProps = {
-  cssClasses: VoiceSearchCSSClasses;
+  cssClasses: VoiceSearchComponentCSSClasses;
   isBrowserSupported: boolean;
   isListening: boolean;
   toggleListening: ToggleListening;
diff --git a/src/widgets/voice-search/voice-search.tsx b/src/widgets/voice-search/voice-search.tsx
index 1718734ec4..ce16c347bc 100644
--- a/src/widgets/voice-search/voice-search.tsx
+++ b/src/widgets/voice-search/voice-search.tsx
@@ -8,7 +8,9 @@ import { component } from '../../lib/suit';
 import connectVoiceSearch, {
   VoiceSearchRenderer,
 } from '../../connectors/voice-search/connectVoiceSearch';
-import VoiceSearch from '../../components/VoiceSearch/VoiceSearch';
+import VoiceSearch, {
+  VoiceSearchComponentCSSClasses,
+} from '../../components/VoiceSearch/VoiceSearch';
 import defaultTemplates from './defaultTemplates';
 import { WidgetFactory, Template } from '../../types';
 
@@ -16,9 +18,9 @@ const withUsage = createDocumentationMessageGenerator({ name: 'voice-search' });
 const suit = component('VoiceSearch');
 
 export type VoiceSearchCSSClasses = {
-  root: string;
-  button: string;
-  status: string;
+  root: string | string[];
+  button: string | string[];
+  status: string | string[];
 };
 
 type VoiceSearchTemplateProps = {
@@ -44,7 +46,7 @@ type VoiceSearchWidgetParams = {
 
 interface VoiceSearchRendererWidgetParams extends VoiceSearchWidgetParams {
   container: HTMLElement;
-  cssClasses: VoiceSearchCSSClasses;
+  cssClasses: VoiceSearchComponentCSSClasses;
   templates: VoiceSearchTemplates;
 }