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

package/src/Transcript/ActivityTree.tsx

@@ -0,0 +1,35 @@
+import { ActivityGroupingDecorator } from 'botframework-webchat-api/decorator';
+import React, { Fragment, memo } from 'react';
+
+import { type GroupedRenderingActivities } from '../providers/GroupedRenderingActivities/GroupedRenderingActivities';
+import useGroupedRenderingActivities from '../providers/GroupedRenderingActivities/useGroupedRenderingActivities';
+
+type ActivityGroupProps = Readonly<{
+  group: GroupedRenderingActivities;
+}>;
+
+const ActivityTreeGroup = memo(({ group }: ActivityGroupProps) => (
+  <ActivityGroupingDecorator activities={group.activities} groupingName={group.groupingName}>
+    {group.children.map(child => (
+      <ActivityTreeGroup group={child} key={child.key} />
+    ))}
+  </ActivityGroupingDecorator>
+));
+
+ActivityTreeGroup.displayName = 'ActivityTreeGroup';
+
+const ActivityTree = () => {
+  const [group] = useGroupedRenderingActivities();
+
+  return (
+    <Fragment>
+      {group.map(child => (
+        <ActivityTreeGroup group={child} key={child.key} />
+      ))}
+    </Fragment>
+  );
+};
+
+ActivityTree.displayName = 'ActivityTree';
+
+export default memo(ActivityTree);

package/src/Transcript/FocusTrap.tsx

@@ -1,26 +1,43 @@
-import PropTypes from 'prop-types';
-import React, { Fragment, memo, useCallback, useRef } from 'react';
+/* eslint-disable no-magic-numbers */
+import React, {
+  Fragment,
+  memo,
+  type FocusEvent,
+  type KeyboardEventHandler,
+  type ReactNode,
+  useCallback,
+  useRef
+} from 'react';
 
-import type { FC, KeyboardEventHandler, PropsWithChildren } from 'react';
-
-import FocusRedirector from '../Utils/FocusRedirector';
 import tabbableElements from '../Utils/tabbableElements';
 import { useRefFrom } from 'use-ref-from';
 
-type FocusTrapProps = PropsWithChildren<{
+const FocusTrap = ({
+  children,
+  onFocus,
+  onLeave,
+  targetClassName
+}: Readonly<{
+  children: ReactNode;
   onFocus: () => void;
   onLeave: () => void;
-}>;
-
-const FocusTrap: FC<FocusTrapProps> = ({ children, onFocus, onLeave }) => {
+  targetClassName?: string | undefined;
+}>) => {
   const bodyRef = useRef<HTMLDivElement>();
-  const onLeaveRef = useRefFrom<() => void>(onLeave);
+  const lastFocused = useRef<HTMLElement>();
+  const onFocusRef = useRefFrom(onFocus);
+  const onLeaveRef = useRefFrom(onLeave);
 
   const getTabbableElementsInBody = useCallback(
     () => tabbableElements(bodyRef.current).filter(element => element.getAttribute('aria-disabled') !== 'true'),
     [bodyRef]
   );
 
+  const focusOrTriggerLeave = useCallback(
+    (element: HTMLElement | undefined) => (element ? element.focus() : onLeaveRef.current?.()),
+    [onLeaveRef]
+  );
+
   const handleBodyKeyDown: KeyboardEventHandler = useCallback(
     event => {
       if (event.key === 'Escape') {
@@ -28,47 +45,78 @@ const FocusTrap: FC<FocusTrapProps> = ({ children, onFocus, onLeave }) => {
         event.stopPropagation();
 
         onLeaveRef.current?.();
+      } else if (event.key === 'Tab') {
+        const activeElement = document.activeElement as HTMLElement;
+        const focusables = getTabbableElementsInBody();
+        const focusedIndex = focusables.indexOf(activeElement);
+
+        if (event.shiftKey && focusedIndex === 0) {
+          event.preventDefault();
+
+          focusOrTriggerLeave(focusables.at(-1));
+        } else if (!event.shiftKey && focusedIndex === focusables.length - 1) {
+          event.preventDefault();
+
+          focusOrTriggerLeave(focusables.at(0));
+        }
       }
     },
-    [onLeaveRef]
+    [focusOrTriggerLeave, getTabbableElementsInBody, onLeaveRef]
   );
 
-  const handleFirstSentinelFocus: () => void = useCallback(() => {
-    const focusables = getTabbableElementsInBody();
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLDivElement, Element>) => {
+      onFocusRef.current?.();
+
+      lastFocused.current = event.target;
+    },
+    [lastFocused, onFocusRef]
+  );
+
+  const handleBlur = useCallback(
+    event => {
+      const { target } = event;
+      const focusables = getTabbableElementsInBody();
+
+      // When blurred element became non-focusable, move to the first focusable element if available.
+      // Otherwise trigger leave.
+      if (!focusables.includes(target)) {
+        event.preventDefault();
+        event.stopPropagation();
 
-    const lastTabbableElement = focusables[focusables.length - 1];
+        focusOrTriggerLeave(focusables.at(0));
+      }
+    },
+    [focusOrTriggerLeave, getTabbableElementsInBody]
+  );
 
-    lastTabbableElement ? lastTabbableElement.focus() : onLeaveRef.current?.();
-  }, [getTabbableElementsInBody, onLeaveRef]);
+  const handleTrapFocus = useCallback(
+    event => {
+      event.preventDefault();
+      event.stopPropagation();
+      event.target.blur();
 
-  const handleLastSentinelFocus: () => void = useCallback(() => {
-    const [firstTabbableElement] = getTabbableElementsInBody();
+      const focusables = getTabbableElementsInBody();
 
-    firstTabbableElement ? firstTabbableElement.focus() : onLeaveRef.current?.();
-  }, [getTabbableElementsInBody, onLeaveRef]);
+      if (lastFocused.current && focusables.includes(lastFocused.current)) {
+        lastFocused.current.focus();
+      } else {
+        focusOrTriggerLeave(focusables.at(0));
+      }
+    },
+    [focusOrTriggerLeave, getTabbableElementsInBody]
+  );
 
   return (
     <Fragment>
-      <FocusRedirector onFocus={handleFirstSentinelFocus} />
-      <div onFocus={onFocus} onKeyDown={handleBodyKeyDown} ref={bodyRef}>
+      <div onBlur={handleBlur} onFocus={handleFocus} onKeyDown={handleBodyKeyDown} ref={bodyRef}>
         {children}
       </div>
-      <FocusRedirector onFocus={handleLastSentinelFocus} />
+      <div aria-hidden="true" className={targetClassName} onFocus={handleTrapFocus} tabIndex={-1} />
     </Fragment>
   );
 };
 
-FocusTrap.defaultProps = {
-  children: undefined,
-  onFocus: undefined
-};
-
-FocusTrap.propTypes = {
-  children: PropTypes.any,
-  onFocus: PropTypes.func,
-  onLeave: PropTypes.func.isRequired
-};
-
 FocusTrap.displayName = 'FocusTrap';
 
 export default memo(FocusTrap);

package/src/Transcript/LiveRegion/SendFailed.tsx

@@ -1,11 +1,10 @@
 import { hooks } from 'botframework-webchat-api';
-import { useEffect, useMemo } from 'react';
-import type { VFC } from 'react';
+import { memo, useMemo } from 'react';
 
+import usePrevious from '../../hooks/internal/usePrevious';
+import { useLiveRegion } from '../../providers/LiveRegionTwin';
 import { SEND_FAILED } from '../../types/internal/SendStatus';
 import isPresentational from './isPresentational';
-import usePrevious from '../../hooks/internal/usePrevious';
-import useQueueStaticElement from '../../providers/LiveRegionTwin/useQueueStaticElement';
 
 const { useGetActivityByKey, useLocalizer, useSendStatusByActivityKey } = hooks;
 
@@ -19,11 +18,10 @@ const { useGetActivityByKey, useLocalizer, useSendStatusByActivityKey } = hooks;
  *
  * Thus, we need to use a live region "footnote" to indicate the message was failed to send.
  */
-const LiveRegionSendFailed: VFC<{}> = () => {
+const LiveRegionSendFailed = () => {
   const [sendStatusByActivityKey] = useSendStatusByActivityKey();
   const getActivityByKey = useGetActivityByKey();
   const localize = useLocalizer();
-  const queueStaticElement = useQueueStaticElement();
 
   /**
    * List of keys of outgoing and non-presentational activities that are failed to send.
@@ -63,11 +61,11 @@ const LiveRegionSendFailed: VFC<{}> = () => {
     return false;
   }, [activityKeysOfSendFailed, prevActivityKeysOfSendFailed]);
 
-  useEffect(() => {
-    hasNewSendFailed && queueStaticElement(liveRegionSendFailedAlt);
-  }, [hasNewSendFailed, liveRegionSendFailedAlt, queueStaticElement]);
+  useLiveRegion(() => hasNewSendFailed && liveRegionSendFailedAlt, [hasNewSendFailed, liveRegionSendFailedAlt]);
 
   return null;
 };
 
-export default LiveRegionSendFailed;
+LiveRegionSendFailed.displayName = 'LiveRegionSendFailed';
+
+export default memo(LiveRegionSendFailed);

package/src/Transcript/LiveRegionTranscript.tsx

@@ -1,47 +1,28 @@
 import { hooks } from 'botframework-webchat-api';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useEffect, useMemo, useRef } from 'react';
-import type { FC, RefObject, VFC } from 'react';
 import type { WebChatActivity } from 'botframework-webchat-core';
+import type { RefObject } from 'react';
+import React, { memo, useEffect, useMemo, useRef } from 'react';
 
-import isPresentational from './LiveRegion/isPresentational';
 import LiveRegionActivity from '../LiveRegion/LiveRegionActivity';
-import LiveRegionSendFailed from './LiveRegion/SendFailed';
-import LiveRegionTwinComposer from '../providers/LiveRegionTwin/LiveRegionTwinComposer';
 import tabbableElements from '../Utils/tabbableElements';
 import useLocalizeAccessKey from '../hooks/internal/useLocalizeAccessKey';
-import useQueueStaticElement from '../providers/LiveRegionTwin/useQueueStaticElement';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 import useSuggestedActionsAccessKey from '../hooks/internal/useSuggestedActionsAccessKey';
+import { useQueueStaticElement } from '../providers/LiveRegionTwin';
+import LiveRegionSendFailed from './LiveRegion/SendFailed';
+import isPresentational from './LiveRegion/isPresentational';
 import useTypistNames from './useTypistNames';
 
 import type { ActivityElementMap } from './types';
 
-const { useActivities, useGetKeyByActivity, useLocalizer, useStyleOptions } = hooks;
-
-const ROOT_STYLE = {
-  '&.webchat__live-region-transcript': {
-    '& .webchat__live-region-transcript__note, & .webchat__live-region-transcript__note, & .webchat__live-region-transcript__text-element':
-      {
-        color: 'transparent',
-        height: 1,
-        overflow: 'hidden',
-        position: 'absolute',
-        top: 0,
-        whiteSpace: 'nowrap',
-        width: 1
-      }
-  }
-};
+const { useActivities, useGetKeyByActivity, useLocalizer } = hooks;
 
 type RenderingActivities = Map<string, WebChatActivity>;
 
-type LiveRegionTranscriptCoreProps = Readonly<{
+type LiveRegionTranscriptProps = Readonly<{
   activityElementMapRef: RefObject<ActivityElementMap>;
 }>;
 
-const LiveRegionTranscriptCore: FC<LiveRegionTranscriptCoreProps> = ({ activityElementMapRef }) => {
+const LiveRegionTranscript = ({ activityElementMapRef }: LiveRegionTranscriptProps) => {
   // We are looking for all activities instead of just those will be rendered.
   // This is because some activities that chosen not be rendered in the chat history,
   // we might still need to be read by screen reader. Such as, suggested actions without text content.
@@ -147,43 +128,11 @@ const LiveRegionTranscriptCore: FC<LiveRegionTranscriptCoreProps> = ({ activityE
     keyedActivities
   ]);
 
-  useEffect(() => {
-    typingIndicator && queueStaticElement(typingIndicator);
-  }, [queueStaticElement, typingIndicator]);
+  useMemo(() => typingIndicator && queueStaticElement(typingIndicator), [queueStaticElement, typingIndicator]);
 
   return <LiveRegionSendFailed />;
 };
 
-type LiveRegionTranscriptProps = {
-  activityElementMapRef: RefObject<ActivityElementMap>;
-};
-
-const LiveRegionTranscript: VFC<LiveRegionTranscriptProps> = ({ activityElementMapRef }) => {
-  const [{ internalLiveRegionFadeAfter }] = useStyleOptions();
-  const localize = useLocalizer();
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
-
-  const transcriptRoleDescription = localize('TRANSCRIPT_ARIA_ROLE_ALT');
-
-  return (
-    <LiveRegionTwinComposer
-      aria-roledescription={transcriptRoleDescription}
-      className={classNames('webchat__live-region-transcript', rootClassName)}
-      fadeAfter={internalLiveRegionFadeAfter}
-      role="log"
-      textElementClassName="webchat__live-region-transcript__text-element"
-    >
-      <LiveRegionTranscriptCore activityElementMapRef={activityElementMapRef} />
-    </LiveRegionTwinComposer>
-  );
-};
-
-LiveRegionTranscript.propTypes = {
-  // PropTypes cannot be fully expressed in TypeScript.
-  // @ts-ignore
-  activityElementMapRef: PropTypes.shape({
-    current: PropTypes.instanceOf(Map)
-  }).isRequired
-};
+LiveRegionTranscript.displayName = 'LiveRegionTranscript';
 
-export default LiveRegionTranscript;
+export default memo(LiveRegionTranscript);

package/src/Transcript/TranscriptActivity.tsx

@@ -0,0 +1,105 @@
+import { hooks, type ActivityComponentFactory } from 'botframework-webchat-api';
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { memo, useCallback, useMemo } from 'react';
+
+import useFirstActivityInSenderGroup from '../Middleware/ActivityGrouping/ui/SenderGrouping/useFirstActivity';
+import useLastActivityInSenderGroup from '../Middleware/ActivityGrouping/ui/SenderGrouping/useLastActivity';
+import useFirstActivityInStatusGroup from '../Middleware/ActivityGrouping/ui/StatusGrouping/useFirstActivity';
+import useLastActivityInStatusGroup from '../Middleware/ActivityGrouping/ui/StatusGrouping/useLastActivity';
+import useActivityElementMapRef from '../providers/ChatHistoryDOM/useActivityElementRef';
+import isZeroOrPositive from '../Utils/isZeroOrPositive';
+import ActivityRow from './ActivityRow';
+
+const { useCreateActivityStatusRenderer, useCreateAvatarRenderer, useGetKeyByActivity, useStyleOptions } = hooks;
+
+type TranscriptActivityProps = Readonly<{
+  activity: WebChatActivity;
+  renderActivity: Exclude<ReturnType<ActivityComponentFactory>, false>;
+}>;
+
+const TranscriptActivity = ({ activity, renderActivity }: TranscriptActivityProps) => {
+  const [{ bubbleFromUserNubOffset, bubbleNubOffset, groupTimestamp, showAvatarInGroup }] = useStyleOptions();
+  const [firstActivityInSenderGroup] = useFirstActivityInSenderGroup();
+  const [firstActivityInStatusGroup] = useFirstActivityInStatusGroup();
+  const [lastActivityInSenderGroup] = useLastActivityInSenderGroup();
+  const [lastActivityInStatusGroup] = useLastActivityInStatusGroup();
+  const activityElementMapRef = useActivityElementMapRef();
+  const createActivityStatusRenderer = useCreateActivityStatusRenderer();
+  const getKeyByActivity = useGetKeyByActivity();
+  const renderAvatar = useCreateAvatarRenderer();
+
+  const activityKey: string = useMemo(() => getKeyByActivity(activity), [activity, getKeyByActivity]);
+  const hideAllTimestamps = groupTimestamp === false;
+  const isFirstInSenderGroup =
+    firstActivityInSenderGroup === activity || typeof firstActivityInSenderGroup === 'undefined';
+  const isFirstInStatusGroup =
+    firstActivityInStatusGroup === activity || typeof firstActivityInStatusGroup === 'undefined';
+  const isLastInSenderGroup =
+    lastActivityInSenderGroup === activity || typeof lastActivityInSenderGroup === 'undefined';
+  const isLastInStatusGroup =
+    lastActivityInStatusGroup === activity || typeof lastActivityInStatusGroup === 'undefined';
+  const renderAvatarForSenderGroup = useMemo(
+    () => !!renderAvatar && renderAvatar({ activity }),
+    [activity, renderAvatar]
+  );
+  const isTopSideBotNub = isZeroOrPositive(bubbleNubOffset);
+  const isTopSideUserNub = isZeroOrPositive(bubbleFromUserNubOffset);
+  const renderActivityStatus = useMemo(
+    () =>
+      createActivityStatusRenderer({
+        activity,
+        nextVisibleActivity: undefined
+      }),
+    [activity, createActivityStatusRenderer]
+  );
+
+  const activityCallbackRef = useCallback(
+    (activityElement: HTMLElement) => {
+      activityElement
+        ? activityElementMapRef.current.set(activityKey, activityElement)
+        : activityElementMapRef.current.delete(activityKey);
+    },
+    [activityElementMapRef, activityKey]
+  );
+  const hideTimestamp = hideAllTimestamps || !isLastInStatusGroup;
+  const isTopSideNub = activity.from?.role === 'user' ? isTopSideUserNub : isTopSideBotNub;
+
+  let showCallout: boolean;
+
+  // Depending on the "showAvatarInGroup" setting, the avatar will render in different positions.
+  if (showAvatarInGroup === 'sender') {
+    if (isTopSideNub) {
+      showCallout = isFirstInSenderGroup && isFirstInStatusGroup;
+    } else {
+      showCallout = isLastInSenderGroup && isLastInStatusGroup;
+    }
+  } else if (showAvatarInGroup === 'status') {
+    if (isTopSideNub) {
+      showCallout = isFirstInStatusGroup;
+    } else {
+      showCallout = isLastInStatusGroup;
+    }
+  } else {
+    showCallout = true;
+  }
+
+  const children = useMemo(
+    () =>
+      renderActivity({
+        hideTimestamp,
+        renderActivityStatus,
+        renderAvatar: renderAvatarForSenderGroup,
+        showCallout
+      }),
+    [hideTimestamp, renderActivity, renderActivityStatus, renderAvatarForSenderGroup, showCallout]
+  );
+
+  return (
+    <ActivityRow activity={activity} ref={activityCallbackRef}>
+      {children}
+    </ActivityRow>
+  );
+};
+
+export default memo(TranscriptActivity);
+export { type TranscriptActivityProps };

package/src/Utils/AccessibleInputText.tsx

@@ -1,12 +1,12 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1] }] */
 
-import PropTypes from 'prop-types';
 import React, {
-  ChangeEventHandler,
-  FocusEventHandler,
+  type ChangeEventHandler,
+  type FocusEventHandler,
   forwardRef,
-  KeyboardEventHandler,
-  ReactEventHandler,
+  type KeyboardEventHandler,
+  type MouseEventHandler,
+  type ReactEventHandler,
   useRef
 } from 'react';
 
@@ -30,33 +30,39 @@ import useEnterKeyHint from '../hooks/internal/useEnterKeyHint';
 //   - aria-disabled="true" is the source of truth
 // - If the widget is contained by a <form>, the developer need to filter out some `onSubmit` event caused by this widget
 
-type AccessibleInputTextProps = {
+type AccessibleInputTextProps = Readonly<{
   'aria-errormessage'?: string;
-  className?: string;
-  disabled?: boolean;
-  enterKeyHint?: string;
-  inputMode?: 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  onFocus?: FocusEventHandler<HTMLInputElement>;
-  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
-  onKeyDownCapture?: KeyboardEventHandler<HTMLInputElement>;
-  onKeyPress?: KeyboardEventHandler<HTMLInputElement>;
-  onSelect?: ReactEventHandler<HTMLInputElement>;
-  placeholder?: string;
-  readOnly?: boolean;
-  tabIndex?: number;
+  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<HTMLInputElement> | undefined;
+  onClick?: MouseEventHandler<HTMLInputElement> | undefined;
+  onFocus?: FocusEventHandler<HTMLInputElement> | undefined;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement> | undefined;
+  onKeyDownCapture?: KeyboardEventHandler<HTMLInputElement> | undefined;
+  onKeyPress?: KeyboardEventHandler<HTMLInputElement> | undefined;
+  onSelect?: ReactEventHandler<HTMLInputElement> | undefined;
+  placeholder?: string | undefined;
+  readOnly?: boolean | undefined;
+  tabIndex?: number | undefined;
   type: 'text';
-  value?: string;
-};
+  value?: string | undefined;
+}>;
 
 const AccessibleInputText = forwardRef<HTMLInputElement, AccessibleInputTextProps>(
   (
     {
       'aria-errormessage': ariaErrorMessage,
       className,
+      'data-id': dataId,
+      'data-testid': dataTestId,
       disabled,
       enterKeyHint,
       onChange,
+      onClick,
       onFocus,
       onKeyDown,
       onKeyDownCapture,
@@ -81,7 +87,10 @@ const AccessibleInputText = forwardRef<HTMLInputElement, AccessibleInputTextProp
         aria-disabled={disabled || undefined}
         aria-errormessage={ariaErrorMessage}
         className={className}
+        data-id={dataId}
+        data-testid={dataTestId}
         onChange={disabled ? undefined : onChange}
+        onClick={onClick}
         onFocus={disabled ? undefined : onFocus}
         onKeyDown={disabled ? undefined : onKeyDown}
         onKeyDownCapture={disabled ? undefined : onKeyDownCapture}
@@ -99,44 +108,6 @@ const AccessibleInputText = forwardRef<HTMLInputElement, AccessibleInputTextProp
   }
 );
 
-AccessibleInputText.defaultProps = {
-  'aria-errormessage': 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,
-  tabIndex: undefined,
-  value: undefined
-};
-
 AccessibleInputText.displayName = 'AccessibleInputText';
 
-AccessibleInputText.propTypes = {
-  'aria-errormessage': PropTypes.string,
-  className: 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,
-  tabIndex: PropTypes.number,
-  // @ts-ignore PropTypes and TypeScript type do not well understood each other.
-  type: PropTypes.oneOf(['text']).isRequired,
-  value: PropTypes.string
-};
-
 export default AccessibleInputText;

package/src/Utils/AccessibleTextArea.tsx

@@ -1,12 +1,12 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1] }] */
 
-import PropTypes from 'prop-types';
 import React, {
-  ChangeEventHandler,
-  FocusEventHandler,
+  type ChangeEventHandler,
+  type FocusEventHandler,
   forwardRef,
-  KeyboardEventHandler,
-  ReactEventHandler,
+  type KeyboardEventHandler,
+  type MouseEventHandler,
+  type ReactEventHandler,
   useRef
 } from 'react';
 
@@ -28,11 +28,12 @@ import React, {
 //   - aria-disabled="true" is the source of truth
 // - If the widget is contained by a <form>, the developer need to filter out some `onSubmit` event caused by this widget
 
-type AccessibleTextAreaProps = {
+type AccessibleTextAreaProps = Readonly<{
   className?: string;
   disabled?: boolean;
   inputMode?: 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
   onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+  onClick?: MouseEventHandler<HTMLTextAreaElement> | undefined;
   onFocus?: FocusEventHandler<HTMLTextAreaElement>;
   onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
   onKeyDownCapture?: KeyboardEventHandler<HTMLTextAreaElement>;
@@ -43,7 +44,7 @@ type AccessibleTextAreaProps = {
   rows?: number;
   tabIndex?: number;
   value?: string;
-};
+}>;
 
 const AccessibleTextArea = forwardRef<HTMLTextAreaElement, AccessibleTextAreaProps>(
   (
@@ -52,6 +53,7 @@ const AccessibleTextArea = forwardRef<HTMLTextAreaElement, AccessibleTextAreaPro
       disabled,
       inputMode,
       onChange,
+      onClick,
       onFocus,
       onKeyDown,
       onKeyDownCapture,
@@ -75,6 +77,7 @@ const AccessibleTextArea = forwardRef<HTMLTextAreaElement, AccessibleTextAreaPro
         className={className}
         inputMode={inputMode}
         onChange={disabled ? undefined : onChange}
+        onClick={onClick}
         onFocus={disabled ? undefined : onFocus}
         onKeyDown={disabled ? undefined : onKeyDown}
         onKeyDownCapture={disabled ? undefined : onKeyDownCapture}
@@ -91,40 +94,6 @@ const AccessibleTextArea = forwardRef<HTMLTextAreaElement, AccessibleTextAreaPro
   }
 );
 
-AccessibleTextArea.defaultProps = {
-  className: undefined,
-  disabled: undefined,
-  inputMode: undefined,
-  onChange: undefined,
-  onFocus: undefined,
-  onKeyDown: undefined,
-  onKeyDownCapture: undefined,
-  onKeyPress: undefined,
-  onSelect: undefined,
-  placeholder: undefined,
-  readOnly: undefined,
-  rows: undefined,
-  tabIndex: undefined,
-  value: undefined
-};
-
 AccessibleTextArea.displayName = 'AccessibleTextArea';
 
-AccessibleTextArea.propTypes = {
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  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,
-  tabIndex: PropTypes.number,
-  value: PropTypes.string
-};
-
 export default AccessibleTextArea;