botframework-webchat-component 4.18.0 → 4.18.1-hotfix.20260127.b53acdf

package/src/Middleware/Avatar/createCoreMiddleware.tsx

@@ -1,15 +1,16 @@
 import { AvatarMiddleware } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { FC } from 'react';
+import React, { memo } from 'react';
+import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
 import ImageAvatar from '../../Avatar/ImageAvatar';
 import InitialsAvatar from '../../Avatar/InitialsAvatar';
+import { useStyleToEmotionObject } from '../../hooks/internal/styleToEmotionObject';
 import useStyleSet from '../../hooks/useStyleSet';
-import useStyleToEmotionObject from '../../hooks/internal/useStyleToEmotionObject';
 
 const ROOT_STYLE = {
-  overflow: 'hidden',
+  overflow: ['hidden', 'clip'],
   position: 'relative',
 
   '> *': {
@@ -19,13 +20,20 @@ const ROOT_STYLE = {
   }
 };
 
-type DefaultAvatarProps = {
-  'aria-hidden'?: boolean;
-  className?: string;
-  fromUser: boolean;
-};
+const defaultAvatarPropsSchema = pipe(
+  object({
+    'aria-hidden': optional(boolean()),
+    className: optional(string()),
+    fromUser: boolean()
+  }),
+  readonly()
+);
+
+type DefaultAvatarProps = InferInput<typeof defaultAvatarPropsSchema>;
+
+function DefaultAvatar(props: DefaultAvatarProps) {
+  const { 'aria-hidden': ariaHidden = true, className, fromUser } = validateProps(defaultAvatarPropsSchema, props);
 
-const DefaultAvatar: FC<DefaultAvatarProps> = ({ 'aria-hidden': ariaHidden, className, fromUser }) => {
   const [{ avatar: avatarStyleSet }] = useStyleSet();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
 
@@ -37,25 +45,14 @@ const DefaultAvatar: FC<DefaultAvatarProps> = ({ 'aria-hidden': ariaHidden, clas
         { 'webchat__defaultAvatar--fromUser': fromUser },
         rootClassName,
         avatarStyleSet + '',
-        (className || '') + ''
+        className
       )}
     >
       <InitialsAvatar fromUser={fromUser} />
       <ImageAvatar fromUser={fromUser} />
     </div>
   );
-};
-
-DefaultAvatar.defaultProps = {
-  'aria-hidden': true,
-  className: ''
-};
-
-DefaultAvatar.propTypes = {
-  'aria-hidden': PropTypes.bool,
-  className: PropTypes.string,
-  fromUser: PropTypes.bool.isRequired
-};
+}
 
 export default function createCoreAvatarMiddleware(): AvatarMiddleware[] {
   return [
@@ -73,4 +70,6 @@ export default function createCoreAvatarMiddleware(): AvatarMiddleware[] {
   ];
 }
 
-export { DefaultAvatar };
+const MemoizedDefaultAvatar = memo(DefaultAvatar);
+
+export { MemoizedDefaultAvatar as DefaultAvatar, defaultAvatarPropsSchema, type DefaultAvatarProps };

package/src/Middleware/ScrollToEndButton/ScrollToEndButton.tsx

@@ -0,0 +1,58 @@
+import { hooks } from 'botframework-webchat-api';
+import classNames from 'classnames';
+import React, { useRef } from 'react';
+
+import useFocusAccessKeyEffect from '../../Utils/AccessKeySink/useFocusAccessKeyEffect';
+import useLocalizeAccessKey from '../../hooks/internal/useLocalizeAccessKey';
+import useStyleSet from '../../hooks/useStyleSet';
+import { useLiveRegion } from '../../providers/LiveRegionTwin';
+
+const { useLocalizer, useStyleOptions } = hooks;
+
+type ScrollToEndButtonProps = Readonly<{ onClick?: (() => void) | undefined }>;
+
+const newMessagesAccessKey = 'U u Ü ü';
+
+const ScrollToEndButton = ({ onClick }: ScrollToEndButtonProps) => {
+  const focusRef = useRef(null);
+  const [{ scrollToEndButton: scrollToEndButtonStyleSet }] = useStyleSet();
+  const [{ scrollToEndButtonBehavior }] = useStyleOptions();
+  const localize = useLocalizer();
+  const localizeAccessKey = useLocalizeAccessKey('accessible name');
+  const shouldShowNewMessagesButton = scrollToEndButtonBehavior !== 'any';
+
+  const text = localize(shouldShowNewMessagesButton ? 'TRANSCRIPT_NEW_MESSAGES' : 'TRANSCRIPT_MORE_MESSAGES');
+
+  const liveRegionText = localize(
+    'TRANSCRIPT_LIVE_REGION_NEW_MESSAGES_ALT',
+    localizeAccessKey(newMessagesAccessKey),
+    text
+  );
+
+  // Setup and announce new messages button shortcuts
+  useFocusAccessKeyEffect(shouldShowNewMessagesButton ? newMessagesAccessKey : '', focusRef);
+
+  useLiveRegion(
+    () => shouldShowNewMessagesButton && <div className="webchat__scroll-to-end-button__status">{liveRegionText}</div>,
+    [liveRegionText, shouldShowNewMessagesButton]
+  );
+
+  return (
+    <button
+      aria-keyshortcuts={shouldShowNewMessagesButton ? localizeAccessKey(newMessagesAccessKey) : undefined}
+      aria-label={text}
+      className={classNames('webchat__scroll-to-end-button', scrollToEndButtonStyleSet + '')}
+      onClick={onClick}
+      ref={focusRef}
+      tabIndex={0}
+      type="button"
+    >
+      {text}
+    </button>
+  );
+};
+
+ScrollToEndButton.displayName = 'ScrollToEndButton';
+
+// TODO: Will fail test if memo().
+export default ScrollToEndButton;

package/src/ScreenReaderText.tsx

@@ -1,11 +1,10 @@
 /* eslint react/forbid-dom-props: ["off"] */
 
-import PropTypes from 'prop-types';
+import { validateProps } from 'botframework-webchat-api/internal';
 import React, { forwardRef, memo } from 'react';
 
-import type { VFC } from 'react';
-
-import useStyleToEmotionObject from './hooks/internal/useStyleToEmotionObject';
+import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+import { useStyleToEmotionObject } from './hooks/internal/styleToEmotionObject';
 
 const ROOT_STYLE = {
   // .sr-only - This component is intended to be invisible to the visual Web Chat user, but read by the AT when using a screen reader
@@ -23,41 +22,35 @@ const ROOT_STYLE = {
   width: 1
 };
 
-type ScreenReaderTextProps = {
-  'aria-hidden'?: boolean;
-  id?: string;
-  text: string;
-};
+const screenReaderTextPropsSchema = pipe(
+  object({
+    'aria-hidden': optional(boolean()),
+    id: optional(string()),
+    text: string()
+  }),
+  readonly()
+);
 
-const ScreenReaderText: VFC<ScreenReaderTextProps> = forwardRef<HTMLDivElement, ScreenReaderTextProps>(
-  ({ 'aria-hidden': ariaHidden, id, text }, ref) => {
-    const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+type ScreenReaderTextProps = InferInput<typeof screenReaderTextPropsSchema>;
 
-    if (ariaHidden && !id) {
-      console.warn(
-        'botframework-webchat assertion: when "aria-hidden" is set, the screen reader text should be read by "aria-labelledby". Thus, "id" must be set.'
-      );
-    }
+// eslint-disable-next-line prefer-arrow-callback
+const ScreenReaderText = forwardRef<HTMLDivElement, ScreenReaderTextProps>(function ScreenReaderText(props, ref) {
+  const { 'aria-hidden': ariaHidden, id, text } = validateProps(screenReaderTextPropsSchema, props);
 
-    return (
-      <div aria-hidden={ariaHidden} className={rootClassName} id={id} ref={ref}>
-        {text}
-      </div>
+  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+
+  if (ariaHidden && !id) {
+    console.warn(
+      'botframework-webchat assertion: when "aria-hidden" is set, the screen reader text should be read by "aria-labelledby". Thus, "id" must be set.'
     );
   }
-);
-
-ScreenReaderText.defaultProps = {
-  'aria-hidden': undefined,
-  id: undefined
-};
-
-ScreenReaderText.propTypes = {
-  'aria-hidden': PropTypes.bool,
-  id: PropTypes.string,
-  text: PropTypes.string.isRequired
-};
 
-ScreenReaderText.displayName = 'ScreenReaderText';
+  return (
+    <div aria-hidden={ariaHidden} className={rootClassName} id={id} ref={ref}>
+      {text}
+    </div>
+  );
+});
 
 export default memo(ScreenReaderText);
+export { screenReaderTextPropsSchema, type ScreenReaderTextProps };

package/src/SendBox/Assets/SendIcon.js

@@ -2,7 +2,7 @@ import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import React from 'react';
 
-import useStyleToEmotionObject from '../../hooks/internal/useStyleToEmotionObject';
+import { useStyleToEmotionObject } from '../../hooks/internal/styleToEmotionObject';
 
 const { useDirection } = hooks;
 

package/src/SendBox/AutoResizeTextArea.tsx

@@ -1,37 +1,39 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React, {
   ChangeEventHandler,
   FocusEventHandler,
   forwardRef,
   KeyboardEventHandler,
-  ReactEventHandler
+  ReactEventHandler,
+  type MouseEventHandler
 } from 'react';
 
 import AccessibleTextArea from '../Utils/AccessibleTextArea';
 import useEnterKeyHint from '../hooks/internal/useEnterKeyHint';
 import useStyleSet from '../hooks/useStyleSet';
 
-type AutoResizeTextAreaProps = {
-  'aria-errormessage'?: string;
-  'aria-label'?: string;
-  className?: string;
-  'data-id'?: string;
-  disabled?: boolean;
-  enterKeyHint?: string;
-  inputMode?: 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
-  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
-  onFocus?: FocusEventHandler<HTMLTextAreaElement>;
-  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
-  onKeyDownCapture?: KeyboardEventHandler<HTMLTextAreaElement>;
-  onKeyPress?: KeyboardEventHandler<HTMLTextAreaElement>;
-  onSelect?: ReactEventHandler<HTMLTextAreaElement>;
-  placeholder?: string;
-  readOnly?: boolean;
-  rows?: number;
-  textAreaClassName?: string;
-  value?: string;
-};
+type AutoResizeTextAreaProps = Readonly<{
+  'aria-errormessage'?: string | undefined;
+  'aria-label'?: string | undefined;
+  className?: string | undefined;
+  'data-id'?: string | undefined;
+  'data-testid'?: string | undefined;
+  disabled?: boolean | undefined;
+  enterKeyHint?: string | undefined;
+  inputMode?: 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' | undefined;
+  onChange?: ChangeEventHandler<HTMLTextAreaElement> | undefined;
+  onClick?: MouseEventHandler<HTMLTextAreaElement> | undefined;
+  onFocus?: FocusEventHandler<HTMLTextAreaElement> | undefined;
+  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement> | undefined;
+  onKeyDownCapture?: KeyboardEventHandler<HTMLTextAreaElement> | undefined;
+  onKeyPress?: KeyboardEventHandler<HTMLTextAreaElement> | undefined;
+  onSelect?: ReactEventHandler<HTMLTextAreaElement> | undefined;
+  placeholder?: string | undefined;
+  readOnly?: boolean | undefined;
+  rows?: number | undefined;
+  textAreaClassName?: string | undefined;
+  value?: string | undefined;
+}>;
 
 const AutoResizeTextArea = forwardRef<HTMLTextAreaElement, AutoResizeTextAreaProps>(
   (
@@ -40,10 +42,12 @@ const AutoResizeTextArea = forwardRef<HTMLTextAreaElement, AutoResizeTextAreaPro
       'aria-label': ariaLabel,
       className,
       'data-id': dataId,
+      'data-testid': dataTestId,
       disabled,
       enterKeyHint,
       inputMode,
       onChange,
+      onClick,
       onFocus,
       onKeyDown,
       onKeyDownCapture,
@@ -72,9 +76,11 @@ const AutoResizeTextArea = forwardRef<HTMLTextAreaElement, AutoResizeTextAreaPro
           aria-label={ariaLabel}
           className={classNames('webchat__auto-resize-textarea__textarea', textAreaClassName)}
           data-id={dataId}
+          data-testid={dataTestId}
           disabled={disabled}
           inputMode={inputMode}
           onChange={onChange}
+          onClick={onClick}
           onFocus={onFocus}
           onKeyDown={onKeyDown}
           onKeyDownCapture={onKeyDownCapture}
@@ -91,46 +97,4 @@ const AutoResizeTextArea = forwardRef<HTMLTextAreaElement, AutoResizeTextAreaPro
   }
 );
 
-AutoResizeTextArea.defaultProps = {
-  'aria-errormessage': undefined,
-  'aria-label': undefined,
-  'data-id': undefined,
-  className: undefined,
-  disabled: undefined,
-  enterKeyHint: undefined,
-  inputMode: undefined,
-  onChange: undefined,
-  onFocus: undefined,
-  onKeyDown: undefined,
-  onKeyDownCapture: undefined,
-  onKeyPress: undefined,
-  onSelect: undefined,
-  placeholder: undefined,
-  readOnly: undefined,
-  rows: undefined,
-  textAreaClassName: undefined,
-  value: ''
-};
-
-AutoResizeTextArea.propTypes = {
-  'aria-errormessage': PropTypes.string,
-  'aria-label': PropTypes.string,
-  className: PropTypes.string,
-  'data-id': PropTypes.string,
-  disabled: PropTypes.bool,
-  enterKeyHint: PropTypes.string,
-  inputMode: PropTypes.oneOf(['text', 'none', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onKeyDownCapture: PropTypes.func,
-  onKeyPress: PropTypes.func,
-  onSelect: PropTypes.func,
-  placeholder: PropTypes.string,
-  readOnly: PropTypes.bool,
-  rows: PropTypes.number,
-  textAreaClassName: PropTypes.string,
-  value: PropTypes.string
-};
-
 export default AutoResizeTextArea;

package/src/SendBox/BasicSendBox.tsx

@@ -1,9 +1,11 @@
 import { SendBoxToolbarMiddlewareProxy, hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
 import { Constants } from 'botframework-webchat-core';
 import classNames from 'classnames';
-import React, { FC } from 'react';
+import React, { memo } from 'react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import useStyleSet from '../hooks/useStyleSet';
 import useWebSpeechPonyfill from '../hooks/useWebSpeechPonyfill';
 import useErrorMessageId from '../providers/internal/SendBox/useErrorMessageId';
@@ -13,13 +15,11 @@ import SendButton from './SendButton';
 import SuggestedActions from './SuggestedActions';
 import TextBox from './TextBox';
 
-import type { WebChatActivity } from 'botframework-webchat-core';
-
 const {
   DictateState: { DICTATING, STARTING }
 } = Constants;
 
-const { useActivities, useDirection, useDictateState, useStyleOptions } = hooks;
+const { useDirection, useDictateState, useStyleOptions } = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__send-box': {
@@ -31,26 +31,24 @@ const ROOT_STYLE = {
   }
 };
 
-// TODO: [P3] We should consider exposing core/src/definitions and use it instead
-function activityIsSpeakingOrQueuedToSpeak(activity: WebChatActivity) {
-  return activity.type === 'message' && activity.channelData?.speak;
-}
-
 function useSendBoxSpeechInterimsVisible(): [boolean] {
-  const [activities] = useActivities();
   const [dictateState] = useDictateState();
 
-  return [
-    (dictateState === STARTING || dictateState === DICTATING) &&
-      !activities.filter(activityIsSpeakingOrQueuedToSpeak).length
-  ];
+  return [dictateState === STARTING || dictateState === DICTATING];
 }
 
-type BasicSendBoxProps = Readonly<{
-  className?: string;
-}>;
+const basicSendBoxPropsSchema = pipe(
+  object({
+    className: optional(string())
+  }),
+  readonly()
+);
+
+type BasicSendBoxProps = InferInput<typeof basicSendBoxPropsSchema>;
+
+function BasicSendBox(props: BasicSendBoxProps) {
+  const { className } = validateProps(basicSendBoxPropsSchema, props);
 
-const BasicSendBox: FC<BasicSendBoxProps> = ({ className }) => {
   const [{ sendBoxButtonAlignment }] = useStyleOptions();
   const [{ sendBox: sendBoxStyleSet }] = useStyleSet();
   const [{ SpeechRecognition = undefined } = {}] = useWebSpeechPonyfill();
@@ -71,6 +69,7 @@ const BasicSendBox: FC<BasicSendBoxProps> = ({ className }) => {
 
   return (
     <div
+      aria-describedby={errorMessageId}
       aria-errormessage={errorMessageId}
       aria-invalid={!!errorMessageId}
       className={classNames('webchat__send-box', sendBoxStyleSet + '', rootClassName + '', (className || '') + '')}
@@ -93,8 +92,7 @@ const BasicSendBox: FC<BasicSendBoxProps> = ({ className }) => {
       </div>
     </div>
   );
-};
-
-export default BasicSendBox;
+}
 
-export { useSendBoxSpeechInterimsVisible };
+export default memo(BasicSendBox);
+export { basicSendBoxPropsSchema, useSendBoxSpeechInterimsVisible, type BasicSendBoxProps };

package/src/SendBox/DictationInterims.tsx

@@ -1,13 +1,15 @@
 /* eslint react/no-array-index-key: "off" */
 
-import { Constants } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
+import { Constants } from 'botframework-webchat-core';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { FC } from 'react';
+import React, { memo } from 'react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import useStyleSet from '../hooks/useStyleSet';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import testIds from '../testIds';
 
 const {
   DictateState: { DICTATING, STARTING, STOPPING }
@@ -20,11 +22,18 @@ const ROOT_STYLE = {
   display: 'flex'
 };
 
-type DictationInterimsProps = {
-  className?: string;
-};
+const dictationInterimsPropsSchema = pipe(
+  object({
+    className: optional(string())
+  }),
+  readonly()
+);
+
+type DictationInterimsProps = InferInput<typeof dictationInterimsPropsSchema>;
+
+function DictationInterims(props: DictationInterimsProps) {
+  const { className } = validateProps(dictationInterimsPropsSchema, props);
 
-const DictationInterims: FC<DictationInterimsProps> = ({ className }) => {
   const [dictateInterims] = useDictateInterims();
   const [dictateState] = useDictateState();
   const [{ dictationInterims: dictationInterimsStyleSet }] = useStyleSet();
@@ -32,13 +41,19 @@ const DictationInterims: FC<DictationInterimsProps> = ({ className }) => {
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
 
   return dictateState === STARTING || dictateState === STOPPING ? (
-    <p className={classNames(dictationInterimsStyleSet + '', rootClassName, (className || '') + '', 'status')}>
+    <p
+      className={classNames(dictationInterimsStyleSet + '', rootClassName, className, 'status')}
+      data-testid={testIds.sendBoxSpeechBox}
+    >
       {dictateState === STARTING && localize('SPEECH_INPUT_STARTING')}
     </p>
   ) : (
     dictateState === DICTATING &&
       (dictateInterims.length ? (
-        <p className={classNames(dictationInterimsStyleSet + '', rootClassName, (className || '') + '', 'dictating')}>
+        <p
+          className={classNames(dictationInterimsStyleSet + '', rootClassName, className, 'dictating')}
+          data-testid={testIds.sendBoxSpeechBox}
+        >
           {dictateInterims.map((interim, index) => (
             <span key={index}>
               {interim}
@@ -47,22 +62,18 @@ const DictationInterims: FC<DictationInterimsProps> = ({ className }) => {
           ))}
         </p>
       ) : (
-        <p className={classNames(dictationInterimsStyleSet + '', rootClassName, (className || '') + '', 'status')}>
+        <p
+          className={classNames(dictationInterimsStyleSet + '', rootClassName, className, 'status')}
+          data-testid={testIds.sendBoxSpeechBox}
+        >
           {localize('SPEECH_INPUT_LISTENING')}
         </p>
       ))
   );
-};
-
-DictationInterims.defaultProps = {
-  className: ''
-};
-
-DictationInterims.propTypes = {
-  className: PropTypes.string
-};
+}
 
 // TODO: [P3] After speech started, when clicking on the transcript, it should
 //       stop the dictation and allow the user to type-correct the transcript
 
-export default DictationInterims;
+export default memo(DictationInterims);
+export { dictationInterimsPropsSchema, type DictationInterimsProps };

package/src/SendBox/IconButton.tsx

@@ -1,23 +1,43 @@
 import { hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { FC, MouseEventHandler, ReactNode, useRef } from 'react';
+import React, { memo, useRef, type MouseEventHandler } from 'react';
+import {
+  boolean,
+  custom,
+  function_,
+  object,
+  optional,
+  pipe,
+  readonly,
+  safeParse,
+  string,
+  type InferInput
+} from 'valibot';
 
-import AccessibleButton from '../Utils/AccessibleButton';
 import useFocusVisible from '../hooks/internal/useFocusVisible';
 import useStyleSet from '../hooks/useStyleSet';
+import reactNode from '../types/internal/reactNode';
+import AccessibleButton from '../Utils/AccessibleButton';
 
 const { useStyleOptions } = hooks;
 
-type IconButtonProps = {
-  alt?: string;
-  children?: ReactNode;
-  className?: string;
-  disabled?: boolean;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-};
+const iconButtonPropsSchema = pipe(
+  object({
+    alt: optional(string()),
+    children: optional(reactNode()),
+    className: optional(string()),
+    disabled: optional(boolean()),
+    onClick: optional(custom<MouseEventHandler<HTMLButtonElement>>(value => safeParse(function_(), value).success))
+  }),
+  readonly()
+);
+
+type IconButtonProps = InferInput<typeof iconButtonPropsSchema>;
+
+function IconButton(props: IconButtonProps) {
+  const { alt, children, className, disabled, onClick } = validateProps(iconButtonPropsSchema, props);
 
-const IconButton: FC<IconButtonProps> = ({ alt, children, className, disabled, onClick }) => {
   const [{ sendBoxButton: sendBoxButtonStyleSet }] = useStyleSet();
   const [{ sendBoxButtonAlignment }] = useStyleOptions();
   const buttonRef = useRef<HTMLButtonElement>();
@@ -33,7 +53,7 @@ const IconButton: FC<IconButtonProps> = ({ alt, children, className, disabled, o
           'webchat__icon-button--focus-visible': focusVisible,
           'webchat__icon-button--stretch': sendBoxButtonAlignment !== 'bottom' && sendBoxButtonAlignment !== 'top'
         },
-        className + ''
+        className
       )}
       disabled={disabled}
       onClick={disabled ? undefined : onClick}
@@ -46,22 +66,7 @@ const IconButton: FC<IconButtonProps> = ({ alt, children, className, disabled, o
       <div className="webchat__icon-button__keyboard-focus-indicator" />
     </AccessibleButton>
   );
-};
-
-IconButton.defaultProps = {
-  alt: '',
-  children: undefined,
-  className: '',
-  disabled: false,
-  onClick: undefined
-};
-
-IconButton.propTypes = {
-  alt: PropTypes.string,
-  children: PropTypes.any,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func
-};
+}
 
-export default IconButton;
+export default memo(IconButton);
+export { iconButtonPropsSchema, type IconButtonProps };