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

Author: Eunjae Lee

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;

src/widgets/voice-search/voice-search.tsx

@@ -8,17 +8,19 @@ 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';
 
 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;
 }