botframework-webchat-component 4.13.0 → 4.14.2

package/src/Styles/StyleSet/CarouselFilmStripAttachment.ts

@@ -0,0 +1,56 @@
+/* eslint no-magic-numbers: ["error", { "ignore": [2] }] */
+import { StrictStyleOptions } from 'botframework-webchat-api';
+
+import mirrorStyle from '../mirrorStyle';
+
+export default function CarouselFilmStripAttachment({
+  avatarSize,
+  bubbleMaxWidth,
+  bubbleMinWidth,
+  paddingRegular,
+  transcriptVisualKeyboardIndicatorColor,
+  transcriptVisualKeyboardIndicatorStyle,
+  transcriptVisualKeyboardIndicatorWidth,
+  transitionDuration
+}: StrictStyleOptions) {
+  return {
+    '&.webchat__carousel-filmstrip-attachment': {
+      minWidth: bubbleMinWidth,
+      maxWidth: bubbleMaxWidth,
+      transitionDuration,
+      transitionProperty: 'max-width, min-width',
+
+      '&:focus': {
+        outline: 0
+      },
+
+      '&:focus .webchat__carousel-filmstrip-attachment--focus': {
+        borderColor: transcriptVisualKeyboardIndicatorColor,
+        borderStyle: transcriptVisualKeyboardIndicatorStyle,
+        borderWidth: transcriptVisualKeyboardIndicatorWidth,
+        boxSizing: 'border-box',
+        height: `calc(100% - ${transcriptVisualKeyboardIndicatorWidth}px)`,
+        left: 0,
+        pointerEvents: 'none',
+        position: 'absolute',
+        top: 0,
+        width: `calc(100% - ${transcriptVisualKeyboardIndicatorWidth}px)`
+      }
+    },
+    ...mirrorStyle('&.webchat__carousel-filmstrip-attachment--rtl', {
+      paddingLeft: paddingRegular,
+
+      '&.webchat__carousel-filmstrip-attachment--hide-avatar, &.webchat__carousel-filmstrip-attachment--show-avatar': {
+        '&:first-child': {
+          paddingLeft: avatarSize + paddingRegular * 2
+        }
+      },
+
+      '&.webchat__carousel-filmstrip-attachment--hide-nub, &.webchat__carousel-filmstrip-attachment--show-nub': {
+        '&:not(.webchat__carousel-filmstrip-attachment--hide-avatar.webchat__carousel-filmstrip-attachment--show-avatar):first-child': {
+          paddingLeft: paddingRegular * 2
+        }
+      }
+    })
+  };
+}

package/src/Styles/StyleSet/ScrollToEndButton.ts

@@ -1,9 +1,9 @@
 import { StrictStyleOptions } from 'botframework-webchat-api';
 
 export default function createScrollToEndButtonStyle({
-  newMessagesButtonFontSize,
   paddingRegular,
   primaryFont,
+  scrollToEndButtonFontSize,
   transcriptOverlayButtonBackground,
   transcriptOverlayButtonBackgroundOnFocus,
   transcriptOverlayButtonBackgroundOnHover,
@@ -12,41 +12,43 @@ export default function createScrollToEndButtonStyle({
   transcriptOverlayButtonColorOnHover
 }: StrictStyleOptions) {
   return {
-    // TODO: [P3] Can we not to unset borderWidth and outline earlier?
-    '@media screen and (-ms-high-contrast: active)': {
-      borderWidth: 'initial',
-      outline: 'initial'
-    },
+    '&.webchat__scroll-to-end-button': {
+      // TODO: [P3] Can we not to unset borderWidth and outline earlier?
+      '@media screen and (-ms-high-contrast: active)': {
+        borderWidth: 'initial',
+        outline: 'initial'
+      },
 
-    appearance: 'none',
-    backgroundColor: transcriptOverlayButtonBackground,
-    borderRadius: paddingRegular,
-    borderWidth: 0,
-    bottom: 5,
-    color: transcriptOverlayButtonColor,
-    fontFamily: primaryFont,
-    fontSize: newMessagesButtonFontSize,
-    outline: 0,
-    padding: paddingRegular,
-    position: 'absolute',
-    zIndex: 1, // We formed a stacking context in the parent container, so we can use "z-index" here.
+      appearance: 'none',
+      backgroundColor: transcriptOverlayButtonBackground,
+      borderRadius: paddingRegular,
+      borderWidth: 0,
+      bottom: 5,
+      color: transcriptOverlayButtonColor,
+      fontFamily: primaryFont,
+      fontSize: scrollToEndButtonFontSize,
+      outline: 0,
+      padding: paddingRegular,
+      position: 'absolute',
+      zIndex: 1, // We formed a stacking context in the parent container, so we can use "z-index" here.
 
-    '&:hover': {
-      backgroundColor: transcriptOverlayButtonBackgroundOnHover,
-      color: transcriptOverlayButtonColorOnHover || transcriptOverlayButtonColor
-    },
+      '&:hover': {
+        backgroundColor: transcriptOverlayButtonBackgroundOnHover,
+        color: transcriptOverlayButtonColorOnHover || transcriptOverlayButtonColor
+      },
 
-    '&:focus': {
-      backgroundColor: transcriptOverlayButtonBackgroundOnFocus,
-      color: transcriptOverlayButtonColorOnFocus || transcriptOverlayButtonColor
-    },
+      '&:focus': {
+        backgroundColor: transcriptOverlayButtonBackgroundOnFocus,
+        color: transcriptOverlayButtonColorOnFocus || transcriptOverlayButtonColor
+      },
 
-    '&:not(.webchat__overlay--rtl)': {
-      right: 20
-    },
+      '&:not(.webchat__scroll-to-end-button--rtl)': {
+        right: 20
+      },
 
-    '&.webchat__overlay--rtl': {
-      left: 20
+      '&.webchat__scroll-to-end-button--rtl': {
+        left: 20
+      }
     }
   };
 }

package/src/Styles/StyleSet/SuggestedAction.ts

@@ -66,7 +66,7 @@ export default function createSuggestedActionStyle({
         height: 'auto',
         maxHeight: suggestedActionsStackedLayoutButtonMaxHeight || '100%',
         minHeight:
-          typeof suggestedActionsStackedLayoutButtonMaxHeight === 'number'
+          typeof suggestedActionsStackedLayoutButtonMaxHeight === 'number' && typeof suggestedActionHeight === 'number'
             ? Math.min(suggestedActionsStackedLayoutButtonMaxHeight, suggestedActionHeight)
             : suggestedActionHeight
       },

package/src/Styles/createStyleSet.ts

@@ -9,6 +9,7 @@ import createAvatarStyle from './StyleSet/Avatar';
 import createBasicTranscriptStyle from './StyleSet/BasicTranscript';
 import createBubbleStyle from './StyleSet/Bubble';
 import createCarouselFilmStrip from './StyleSet/CarouselFilmStrip';
+import createCarouselFilmStripAttachment from './StyleSet/CarouselFilmStripAttachment';
 import createCarouselFlipper from './StyleSet/CarouselFlipper';
 import createConnectivityNotification from './StyleSet/ConnectivityNotification';
 import createDictationInterimsStyle from './StyleSet/DictationInterims';
@@ -45,49 +46,50 @@ import createYouTubeContentStyle from './StyleSet/YouTubeContent';
 //       "styleSet" is actually CSS stylesheet and it is based on the DOM tree.
 //       DOM tree may change from time to time, thus, maintaining "styleSet" becomes a constant effort.
 
-export default function createStyleSet(options: StyleOptions) {
-  options = normalizeStyleOptions(options);
+export default function createStyleSet(styleOptions: StyleOptions) {
+  const strictStyleOptions = normalizeStyleOptions(styleOptions);
 
   return {
     activities: createActivitiesStyle(),
-    audioAttachment: createAudioAttachmentStyle(options),
+    audioAttachment: createAudioAttachmentStyle(strictStyleOptions),
     audioContent: createAudioContentStyle(),
-    autoResizeTextArea: createAutoResizeTextAreaStyle(options),
-    avatar: createAvatarStyle(options),
-    basicTranscript: createBasicTranscriptStyle(options),
-    bubble: createBubbleStyle(options),
-    carouselFilmStrip: createCarouselFilmStrip(options),
-    carouselFlipper: createCarouselFlipper(options),
-    connectivityNotification: createConnectivityNotification(options),
-    dictationInterims: createDictationInterimsStyle(options),
-    errorBox: createErrorBoxStyle(options),
-    errorNotification: createErrorNotificationStyle(options),
-    fileContent: createFileContentStyle(options),
-    imageAvatar: createImageAvatarStyle(options),
-    initialsAvatar: createInitialsAvatarStyle(options),
-    microphoneButton: createMicrophoneButtonStyle(options),
-    options: { ...options }, // Cloned to make sure no additional modifications will propagate up.
-    root: createRootStyle(options),
-    scrollToEndButton: createScrollToEndButtonStyle(options),
-    sendBox: createSendBoxStyle(options),
-    sendBoxButton: createSendBoxButtonStyle(options),
-    sendBoxTextBox: createSendBoxTextBoxStyle(options),
-    sendStatus: createSendStatusStyle(options),
-    singleAttachmentActivity: createSingleAttachmentActivityStyle(options),
-    spinnerAnimation: createSpinnerAnimationStyle(options),
-    stackedLayout: createStackedLayoutStyle(options),
-    suggestedAction: createSuggestedActionStyle(options),
-    suggestedActions: createSuggestedActionsStyle(options),
-    textContent: createTextContentStyle(options),
-    toast: createToastStyle(options),
-    toaster: createToasterStyle(options),
-    typingAnimation: createTypingAnimationStyle(options),
-    typingIndicator: createTypingIndicatorStyle(options),
-    uploadButton: createUploadButtonStyle(options),
+    autoResizeTextArea: createAutoResizeTextAreaStyle(strictStyleOptions),
+    avatar: createAvatarStyle(strictStyleOptions),
+    basicTranscript: createBasicTranscriptStyle(strictStyleOptions),
+    bubble: createBubbleStyle(strictStyleOptions),
+    carouselFilmStrip: createCarouselFilmStrip(strictStyleOptions),
+    carouselFilmStripAttachment: createCarouselFilmStripAttachment(strictStyleOptions),
+    carouselFlipper: createCarouselFlipper(strictStyleOptions),
+    connectivityNotification: createConnectivityNotification(strictStyleOptions),
+    dictationInterims: createDictationInterimsStyle(strictStyleOptions),
+    errorBox: createErrorBoxStyle(strictStyleOptions),
+    errorNotification: createErrorNotificationStyle(strictStyleOptions),
+    fileContent: createFileContentStyle(strictStyleOptions),
+    imageAvatar: createImageAvatarStyle(strictStyleOptions),
+    initialsAvatar: createInitialsAvatarStyle(strictStyleOptions),
+    microphoneButton: createMicrophoneButtonStyle(strictStyleOptions),
+    options: { ...strictStyleOptions }, // Cloned to make sure no additional modifications will propagate up.
+    root: createRootStyle(strictStyleOptions),
+    scrollToEndButton: createScrollToEndButtonStyle(strictStyleOptions),
+    sendBox: createSendBoxStyle(strictStyleOptions),
+    sendBoxButton: createSendBoxButtonStyle(strictStyleOptions),
+    sendBoxTextBox: createSendBoxTextBoxStyle(strictStyleOptions),
+    sendStatus: createSendStatusStyle(strictStyleOptions),
+    singleAttachmentActivity: createSingleAttachmentActivityStyle(strictStyleOptions),
+    spinnerAnimation: createSpinnerAnimationStyle(strictStyleOptions),
+    stackedLayout: createStackedLayoutStyle(strictStyleOptions),
+    suggestedAction: createSuggestedActionStyle(strictStyleOptions),
+    suggestedActions: createSuggestedActionsStyle(strictStyleOptions),
+    textContent: createTextContentStyle(strictStyleOptions),
+    toast: createToastStyle(strictStyleOptions),
+    toaster: createToasterStyle(strictStyleOptions),
+    typingAnimation: createTypingAnimationStyle(strictStyleOptions),
+    typingIndicator: createTypingIndicatorStyle(strictStyleOptions),
+    uploadButton: createUploadButtonStyle(strictStyleOptions),
     videoAttachment: createVideoAttachmentStyle(),
-    videoContent: createVideoContentStyle(options),
-    vimeoContent: createVimeoContentStyle(options),
-    warningNotification: createWarningNotificationStyle(options),
-    youTubeContent: createYouTubeContentStyle(options)
+    videoContent: createVideoContentStyle(strictStyleOptions),
+    vimeoContent: createVimeoContentStyle(strictStyleOptions),
+    warningNotification: createWarningNotificationStyle(strictStyleOptions),
+    youTubeContent: createYouTubeContentStyle(strictStyleOptions)
   };
 }

package/src/Toast/CollapseIcon.js

@@ -2,7 +2,15 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 const CollapseIcon = ({ className }) => (
-  <svg className={(className || '') + ''} height="9" viewBox="0 0 16 9" width="16" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    className={(className || '') + ''}
+    focusable={false}
+    height="9"
+    role="presentation"
+    viewBox="0 0 16 9"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path d="M15.2734 8.97656L8 1.71094L0.726563 8.97656L0.0234375 8.27344L8 0.289062L15.9766 8.27344L15.2734 8.97656Z" />
   </svg>
 );

package/src/Toast/DismissIcon.js

@@ -2,7 +2,15 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 const DismissIcon = ({ className }) => (
-  <svg className={(className || '') + ''} height="14" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    className={(className || '') + ''}
+    focusable={false}
+    height="14"
+    role="presentation"
+    viewBox="0 0 14 14"
+    width="14"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path d="M7.71094 7L13.1016 12.3984L12.3984 13.1016L7 7.71094L1.60156 13.1016L0.898438 12.3984L6.28906 7L0.898438 1.60156L1.60156 0.898438L7 6.28906L12.3984 0.898438L13.1016 1.60156L7.71094 7Z" />
   </svg>
 );

package/src/Toast/ExpandIcon.js

@@ -2,7 +2,15 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 const ExpandIcon = ({ className }) => (
-  <svg className={(className || '') + ''} height="10" viewBox="0 0 16 10" width="16" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    className={(className || '') + ''}
+    focusable={false}
+    height="10"
+    role="presentation"
+    viewBox="0 0 16 10"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path d="M15.1484 0.648437L15.8516 1.35156L8 9.20312L0.148438 1.35156L0.851563 0.648438L8 7.79687L15.1484 0.648437Z" />
   </svg>
 );

package/src/Toast/{createToastMiddleware.js → createToastMiddleware.tsx}

@@ -1,10 +1,11 @@
-/* eslint react/prop-types: "off"*/
+/* eslint react/prop-types: "off" */
 
+import { ToastMiddleware } from 'botframework-webchat-api';
 import React from 'react';
 
 import BasicToast from '../BasicToast';
 
-function createToastMiddleware() {
+function createToastMiddleware(): ToastMiddleware {
   return () => () => ({ notification }) => <BasicToast notification={notification} />;
 }
 

package/src/Utils/{AccessibleInputText.js → AccessibleInputText.tsx}

@@ -1,7 +1,14 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1] }] */
 
 import PropTypes from 'prop-types';
-import React, { forwardRef, useRef } from 'react';
+import React, {
+  ChangeEventHandler,
+  FocusEventHandler,
+  forwardRef,
+  KeyboardEventHandler,
+  ReactEventHandler,
+  useRef
+} from 'react';
 
 import useEnterKeyHint from '../hooks/internal/useEnterKeyHint';
 
@@ -23,9 +30,28 @@ 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 AccessibleInputText = forwardRef(
+type AccessibleInputTextProps = {
+  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>(
   (
     {
+      className,
       disabled,
       enterKeyHint,
       onChange,
@@ -34,7 +60,10 @@ const AccessibleInputText = forwardRef(
       onKeyDownCapture,
       onKeyPress,
       onSelect,
+      placeholder,
+      readOnly,
       tabIndex,
+      value,
       ...props
     },
     forwardedRef
@@ -48,15 +77,18 @@ const AccessibleInputText = forwardRef(
     return (
       <input
         aria-disabled={disabled || undefined}
+        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}
-        readOnly={disabled}
+        placeholder={placeholder}
+        readOnly={readOnly || disabled}
         ref={ref}
         tabIndex={disabled ? -1 : tabIndex}
+        value={value}
         {...props}
         type="text"
       />
@@ -65,30 +97,41 @@ const AccessibleInputText = forwardRef(
 );
 
 AccessibleInputText.defaultProps = {
+  className: undefined,
   disabled: undefined,
   enterKeyHint: undefined,
+  inputMode: undefined,
   onChange: undefined,
   onFocus: undefined,
   onKeyDown: undefined,
   onKeyDownCapture: undefined,
   onKeyPress: undefined,
   onSelect: undefined,
-  tabIndex: undefined
+  placeholder: undefined,
+  readOnly: undefined,
+  tabIndex: undefined,
+  value: undefined
 };
 
 AccessibleInputText.displayName = 'AccessibleInputText';
 
 AccessibleInputText.propTypes = {
+  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,
-  type: PropTypes.oneOf(['text']).isRequired
+  // @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.js → AccessibleTextArea.tsx}

@@ -1,7 +1,14 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1] }] */
 
 import PropTypes from 'prop-types';
-import React, { forwardRef, useRef } from 'react';
+import React, {
+  ChangeEventHandler,
+  FocusEventHandler,
+  forwardRef,
+  KeyboardEventHandler,
+  ReactEventHandler,
+  useRef
+} from 'react';
 
 // Differences between <textarea> and <AccessibleTextArea>:
 // - Disable behavior
@@ -21,8 +28,43 @@ import React, { forwardRef, useRef } from '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
 
-const AccessibleTextArea = forwardRef(
-  ({ disabled, onChange, onFocus, onKeyDown, onKeyPress, onSelect, tabIndex, ...props }, forwardedRef) => {
+type AccessibleTextAreaProps = {
+  className?: string;
+  disabled?: boolean;
+  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;
+  tabIndex?: number;
+  value?: string;
+};
+
+const AccessibleTextArea = forwardRef<HTMLTextAreaElement, AccessibleTextAreaProps>(
+  (
+    {
+      className,
+      disabled,
+      inputMode,
+      onChange,
+      onFocus,
+      onKeyDown,
+      onKeyDownCapture,
+      onKeyPress,
+      onSelect,
+      placeholder,
+      readOnly,
+      rows,
+      tabIndex,
+      ...props
+    },
+    forwardedRef
+  ) => {
     const targetRef = useRef();
 
     const ref = forwardedRef || targetRef;
@@ -30,13 +72,18 @@ const AccessibleTextArea = forwardRef(
     return (
       <textarea
         aria-disabled={disabled || undefined}
+        className={className}
+        inputMode={inputMode}
         onChange={disabled ? undefined : onChange}
         onFocus={disabled ? undefined : onFocus}
         onKeyDown={disabled ? undefined : onKeyDown}
+        onKeyDownCapture={disabled ? undefined : onKeyDownCapture}
         onKeyPress={disabled ? undefined : onKeyPress}
         onSelect={disabled ? undefined : onSelect}
-        readOnly={disabled}
+        placeholder={placeholder}
+        readOnly={readOnly || disabled}
         ref={ref}
+        rows={rows}
         tabIndex={disabled ? -1 : tabIndex}
         {...props}
       />
@@ -45,25 +92,39 @@ const AccessibleTextArea = forwardRef(
 );
 
 AccessibleTextArea.defaultProps = {
+  className: undefined,
   disabled: undefined,
+  inputMode: undefined,
   onChange: undefined,
   onFocus: undefined,
   onKeyDown: undefined,
+  onKeyDownCapture: undefined,
   onKeyPress: undefined,
   onSelect: undefined,
-  tabIndex: 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,
-  tabIndex: PropTypes.number
+  placeholder: PropTypes.string,
+  readOnly: PropTypes.bool,
+  rows: PropTypes.number,
+  tabIndex: PropTypes.number,
+  value: PropTypes.string
 };
 
 export default AccessibleTextArea;

package/src/Utils/TypeFocusSink/FocusBox.js

@@ -12,10 +12,10 @@ const DEFAULT_STYLE = { outline: 0 };
 
 const BaseFocusBox = ({ children, disabled, onKeyDownCapture, sendFocusRef: sendFocusRefProp, ...otherProps }, ref) => {
   const sendFocusRefPersist = useRef(null);
-  const patchedSendFocusRef = useMemo(() => sendFocusRefProp || sendFocusRefPersist, [
-    sendFocusRefPersist,
-    sendFocusRefProp
-  ]);
+  const patchedSendFocusRef = useMemo(
+    () => sendFocusRefProp || sendFocusRefPersist,
+    [sendFocusRefPersist, sendFocusRefProp]
+  );
 
   const context = useMemo(
     () => ({

package/src/Utils/TypeFocusSink/getTabIndex.ts

@@ -19,7 +19,7 @@ const IE_FOCUSABLE_LIST = [
 const IS_FIREFOX = /Firefox\//iu.test(userAgent);
 const IS_IE = /Trident\//iu.test(userAgent);
 
-export default function getTabIndex(element) {
+export default function getTabIndex(element: HTMLElement): number | null {
   const { tabIndex } = element;
 
   if (IS_IE) {