botframework-webchat-api 4.17.1 → 4.18.1-hotfix.20260127.b53acdf

package/src/hooks/Composer.tsx

@@ -32,7 +32,7 @@ import {
   type WebChatActivity
 } from 'botframework-webchat-core';
 import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, type ComponentType, type ReactNode } from 'react';
 import { Provider } from 'react-redux';
 import updateIn from 'simple-update-in';
 
@@ -43,8 +43,10 @@ import normalizeStyleOptions from '../normalizeStyleOptions';
 import patchStyleOptionsFromDeprecatedProps from '../patchStyleOptionsFromDeprecatedProps';
 import ActivityAcknowledgementComposer from '../providers/ActivityAcknowledgement/ActivityAcknowledgementComposer';
 import ActivityKeyerComposer from '../providers/ActivityKeyer/ActivityKeyerComposer';
+import ActivityListenerComposer from '../providers/ActivityListener/ActivityListenerComposer';
 import ActivitySendStatusComposer from '../providers/ActivitySendStatus/ActivitySendStatusComposer';
 import ActivitySendStatusTelemetryComposer from '../providers/ActivitySendStatusTelemetry/ActivitySendStatusTelemetryComposer';
+import ActivityTypingComposer from '../providers/ActivityTyping/ActivityTypingComposer';
 import PonyfillComposer from '../providers/Ponyfill/PonyfillComposer';
 import ActivityMiddleware from '../types/ActivityMiddleware';
 import { type ActivityStatusMiddleware, type RenderActivityStatus } from '../types/ActivityStatusMiddleware';
@@ -52,6 +54,7 @@ import AttachmentForScreenReaderMiddleware from '../types/AttachmentForScreenRea
 import AttachmentMiddleware from '../types/AttachmentMiddleware';
 import AvatarMiddleware from '../types/AvatarMiddleware';
 import CardActionMiddleware from '../types/CardActionMiddleware';
+import { type ContextOf } from '../types/ContextOf';
 import GroupActivitiesMiddleware from '../types/GroupActivitiesMiddleware';
 import LocalizedStrings from '../types/LocalizedStrings';
 import PrecompiledGlobalizeType from '../types/PrecompiledGlobalize';
@@ -59,7 +62,6 @@ import ScrollToEndButtonMiddleware, { ScrollToEndButtonComponentFactory } from '
 import TelemetryMeasurementEvent, { TelemetryExceptionMeasurementEvent } from '../types/TelemetryMeasurementEvent';
 import ToastMiddleware from '../types/ToastMiddleware';
 import TypingIndicatorMiddleware from '../types/TypingIndicatorMiddleware';
-import { type ContextOf } from '../types/ContextOf';
 import createCustomEvent from '../utils/createCustomEvent';
 import isObject from '../utils/isObject';
 import mapMap from '../utils/mapMap';
@@ -67,7 +69,7 @@ import normalizeLanguage from '../utils/normalizeLanguage';
 import { SendBoxMiddlewareProvider, type SendBoxMiddleware } from './internal/SendBoxMiddleware';
 import { SendBoxToolbarMiddlewareProvider, type SendBoxToolbarMiddleware } from './internal/SendBoxToolbarMiddleware';
 import Tracker from './internal/Tracker';
-import { default as WebChatAPIContext } from './internal/WebChatAPIContext';
+import WebChatAPIContext, { type WebChatAPIContextType } from './internal/WebChatAPIContext';
 import WebChatReduxContext, { useDispatch } from './internal/WebChatReduxContext';
 import defaultSelectVoice from './internal/defaultSelectVoice';
 import applyMiddleware, {
@@ -75,14 +77,15 @@ import applyMiddleware, {
   forRenderer as applyMiddlewareForRenderer
 } from './middleware/applyMiddleware';
 import createDefaultCardActionMiddleware from './middleware/createDefaultCardActionMiddleware';
-import createDefaultGroupActivitiesMiddleware from './middleware/createDefaultGroupActivitiesMiddleware';
 import useMarkAllAsAcknowledged from './useMarkAllAsAcknowledged';
 import ErrorBoundary from './utils/ErrorBoundary';
 import observableToPromise from './utils/observableToPromise';
 
 // PrecompileGlobalize is a generated file and is not ES module. TypeScript don't work with UMD.
 // @ts-ignore
-import PrecompiledGlobalize from '../external/PrecompiledGlobalize.cjs';
+import PrecompiledGlobalize from '../external/PrecompiledGlobalize';
+import GroupActivitiesComposer from '../providers/GroupActivities/GroupActivitiesComposer';
+import { parseUIState } from './validation/uiState';
 
 // List of Redux actions factory we are hoisting as Web Chat functions
 const DISPATCHERS = {
@@ -109,16 +112,20 @@ const DISPATCHERS = {
   submitSendBox
 };
 
+const EMPTY_ARRAY: readonly [] = Object.freeze([]);
+
 function createCardActionContext({
   cardActionMiddleware,
+  continuous,
   directLine,
   dispatch,
   markAllAsAcknowledged,
   ponyfill
 }: {
   cardActionMiddleware: readonly CardActionMiddleware[];
+  continuous: boolean;
   directLine: DirectLineJSBotConnection;
-  dispatch: Function;
+  dispatch: (...args: unknown[]) => unknown;
   markAllAsAcknowledged: () => void;
   ponyfill: GlobalScopePonyfill;
 }) {
@@ -132,6 +139,11 @@ function createCardActionContext({
     onCardAction: (cardAction, { target }: { target?: any } = {}) => {
       markAllAsAcknowledged();
 
+      // Stop speech recognition only if under interactive mode.
+      if (!continuous) {
+        dispatch(stopDictate());
+      }
+
       return runMiddleware({
         cardAction,
         getSignInUrl:
@@ -161,26 +173,6 @@ function createCardActionContext({
   };
 }
 
-function createGroupActivitiesContext({
-  groupActivitiesMiddleware,
-  groupTimestamp,
-  ponyfill
-}: {
-  groupActivitiesMiddleware: readonly GroupActivitiesMiddleware[];
-  groupTimestamp: boolean | number;
-  ponyfill: GlobalScopePonyfill;
-}) {
-  const runMiddleware = applyMiddleware(
-    'group activities',
-    ...groupActivitiesMiddleware,
-    createDefaultGroupActivitiesMiddleware({ groupTimestamp, ponyfill })
-  );
-
-  return {
-    groupActivities: runMiddleware({})
-  };
-}
-
 function mergeStringsOverrides(localizedStrings, language, overrideLocalizedStrings) {
   if (!overrideLocalizedStrings) {
     return localizedStrings;
@@ -213,9 +205,12 @@ type ComposerCoreProps = Readonly<{
   attachmentMiddleware?: OneOrMany<AttachmentMiddleware>;
   avatarMiddleware?: OneOrMany<AvatarMiddleware>;
   cardActionMiddleware?: OneOrMany<CardActionMiddleware>;
-  children?: ReactNode | ((context: ContextOf<typeof WebChatAPIContext>) => ReactNode);
+  children?: ReactNode | ((context: ContextOf<React.Context<WebChatAPIContextType>>) => ReactNode);
   dir?: string;
   directLine: DirectLineJSBotConnection;
+  /**
+   * @deprecated Please use `uiState="disabled"` instead. This feature will be removed on or after 2026-09-04.
+   */
   disabled?: boolean;
   downscaleImageToDataURL?: (
     blob: Blob,
@@ -226,7 +221,14 @@ type ComposerCoreProps = Readonly<{
   ) => Promise<URL>;
   grammars?: any;
   groupActivitiesMiddleware?: OneOrMany<GroupActivitiesMiddleware>;
-  internalErrorBoxClass?: React.Component | Function;
+  internalErrorBoxClass?:
+    | ComponentType<
+        Readonly<{
+          error: Error;
+          type?: string;
+        }>
+      >
+    | undefined;
   locale?: string;
   onTelemetry?: (event: TelemetryMeasurementEvent) => void;
   overrideLocalizedStrings?: LocalizedStrings | ((strings: LocalizedStrings, language: string) => LocalizedStrings);
@@ -243,6 +245,16 @@ type ComposerCoreProps = Readonly<{
   styleOptions?: StyleOptions;
   toastMiddleware?: OneOrMany<ToastMiddleware>;
   typingIndicatorMiddleware?: OneOrMany<TypingIndicatorMiddleware>;
+  /**
+   * Sets the state of the UI.
+   *
+   * - `undefined` will render normally
+   * - `"blueprint"` will render as few UI elements as possible and should be non-functional
+   *   - Useful for loading scenarios
+   * - `"disabled"` will render most UI elements as non-functional
+   *   - Scrolling may continue to trigger read acknowledgements
+   */
+  uiState?: 'blueprint' | 'disabled' | undefined;
   userID?: string;
   username?: string;
 }>;
@@ -274,6 +286,7 @@ const ComposerCore = ({
   styleOptions,
   toastMiddleware,
   typingIndicatorMiddleware,
+  uiState,
   userID,
   username
 }: ComposerCoreProps) => {
@@ -288,6 +301,8 @@ const ComposerCore = ({
     [styleOptions]
   );
 
+  uiState = parseUIState(uiState, disabled);
+
   useEffect(() => {
     dispatch(setLanguage(locale));
   }, [dispatch, locale]);
@@ -319,12 +334,20 @@ const ComposerCore = ({
     () =>
       createCardActionContext({
         cardActionMiddleware: Object.freeze([...singleToArray(cardActionMiddleware)]),
+        continuous: !!styleOptions.speechRecognitionContinuous,
         directLine,
         dispatch,
         markAllAsAcknowledged,
         ponyfill
       }),
-    [cardActionMiddleware, directLine, dispatch, markAllAsAcknowledged, ponyfill]
+    [
+      cardActionMiddleware,
+      directLine,
+      dispatch,
+      markAllAsAcknowledged,
+      ponyfill,
+      styleOptions.speechRecognitionContinuous
+    ]
   );
 
   const patchedSelectVoice = useMemo(
@@ -332,16 +355,6 @@ const ComposerCore = ({
     [locale, selectVoice]
   );
 
-  const groupActivitiesContext = useMemo(
-    () =>
-      createGroupActivitiesContext({
-        groupActivitiesMiddleware: Object.freeze([...singleToArray(groupActivitiesMiddleware)]),
-        groupTimestamp: patchedStyleOptions.groupTimestamp,
-        ponyfill
-      }),
-    [groupActivitiesMiddleware, patchedStyleOptions.groupTimestamp, ponyfill]
-  );
-
   const hoistedDispatchers = useMemo(
     () =>
       mapMap(
@@ -522,10 +535,9 @@ const ComposerCore = ({
    *       This context should consist of members that are not in the Redux store
    *       i.e. members that are not interested in other types of UIs
    */
-  const context = useMemo<ContextOf<typeof WebChatAPIContext>>(
+  const context = useMemo<ContextOf<React.Context<WebChatAPIContextType>>>(
     () => ({
       ...cardActionContext,
-      ...groupActivitiesContext,
       ...hoistedDispatchers,
       activityRenderer: patchedActivityRenderer,
       activityStatusRenderer: patchedActivityStatusRenderer,
@@ -534,7 +546,6 @@ const ComposerCore = ({
       avatarRenderer: patchedAvatarRenderer,
       dir: patchedDir,
       directLine,
-      disabled,
       downscaleImageToDataURL,
       grammars: patchedGrammars,
       internalErrorBoxClass,
@@ -551,15 +562,14 @@ const ComposerCore = ({
       toastRenderer: patchedToastRenderer,
       trackDimension,
       typingIndicatorRenderer: patchedTypingIndicatorRenderer,
+      uiState,
       userID,
       username
     }),
     [
       cardActionContext,
       directLine,
-      disabled,
       downscaleImageToDataURL,
-      groupActivitiesContext,
       hoistedDispatchers,
       internalErrorBoxClass,
       locale,
@@ -582,6 +592,7 @@ const ComposerCore = ({
       sendTypingIndicator,
       telemetryDimensionsRef,
       trackDimension,
+      uiState,
       userID,
       username
     ]
@@ -589,14 +600,20 @@ const ComposerCore = ({
 
   return (
     <WebChatAPIContext.Provider value={context}>
-      <ActivitySendStatusComposer>
-        <SendBoxMiddlewareProvider middleware={sendBoxMiddleware || Object.freeze([])}>
-          <SendBoxToolbarMiddlewareProvider middleware={sendBoxToolbarMiddleware || Object.freeze([])}>
-            {typeof children === 'function' ? children(context) : children}
-            <ActivitySendStatusTelemetryComposer />
-          </SendBoxToolbarMiddlewareProvider>
-        </SendBoxMiddlewareProvider>
-      </ActivitySendStatusComposer>
+      <ActivityListenerComposer>
+        <ActivitySendStatusComposer>
+          <ActivityTypingComposer>
+            <SendBoxMiddlewareProvider middleware={sendBoxMiddleware || EMPTY_ARRAY}>
+              <SendBoxToolbarMiddlewareProvider middleware={sendBoxToolbarMiddleware || EMPTY_ARRAY}>
+                <GroupActivitiesComposer groupActivitiesMiddleware={singleToArray(groupActivitiesMiddleware)}>
+                  {typeof children === 'function' ? children(context) : children}
+                </GroupActivitiesComposer>
+                <ActivitySendStatusTelemetryComposer />
+              </SendBoxToolbarMiddlewareProvider>
+            </SendBoxMiddlewareProvider>
+          </ActivityTypingComposer>
+        </ActivitySendStatusComposer>
+      </ActivityListenerComposer>
       {onTelemetry && <Tracker />}
     </WebChatAPIContext.Provider>
   );
@@ -632,6 +649,7 @@ ComposerCore.defaultProps = {
   styleOptions: {},
   toastMiddleware: undefined,
   typingIndicatorMiddleware: undefined,
+  uiState: undefined,
   userID: '',
   username: ''
 };
@@ -664,7 +682,10 @@ ComposerCore.propTypes = {
   downscaleImageToDataURL: PropTypes.func,
   grammars: PropTypes.arrayOf(PropTypes.string),
   groupActivitiesMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
-  internalErrorBoxClass: PropTypes.func, // This is for internal use only. We don't allow customization of error box.
+  // This is for internal use only. We don't allow customization of error box.
+  // - Functional component is of type PropTypes.func
+  // - Memoized functional component is of type PropTypes.object
+  internalErrorBoxClass: PropTypes.oneOfType([PropTypes.any, PropTypes.func]),
   locale: PropTypes.string,
   onTelemetry: PropTypes.func,
   overrideLocalizedStrings: PropTypes.oneOfType([PropTypes.any, PropTypes.func]),
@@ -675,6 +696,7 @@ ComposerCore.propTypes = {
   styleOptions: PropTypes.any,
   toastMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
   typingIndicatorMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
+  uiState: PropTypes.oneOf(['blueprint', 'disabled']),
   userID: PropTypes.string,
   username: PropTypes.string
 };

package/src/hooks/index.ts

@@ -19,13 +19,15 @@ import useDirection from './useDirection';
 import useDisabled from './useDisabled';
 import useDismissNotification from './useDismissNotification';
 import useEmitTypingIndicator from './useEmitTypingIndicator';
+import useGetActivitiesByKey from './useGetActivitiesByKey';
 import useGetActivityByKey from './useGetActivityByKey';
 import useGetHasAcknowledgedByActivityKey from './useGetHasAcknowledgedByActivityKey';
 import useGetKeyByActivity from './useGetKeyByActivity';
 import useGetKeyByActivityId from './useGetKeyByActivityId';
 import useGetSendTimeoutForActivity from './useGetSendTimeoutForActivity';
 import useGrammars from './useGrammars';
-import useGroupActivities from './useGroupActivities';
+import useGroupActivities from '../providers/GroupActivities/useGroupActivities';
+import useGroupActivitiesByName from '../providers/GroupActivities/useGroupActivitiesByName';
 import useGroupTimestamp from './useGroupTimestamp';
 import useLanguage from './useLanguage';
 import useLastAcknowledgedActivityKey from './useLastAcknowledgedActivityKey';
@@ -65,6 +67,7 @@ import useTrackDimension from './useTrackDimension';
 import useTrackEvent from './useTrackEvent';
 import useTrackException from './useTrackException';
 import useTrackTiming from './useTrackTiming';
+import useUIState from './useUIState';
 import useUserID from './useUserID';
 import useUsername from './useUsername';
 import useVoiceSelector from './useVoiceSelector';
@@ -91,6 +94,7 @@ export {
   useDisabled,
   useDismissNotification,
   useEmitTypingIndicator,
+  useGetActivitiesByKey,
   useGetActivityByKey,
   useGetHasAcknowledgedByActivityKey,
   useGetKeyByActivity,
@@ -98,6 +102,7 @@ export {
   useGetSendTimeoutForActivity,
   useGrammars,
   useGroupActivities,
+  useGroupActivitiesByName,
   useGroupTimestamp,
   useLanguage,
   useLastAcknowledgedActivityKey,
@@ -137,6 +142,7 @@ export {
   useTrackEvent,
   useTrackException,
   useTrackTiming,
+  useUIState,
   useUserID,
   useUsername,
   useVoiceSelector

package/src/hooks/internal/SendBoxMiddleware.ts

@@ -1,11 +1,13 @@
 import templateMiddleware from './private/templateMiddleware';
 
 const {
+  initMiddleware: initSendBoxMiddleware,
   Provider: SendBoxMiddlewareProvider,
   Proxy: SendBoxMiddlewareProxy,
-  rectifyProps: rectifySendBoxMiddlewareProps,
+  // False positive, `types` is used for its typing.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   types
-} = templateMiddleware<{ className?: string | undefined }>('sendBoxMiddleware');
+} = templateMiddleware<undefined, void, { className?: string | undefined }>('sendBoxMiddleware');
 
 type SendBoxMiddleware = typeof types.middleware;
 type SendBoxMiddlewareProps = typeof types.props;
@@ -14,7 +16,7 @@ type SendBoxMiddlewareRequest = typeof types.request;
 export {
   SendBoxMiddlewareProvider,
   SendBoxMiddlewareProxy,
-  rectifySendBoxMiddlewareProps,
+  initSendBoxMiddleware,
   type SendBoxMiddleware,
   type SendBoxMiddlewareProps,
   type SendBoxMiddlewareRequest

package/src/hooks/internal/SendBoxToolbarMiddleware.ts

@@ -1,11 +1,13 @@
 import templateMiddleware from './private/templateMiddleware';
 
 const {
+  initMiddleware: initSendBoxToolbarMiddleware,
   Provider: SendBoxToolbarMiddlewareProvider,
   Proxy: SendBoxToolbarMiddlewareProxy,
-  rectifyProps: rectifySendBoxToolbarMiddlewareProps,
+  // False positive, `types` is used for its typing.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   types
-} = templateMiddleware<{ className?: string | undefined }>('sendBoxToolbarMiddleware');
+} = templateMiddleware<undefined, void, { className?: string | undefined }>('sendBoxToolbarMiddleware');
 
 type SendBoxToolbarMiddleware = typeof types.middleware;
 type SendBoxToolbarMiddlewareProps = typeof types.props;
@@ -14,7 +16,7 @@ type SendBoxToolbarMiddlewareRequest = typeof types.request;
 export {
   SendBoxToolbarMiddlewareProvider,
   SendBoxToolbarMiddlewareProxy,
-  rectifySendBoxToolbarMiddlewareProps,
+  initSendBoxToolbarMiddleware,
   type SendBoxToolbarMiddleware,
   type SendBoxToolbarMiddlewareProps,
   type SendBoxToolbarMiddlewareRequest

package/src/hooks/internal/Tracker.ts

@@ -1,6 +1,6 @@
 import useTracker from './useTracker';
 
-const Tracker: React.FC<{}> = () => {
+const Tracker = () => {
   useTracker();
 
   return null;

package/src/hooks/internal/WebChatAPIContext.ts

@@ -6,7 +6,7 @@ import {
   type sendMessage,
   type setSendBoxAttachments
 } from 'botframework-webchat-core';
-import { createContext } from 'react';
+import { createContext, type ComponentType } from 'react';
 
 import { StrictStyleOptions } from '../../StyleOptions';
 import { LegacyActivityRenderer } from '../../types/ActivityMiddleware';
@@ -23,7 +23,7 @@ import { ScrollToEndButtonComponentFactory } from '../../types/ScrollToEndButton
 import TelemetryMeasurementEvent from '../../types/TelemetryMeasurementEvent';
 import { RenderToast } from '../../types/ToastMiddleware';
 
-type WebChatAPIContext = {
+export type WebChatAPIContextType = {
   activityRenderer?: LegacyActivityRenderer;
   activityStatusRenderer: RenderActivityStatus;
   attachmentForScreenReaderRenderer?: AttachmentForScreenReaderComponentFactory;
@@ -32,7 +32,6 @@ type WebChatAPIContext = {
   clearSuggestedActions?: () => void;
   dir?: string;
   directLine?: DirectLineJSBotConnection;
-  disabled?: boolean;
   dismissNotification?: (id: string) => void;
   downscaleImageToDataURL?: (
     blob: Blob,
@@ -44,7 +43,14 @@ type WebChatAPIContext = {
   emitTypingIndicator?: () => void;
   grammars?: any;
   groupActivities?: GroupActivities;
-  internalErrorBoxClass?: React.Component | Function;
+  internalErrorBoxClass?:
+    | ComponentType<
+        Readonly<{
+          error: Error;
+          type?: string;
+        }>
+      >
+    | undefined;
   language?: string;
   localizedGlobalizeState?: PrecompiledGlobalize[];
   localizedStrings?: { [language: string]: LocalizedStrings };
@@ -84,11 +90,12 @@ type WebChatAPIContext = {
   toastRenderer?: RenderToast;
   trackDimension?: (name: string, data: any) => void;
   typingIndicatorRenderer?: any; // TODO
+  uiState: 'blueprint' | 'disabled' | undefined;
   userID?: string;
   username?: string;
 };
 
-const context = createContext<WebChatAPIContext>(undefined);
+const context = createContext<WebChatAPIContextType>(undefined);
 
 context.displayName = 'WebChatAPIContext';
 

package/src/hooks/internal/private/templateMiddleware.ts

@@ -1,44 +1,4 @@
-import { warnOnce } from 'botframework-webchat-core';
-import { createChainOfResponsibility, type ComponentMiddleware } from 'react-chain-of-responsibility';
-import { type EmptyObject } from 'type-fest';
-import { any, array, custom, safeParse, type Output } from 'valibot';
+import templateMiddleware from '../../../decorator/private/templateMiddleware';
 
-export default function createMiddlewareFacility<Props extends {} = EmptyObject, Request extends {} = EmptyObject>(
-  name: string
-) {
-  type Middleware = ComponentMiddleware<Request, Props>;
-
-  const validateMiddleware = custom<Middleware>(input => typeof input === 'function', 'Middleware must be a function.');
-
-  const middlewareSchema = array(any([validateMiddleware]));
-
-  const isMiddleware = (middleware: unknown): middleware is Output<typeof middlewareSchema> =>
-    safeParse(middlewareSchema, middleware).success;
-
-  const warnInvalid = warnOnce(`"${name}" prop is invalid`);
-
-  const rectifyProps = (middleware: unknown): readonly Middleware[] => {
-    if (middleware) {
-      if (isMiddleware(middleware)) {
-        return Object.isFrozen(middleware) ? middleware : Object.freeze([...middleware]);
-      }
-
-      warnInvalid();
-    }
-
-    return Object.freeze([]);
-  };
-
-  const { Provider, Proxy } = createChainOfResponsibility<Request, Props>();
-
-  return {
-    types: {
-      middleware: {} as Middleware,
-      props: {} as Props,
-      request: {} as Request
-    },
-    Provider,
-    Proxy,
-    rectifyProps
-  };
-}
+// TODO: We should move them to a common directory.
+export default templateMiddleware;

package/src/hooks/internal/usePrevious.ts

@@ -1,7 +1,10 @@
 import { useEffect, useRef } from 'react';
 
-export default function usePrevious<T>(value: T): T {
-  const ref = useRef<T>();
+export default function usePrevious<T>(value: T): T | undefined;
+export default function usePrevious<T>(value: T, initialValue: T): T;
+
+export default function usePrevious<T>(value: T, initialValue?: T | undefined): T | undefined {
+  const ref = useRef<T | undefined>(initialValue);
 
   useEffect(() => {
     ref.current = value;

package/src/hooks/middleware/concatMiddleware.spec.js

@@ -53,3 +53,23 @@ test('one middleware ran twice by a single upstream middleware', () => {
 
   expect(work(1)).toEqual(210);
 });
+
+test('a middleware return undefined after setup should be skipped', () => {
+  const enhancer = concatMiddleware(
+    () => next => value => next(value + 2),
+    () => undefined,
+    () => next => value => next(value * 3)
+  );
+
+  expect(enhancer()(value => value)(5)).toEqual(21); // (5 + 2) * 3
+});
+
+test('an undefined middleware should be skipped', () => {
+  const enhancer = concatMiddleware(
+    () => next => value => next(value + 2),
+    undefined,
+    () => next => value => next(value * 3)
+  );
+
+  expect(enhancer()(value => value)(5)).toEqual(21); // (5 + 2) * 3
+});

package/src/hooks/middleware/concatMiddleware.ts

@@ -1,4 +1,4 @@
-type Work<T> = (...args: any[]) => T;
+type Work<T> = (...args: unknown[]) => T;
 type Enhancer<T> = (next: Work<T>) => Work<T>;
 type Middleware<Setup, Result> = (setup: Setup) => Enhancer<Result>;
 
@@ -6,10 +6,11 @@ export default function concatMiddleware<Setup, Result>(
   ...middleware: Middleware<Setup, Result>[]
 ): Middleware<Setup, Result> {
   return setupArgs => {
-    const setup = middleware.reduce(
-      (setup, middleware) => (middleware ? [...setup, middleware(setupArgs)] : setup),
-      []
-    );
+    const setup = middleware.reduce((setup, middleware) => {
+      const enhancer = middleware?.(setupArgs);
+
+      return enhancer ? [...setup, enhancer] : setup;
+    }, []);
 
     return last => {
       const stack = setup.slice();

package/src/hooks/private/numberWithInfinity.spec.ts

@@ -0,0 +1,9 @@
+import numberWithInfinity from './numberWithInfinity';
+
+test('passing "Infinity" should return Infinity', () => expect(numberWithInfinity('Infinity')).toBe(Infinity));
+test('passing "-Infinity" should return -Infinity', () => expect(numberWithInfinity('-Infinity')).toBe(-Infinity));
+test('passing 0 should return 0', () => expect(numberWithInfinity(0)).toBe(0));
+test('passing -0 should return -0', () => expect(numberWithInfinity(-0)).toBe(-0));
+test('passing 1 should return 1', () => expect(numberWithInfinity(1)).toBe(1));
+test('passing "1" should return undefined', () => expect(numberWithInfinity('1' as any)).toBeUndefined());
+test('passing "ABC" should return undefined', () => expect(numberWithInfinity('ABC' as any)).toBeUndefined());

package/src/hooks/private/numberWithInfinity.ts

@@ -0,0 +1,15 @@
+export default function numberWithInfinity(value: number | 'Infinity' | '-Infinity'): number;
+export default function numberWithInfinity(value: unknown): undefined;
+
+export default function numberWithInfinity(value: number | 'Infinity' | '-Infinity' | unknown): number | undefined {
+  switch (value) {
+    case 'Infinity':
+      return Infinity;
+
+    case '-Infinity':
+      return -Infinity;
+
+    default:
+      return typeof value === 'number' ? value : undefined;
+  }
+}

package/src/hooks/private/reduceIterable.spec.ts

@@ -0,0 +1,29 @@
+import reduceIterable from './reduceIterable';
+
+describe('when called with a summation reducer', () => {
+  let reducer: jest.Mock<number, [number, string]>;
+  let actual: number;
+
+  beforeEach(() => {
+    reducer = jest.fn((intermediate, value) => intermediate + +value);
+    actual = reduceIterable(['1', '2', '3'].values(), reducer, 100);
+  });
+
+  test('should return summation', () => expect(actual).toBe(106));
+  test('should have called reducer 3 times', () => expect(reducer).toHaveBeenCalledTimes(3));
+  test("should have called reducer with (100, '1')", () => expect(reducer).toHaveBeenNthCalledWith(1, 100, '1'));
+  test("should have called reducer with (101, '2')", () => expect(reducer).toHaveBeenNthCalledWith(2, 101, '2'));
+  test("should have called reducer with (103, '3')", () => expect(reducer).toHaveBeenNthCalledWith(3, 103, '3'));
+});
+
+describe('when called with an empty array', () => {
+  let reducer: jest.Mock<number, [number, string]>;
+  let actual: number;
+
+  beforeEach(() => {
+    reducer = jest.fn();
+    actual = reduceIterable([].values(), reducer, 100);
+  });
+
+  test('should return initial value', () => expect(actual).toBe(100));
+});

package/src/hooks/private/reduceIterable.ts

@@ -0,0 +1,13 @@
+export default function reduceIterable<T, U>(
+  iterable: Iterable<T>,
+  reducer: (intermediate: U, item: T) => U,
+  initial: U
+): U {
+  let intermediate = initial;
+
+  for (const item of iterable) {
+    intermediate = reducer(intermediate, item);
+  }
+
+  return intermediate;
+}