@atlaskit/renderer 109.7.0 → 109.7.2

package/dist/esm/react/nodes/table.js

@@ -351,7 +351,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         ref: this.props.handleRef,
         style: {
           width: tableWidth,
-          left: left // eslint-disable-line @atlaskit/design-system/ensure-design-token-usage
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
+          left: left
         }
       }, getBooleanFF('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,

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.2";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -25,6 +25,8 @@ export var TELEPOINTER_ID = 'ai-streaming-telepointer';
 var telepointerStyles = function telepointerStyles() {
   var _getGlobalTheme = getGlobalTheme(),
     colorMode = _getGlobalTheme.colorMode;
+
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    #", " {\n      display: inline-block;\n      position: relative;\n      width: 1.5px;\n      height: 25px;\n      background: linear-gradient(\n        45deg,\n        ", " -12.02%,\n        ", " 19.18%,\n        ", " 71.87%\n      );\n      margin-left: ", ";\n\n      &::after {\n        content: 'AI';\n        position: absolute;\n        display: block;\n        top: 0;\n        left: 0;\n        font-size: 10px;\n        font-weight: 700;\n        width: 12.5px;\n        height: 13px;\n        padding-top: 1px;\n        padding-left: 1.5px;\n        line-height: initial;\n        border-radius: 0px 2px 2px 0px;\n        color: ", ";\n        background: linear-gradient(\n          45deg,\n          ", " -57%,\n          ", " 71.87%\n        );\n      }\n    }\n  "])), TELEPOINTER_ID, colorMode === 'dark' ? '#f5cd47' : '#f8e6a0', colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4', "var(--ds-space-025, 2px)", "var(--ds-text-inverse, white)", colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4');
 };
 var getLineHeight = function getLineHeight(fontCode) {
@@ -94,7 +96,8 @@ var breakoutWidthStyle = function breakoutWidthStyle() {
   return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    *:not([data-mark-type='fragment'])\n      .", " {\n      // TODO - improve inline style logic on table container so important styles aren't required here\n      width: 100% !important;\n      left: 0 !important;\n    }\n\n    [data-mark-type='fragment'] * .", " {\n      // TODO - improve inline style logic on table container so important styles aren't required here\n      width: 100% !important;\n      left: 0 !important;\n    }\n  "])), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
 };
 var getShadowOverrides = function getShadowOverrides() {
-  return getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          width: ", "px;\n          background: linear-gradient(\n              to left,\n              transparent 0,\n              ", " 140%\n            ),\n            linear-gradient(\n              to right,\n              ", " 0px,\n              transparent 1px\n            );\n        }\n\n        &.", "::after {\n          background: linear-gradient(\n              to right,\n              transparent 0,\n              ", " 140%\n            ),\n            linear-gradient(\n              to left,\n              ", " 0px,\n              transparent 1px\n            );\n          left: calc(100% - ", "px);\n        }\n      "])), shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableShadowWidth, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", shadowClassNames.RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", tableShadowWidth) : '';
+  return getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          width: ", "px;\n          background: linear-gradient(\n              to left,\n              transparent 0,\n              ", " 140%\n            ),\n            linear-gradient(\n              to right,\n              ", " 0px,\n              transparent 1px\n            );\n        }\n\n        &.", "::after {\n          background: linear-gradient(\n              to right,\n              transparent 0,\n              ", " 140%\n            ),\n            linear-gradient(\n              to left,\n              ", " 0px,\n              transparent 1px\n            );\n          left: calc(100% - ", "px);\n        }\n      "])), shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableShadowWidth, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", shadowClassNames.RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", tableShadowWidth) : '';
 };
 export var rendererStyles = function rendererStyles(wrapperProps) {
   return function (theme) {
@@ -103,6 +106,8 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
       theme: theme
     };
     var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock;
+
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n      .", " {\n        ", "\n      }\n\n      & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", "\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", ";\n        color: ", ";\n        padding: ", " ", ";\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", " 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: ", ";\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        ", "\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        ", "\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: block;\n        /* stylelint-enable */\n\n        position: relative;\n        border-radius: ", ";\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n      }\n\n      ", "\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", ";\n        & > div + div {\n          margin-left: ", ";\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n\n        & .MediaGroup,\n        & .code-block {\n          margin-top: ", ";\n\n          &:first-child {\n            margin-top: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n      }\n\n      &:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n        ", "\n      }\n    "])), editorFontSize(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), RendererCssClassName.DOCUMENT, mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles(), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(), ruleSharedStyles(), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(), shadowSharedStyle, dateSharedStyle, textColorStyles, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, breakoutWidthStyle(), RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, shadowObserverClassNames.SHADOW_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, getShadowOverrides(), shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, tableSortableColumnStyle(wrapperProps), RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), relativeFontSizeToBase16(fontSize()), RendererCssClassName.NUMBER_COLUMN, akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), getLightWeightCodeBlockStylesForRootRendererStyleSheet(), columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", gridMediumMaxWidth, blockNodesVerticalMargin, blockNodesVerticalMargin, blockNodesVerticalMargin, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, browser.safari ? codeBlockInListSafariFix : '');
   };
 };

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Position } from './types';
+import type { Position } from './types';
 import type { AnnotationProviders } from '@atlaskit/editor-common/types';
-import { AnnotationMarkStates } from '@atlaskit/adf-schema';
-type ChildrenProps = {
+import type { AnnotationMarkStates } from '@atlaskit/adf-schema';
+export type AnnotationsDraftContextWrapperChildrenProps = {
     applyAnnotationDraftAt: (position: Position) => void;
     clearAnnotationDraft: () => void;
 };
-export type RenderCallbackType = React.FC<ChildrenProps>;
+export type RenderCallbackType = (props: React.PropsWithChildren<AnnotationsDraftContextWrapperChildrenProps>) => 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/selection/wrapper.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 type Props = {
     rendererRef: React.RefObject<HTMLDivElement>;
     createAnalyticsEvent?: CreateUIAnalyticsEvent;

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;