botframework-webchat-component 4.18.2 → 4.19.0

package/src/Transcript/TranscriptFocus/TranscriptFocusTerminatorBody.tsx

@@ -0,0 +1,20 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { forwardRef, type HTMLAttributes } from 'react';
+
+import styles from './TranscriptFocus.module.css';
+
+type TranscriptFocusTerminatorBodyProps = HTMLAttributes<HTMLDivElement>;
+
+const TranscriptFocusTerminatorBody = forwardRef<HTMLDivElement, TranscriptFocusTerminatorBodyProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useStyles(styles);
+
+    return <div {...props} className={cx(classNames['transcript-focus-area__terminator-body'], className)} ref={ref} />;
+  }
+);
+
+TranscriptFocusTerminatorBody.displayName = 'TranscriptFocusTerminatorBody';
+
+export default TranscriptFocusTerminatorBody;
+export { type TranscriptFocusTerminatorBodyProps };

package/src/Transcript/TranscriptFocus/TranscriptFocusTerminatorText.tsx

@@ -0,0 +1,20 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { forwardRef, type HTMLAttributes } from 'react';
+
+import styles from './TranscriptFocus.module.css';
+
+type TranscriptFocusTerminatorTextProps = HTMLAttributes<HTMLDivElement>;
+
+const TranscriptFocusTerminatorText = forwardRef<HTMLDivElement, TranscriptFocusTerminatorTextProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useStyles(styles);
+
+    return <div {...props} className={cx(classNames['transcript-focus-area__terminator-text'], className)} ref={ref} />;
+  }
+);
+
+TranscriptFocusTerminatorText.displayName = 'TranscriptFocusTerminatorText';
+
+export default TranscriptFocusTerminatorText;
+export { type TranscriptFocusTerminatorTextProps };

package/src/Transcript/TranscriptFocus/index.ts

@@ -0,0 +1,25 @@
+export { default as TranscriptActivityList, type TranscriptActivityListProps } from './TranscriptActivityList';
+export { default as TranscriptFocusArea, type TranscriptFocusAreaProps } from './TranscriptFocusArea';
+export { default as TranscriptFocusContent, type TranscriptFocusContentProps } from './TranscriptFocusContent';
+export {
+  default as TranscriptFocusContentOverlay,
+  type TranscriptFocusContentOverlayProps
+} from './TranscriptFocusContentOverlay';
+export {
+  default as TranscriptFocusContentActiveDescendant,
+  type TranscriptFocusContentActiveDescendantProps
+} from './TranscriptFocusContentActiveDescendant';
+export {
+  default as TranscriptFocusContentBody,
+  type TranscriptFocusContentBodyProps
+} from './TranscriptFocusContentBody';
+export { default as TranscriptFocusIndicator, type TranscriptFocusIndicatorProps } from './TranscriptFocusIndicator';
+export { default as TranscriptFocusTerminator, type TranscriptFocusTerminatorProps } from './TranscriptFocusTerminator';
+export {
+  default as TranscriptFocusTerminatorBody,
+  type TranscriptFocusTerminatorBodyProps
+} from './TranscriptFocusTerminatorBody';
+export {
+  default as TranscriptFocusTerminatorText,
+  type TranscriptFocusTerminatorTextProps
+} from './TranscriptFocusTerminatorText';

package/src/Transcript/hooks/useRenderActivityProps.ts

@@ -0,0 +1,88 @@
+import { hooks } from 'botframework-webchat-api';
+import { useBuildRenderAvatarCallback } from 'botframework-webchat-api/middleware.js';
+import { type WebChatActivity } from 'botframework-webchat-core';
+import { useMemo, type ReactNode } 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 isZeroOrPositive from '../../Utils/isZeroOrPositive';
+
+const { useCreateActivityStatusRenderer, useStyleOptions } = hooks;
+
+type RenderActivityProps = {
+  hideTimestamp: boolean;
+  renderActivityStatus: ((options: { hideTimestamp: boolean }) => ReactNode) | undefined;
+  renderAvatar: false | (() => Exclude<ReactNode, boolean | null | undefined>) | undefined;
+  showCallout: boolean;
+};
+
+const useRenderActivityProps = (activity: WebChatActivity): RenderActivityProps => {
+  const [styleOptions] = useStyleOptions();
+  const [firstActivityInSenderGroup] = useFirstActivityInSenderGroup();
+  const [firstActivityInStatusGroup] = useFirstActivityInStatusGroup();
+  const [lastActivityInSenderGroup] = useLastActivityInSenderGroup();
+  const [lastActivityInStatusGroup] = useLastActivityInStatusGroup();
+  const createActivityStatusRenderer = useCreateActivityStatusRenderer();
+  const buildRenderAvatar = useBuildRenderAvatarCallback();
+
+  const { bubbleFromUserNubOffset, bubbleNubOffset, groupTimestamp, showAvatarInGroup } = styleOptions;
+
+  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<false | (() => Exclude<ReactNode, boolean | null | undefined>)>(() => {
+    // Pass styleOptions through the runtime object (not typed in public request) for internal use
+    // by the core middleware and legacy bridge handlers.
+    const renderer = buildRenderAvatar(Object.freeze({ activity }));
+
+    return renderer ? (): ReactNode => renderer({}) : false;
+  }, [activity, buildRenderAvatar]);
+
+  const isTopSideBotNub = isZeroOrPositive(bubbleNubOffset);
+  const isTopSideUserNub = isZeroOrPositive(bubbleFromUserNubOffset);
+
+  const renderActivityStatus = useMemo(
+    () => createActivityStatusRenderer({ activity }),
+    [activity, createActivityStatusRenderer]
+  );
+
+  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;
+  }
+
+  return {
+    hideTimestamp,
+    renderActivityStatus,
+    renderAvatar: renderAvatarForSenderGroup,
+    showCallout
+  };
+};
+
+export default useRenderActivityProps;

package/src/Utils/AccessKeySink/Surface.tsx

@@ -0,0 +1,63 @@
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import React, { forwardRef, useCallback, useRef } from 'react';
+import { object, optional, pipe, readonly, string, type InferOutput } from 'valibot';
+
+import useNavigatorPlatform from '../../hooks/internal/useNavigatorPlatform';
+import { orSelf as firstTabbableDescendantOrSelf } from '../firstTabbableDescendant';
+import AccessKeySinkContext from './internal/Context';
+
+const surfacePropsSchema = pipe(
+  object({
+    children: optional(reactNode()),
+    className: optional(string()),
+    role: optional(string())
+  }),
+  readonly()
+);
+
+type SurfaceProps = InferOutput<typeof surfacePropsSchema>;
+
+const Surface = forwardRef<HTMLDivElement, SurfaceProps>((props, ref) => {
+  const { children, className, role } = validateProps(surfacePropsSchema, props);
+
+  const [{ apple }] = useNavigatorPlatform();
+  const contextRef = useRef({ focii: [] });
+
+  const handleKeyUp = useCallback(
+    event => {
+      const { altKey, ctrlKey, key, shiftKey } = event;
+
+      // On Apple, most modern browsers use CTRL + OPTION as modifiers.
+      // Otherwise, we use ALT + SHIFT as modifierse.
+      if (altKey && (apple ? ctrlKey : shiftKey)) {
+        const focii = contextRef.current.focii.filter(entry => entry.keys.includes(key));
+
+        const currentFocus = focii.findIndex(
+          ({ ref: { current } }) => current === document.activeElement || current.contains(document.activeElement)
+        );
+        const nextFocus = focii[(currentFocus + 1) % focii.length];
+
+        if (nextFocus) {
+          event.preventDefault();
+          event.stopPropagation();
+
+          const tabbable = firstTabbableDescendantOrSelf(nextFocus.ref.current);
+
+          tabbable && tabbable.focus();
+        }
+      }
+    },
+    [apple]
+  );
+
+  return (
+    <AccessKeySinkContext.Provider value={contextRef.current}>
+      <div className={className} onKeyUp={handleKeyUp} ref={ref} role={role}>
+        {children}
+      </div>
+    </AccessKeySinkContext.Provider>
+  );
+});
+
+export default Surface;
+export { surfacePropsSchema, type SurfaceProps };

package/src/Utils/AccessibleButton.tsx

@@ -1,18 +1,41 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1] }] */
 
-import PropTypes from 'prop-types';
-import React, { forwardRef, MouseEventHandler, ReactNode, useRef } from 'react';
+import { reactNode } from '@msinternal/botframework-webchat-react-valibot';
+import React, { forwardRef, memo, type MouseEventHandler } from 'react';
+import {
+  boolean,
+  custom,
+  function_,
+  is,
+  literal,
+  number,
+  object,
+  optional,
+  pipe,
+  readonly,
+  string,
+  type InferInput
+} from 'valibot';
 
 const PREVENT_DEFAULT_HANDLER = event => event.preventDefault();
 
-type AccessibleButtonProps = {
-  'aria-hidden'?: boolean;
-  children?: ReactNode;
-  disabled?: boolean;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  tabIndex?: number;
-  type: 'button';
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+const accessibleButtonPropsSchema = pipe(
+  object({
+    'aria-hidden': optional(boolean()),
+    'aria-keyshortcuts': optional(string()),
+    children: optional(reactNode()),
+    className: optional(string()),
+    'data-testid': optional(string()),
+    disabled: optional(boolean()),
+    onClick: custom<MouseEventHandler<HTMLButtonElement>>(value => is(function_(), value)),
+    tabIndex: optional(number()),
+    title: optional(string()),
+    type: literal('button')
+  }),
+  readonly()
+);
+
+type AccessibleButtonProps = InferInput<typeof accessibleButtonPropsSchema>;
 
 // Differences between <button> and <AccessibleButton>:
 // - Disable behavior
@@ -33,46 +56,38 @@ type AccessibleButtonProps = {
 // - If the widget is contained by a <form>, the developer need to filter out some `onSubmit` event caused by this widget
 
 const AccessibleButton = forwardRef<HTMLButtonElement, AccessibleButtonProps>(
-  ({ 'aria-hidden': ariaHidden, children, disabled, onClick, tabIndex, ...props }, forwardedRef) => {
-    const targetRef = useRef();
-
-    const ref = forwardedRef || targetRef;
-
-    return (
-      <button
-        aria-disabled={disabled || undefined}
-        aria-hidden={ariaHidden}
-        onClick={disabled ? PREVENT_DEFAULT_HANDLER : onClick}
-        ref={ref}
-        tabIndex={disabled ? -1 : tabIndex}
-        {...props}
-        type="button"
-      >
-        {children}
-      </button>
-    );
-  }
+  (
+    {
+      'aria-hidden': ariaHidden,
+      'aria-keyshortcuts': ariaKeyShortcuts,
+      children,
+      className,
+      'data-testid': dataTestId,
+      disabled,
+      onClick,
+      tabIndex,
+      title
+    },
+    ref
+  ) => (
+    <button
+      aria-disabled={disabled || undefined}
+      aria-hidden={ariaHidden}
+      aria-keyshortcuts={ariaKeyShortcuts}
+      className={className}
+      data-testid={dataTestId}
+      onClick={disabled ? PREVENT_DEFAULT_HANDLER : onClick}
+      ref={ref}
+      tabIndex={disabled ? -1 : tabIndex}
+      title={title}
+      type="button"
+    >
+      {children}
+    </button>
+  )
 );
 
-AccessibleButton.defaultProps = {
-  'aria-hidden': undefined,
-  children: undefined,
-  disabled: undefined,
-  onClick: undefined,
-  tabIndex: undefined
-};
-
 AccessibleButton.displayName = 'AccessibleButton';
 
-AccessibleButton.propTypes = {
-  'aria-hidden': PropTypes.bool,
-  children: PropTypes.any,
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func,
-  tabIndex: PropTypes.number,
-  // TypeScript class is not mappable to PropTypes.oneOf(['button'])
-  // @ts-ignore
-  type: PropTypes.oneOf(['button']).isRequired
-};
-
-export default AccessibleButton;
+export default memo(AccessibleButton);
+export { accessibleButtonPropsSchema, type AccessibleButtonProps };

package/src/Utils/AccessibleInputText.tsx

@@ -1,14 +1,28 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1] }] */
 
-import PropTypes from 'prop-types';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import React, {
-  ChangeEventHandler,
-  FocusEventHandler,
+  type ChangeEventHandler,
+  type FocusEventHandler,
   forwardRef,
-  KeyboardEventHandler,
-  ReactEventHandler,
+  type KeyboardEventHandler,
+  type MouseEventHandler,
+  type ReactEventHandler,
   useRef
 } from 'react';
+import {
+  boolean,
+  custom,
+  type InferInput,
+  literal,
+  number,
+  object,
+  optional,
+  picklist,
+  pipe,
+  readonly,
+  string
+} from 'valibot';
 
 import useEnterKeyHint from '../hooks/internal/useEnterKeyHint';
 
@@ -30,113 +44,90 @@ 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 = {
-  '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;
-  type: 'text';
-  value?: string;
-};
+const AccessibleInputTextPropsSchema = pipe(
+  object({
+    'aria-errormessage': optional(string()),
+    'aria-label': optional(string()),
+    className: optional(string()),
+    'data-id': optional(string()),
+    'data-testid': optional(string()),
+    disabled: optional(boolean()),
+    enterKeyHint: optional(string()),
+    inputMode: optional(picklist(['decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url'])),
+    onChange: optional(custom<ChangeEventHandler<HTMLInputElement>>(value => typeof value === 'function')),
+    onClick: optional(custom<MouseEventHandler<HTMLInputElement>>(value => typeof value === 'function')),
+    onFocus: optional(custom<FocusEventHandler<HTMLInputElement>>(value => typeof value === 'function')),
+    onKeyDown: optional(custom<KeyboardEventHandler<HTMLInputElement>>(value => typeof value === 'function')),
+    onKeyDownCapture: optional(custom<KeyboardEventHandler<HTMLInputElement>>(value => typeof value === 'function')),
+    onKeyPress: optional(custom<KeyboardEventHandler<HTMLInputElement>>(value => typeof value === 'function')),
+    onSelect: optional(custom<ReactEventHandler<HTMLInputElement>>(value => typeof value === 'function')),
+    placeholder: optional(string()),
+    readOnly: optional(boolean()),
+    tabIndex: optional(number()),
+    type: literal('text'),
+    value: optional(string())
+  }),
+  readonly()
+);
 
-const AccessibleInputText = forwardRef<HTMLInputElement, AccessibleInputTextProps>(
-  (
-    {
-      'aria-errormessage': ariaErrorMessage,
-      className,
-      disabled,
-      enterKeyHint,
-      onChange,
-      onFocus,
-      onKeyDown,
-      onKeyDownCapture,
-      onKeyPress,
-      onSelect,
-      placeholder,
-      readOnly,
-      tabIndex,
-      value,
-      ...props
-    },
-    forwardedRef
-  ) => {
-    const targetRef = useRef();
+type AccessibleInputTextProps = InferInput<typeof AccessibleInputTextPropsSchema>;
 
-    const ref = forwardedRef || targetRef;
+const AccessibleInputText = forwardRef<HTMLInputElement, AccessibleInputTextProps>((rawProps, forwardedRef) => {
+  const {
+    'aria-errormessage': ariaErrorMessage,
+    'aria-label': ariaLabel,
+    className,
+    'data-id': dataId,
+    'data-testid': dataTestId,
+    disabled,
+    enterKeyHint,
+    onChange,
+    onClick,
+    onFocus,
+    onKeyDown,
+    onKeyDownCapture,
+    onKeyPress,
+    onSelect,
+    placeholder,
+    readOnly,
+    tabIndex,
+    value,
+    ...props
+  } = validateProps(AccessibleInputTextPropsSchema, rawProps);
 
-    useEnterKeyHint(ref, enterKeyHint);
+  const targetRef = useRef<HTMLInputElement>(null);
 
-    return (
-      <input
-        aria-disabled={disabled || undefined}
-        aria-errormessage={ariaErrorMessage}
-        className={className}
-        onChange={disabled ? undefined : onChange}
-        onFocus={disabled ? undefined : onFocus}
-        onKeyDown={disabled ? undefined : onKeyDown}
-        onKeyDownCapture={disabled ? undefined : onKeyDownCapture}
-        onKeyPress={disabled ? undefined : onKeyPress}
-        onSelect={disabled ? undefined : onSelect}
-        placeholder={placeholder}
-        readOnly={readOnly || disabled}
-        ref={ref}
-        tabIndex={disabled ? -1 : tabIndex}
-        value={value}
-        {...props}
-        type="text"
-      />
-    );
-  }
-);
+  const ref = forwardedRef || targetRef;
 
-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
-};
+  useEnterKeyHint(ref, enterKeyHint);
 
-AccessibleInputText.displayName = 'AccessibleInputText';
+  return (
+    <input
+      aria-disabled={disabled || undefined}
+      aria-errormessage={ariaErrorMessage}
+      aria-label={ariaLabel}
+      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}
+      onKeyPress={disabled ? undefined : onKeyPress}
+      onSelect={disabled ? undefined : onSelect}
+      placeholder={placeholder}
+      readOnly={readOnly || disabled}
+      ref={ref}
+      tabIndex={disabled ? -1 : tabIndex}
+      value={value}
+      {...props}
+      type="text"
+    />
+  );
+});
 
-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
-};
+AccessibleInputText.displayName = 'AccessibleInputText';
 
 export default AccessibleInputText;
+export { AccessibleInputTextPropsSchema, type AccessibleInputTextProps };

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;