Fix typings for FullChatComposer (#5580)

* fix typings for fullcomposer

* address PR comment and add changelog

Author: lexi-taylor

CHANGELOG.md

@@ -303,6 +303,8 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 - Fixed aria-label only announcing placeholder in feedback form, in PR [#5567](https://github.com/microsoft/BotFramework-WebChat/pull/5567)
 - Fixed placing focus on the code block content, so it is possible to scroll code via keyboard, in PR [#5575](https://github.com/microsoft/BotFramework-WebChat/pull/5575), by [@OEvgeny](https://github.com/OEvgeny)
 - Fixed [#5581](https://github.com/microsoft/BotFramework-WebChat/issues/5581). Activities should be displayed after upgrading via `npm install`, in PR [#5582](https://github.com/microsoft/BotFramework-WebChat/pull/5582), by [@compulim](https://github.com/compulim)
+- Fixed Composer props types not resolving correctly in React 16 in PR [#5580](https://github.com/microsoft/BotFramework-WebChat/pull/5580),
+by [@lexi-taylor](https://github.com/lexi-taylor)
 
 ### Removed
 

packages/bundle/src/AddFullBundle.tsx

@@ -14,12 +14,14 @@ import { type AdaptiveCardsPackage } from './types/AdaptiveCardsPackage';
 import { type StrictFullBundleStyleOptions } from './types/FullBundleStyleOptions';
 import useComposerProps from './useComposerProps';
 
+type AddFullBundleChildren = ({ extraStyleSet }: { extraStyleSet: any }) => ReactNode;
+
 type AddFullBundleProps = Readonly<{
   adaptiveCardsHostConfig?: any;
   adaptiveCardsPackage?: AdaptiveCardsPackage;
   attachmentForScreenReaderMiddleware?: OneOrMany<AttachmentForScreenReaderMiddleware>;
   attachmentMiddleware?: OneOrMany<AttachmentMiddleware>;
-  children: ({ extraStyleSet }: { extraStyleSet: any }) => ReactNode;
+  children: AddFullBundleChildren;
   htmlContentTransformMiddleware?: HTMLContentTransformMiddleware[];
   renderMarkdown?: (
     markdown: string,
@@ -74,4 +76,4 @@ function AddFullBundle({
 
 export default memo(AddFullBundle);
 
-export type { AddFullBundleProps };
+export type { AddFullBundleProps, AddFullBundleChildren };

packages/bundle/src/FullComposer.tsx

@@ -1,12 +1,20 @@
 import { Components, type ComposerProps } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
 import React from 'react';
-
-import AddFullBundle, { type AddFullBundleProps } from './AddFullBundle';
+import AddFullBundle, { type AddFullBundleProps, type AddFullBundleChildren } from './AddFullBundle';
 
 const { Composer } = Components;
 
-type FullComposerProps = ComposerProps & AddFullBundleProps;
+type BaseFullComposerProps = ComposerProps & AddFullBundleProps;
+
+type ComposerPropsChildren = ComposerProps['children'];
+
+/* The props of FullComposer are the union of Composer and AddFullBundle, except "children".
+ * The union type of ComposerProps and AddFullBundleProps was not resolving correctly, so manually constructing the type here.
+ */
+type FullComposerProps = Omit<BaseFullComposerProps, 'children'> & {
+  children?: ComposerPropsChildren | AddFullBundleChildren;
+};
 
 const FullComposer = (props: FullComposerProps) => (
   <AddFullBundle {...props}>

packages/bundle/test-d/fail-once/full-composer-props-children-invalid.test-d.tsx

@@ -0,0 +1,9 @@
+import '../setup';
+
+import { expectNotAssignable } from 'tsd';
+import { type FullComposerProps } from '../../src/FullComposer';
+
+// Negative test: `directLine` is required in FullComposerProps.
+// An empty object should not satisfy FullComposerProps.
+
+expectNotAssignable<FullComposerProps>({});

packages/bundle/test-d/pass/full-composer-props-children.test-d.tsx

@@ -0,0 +1,52 @@
+import '../setup';
+
+import React from 'react';
+import { expectAssignable } from 'tsd';
+
+import { type FullComposerProps } from '../../src/FullComposer';
+import { type ComposerProps } from 'botframework-webchat-component';
+import { Components } from 'botframework-webchat-component';
+
+type ComposerCoreChildrenRenderProp = ComposerProps['children'];
+
+// We want to assert that `children` on FullComposerProps accepts:
+// 1. React.ReactNode
+// 2. ComposerCoreChildrenRenderProp
+// 3. AddFullBundleChildren (({ extraStyleSet }: { extraStyleSet: any }) => React.ReactNode)
+// and is optional.
+
+// Helper asserting assignability.
+const expectProps = <T extends FullComposerProps>(props: T) => expectAssignable<FullComposerProps>(props);
+
+// Minimal required props: we must supply a `directLine` from ComposerProps.
+// Using a minimal mock for `directLine` which satisfies DirectLineJSBotConnection shape needed for types only.
+const mockDirectLine: any = {
+  activity$: { subscribe: () => ({ unsubscribe: () => undefined }) },
+  connectionStatus$: { subscribe: () => ({ unsubscribe: () => undefined }) },
+  postActivity: () => ({ subscribe: () => ({ unsubscribe: () => undefined }) })
+};
+
+// 1. Without children (children optional)
+expectProps({ directLine: mockDirectLine });
+
+// 2. With ReactNode child
+expectProps({ directLine: mockDirectLine, children: <div /> });
+
+// 3. With ComposerCoreChildrenRenderProp child
+// The API context type is opaque here; we just confirm it is callable.
+const composerCoreChildren: ComposerCoreChildrenRenderProp = () => <div />;
+expectProps({ directLine: mockDirectLine, children: composerCoreChildren });
+
+// 4. With AddFullBundleChildren child (takes { extraStyleSet })
+const addFullBundleChildren = ({ extraStyleSet }: { extraStyleSet: any }) => <div>{String(!!extraStyleSet)}</div>;
+expectProps({ directLine: mockDirectLine, children: addFullBundleChildren });
+
+// Also ensure baseline Composer (from Components) still type checks for overlapping accepted children.
+const { Composer } = Components;
+const _c1 = <Composer directLine={mockDirectLine} />;
+const _c2 = <Composer directLine={mockDirectLine}>{composerCoreChildren}</Composer>;
+const _c3 = (
+  <Composer directLine={mockDirectLine}>
+    <div />
+  </Composer>
+);