@atlaskit/renderer 109.7.0 → 109.7.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/renderer
 
+## 109.7.1
+
+### Patch Changes
+
+- [#78877](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/78877) [`e5ca78a1788d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e5ca78a1788d) - Upgrade @atlaskit/renderer types to be React 18 compatible
+
 ## 109.7.0
 
 ### Minor Changes

package/dist/cjs/react/nodes/codeBlock/components/codeBlockCopyButton.js

@@ -1,14 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
-var _react2 = _interopRequireWildcard(require("react"));
+var _react2 = require("react");
 var _reactIntlNext = require("react-intl-next");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
@@ -17,8 +16,6 @@ var _clipboard = require("../../../utils/clipboard");
 var _messages = require("@atlaskit/editor-common/messages");
 var _enums = require("../../../../analytics/enums");
 var _analyticsContext = _interopRequireDefault(require("../../../../analytics/analyticsContext"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /** @jsx jsx */
 
 var CopyButton = function CopyButton(_ref) {

package/dist/cjs/react/nodes/codeBlock/components/codeBlockWrapButton.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
-var _react2 = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));

package/dist/cjs/ui/Renderer/index.js

@@ -55,7 +55,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.7.0";
+var packageVersion = "109.7.1";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/es2019/react/nodes/codeBlock/components/codeBlockCopyButton.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/custom-theme-button';

package/dist/es2019/react/nodes/codeBlock/components/codeBlockWrapButton.js

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/custom-theme-button';

package/dist/es2019/ui/Renderer/index.js

@@ -36,7 +36,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.7.0";
+const packageVersion = "109.7.1";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/esm/react/nodes/codeBlock/components/codeBlockCopyButton.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/custom-theme-button';

package/dist/esm/react/nodes/codeBlock/components/codeBlockWrapButton.js

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/custom-theme-button';

package/dist/esm/ui/Renderer/index.js

@@ -46,7 +46,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.7.0";
+var packageVersion = "109.7.1";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/types/react/marks/index.d.ts

@@ -16,7 +16,7 @@ import FragmentMark from './fragment';
 import Annotation, { isAnnotationMark } from './annotation';
 import Border from './border';
 export declare const markToReact: {
-    [key: string]: ComponentType<any>;
+    [key: string]: ComponentType<React.PropsWithChildren<any>>;
 };
-export declare const toReact: (mark: Mark) => ComponentType<any>;
+export declare const toReact: (mark: Mark) => ComponentType<React.PropsWithChildren<any>>;
 export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, Border, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark, };

package/dist/types/react/nodes/blockquote.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export default function Blockquote(props: React.Props<any>): JSX.Element;
+export default function Blockquote(props: React.PropsWithChildren<unknown>): JSX.Element;

package/dist/types/react/nodes/bodiedExtension.d.ts

@@ -20,5 +20,5 @@ export interface Props {
     localId?: string;
     marks?: PMMark[];
 }
-declare const BodiedExtension: React.FunctionComponent<Props>;
+declare const BodiedExtension: React.FunctionComponent<React.PropsWithChildren<Props>>;
 export default BodiedExtension;

package/dist/types/react/nodes/bulletList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Node } from '@atlaskit/editor-prosemirror/model';
-export default function BulletList(props: {
+import type { Node } from '@atlaskit/editor-prosemirror/model';
+export default function BulletList(props: React.PropsWithChildren<{
     path?: Node[];
-} & React.Props<any>): JSX.Element;
+}>): JSX.Element;

package/dist/types/react/nodes/codeBlock/components/codeBlockCopyButton.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import { WrappedComponentProps } from 'react-intl-next';
 type Props = {
     content: string;
 };
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types/react/nodes/codeBlock/components/codeBlockWrapButton.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
 import type { Dispatch, SetStateAction } from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
 type Props = {
     setWrapLongLines: Dispatch<SetStateAction<boolean>>;
     wrapLongLines?: boolean;
 };
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types/react/nodes/extensionFrame.d.ts

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { RendererContext } from '../types';
@@ -20,5 +21,5 @@ export interface Props {
     layout?: ExtensionLayout;
     localId?: string;
 }
-declare const ExtensionFrame: React.FunctionComponent<Props>;
+declare const ExtensionFrame: (props: React.PropsWithChildren<Props>) => jsx.JSX.Element;
 export default ExtensionFrame;

package/dist/types/react/nodes/fallback.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export type CardErrorBoundaryProps = {
-    unsupportedComponent: React.ComponentType;
+    unsupportedComponent: React.ComponentType<React.PropsWithChildren<unknown>>;
 };
 export declare class CardErrorBoundary extends React.PureComponent<{
     url?: string;

package/dist/types/react/nodes/hardBreak.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+/// <reference types="react" />
 interface Props {
     forceNewLine?: boolean;
 }
-declare const HardBreak: React.FunctionComponent<Props>;
+declare const HardBreak: ({ forceNewLine }: Props) => JSX.Element;
 export default HardBreak;

package/dist/types/react/nodes/heading-anchor.d.ts

@@ -1,13 +1,6 @@
 import React from 'react';
-import type { WrappedComponentProps } from 'react-intl-next';
 export declare const HeadingAnchorWrapperClassName = "heading-anchor-wrapper";
-type Props = {
-    onCopyText: () => Promise<void>;
-    enableNestedHeaderLinks?: boolean;
-    level: number;
-};
-type HeadingAnchorProps = Props & React.Props<any> & WrappedComponentProps;
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<HeadingAnchorProps>> & {
-    WrappedComponent: React.ComponentType<HeadingAnchorProps>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<any>> & {
+    WrappedComponent: React.ComponentType<any>;
 };
 export default _default;

package/dist/types/react/nodes/index.d.ts

@@ -71,13 +71,13 @@ declare const MediaSingle: React.ComponentType<import("react-intl-next").WithInt
 declare const Mention: React.ComponentType<import("./mention").Props> & Loadable.LoadableComponent;
 declare const Expand: React.ComponentType<import("react-intl-next").WithIntlProps<import("../../ui/Expand").ExpandProps & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
 export declare const nodeToReact: {
-    [key: string]: React.ComponentType<any>;
+    [key: string]: React.ComponentType<React.PropsWithChildren<any>>;
 };
 export interface ToReactFlags {
     allowSelectAllTrap?: boolean;
     allowWindowedCodeBlock?: boolean;
 }
-export declare const toReact: (node: Node, flags?: ToReactFlags, nodeComponents?: NodeComponentsProps) => React.ComponentType<any>;
+export declare const toReact: (node: Node, flags?: ToReactFlags, nodeComponents?: NodeComponentsProps) => React.ComponentType<React.PropsWithChildren<any>>;
 export interface TextWrapper {
     type: {
         name: 'textWrapper';

package/dist/types/react/nodes/inlineExtension.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import type { RendererContext } from '../types';
 import type { Mark as PMMark } from '@atlaskit/editor-prosemirror/model';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
@@ -14,5 +14,5 @@ export interface Props {
     localId?: string;
     marks?: PMMark[];
 }
-declare const InlineExtension: React.FunctionComponent<Props>;
+declare const InlineExtension: (props: Props) => JSX.Element;
 export default InlineExtension;

package/dist/types/react/nodes/layoutColumn.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-export default function LayoutSection(props: {
+export default function LayoutSection(props: React.PropsWithChildren<{
     width?: number;
-} & React.Props<any>): jsx.JSX.Element;
+}>): jsx.JSX.Element;

package/dist/types/react/nodes/layoutSection.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export default function LayoutSection(props: React.Props<any>): JSX.Element;
+export default function LayoutSection(props: React.PropsWithChildren<unknown>): JSX.Element;

package/dist/types/react/nodes/listItem.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export default function ListItem(props: React.Props<any>): JSX.Element;
+export default function ListItem(props: React.PropsWithChildren<unknown>): JSX.Element;

package/dist/types/react/nodes/mediaInline.d.ts

@@ -3,7 +3,6 @@ import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { FileIdentifier } from '@atlaskit/media-client';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';
-import type { FC } from 'react';
 import React from 'react';
 import type { IntlShape, WrappedComponentProps } from 'react-intl-next';
 import type { ClipboardAttrs } from '../../ui/MediaCard';
@@ -32,8 +31,8 @@ export type MediaInlineProps = {
     marks?: Array<Mark>;
     ssr?: MediaSSR;
 };
-export declare const RenderMediaInline: FC<RenderMediaInlineProps>;
-declare const _default: FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>> & {
+export declare const RenderMediaInline: ({ rendererAppearance, clipboardAttrs, collection: collectionName, eventHandlers, identifier, }: RenderMediaInlineProps) => JSX.Element;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>> & {
     WrappedComponent: React.ComponentType<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>;
 };
 export default _default;

package/dist/types/react/nodes/multiBodiedExtension.d.ts

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import type { Mark as PMMark, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { RendererContext } from '../types';
@@ -21,5 +22,5 @@ export interface Props {
     localId?: string;
     marks?: PMMark[];
 }
-declare const MultiBodiedExtension: React.FunctionComponent<Props>;
+declare const MultiBodiedExtension: (props: React.PropsWithChildren<Props>) => jsx.JSX.Element;
 export default MultiBodiedExtension;

package/dist/types/react/nodes/table/sticky.d.ts

@@ -13,7 +13,7 @@ interface FixedProps {
     mode: StickyMode;
     rendererAppearance: RendererAppearance;
 }
-export declare const FixedTableDiv: React.FC<FixedProps>;
+export declare const FixedTableDiv: (props: React.PropsWithChildren<FixedProps>) => jsx.JSX.Element;
 export type StickyTableProps = {
     left?: number;
     top?: number;

package/dist/types/react/nodes/unknownBlock.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export default function UnknownBlock(props: React.Props<any>): JSX.Element;
+export default function UnknownBlock(props: React.PropsWithChildren<unknown>): JSX.Element;

package/dist/types/react/utils/EditorMediaClientProvider.d.ts

@@ -1,5 +1,5 @@
-import type { FC } from 'react';
+import React from 'react';
 import type { MediaSSR } from '../../types/mediaOptions';
-export declare const EditorMediaClientProvider: FC<{
-    ssr?: MediaSSR;
-}>;
+export declare const EditorMediaClientProvider: ({ children, ssr, }: React.PropsWithChildren<{
+    ssr?: MediaSSR | undefined;
+}>) => JSX.Element;

package/dist/types/ui/Renderer/ErrorBoundary.d.ts

@@ -3,6 +3,7 @@ import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { ComponentCrashErrorAEP } from '../../analytics/events';
 interface ErrorBoundaryProps {
     component: ComponentCrashErrorAEP['actionSubject'];
+    children: React.ReactNode;
     componentId?: ComponentCrashErrorAEP['actionSubjectId'];
     fallbackComponent?: React.ReactNode;
     createAnalyticsEvent?: CreateUIAnalyticsEvent;

package/dist/types/ui/Renderer/truncated-wrapper.d.ts

@@ -5,8 +5,9 @@ export interface TruncatedWrapperProps {
     height?: number;
     fadeHeight?: number;
     backgroundColor?: string;
+    children?: React.ReactNode;
 }
-export declare class TruncatedWrapper extends Component<TruncatedWrapperProps, {}> {
+export declare class TruncatedWrapper extends Component<TruncatedWrapperProps, unknown> {
     constructor(props: TruncatedWrapperProps);
     render(): jsx.JSX.Element;
 }

package/dist/types/ui/Renderer/types.d.ts

@@ -11,6 +11,6 @@ export type HeadingAnchorLinksConfig = {
     allowNestedHeaderLinks?: boolean;
 };
 export type NodeComponentsProps = {
-    [key: string]: React.ComponentType<any>;
+    [key: string]: React.ComponentType<React.PropsWithChildren<any>>;
 };
 export type HeadingAnchorLinksProps = boolean | HeadingAnchorLinksConfig;

package/dist/types/ui/SmartCardStorage.d.ts

@@ -4,8 +4,8 @@ export interface WithSmartCardStorageProps {
     smartCardStorage: Map<string, string>;
 }
 export declare const Context: React.Context<Map<string, string>>;
-export declare const Provider: React.FunctionComponent;
-export declare const withSmartCardStorage: <Props extends WithSmartCardStorageProps>(WrappedComponent: React.ComponentType<Props>) => {
+export declare const Provider: ({ children, }: React.PropsWithChildren<unknown>) => JSX.Element;
+export declare const withSmartCardStorage: <Props extends WithSmartCardStorageProps>(WrappedComponent: React.ComponentType<React.PropsWithChildren<Props>>) => {
     new (props: Diff<Props, WithSmartCardStorageProps> | Readonly<Diff<Props, WithSmartCardStorageProps>>): {
         render(): JSX.Element;
         context: any;

package/dist/types/ui/annotations/context.d.ts

@@ -6,7 +6,7 @@ type ChildrenProps = {
     applyAnnotationDraftAt: (position: Position) => void;
     clearAnnotationDraft: () => void;
 };
-export type RenderCallbackType = React.FC<ChildrenProps>;
+export type RenderCallbackType = (props: React.PropsWithChildren<ChildrenProps>) => React.ReactNode;
 type Props = {
     children: RenderCallbackType;
 };

package/dist/types/ui/annotations/draft/component.d.ts

@@ -1,11 +1,12 @@
 /** @jsx jsx */
 import type { ReactNode } from 'react';
 import React from 'react';
+import { jsx } from '@emotion/react';
 import type { Position } from '../types';
 import { InsertDraftPosition } from '../types';
-export declare const AnnotationDraft: React.FC<{
+export declare const AnnotationDraft: ({ draftPosition, children, }: React.PropsWithChildren<{
     draftPosition: Position;
-}>;
+}>) => jsx.JSX.Element;
 type ApplyAnnotationsProps = {
     texts: string[];
     shouldApplyAnnotationAt: InsertDraftPosition.INSIDE | InsertDraftPosition.START | InsertDraftPosition.END;
@@ -18,5 +19,5 @@ type Props = {
     endPos: number;
     children: ReactNode;
 };
-export declare const TextWithAnnotationDraft: React.FC<Props>;
+export declare const TextWithAnnotationDraft: ({ startPos, endPos, children, }: Props) => jsx.JSX.Element;
 export {};

package/dist/types/ui/annotations/element/index.d.ts

@@ -6,5 +6,5 @@ type MarkElementProps = {
     dataAttributes: AnnotationDataAttributes;
     annotationType: AnnotationTypes;
 };
-declare const MarkElement: React.FC<MarkElementProps>;
+declare const MarkElement: ({ annotationParentIds, children, dataAttributes, id, }: React.PropsWithChildren<MarkElementProps>) => JSX.Element;
 export { MarkElement };

package/dist/types/ui/annotations/element/mark.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { jsx } from '@emotion/react';
 import type { OnAnnotationClickPayload } from '@atlaskit/editor-common/types';
 import type { AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
@@ -10,5 +11,5 @@ type MarkComponentProps = {
     hasFocus: boolean;
     onClick: (props: OnAnnotationClickPayload) => void;
 };
-export declare const MarkComponent: React.FC<MarkComponentProps>;
+export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, onClick, }: React.PropsWithChildren<MarkComponentProps>) => jsx.JSX.Element;
 export {};

package/dist/types/ui/annotations/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { AnnotationsWrapperProps } from './types';
-export declare const AnnotationsWrapper: React.FC<AnnotationsWrapperProps>;
+export declare const AnnotationsWrapper: (props: React.PropsWithChildren<AnnotationsWrapperProps>) => JSX.Element;
 export { TextWithAnnotationDraft } from './draft';
 export { MarkElement as AnnotationMark } from './element';

package/dist/types/ui/annotations/selection/mounter.d.ts

@@ -5,7 +5,7 @@ import { Position } from '../types';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 type Props = {
     range: Range;
-    component: React.ComponentType<InlineCommentSelectionComponentProps>;
+    component: React.ComponentType<React.PropsWithChildren<InlineCommentSelectionComponentProps>>;
     wrapperDOM: React.RefObject<HTMLDivElement>;
     documentPosition: Position | false;
     isAnnotationAllowed: boolean;
@@ -16,5 +16,5 @@ type Props = {
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
     generateIndexMatch?: (pos: Position) => false | AnnotationByMatches;
 };
-export declare const SelectionInlineCommentMounter: React.FC<Props>;
+export declare const SelectionInlineCommentMounter: React.MemoExoticComponent<(props: React.PropsWithChildren<Props>) => JSX.Element>;
 export {};

package/dist/types/ui/annotations/selection/range-validator.d.ts

@@ -3,11 +3,11 @@ import { Position } from '../types';
 import type { InlineCommentSelectionComponentProps } from '@atlaskit/editor-common/types';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 type Props = {
-    selectionComponent: React.ComponentType<InlineCommentSelectionComponentProps>;
+    selectionComponent: React.ComponentType<React.PropsWithChildren<InlineCommentSelectionComponentProps>>;
     rendererRef: React.RefObject<HTMLDivElement>;
     applyAnnotationDraftAt: (position: Position) => void;
     clearAnnotationDraft: () => void;
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
 };
-export declare const SelectionRangeValidator: React.FC<Props>;
+export declare const SelectionRangeValidator: (props: Props) => JSX.Element | null;
 export {};

package/dist/types/ui/annotations/view/index.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+/// <reference types="react" />
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 type Props = {
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
 };
-declare const AnnotationView: React.FC<Props>;
+declare const AnnotationView: (props: Props) => JSX.Element | null;
 export { AnnotationView };

package/dist/types-ts4.5/react/marks/index.d.ts

@@ -16,7 +16,7 @@ import FragmentMark from './fragment';
 import Annotation, { isAnnotationMark } from './annotation';
 import Border from './border';
 export declare const markToReact: {
-    [key: string]: ComponentType<any>;
+    [key: string]: ComponentType<React.PropsWithChildren<any>>;
 };
-export declare const toReact: (mark: Mark) => ComponentType<any>;
+export declare const toReact: (mark: Mark) => ComponentType<React.PropsWithChildren<any>>;
 export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, Border, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark, };

package/dist/types-ts4.5/react/nodes/blockquote.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export default function Blockquote(props: React.Props<any>): JSX.Element;
+export default function Blockquote(props: React.PropsWithChildren<unknown>): JSX.Element;

package/dist/types-ts4.5/react/nodes/bodiedExtension.d.ts

@@ -20,5 +20,5 @@ export interface Props {
     localId?: string;
     marks?: PMMark[];
 }
-declare const BodiedExtension: React.FunctionComponent<Props>;
+declare const BodiedExtension: React.FunctionComponent<React.PropsWithChildren<Props>>;
 export default BodiedExtension;

package/dist/types-ts4.5/react/nodes/bulletList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Node } from '@atlaskit/editor-prosemirror/model';
-export default function BulletList(props: {
+import type { Node } from '@atlaskit/editor-prosemirror/model';
+export default function BulletList(props: React.PropsWithChildren<{
     path?: Node[];
-} & React.Props<any>): JSX.Element;
+}>): JSX.Element;

package/dist/types-ts4.5/react/nodes/codeBlock/components/codeBlockCopyButton.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import { WrappedComponentProps } from 'react-intl-next';
 type Props = {
     content: string;
 };
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types-ts4.5/react/nodes/codeBlock/components/codeBlockWrapButton.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
 import type { Dispatch, SetStateAction } from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
 type Props = {
     setWrapLongLines: Dispatch<SetStateAction<boolean>>;
     wrapLongLines?: boolean;
 };
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types-ts4.5/react/nodes/extensionFrame.d.ts

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { RendererContext } from '../types';
@@ -20,5 +21,5 @@ export interface Props {
     layout?: ExtensionLayout;
     localId?: string;
 }
-declare const ExtensionFrame: React.FunctionComponent<Props>;
+declare const ExtensionFrame: (props: React.PropsWithChildren<Props>) => jsx.JSX.Element;
 export default ExtensionFrame;

package/dist/types-ts4.5/react/nodes/fallback.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export type CardErrorBoundaryProps = {
-    unsupportedComponent: React.ComponentType;
+    unsupportedComponent: React.ComponentType<React.PropsWithChildren<unknown>>;
 };
 export declare class CardErrorBoundary extends React.PureComponent<{
     url?: string;

package/dist/types-ts4.5/react/nodes/hardBreak.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+/// <reference types="react" />
 interface Props {
     forceNewLine?: boolean;
 }
-declare const HardBreak: React.FunctionComponent<Props>;
+declare const HardBreak: ({ forceNewLine }: Props) => JSX.Element;
 export default HardBreak;

package/dist/types-ts4.5/react/nodes/heading-anchor.d.ts

@@ -1,13 +1,6 @@
 import React from 'react';
-import type { WrappedComponentProps } from 'react-intl-next';
 export declare const HeadingAnchorWrapperClassName = "heading-anchor-wrapper";
-type Props = {
-    onCopyText: () => Promise<void>;
-    enableNestedHeaderLinks?: boolean;
-    level: number;
-};
-type HeadingAnchorProps = Props & React.Props<any> & WrappedComponentProps;
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<HeadingAnchorProps>> & {
-    WrappedComponent: React.ComponentType<HeadingAnchorProps>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<any>> & {
+    WrappedComponent: React.ComponentType<any>;
 };
 export default _default;

package/dist/types-ts4.5/react/nodes/index.d.ts

@@ -71,13 +71,13 @@ declare const MediaSingle: React.ComponentType<import("react-intl-next").WithInt
 declare const Mention: React.ComponentType<import("./mention").Props> & Loadable.LoadableComponent;
 declare const Expand: React.ComponentType<import("react-intl-next").WithIntlProps<import("../../ui/Expand").ExpandProps & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
 export declare const nodeToReact: {
-    [key: string]: React.ComponentType<any>;
+    [key: string]: React.ComponentType<React.PropsWithChildren<any>>;
 };
 export interface ToReactFlags {
     allowSelectAllTrap?: boolean;
     allowWindowedCodeBlock?: boolean;
 }
-export declare const toReact: (node: Node, flags?: ToReactFlags, nodeComponents?: NodeComponentsProps) => React.ComponentType<any>;
+export declare const toReact: (node: Node, flags?: ToReactFlags, nodeComponents?: NodeComponentsProps) => React.ComponentType<React.PropsWithChildren<any>>;
 export interface TextWrapper {
     type: {
         name: 'textWrapper';

package/dist/types-ts4.5/react/nodes/inlineExtension.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import type { RendererContext } from '../types';
 import type { Mark as PMMark } from '@atlaskit/editor-prosemirror/model';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
@@ -14,5 +14,5 @@ export interface Props {
     localId?: string;
     marks?: PMMark[];
 }
-declare const InlineExtension: React.FunctionComponent<Props>;
+declare const InlineExtension: (props: Props) => JSX.Element;
 export default InlineExtension;

package/dist/types-ts4.5/react/nodes/layoutColumn.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-export default function LayoutSection(props: {
+export default function LayoutSection(props: React.PropsWithChildren<{
     width?: number;
-} & React.Props<any>): jsx.JSX.Element;
+}>): jsx.JSX.Element;

package/dist/types-ts4.5/react/nodes/layoutSection.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export default function LayoutSection(props: React.Props<any>): JSX.Element;
+export default function LayoutSection(props: React.PropsWithChildren<unknown>): JSX.Element;

package/dist/types-ts4.5/react/nodes/listItem.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export default function ListItem(props: React.Props<any>): JSX.Element;
+export default function ListItem(props: React.PropsWithChildren<unknown>): JSX.Element;

package/dist/types-ts4.5/react/nodes/mediaInline.d.ts

@@ -3,7 +3,6 @@ import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { FileIdentifier } from '@atlaskit/media-client';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';
-import type { FC } from 'react';
 import React from 'react';
 import type { IntlShape, WrappedComponentProps } from 'react-intl-next';
 import type { ClipboardAttrs } from '../../ui/MediaCard';
@@ -32,8 +31,8 @@ export type MediaInlineProps = {
     marks?: Array<Mark>;
     ssr?: MediaSSR;
 };
-export declare const RenderMediaInline: FC<RenderMediaInlineProps>;
-declare const _default: FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>> & {
+export declare const RenderMediaInline: ({ rendererAppearance, clipboardAttrs, collection: collectionName, eventHandlers, identifier, }: RenderMediaInlineProps) => JSX.Element;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>> & {
     WrappedComponent: React.ComponentType<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>;
 };
 export default _default;

package/dist/types-ts4.5/react/nodes/multiBodiedExtension.d.ts

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import type { Mark as PMMark, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { RendererContext } from '../types';
@@ -21,5 +22,5 @@ export interface Props {
     localId?: string;
     marks?: PMMark[];
 }
-declare const MultiBodiedExtension: React.FunctionComponent<Props>;
+declare const MultiBodiedExtension: (props: React.PropsWithChildren<Props>) => jsx.JSX.Element;
 export default MultiBodiedExtension;

package/dist/types-ts4.5/react/nodes/table/sticky.d.ts

@@ -13,7 +13,7 @@ interface FixedProps {
     mode: StickyMode;
     rendererAppearance: RendererAppearance;
 }
-export declare const FixedTableDiv: React.FC<FixedProps>;
+export declare const FixedTableDiv: (props: React.PropsWithChildren<FixedProps>) => jsx.JSX.Element;
 export type StickyTableProps = {
     left?: number;
     top?: number;

package/dist/types-ts4.5/react/nodes/unknownBlock.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export default function UnknownBlock(props: React.Props<any>): JSX.Element;
+export default function UnknownBlock(props: React.PropsWithChildren<unknown>): JSX.Element;

package/dist/types-ts4.5/react/utils/EditorMediaClientProvider.d.ts

@@ -1,5 +1,5 @@
-import type { FC } from 'react';
+import React from 'react';
 import type { MediaSSR } from '../../types/mediaOptions';
-export declare const EditorMediaClientProvider: FC<{
-    ssr?: MediaSSR;
-}>;
+export declare const EditorMediaClientProvider: ({ children, ssr, }: React.PropsWithChildren<{
+    ssr?: MediaSSR | undefined;
+}>) => JSX.Element;

package/dist/types-ts4.5/ui/Renderer/ErrorBoundary.d.ts

@@ -3,6 +3,7 @@ import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { ComponentCrashErrorAEP } from '../../analytics/events';
 interface ErrorBoundaryProps {
     component: ComponentCrashErrorAEP['actionSubject'];
+    children: React.ReactNode;
     componentId?: ComponentCrashErrorAEP['actionSubjectId'];
     fallbackComponent?: React.ReactNode;
     createAnalyticsEvent?: CreateUIAnalyticsEvent;

package/dist/types-ts4.5/ui/Renderer/truncated-wrapper.d.ts

@@ -5,8 +5,9 @@ export interface TruncatedWrapperProps {
     height?: number;
     fadeHeight?: number;
     backgroundColor?: string;
+    children?: React.ReactNode;
 }
-export declare class TruncatedWrapper extends Component<TruncatedWrapperProps, {}> {
+export declare class TruncatedWrapper extends Component<TruncatedWrapperProps, unknown> {
     constructor(props: TruncatedWrapperProps);
     render(): jsx.JSX.Element;
 }

package/dist/types-ts4.5/ui/Renderer/types.d.ts

@@ -11,6 +11,6 @@ export type HeadingAnchorLinksConfig = {
     allowNestedHeaderLinks?: boolean;
 };
 export type NodeComponentsProps = {
-    [key: string]: React.ComponentType<any>;
+    [key: string]: React.ComponentType<React.PropsWithChildren<any>>;
 };
 export type HeadingAnchorLinksProps = boolean | HeadingAnchorLinksConfig;

package/dist/types-ts4.5/ui/SmartCardStorage.d.ts

@@ -4,8 +4,8 @@ export interface WithSmartCardStorageProps {
     smartCardStorage: Map<string, string>;
 }
 export declare const Context: React.Context<Map<string, string>>;
-export declare const Provider: React.FunctionComponent;
-export declare const withSmartCardStorage: <Props extends WithSmartCardStorageProps>(WrappedComponent: React.ComponentType<Props>) => {
+export declare const Provider: ({ children, }: React.PropsWithChildren<unknown>) => JSX.Element;
+export declare const withSmartCardStorage: <Props extends WithSmartCardStorageProps>(WrappedComponent: React.ComponentType<React.PropsWithChildren<Props>>) => {
     new (props: Diff<Props, WithSmartCardStorageProps> | Readonly<Diff<Props, WithSmartCardStorageProps>>): {
         render(): JSX.Element;
         context: any;

package/dist/types-ts4.5/ui/annotations/context.d.ts

@@ -6,7 +6,7 @@ type ChildrenProps = {
     applyAnnotationDraftAt: (position: Position) => void;
     clearAnnotationDraft: () => void;
 };
-export type RenderCallbackType = React.FC<ChildrenProps>;
+export type RenderCallbackType = (props: React.PropsWithChildren<ChildrenProps>) => React.ReactNode;
 type Props = {
     children: RenderCallbackType;
 };

package/dist/types-ts4.5/ui/annotations/draft/component.d.ts

@@ -1,11 +1,12 @@
 /** @jsx jsx */
 import type { ReactNode } from 'react';
 import React from 'react';
+import { jsx } from '@emotion/react';
 import type { Position } from '../types';
 import { InsertDraftPosition } from '../types';
-export declare const AnnotationDraft: React.FC<{
+export declare const AnnotationDraft: ({ draftPosition, children, }: React.PropsWithChildren<{
     draftPosition: Position;
-}>;
+}>) => jsx.JSX.Element;
 type ApplyAnnotationsProps = {
     texts: string[];
     shouldApplyAnnotationAt: InsertDraftPosition.INSIDE | InsertDraftPosition.START | InsertDraftPosition.END;
@@ -18,5 +19,5 @@ type Props = {
     endPos: number;
     children: ReactNode;
 };
-export declare const TextWithAnnotationDraft: React.FC<Props>;
+export declare const TextWithAnnotationDraft: ({ startPos, endPos, children, }: Props) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/annotations/element/index.d.ts

@@ -6,5 +6,5 @@ type MarkElementProps = {
     dataAttributes: AnnotationDataAttributes;
     annotationType: AnnotationTypes;
 };
-declare const MarkElement: React.FC<MarkElementProps>;
+declare const MarkElement: ({ annotationParentIds, children, dataAttributes, id, }: React.PropsWithChildren<MarkElementProps>) => JSX.Element;
 export { MarkElement };

package/dist/types-ts4.5/ui/annotations/element/mark.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { jsx } from '@emotion/react';
 import type { OnAnnotationClickPayload } from '@atlaskit/editor-common/types';
 import type { AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
@@ -10,5 +11,5 @@ type MarkComponentProps = {
     hasFocus: boolean;
     onClick: (props: OnAnnotationClickPayload) => void;
 };
-export declare const MarkComponent: React.FC<MarkComponentProps>;
+export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, onClick, }: React.PropsWithChildren<MarkComponentProps>) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/annotations/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { AnnotationsWrapperProps } from './types';
-export declare const AnnotationsWrapper: React.FC<AnnotationsWrapperProps>;
+export declare const AnnotationsWrapper: (props: React.PropsWithChildren<AnnotationsWrapperProps>) => JSX.Element;
 export { TextWithAnnotationDraft } from './draft';
 export { MarkElement as AnnotationMark } from './element';

package/dist/types-ts4.5/ui/annotations/selection/mounter.d.ts

@@ -5,7 +5,7 @@ import { Position } from '../types';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 type Props = {
     range: Range;
-    component: React.ComponentType<InlineCommentSelectionComponentProps>;
+    component: React.ComponentType<React.PropsWithChildren<InlineCommentSelectionComponentProps>>;
     wrapperDOM: React.RefObject<HTMLDivElement>;
     documentPosition: Position | false;
     isAnnotationAllowed: boolean;
@@ -16,5 +16,5 @@ type Props = {
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
     generateIndexMatch?: (pos: Position) => false | AnnotationByMatches;
 };
-export declare const SelectionInlineCommentMounter: React.FC<Props>;
+export declare const SelectionInlineCommentMounter: React.MemoExoticComponent<(props: React.PropsWithChildren<Props>) => JSX.Element>;
 export {};

package/dist/types-ts4.5/ui/annotations/selection/range-validator.d.ts

@@ -3,11 +3,11 @@ import { Position } from '../types';
 import type { InlineCommentSelectionComponentProps } from '@atlaskit/editor-common/types';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 type Props = {
-    selectionComponent: React.ComponentType<InlineCommentSelectionComponentProps>;
+    selectionComponent: React.ComponentType<React.PropsWithChildren<InlineCommentSelectionComponentProps>>;
     rendererRef: React.RefObject<HTMLDivElement>;
     applyAnnotationDraftAt: (position: Position) => void;
     clearAnnotationDraft: () => void;
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
 };
-export declare const SelectionRangeValidator: React.FC<Props>;
+export declare const SelectionRangeValidator: (props: Props) => JSX.Element | null;
 export {};

package/dist/types-ts4.5/ui/annotations/view/index.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+/// <reference types="react" />
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 type Props = {
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
 };
-declare const AnnotationView: React.FC<Props>;
+declare const AnnotationView: (props: Props) => JSX.Element | null;
 export { AnnotationView };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.7.0",
+  "version": "109.7.1",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -44,7 +44,7 @@
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/media-common": "^11.0.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
-    "@atlaskit/media-ui": "^25.3.0",
+    "@atlaskit/media-ui": "^25.4.0",
     "@atlaskit/media-viewer": "^48.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/smart-card": "^26.48.0",