botframework-webchat-component 4.18.1-main.20260518.2a3d1d3 → 4.18.2

package/src/Utils/AccessibleButton.tsx

@@ -1,41 +1,18 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1] }] */
 
-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';
+import PropTypes from 'prop-types';
+import React, { forwardRef, MouseEventHandler, ReactNode, useRef } from 'react';
 
 const PREVENT_DEFAULT_HANDLER = event => event.preventDefault();
 
-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>;
+type AccessibleButtonProps = {
+  'aria-hidden'?: boolean;
+  children?: ReactNode;
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  tabIndex?: number;
+  type: 'button';
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 // Differences between <button> and <AccessibleButton>:
 // - Disable behavior
@@ -56,38 +33,46 @@ type AccessibleButtonProps = InferInput<typeof accessibleButtonPropsSchema>;
 // - 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,
-      '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>
-  )
+  ({ '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>
+    );
+  }
 );
 
+AccessibleButton.defaultProps = {
+  'aria-hidden': undefined,
+  children: undefined,
+  disabled: undefined,
+  onClick: undefined,
+  tabIndex: undefined
+};
+
 AccessibleButton.displayName = 'AccessibleButton';
 
-export default memo(AccessibleButton);
-export { accessibleButtonPropsSchema, type AccessibleButtonProps };
+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;

package/src/Utils/AccessibleInputText.tsx

@@ -1,28 +1,14 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1] }] */
 
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import PropTypes from 'prop-types';
 import React, {
-  type ChangeEventHandler,
-  type FocusEventHandler,
+  ChangeEventHandler,
+  FocusEventHandler,
   forwardRef,
-  type KeyboardEventHandler,
-  type MouseEventHandler,
-  type ReactEventHandler,
+  KeyboardEventHandler,
+  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';
 
@@ -44,90 +30,113 @@ 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
 
-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()
-);
-
-type AccessibleInputTextProps = InferInput<typeof AccessibleInputTextPropsSchema>;
+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 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);
+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();
 
-  const targetRef = useRef<HTMLInputElement>(null);
+    const ref = forwardedRef || targetRef;
 
-  const ref = forwardedRef || targetRef;
+    useEnterKeyHint(ref, enterKeyHint);
 
-  useEnterKeyHint(ref, enterKeyHint);
+    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"
+      />
+    );
+  }
+);
 
-  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.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;
-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, {
-  type ChangeEventHandler,
-  type FocusEventHandler,
+  ChangeEventHandler,
+  FocusEventHandler,
   forwardRef,
-  type KeyboardEventHandler,
-  type MouseEventHandler,
-  type ReactEventHandler,
+  KeyboardEventHandler,
+  ReactEventHandler,
   useRef
 } from 'react';
 
@@ -28,12 +28,11 @@ 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 = Readonly<{
+type AccessibleTextAreaProps = {
   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>;
@@ -44,7 +43,7 @@ type AccessibleTextAreaProps = Readonly<{
   rows?: number;
   tabIndex?: number;
   value?: string;
-}>;
+};
 
 const AccessibleTextArea = forwardRef<HTMLTextAreaElement, AccessibleTextAreaProps>(
   (
@@ -53,7 +52,6 @@ const AccessibleTextArea = forwardRef<HTMLTextAreaElement, AccessibleTextAreaPro
       disabled,
       inputMode,
       onChange,
-      onClick,
       onFocus,
       onKeyDown,
       onKeyDownCapture,
@@ -77,7 +75,6 @@ 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}
@@ -94,6 +91,40 @@ 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;

package/src/Utils/CroppedImage.js

@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useMemo } from 'react';
+
+import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+
+const ROOT_STYLE = {
+  overflow: 'hidden',
+  position: 'relative',
+
+  '& > img': {
+    height: 'auto',
+    left: '50%',
+    position: 'absolute',
+    top: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '100%'
+  }
+};
+
+const CroppedImage = ({ alt, className, height, src, width }) => {
+  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+  const sizeStyle = useMemo(() => ({ height, width }), [height, width]);
+
+  return (
+    <div className={classNames(rootClassName, (className || '') + '')} style={sizeStyle}>
+      <img alt={alt} src={src} />
+    </div>
+  );
+};
+
+CroppedImage.defaultProps = {
+  alt: '',
+  className: ''
+};
+
+CroppedImage.propTypes = {
+  alt: PropTypes.string,
+  className: PropTypes.string,
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  src: PropTypes.string.isRequired,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+};
+
+export default CroppedImage;

package/src/Utils/FocusRedirector.tsx

@@ -1,20 +1,7 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import PropTypes from 'prop-types';
 import React, { useCallback } from 'react';
-import {
-  custom,
-  function_,
-  instance,
-  is,
-  nullable,
-  object,
-  optional,
-  pipe,
-  readonly,
-  string,
-  type InferInput
-} from 'valibot';
-
-import mutableRefObject from '../types/internal/mutableRefObject';
+
+import type { FC, MutableRefObject } from 'react';
 
 // This is an element, when focused, will send the focus to the ref specified in "redirectRef".
 // Although the focus is being redirected, browser will scroll this redirector element into view.
@@ -25,20 +12,13 @@ import mutableRefObject from '../types/internal/mutableRefObject';
 // When this focus redirector is put inside a scrollable container, you may want to resize or reposition
 // it to prevent unintentional scroll done by the browser default behavior.
 
-const focusRedirectorPropsSchema = pipe(
-  object({
-    className: optional(string()),
-    onFocus: optional(custom<() => void>(value => is(function_(), value))),
-    redirectRef: optional(mutableRefObject(nullable(instance(HTMLElement))))
-  }),
-  readonly()
-);
-
-type FocusRedirectorProps = InferInput<typeof focusRedirectorPropsSchema>;
-
-function FocusRedirector(props: FocusRedirectorProps) {
-  const { className, onFocus, redirectRef } = validateProps(focusRedirectorPropsSchema, props);
+type FocusRedirectorProps = {
+  className?: string;
+  onFocus?: () => void;
+  redirectRef?: MutableRefObject<HTMLElement>;
+};
 
+const FocusRedirector: FC<FocusRedirectorProps> = ({ className, onFocus, redirectRef }) => {
   const handleFocus = useCallback(() => {
     redirectRef?.current?.focus();
     onFocus && onFocus();
@@ -52,7 +32,22 @@ function FocusRedirector(props: FocusRedirectorProps) {
   //             However, reacting with browse mode is currently okay. Just better to leave it alone.
 
   return <div className={className} onFocus={handleFocus} tabIndex={0} />;
-}
+};
+
+FocusRedirector.defaultProps = {
+  className: undefined,
+  onFocus: undefined,
+  redirectRef: undefined
+};
+
+FocusRedirector.propTypes = {
+  className: PropTypes.string,
+  onFocus: PropTypes.func,
+  // PropTypes is not fully compatible with TypeScript.
+  // @ts-ignore
+  redirectRef: PropTypes.shape({
+    current: PropTypes.instanceOf(HTMLElement)
+  })
+};
 
 export default FocusRedirector;
-export { focusRedirectorPropsSchema, type FocusRedirectorProps };

package/src/Utils/InlineMarkdown.js

@@ -9,7 +9,7 @@ import updateIn from 'simple-update-in';
 import createCustomEvent from './createCustomEvent';
 import randomId from './randomId';
 import useInternalMarkdownIt from '../hooks/internal/useInternalMarkdownIt';
-import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
+import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 import walkMarkdownTokens from './walkMarkdownTokens';
 
 const { useStyleOptions } = hooks;
@@ -46,9 +46,6 @@ function replaceAnchorWithButton(markdownTokens) {
 const InlineMarkdown = ({ children, onReference, references }) => {
   if (typeof children !== 'string') {
     console.warn('botframework-webchat: "children" prop passed to <InlineMarkdown> must be of type string.');
-
-    // Shortcut for disabling invalid props.
-    // eslint-disable-next-line react-hooks/immutability
     children = '';
   }
 
@@ -83,8 +80,6 @@ const InlineMarkdown = ({ children, onReference, references }) => {
   );
 
   // Markdown-It only support references in uppercase.
-  // Re-shaping input.
-  // eslint-disable-next-line react-hooks/immutability
   references = references.map(reference => reference.toUpperCase());
 
   const { hrefToRef, refToHref } = references.reduce(