= ({ className }) => {
return dictateState === STARTING || dictateState === STOPPING ? (
{dictateState === STARTING && localize('SPEECH_INPUT_STARTING')}
@@ -43,7 +51,7 @@ const DictationInterims: FC = ({ className }) => {
dictateState === DICTATING &&
(dictateInterims.length ? (
{dictateInterims.map((interim, index) => (
@@ -55,24 +63,17 @@ const DictationInterims: FC = ({ className }) => {
) : (
{localize('SPEECH_INPUT_LISTENING')}
))
);
-};
-
-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 };
diff --git a/packages/component/src/SendBox/IconButton.tsx b/packages/component/src/SendBox/IconButton.tsx
index 4c1ee33960..5a6c1a4189 100644
--- a/packages/component/src/SendBox/IconButton.tsx
+++ b/packages/component/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;
-};
+const iconButtonPropsSchema = pipe(
+ object({
+ alt: optional(string()),
+ children: optional(reactNode()),
+ className: optional(string()),
+ disabled: optional(boolean()),
+ onClick: optional(custom>(value => safeParse(function_(), value).success))
+ }),
+ readonly()
+);
+
+type IconButtonProps = InferInput;
+
+function IconButton(props: IconButtonProps) {
+ const { alt, children, className, disabled, onClick } = validateProps(iconButtonPropsSchema, props);
-const IconButton: FC = ({ alt, children, className, disabled, onClick }) => {
const [{ sendBoxButton: sendBoxButtonStyleSet }] = useStyleSet();
const [{ sendBoxButtonAlignment }] = useStyleOptions();
const buttonRef = useRef();
@@ -33,7 +53,7 @@ const IconButton: FC = ({ 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 = ({ alt, children, className, disabled, o
);
-};
-
-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 };
diff --git a/packages/component/src/SendBox/SendButton.tsx b/packages/component/src/SendBox/SendButton.tsx
index f4feab786f..983cab99eb 100644
--- a/packages/component/src/SendBox/SendButton.tsx
+++ b/packages/component/src/SendBox/SendButton.tsx
@@ -1,21 +1,27 @@
import { hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
import classNames from 'classnames';
-import PropTypes from 'prop-types';
import React, { useCallback } from 'react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
import useSubmit from '../providers/internal/SendBox/useSubmit';
import SendIcon from './Assets/SendIcon';
import IconButton from './IconButton';
-import type { FC } from 'react';
-
const { useLocalizer, useUIState } = hooks;
-type SendButtonProps = {
- className?: string;
-};
+const sendButtonPropsSchema = pipe(
+ object({
+ className: optional(string())
+ }),
+ readonly()
+);
+
+type SendButtonProps = InferInput;
+
+function SendButton(props: SendButtonProps) {
+ const { className } = validateProps(sendButtonPropsSchema, props);
-const SendButton: FC = ({ className }) => {
const [uiState] = useUIState();
const localize = useLocalizer();
const submit = useSubmit();
@@ -32,14 +38,7 @@ const SendButton: FC = ({ className }) => {
);
-};
-
-SendButton.defaultProps = {
- className: undefined
-};
-
-SendButton.propTypes = {
- className: PropTypes.string
-};
+}
export default SendButton;
+export { sendButtonPropsSchema, type SendButtonProps };
diff --git a/packages/component/src/SendBox/SuggestedAction.tsx b/packages/component/src/SendBox/SuggestedAction.tsx
index 21b4244c32..a3b4616af4 100644
--- a/packages/component/src/SendBox/SuggestedAction.tsx
+++ b/packages/component/src/SendBox/SuggestedAction.tsx
@@ -1,12 +1,13 @@
import { hooks } from 'botframework-webchat-api';
-import type { DirectLineCardAction } from 'botframework-webchat-core';
+import { validateProps } from 'botframework-webchat-api/internal';
+import { type DirectLineCardAction } from 'botframework-webchat-core';
import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { MouseEventHandler, useCallback, VFC } from 'react';
+import React, { memo, useCallback, type MouseEventHandler } from 'react';
+import { any, literal, number, object, optional, pipe, readonly, string, union, type InferInput } from 'valibot';
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
import useFocusVisible from '../hooks/internal/useFocusVisible';
import useLocalizeAccessKey from '../hooks/internal/useLocalizeAccessKey';
-import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
import useSuggestedActionsAccessKey from '../hooks/internal/useSuggestedActionsAccessKey';
import useFocus from '../hooks/useFocus';
import useScrollToEnd from '../hooks/useScrollToEnd';
@@ -24,41 +25,51 @@ const ROOT_STYLE = {
}
};
-type SuggestedActionProps = {
- buttonText: string;
- className?: string;
- displayText?: string;
- image?: string;
- imageAlt?: string;
- itemIndex: number;
- text?: string;
- textClassName?: string;
- type?:
- | 'call'
- | 'downloadFile'
- | 'imBack'
- | 'messageBack'
- | 'openUrl'
- | 'playAudio'
- | 'playVideo'
- | 'postBack'
- | 'showImage'
- | 'signin';
- value?: any;
-};
+const suggestedActionPropsSchema = pipe(
+ object({
+ buttonText: string(),
+ className: optional(string()),
+ displayText: optional(string()),
+ image: optional(string()),
+ imageAlt: optional(string()),
+ itemIndex: number(),
+ text: optional(string()),
+ textClassName: optional(string()),
+ type: optional(
+ union([
+ literal('call'),
+ literal('downloadFile'),
+ literal('imBack'),
+ literal('messageBack'),
+ literal('openUrl'),
+ literal('playAudio'),
+ literal('playVideo'),
+ literal('postBack'),
+ literal('showImage'),
+ literal('signin')
+ ])
+ ),
+ value: any()
+ }),
+ readonly()
+);
+
+type SuggestedActionProps = InferInput;
+
+function SuggestedAction(props: SuggestedActionProps) {
+ const {
+ buttonText,
+ className,
+ displayText = '',
+ image = '',
+ imageAlt,
+ itemIndex,
+ text = '',
+ textClassName,
+ type,
+ value
+ } = validateProps(suggestedActionPropsSchema, props);
-const SuggestedAction: VFC = ({
- buttonText,
- className,
- displayText,
- image,
- imageAlt,
- itemIndex,
- text,
- textClassName,
- type,
- value
-}) => {
const [_, setSuggestedActions] = useSuggestedActions();
const [{ suggestedActionsStackedLayoutButtonTextWrap }] = useStyleOptions();
const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
@@ -109,7 +120,7 @@ const SuggestedAction: VFC = ({
},
rootClassName,
suggestedActionStyleSet + '',
- (className || '') + ''
+ className
)}
disabled={uiState === 'disabled'}
onClick={handleClick}
@@ -126,36 +137,11 @@ const SuggestedAction: VFC = ({
src={image}
/>
)}
- {buttonText}
+ {buttonText}
);
-};
-
-SuggestedAction.defaultProps = {
- className: '',
- displayText: '',
- image: '',
- imageAlt: undefined,
- text: '',
- textClassName: '',
- type: undefined,
- value: undefined
-};
-
-SuggestedAction.propTypes = {
- buttonText: PropTypes.string.isRequired,
- className: PropTypes.string,
- displayText: PropTypes.string,
- image: PropTypes.string,
- imageAlt: PropTypes.string,
- itemIndex: PropTypes.number.isRequired,
- text: PropTypes.string,
- textClassName: PropTypes.string,
- // TypeScript class is not mappable to PropTypes.
- // @ts-ignore
- type: PropTypes.string,
- value: PropTypes.any
-};
+}
-export default SuggestedAction;
+export default memo(SuggestedAction);
+export { suggestedActionPropsSchema, type SuggestedActionProps };
diff --git a/packages/component/src/SendBoxToolbar/UploadButton.tsx b/packages/component/src/SendBoxToolbar/UploadButton.tsx
index 137c0cb824..ed7ce4434f 100644
--- a/packages/component/src/SendBoxToolbar/UploadButton.tsx
+++ b/packages/component/src/SendBoxToolbar/UploadButton.tsx
@@ -1,13 +1,14 @@
import { hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useCallback, useRef, type FC, type FormEventHandler, type MouseEventHandler } from 'react';
+import React, { memo, useCallback, useRef, type FormEventHandler, type MouseEventHandler } from 'react';
import { useRefFrom } from 'use-ref-from';
+import { object, pipe, readonly, string, type InferInput } from 'valibot';
import IconButton from '../SendBox/IconButton';
-import useMakeThumbnail from '../hooks/useMakeThumbnail';
import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
import useFocus from '../hooks/useFocus';
+import useMakeThumbnail from '../hooks/useMakeThumbnail';
import useStyleSet from '../hooks/useStyleSet';
import useSubmit from '../providers/internal/SendBox/useSubmit';
import AttachmentIcon from './Assets/AttachmentIcon';
@@ -33,11 +34,18 @@ const ROOT_STYLE = {
const PREVENT_DEFAULT_HANDLER = event => event.preventDefault();
-type UploadButtonProps = {
- className?: string;
-};
+const uploadButtonPropsSchema = pipe(
+ object({
+ className: string()
+ }),
+ readonly()
+);
+
+type UploadButtonProps = InferInput;
+
+function UploadButton(props: UploadButtonProps) {
+ const { className } = validateProps(uploadButtonPropsSchema, props);
-const UploadButton: FC = ({ className }) => {
const [{ sendAttachmentOn, uploadAccept, uploadMultiple }] = useStyleOptions();
const [{ uploadButton: uploadButtonStyleSet }] = useStyleSet();
const [sendBoxAttachments, setSendBoxAttachments] = useSendBoxAttachments();
@@ -98,14 +106,7 @@ const UploadButton: FC = ({ className }) => {
);
-};
-
-UploadButton.defaultProps = {
- className: undefined
-};
-
-UploadButton.propTypes = {
- className: PropTypes.string
-};
+}
-export default UploadButton;
+export default memo(UploadButton);
+export { uploadButtonPropsSchema, type UploadButtonProps };
diff --git a/packages/component/src/Transcript/ActivityRow.tsx b/packages/component/src/Transcript/ActivityRow.tsx
index d54ecfe4d6..d823436520 100644
--- a/packages/component/src/Transcript/ActivityRow.tsx
+++ b/packages/component/src/Transcript/ActivityRow.tsx
@@ -3,17 +3,17 @@ import classNames from 'classnames';
import PropTypes from 'prop-types';
import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
-import { android } from '../Utils/detectBrowser';
-import FocusTrap from './FocusTrap';
-import ScreenReaderText from '../ScreenReaderText';
import SpeakActivity from '../Activity/Speak';
import useActiveDescendantId from '../providers/TranscriptFocus/useActiveDescendantId';
-import useActivityAccessibleName from './useActivityAccessibleName';
import useFocusByActivityKey from '../providers/TranscriptFocus/useFocusByActivityKey';
import useGetDescendantIdByActivityKey from '../providers/TranscriptFocus/useGetDescendantIdByActivityKey';
+import ScreenReaderText from '../ScreenReaderText';
+import { android } from '../Utils/detectBrowser';
+import FocusTrap from './FocusTrap';
+import useActivityAccessibleName from './useActivityAccessibleName';
-import type { MouseEventHandler, PropsWithChildren } from 'react';
import type { WebChatActivity } from 'botframework-webchat-core';
+import type { MouseEventHandler, PropsWithChildren } from 'react';
import { useRefFrom } from 'use-ref-from';
const { useActivityKeysByRead, useGetHasAcknowledgedByActivityKey, useGetKeyByActivity } = hooks;
@@ -145,7 +145,10 @@ const ActivityRow = forwardRef(({ activity, child
>
{focusTrapChildren}
- {shouldSpeak && }
+ {shouldSpeak && (
+ // TODO: Should build `webChatActivitySchema`.
+
+ )}
void;
- redirectRef?: MutableRefObject
;
-};
+const focusRedirectorPropsSchema = pipe(
+ object({
+ className: optional(string()),
+ onFocus: optional(custom<() => void>(value => safeParse(function_(), value).success)),
+ redirectRef: optional(mutableRefObject(undefinedable(instance(HTMLElement))))
+ }),
+ readonly()
+);
+
+type FocusRedirectorProps = InferInput;
+
+function FocusRedirector(props: FocusRedirectorProps) {
+ const { className, onFocus, redirectRef } = validateProps(focusRedirectorPropsSchema, props);
-const FocusRedirector: FC = ({ className, onFocus, redirectRef }) => {
const handleFocus = useCallback(() => {
redirectRef?.current?.focus();
onFocus && onFocus();
@@ -32,22 +52,7 @@ const FocusRedirector: FC = ({ className, onFocus, redirec
// However, reacting with browse mode is currently okay. Just better to leave it alone.
return ;
-};
-
-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 };
diff --git a/packages/component/src/internal.ts b/packages/component/src/internal.ts
index 04fcfb4737..c018992c7c 100644
--- a/packages/component/src/internal.ts
+++ b/packages/component/src/internal.ts
@@ -1,12 +1,12 @@
-import parseDocumentFragmentFromString from './Utils/parseDocumentFragmentFromString';
-import serializeDocumentFragmentIntoString from './Utils/serializeDocumentFragmentIntoString';
import {
- useCodeHighlighter,
CodeHighlighterComposer,
+ useCodeHighlighter,
type HighlightCodeFn
} from './hooks/internal/codeHighlighter/index';
import useInjectStyles from './hooks/internal/useInjectStyles';
import { useLiveRegion } from './providers/LiveRegionTwin/index';
+import parseDocumentFragmentFromString from './Utils/parseDocumentFragmentFromString';
+import serializeDocumentFragmentIntoString from './Utils/serializeDocumentFragmentIntoString';
export {
CodeHighlighterComposer,
@@ -17,4 +17,4 @@ export {
useLiveRegion
};
-export type { HighlightCodeFn };
+export { type HighlightCodeFn };
diff --git a/packages/component/src/providers/LiveRegionTwin/private/LiveRegionTwinContainer.tsx b/packages/component/src/providers/LiveRegionTwin/private/LiveRegionTwinContainer.tsx
index 0f571c79a2..86869f1c6a 100644
--- a/packages/component/src/providers/LiveRegionTwin/private/LiveRegionTwinContainer.tsx
+++ b/packages/component/src/providers/LiveRegionTwin/private/LiveRegionTwinContainer.tsx
@@ -1,29 +1,35 @@
-import PropTypes from 'prop-types';
+import { validateProps } from 'botframework-webchat-api/internal';
import React, { Fragment } from 'react';
-
-import type { VFC } from 'react';
+import { literal, object, optional, pipe, readonly, string, union, type InferInput } from 'valibot';
import useMarkAllAsRenderedEffect from './useMarkAllAsRenderedEffect';
import useStaticElementEntries from './useStaticElementEntries';
-type LiveRegionTwinContainerProps = {
- 'aria-label'?: string;
- 'aria-live': 'assertive' | 'polite';
- 'aria-roledescription'?: string;
- className?: string;
- role?: string;
- textElementClassName?: string;
-};
+const liveRegionTwinContainerPropsSchema = pipe(
+ object({
+ 'aria-label': optional(string()),
+ 'aria-live': union([literal('assertive'), literal('polite')]),
+ 'aria-roledescription': optional(string()),
+ className: optional(string()),
+ role: optional(string()),
+ textElementClassName: optional(string())
+ }),
+ readonly()
+);
+
+type LiveRegionTwinContainerProps = InferInput;
// This container is marked as private because we assume there is only one instance under the .
-const LiveRegionTwinContainer: VFC = ({
- 'aria-label': ariaLabel,
- 'aria-live': ariaLive,
- 'aria-roledescription': ariaRoleDescription,
- className,
- role,
- textElementClassName
-}) => {
+function LiveRegionTwinContainer(props: LiveRegionTwinContainerProps) {
+ const {
+ 'aria-label': ariaLabel,
+ 'aria-live': ariaLive,
+ 'aria-roledescription': ariaRoleDescription,
+ className,
+ role,
+ textElementClassName
+ } = validateProps(liveRegionTwinContainerPropsSchema, props);
+
const [staticElementEntries] = useStaticElementEntries();
// We assume there is only one instance under the .
@@ -52,25 +58,7 @@ const LiveRegionTwinContainer: VFC = ({
})}