@atlaskit/renderer 133.11.1 → 133.11.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/renderer
 
+## 133.11.3
+
+### Patch Changes
+
+- [`9e5089f1618b3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e5089f1618b3) -
+  Add an option for products to hide extension fallback content while a provider is pending
+- Updated dependencies
+
+## 133.11.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 133.11.1
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -215,6 +215,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     this.emojiResourceConfig = init.emojiResourceConfig;
     this.smartLinks = init.smartLinks;
     this.extensionViewportSizes = init.extensionViewportSizes;
+    this.hideExtensionKeysWhilePending = init.hideExtensionKeysWhilePending;
     this.getExtensionHeight = init.getExtensionHeight;
     this.allowSelectAllTrap = init.allowSelectAllTrap;
     this.nodeComponents = init.nodeComponents;
@@ -549,6 +550,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
         extensionViewportSizes: this.extensionViewportSizes,
+        hideExtensionKeysWhilePending: this.hideExtensionKeysWhilePending,
         nodeHeight: (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node),
         shouldDisplayExtensionAsInline: this.shouldDisplayExtensionAsInline
       });

package/dist/cjs/react/nodes/extension.js

@@ -187,7 +187,9 @@ var Extension = function Extension(props) {
   , (0, _extends2.default)({}, props, {
     type: "extension"
   }), function (_ref4) {
-    var result = _ref4.result;
+    var _props$hideExtensionK;
+    var isExtensionProviderPending = _ref4.isExtensionProviderPending,
+      result = _ref4.result;
     try {
       // Return the result directly if it's a valid JSX.Element
       if (result && /*#__PURE__*/_react2.default.isValidElement(result)) {
@@ -204,6 +206,10 @@ var Extension = function Extension(props) {
       /** We don't want this error to block renderer */
       /** We keep rendering the default content */
     }
+    if (isExtensionProviderPending && (_props$hideExtensionK = props.hideExtensionKeysWhilePending) !== null && _props$hideExtensionK !== void 0 && _props$hideExtensionK.includes(props.extensionKey)) {
+      return (0, _react.jsx)(_react2.default.Fragment, null);
+    }
+
     // Always return default content if anything goes wrong
     return renderExtension(text || 'extension', layout, {
       isTopLevel: path.length < 1,

package/dist/cjs/ui/ExtensionRenderer.js

@@ -64,21 +64,28 @@ function ExtensionRenderer(props) {
   var localGetNodeRenderer = _react2.default.useMemo(function () {
     return (0, _memoizeOne.default)(_extensions.getNodeRenderer);
   }, []);
+  /**
+   * null -> provider promise not yet settled (pending)
+   * undefined -> provider promise rejected (settled, no provider available)
+   * <provider> -> provider promise resolved
+   */
   var _React$useState = _react2.default.useState(null),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     extensionProvider = _React$useState2[0],
     setExtensionProvider = _React$useState2[1];
-
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   var handleProvider = _react2.default.useCallback(function (_name, providerPromise) {
-    providerPromise && providerPromise.then(function (provider) {
+    providerPromise === null || providerPromise === void 0 || providerPromise.then(function (provider) {
       if (isMounted.current) {
         setExtensionProvider(provider);
       }
+    }, function () {
+      // Consumers can use this to distinguish a rejected provider from a pending one
+      if (isMounted.current) {
+        setExtensionProvider(undefined);
+      }
     });
   }, []);
-  var renderExtensionNode = _react2.default.useCallback(function (extensionProvider) {
+  var renderExtensionNode = _react2.default.useCallback(function (extensionProvider, isExtensionProviderPending) {
     var _marks$find, _node$parameters;
     var fragmentLocalId = marks === null || marks === void 0 || (_marks$find = marks.find(function (m) {
       return m.type.name === 'fragment';
@@ -123,15 +130,16 @@ function ExtensionRenderer(props) {
       /** We keep rendering the default content */
     }
     return children({
+      isExtensionProviderPending: isExtensionProviderPending,
       node: node,
       result: result
     });
   }, [actions, children, content, extensionHandlers, extensionKey, extensionType, localGetNodeRenderer, localId, marks, parameters, rendererContext === null || rendererContext === void 0 ? void 0 : rendererContext.adDoc, text, type]);
   var setupAndRenderExtensionNode = _react2.default.useCallback(function (providers) {
-    if (!extensionProvider && providers.extensionProvider) {
+    if (extensionProvider === null && providers.extensionProvider) {
       handleProvider('extensionProvider', providers.extensionProvider);
     }
-    return renderExtensionNode(extensionProvider);
+    return renderExtensionNode(extensionProvider, Boolean(providers.extensionProvider) && extensionProvider === null);
   }, [extensionProvider, handleProvider, renderExtensionNode]);
   _react2.default.useEffect(function () {
     isMounted.current = true;

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

@@ -72,7 +72,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "133.11.0";
+var packageVersion = "133.11.2";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -237,6 +237,7 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
       providers: providerFactory,
       eventHandlers: props.eventHandlers,
       extensionHandlers: props.extensionHandlers,
+      hideExtensionKeysWhilePending: props.hideExtensionKeysWhilePending,
       portal: props.portal,
       objectContext: _objectSpread(_objectSpread({
         adDoc: props.shouldRemoveEmptySpaceAroundContent ? (0, _rendererHelper.removeEmptySpaceAroundContent)(props.document) : props.document,

package/dist/es2019/react/index.js

@@ -202,6 +202,7 @@ export default class ReactSerializer {
     this.emojiResourceConfig = init.emojiResourceConfig;
     this.smartLinks = init.smartLinks;
     this.extensionViewportSizes = init.extensionViewportSizes;
+    this.hideExtensionKeysWhilePending = init.hideExtensionKeysWhilePending;
     this.getExtensionHeight = init.getExtensionHeight;
     this.allowSelectAllTrap = init.allowSelectAllTrap;
     this.nodeComponents = init.nodeComponents;
@@ -497,6 +498,7 @@ export default class ReactSerializer {
     return {
       ...this.getProps(node, path),
       extensionViewportSizes: this.extensionViewportSizes,
+      hideExtensionKeysWhilePending: this.hideExtensionKeysWhilePending,
       nodeHeight: (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node),
       shouldDisplayExtensionAsInline: this.shouldDisplayExtensionAsInline
     };

package/dist/es2019/react/nodes/extension.js

@@ -168,8 +168,10 @@ const Extension = props => {
   , _extends({}, props, {
     type: "extension"
   }), ({
+    isExtensionProviderPending,
     result
   }) => {
+    var _props$hideExtensionK;
     try {
       // Return the result directly if it's a valid JSX.Element
       if (result && /*#__PURE__*/React.isValidElement(result)) {
@@ -186,6 +188,10 @@ const Extension = props => {
       /** We don't want this error to block renderer */
       /** We keep rendering the default content */
     }
+    if (isExtensionProviderPending && (_props$hideExtensionK = props.hideExtensionKeysWhilePending) !== null && _props$hideExtensionK !== void 0 && _props$hideExtensionK.includes(props.extensionKey)) {
+      return jsx(React.Fragment, null);
+    }
+
     // Always return default content if anything goes wrong
     return renderExtension(text || 'extension', layout, {
       isTopLevel: path.length < 1,

package/dist/es2019/ui/ExtensionRenderer.js

@@ -53,18 +53,25 @@ export default function ExtensionRenderer(props) {
   } = props;
   const isMounted = React.useRef(true);
   const localGetNodeRenderer = React.useMemo(() => memoizeOne(getNodeRenderer), []);
+  /**
+   * null -> provider promise not yet settled (pending)
+   * undefined -> provider promise rejected (settled, no provider available)
+   * <provider> -> provider promise resolved
+   */
   const [extensionProvider, setExtensionProvider] = React.useState(null);
-
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleProvider = React.useCallback((_name, providerPromise) => {
-    providerPromise && providerPromise.then(provider => {
+    providerPromise === null || providerPromise === void 0 ? void 0 : providerPromise.then(provider => {
       if (isMounted.current) {
         setExtensionProvider(provider);
       }
+    }, () => {
+      // Consumers can use this to distinguish a rejected provider from a pending one
+      if (isMounted.current) {
+        setExtensionProvider(undefined);
+      }
     });
   }, []);
-  const renderExtensionNode = React.useCallback(extensionProvider => {
+  const renderExtensionNode = React.useCallback((extensionProvider, isExtensionProviderPending) => {
     var _marks$find, _marks$find$attrs, _node$parameters, _node$parameters$macr;
     const fragmentLocalId = marks === null || marks === void 0 ? void 0 : (_marks$find = marks.find(m => m.type.name === 'fragment')) === null || _marks$find === void 0 ? void 0 : (_marks$find$attrs = _marks$find.attrs) === null || _marks$find$attrs === void 0 ? void 0 : _marks$find$attrs.localId;
     const node = {
@@ -107,15 +114,16 @@ export default function ExtensionRenderer(props) {
       /** We keep rendering the default content */
     }
     return children({
+      isExtensionProviderPending,
       node,
       result
     });
   }, [actions, children, content, extensionHandlers, extensionKey, extensionType, localGetNodeRenderer, localId, marks, parameters, rendererContext === null || rendererContext === void 0 ? void 0 : rendererContext.adDoc, text, type]);
   const setupAndRenderExtensionNode = React.useCallback(providers => {
-    if (!extensionProvider && providers.extensionProvider) {
+    if (extensionProvider === null && providers.extensionProvider) {
       handleProvider('extensionProvider', providers.extensionProvider);
     }
-    return renderExtensionNode(extensionProvider);
+    return renderExtensionNode(extensionProvider, Boolean(providers.extensionProvider) && extensionProvider === null);
   }, [extensionProvider, handleProvider, renderExtensionNode]);
   React.useEffect(() => {
     isMounted.current = true;

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

@@ -58,7 +58,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.1;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "133.11.0";
+const packageVersion = "133.11.2";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -229,6 +229,7 @@ export const RendererFunctionalComponent = props => {
       providers: providerFactory,
       eventHandlers: props.eventHandlers,
       extensionHandlers: props.extensionHandlers,
+      hideExtensionKeysWhilePending: props.hideExtensionKeysWhilePending,
       portal: props.portal,
       objectContext: {
         adDoc: props.shouldRemoveEmptySpaceAroundContent ? removeEmptySpaceAroundContent(props.document) : props.document,

package/dist/esm/react/index.js

@@ -208,6 +208,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     this.emojiResourceConfig = init.emojiResourceConfig;
     this.smartLinks = init.smartLinks;
     this.extensionViewportSizes = init.extensionViewportSizes;
+    this.hideExtensionKeysWhilePending = init.hideExtensionKeysWhilePending;
     this.getExtensionHeight = init.getExtensionHeight;
     this.allowSelectAllTrap = init.allowSelectAllTrap;
     this.nodeComponents = init.nodeComponents;
@@ -542,6 +543,7 @@ var ReactSerializer = /*#__PURE__*/function () {
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
         extensionViewportSizes: this.extensionViewportSizes,
+        hideExtensionKeysWhilePending: this.hideExtensionKeysWhilePending,
         nodeHeight: (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node),
         shouldDisplayExtensionAsInline: this.shouldDisplayExtensionAsInline
       });

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

@@ -177,7 +177,9 @@ var Extension = function Extension(props) {
   , _extends({}, props, {
     type: "extension"
   }), function (_ref4) {
-    var result = _ref4.result;
+    var _props$hideExtensionK;
+    var isExtensionProviderPending = _ref4.isExtensionProviderPending,
+      result = _ref4.result;
     try {
       // Return the result directly if it's a valid JSX.Element
       if (result && /*#__PURE__*/React.isValidElement(result)) {
@@ -194,6 +196,10 @@ var Extension = function Extension(props) {
       /** We don't want this error to block renderer */
       /** We keep rendering the default content */
     }
+    if (isExtensionProviderPending && (_props$hideExtensionK = props.hideExtensionKeysWhilePending) !== null && _props$hideExtensionK !== void 0 && _props$hideExtensionK.includes(props.extensionKey)) {
+      return jsx(React.Fragment, null);
+    }
+
     // Always return default content if anything goes wrong
     return renderExtension(text || 'extension', layout, {
       isTopLevel: path.length < 1,

package/dist/esm/ui/ExtensionRenderer.js

@@ -54,21 +54,28 @@ export default function ExtensionRenderer(props) {
   var localGetNodeRenderer = React.useMemo(function () {
     return memoizeOne(getNodeRenderer);
   }, []);
+  /**
+   * null -> provider promise not yet settled (pending)
+   * undefined -> provider promise rejected (settled, no provider available)
+   * <provider> -> provider promise resolved
+   */
   var _React$useState = React.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     extensionProvider = _React$useState2[0],
     setExtensionProvider = _React$useState2[1];
-
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   var handleProvider = React.useCallback(function (_name, providerPromise) {
-    providerPromise && providerPromise.then(function (provider) {
+    providerPromise === null || providerPromise === void 0 || providerPromise.then(function (provider) {
       if (isMounted.current) {
         setExtensionProvider(provider);
       }
+    }, function () {
+      // Consumers can use this to distinguish a rejected provider from a pending one
+      if (isMounted.current) {
+        setExtensionProvider(undefined);
+      }
     });
   }, []);
-  var renderExtensionNode = React.useCallback(function (extensionProvider) {
+  var renderExtensionNode = React.useCallback(function (extensionProvider, isExtensionProviderPending) {
     var _marks$find, _node$parameters;
     var fragmentLocalId = marks === null || marks === void 0 || (_marks$find = marks.find(function (m) {
       return m.type.name === 'fragment';
@@ -113,15 +120,16 @@ export default function ExtensionRenderer(props) {
       /** We keep rendering the default content */
     }
     return children({
+      isExtensionProviderPending: isExtensionProviderPending,
       node: node,
       result: result
     });
   }, [actions, children, content, extensionHandlers, extensionKey, extensionType, localGetNodeRenderer, localId, marks, parameters, rendererContext === null || rendererContext === void 0 ? void 0 : rendererContext.adDoc, text, type]);
   var setupAndRenderExtensionNode = React.useCallback(function (providers) {
-    if (!extensionProvider && providers.extensionProvider) {
+    if (extensionProvider === null && providers.extensionProvider) {
       handleProvider('extensionProvider', providers.extensionProvider);
     }
-    return renderExtensionNode(extensionProvider);
+    return renderExtensionNode(extensionProvider, Boolean(providers.extensionProvider) && extensionProvider === null);
   }, [extensionProvider, handleProvider, renderExtensionNode]);
   React.useEffect(function () {
     isMounted.current = true;

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

@@ -63,7 +63,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "133.11.0";
+var packageVersion = "133.11.2";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -228,6 +228,7 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
       providers: providerFactory,
       eventHandlers: props.eventHandlers,
       extensionHandlers: props.extensionHandlers,
+      hideExtensionKeysWhilePending: props.hideExtensionKeysWhilePending,
       portal: props.portal,
       objectContext: _objectSpread(_objectSpread({
         adDoc: props.shouldRemoveEmptySpaceAroundContent ? removeEmptySpaceAroundContent(props.document) : props.document,

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

@@ -31,13 +31,14 @@ export interface ReactSerializerInit {
     disableActions?: boolean;
     disableHeadingIDs?: boolean;
     disableTableOverflowShadow?: boolean;
-    headingIdPrefix?: string;
     emojiResourceConfig?: EmojiResourceConfig;
     eventHandlers?: EventHandlers;
     extensionHandlers?: ExtensionHandlers;
     extensionViewportSizes?: ExtensionViewportSize[];
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
     getExtensionHeight?: GetPMNodeHeight;
+    headingIdPrefix?: string;
+    hideExtensionKeysWhilePending?: string[];
     isInsideOfInlineExtension?: boolean;
     isPresentational?: boolean;
     media?: MediaOptions;
@@ -104,6 +105,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private emojiResourceConfig?;
     private smartLinks?;
     private extensionViewportSizes?;
+    private hideExtensionKeysWhilePending?;
     private getExtensionHeight?;
     private allowAnnotations;
     private allowSelectAllTrap?;

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

@@ -16,6 +16,13 @@ interface Props {
     extensionKey: string;
     extensionType: string;
     extensionViewportSizes?: ExtensionViewportSize[];
+    /**
+     * Extension keys that should render nothing (instead of the default placeholder
+     * text) while their extension provider promise is still pending. This lets the
+     * product opt specific extensions out of showing default content before their
+     * handler has resolved. When omitted, behaviour is unchanged.
+     */
+    hideExtensionKeysWhilePending?: string[];
     isInsideOfInlineExtension?: boolean;
     layout?: ExtensionLayout;
     localId?: string;

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

@@ -32,6 +32,7 @@ export interface NodeMeta {
     eventHandlers?: EventHandlers | undefined;
     extensionHandlers?: ExtensionHandlers | undefined;
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
+    hideExtensionKeysWhilePending?: string[];
     marks: PMNode['marks'];
     nodeType: NodeType['name'];
     portal?: HTMLElement | undefined;

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

@@ -11,7 +11,8 @@ import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { Mark as PMMark } from '@atlaskit/editor-prosemirror/model';
 interface Props {
     actions?: MultiBodiedExtensionActions;
-    children: ({ node, result, }: {
+    children: ({ isExtensionProviderPending, node, result, }: {
+        isExtensionProviderPending: boolean;
         node: ExtensionParams<Parameters>;
         result?: JSX.Element | null;
     }) => JSX.Element;

package/dist/types/ui/renderer-props.d.ts

@@ -76,11 +76,6 @@ export interface RendererProps {
      * of tables.
      */
     disableTableOverflowShadow?: boolean;
-    /**
-     * Optional prefix to prepend to all generated heading IDs.
-     * Used by nested renderers to namespace heading IDs and avoid collisions with the host page.
-     */
-    headingIdPrefix?: string;
     document: DocNode;
     emojiResourceConfig?: EmojiResourceConfig;
     enableSsrInlineScripts?: boolean;
@@ -120,6 +115,20 @@ export interface RendererProps {
         [featureFlag: string]: boolean;
     } | Partial<RawObjectFeatureFlags>;
     getExtensionHeight?: GetPMNodeHeight;
+    /**
+     * Optional prefix to prepend to all generated heading IDs.
+     * Used by nested renderers to namespace heading IDs and avoid collisions with the host page.
+     */
+    headingIdPrefix?: string;
+    /**
+     * @default undefined
+     * @description
+     * Extension keys whose default placeholder content should be hidden (render
+     * nothing) while their extension provider promise is still pending. Products
+     * opt specific extensions in by passing their keys; when omitted, behaviour is
+     * unchanged.
+     */
+    hideExtensionKeysWhilePending?: string[];
     includeNodesCountInStats?: boolean;
     innerRef?: React.RefObject<HTMLDivElement>;
     isInsideOfInlineExtension?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "133.11.1",
+	"version": "133.11.3",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -63,14 +63,14 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/react-ufo": "^7.3.0",
-		"@atlaskit/smart-card": "^45.9.0",
+		"@atlaskit/smart-card": "^45.10.0",
 		"@atlaskit/status": "^5.4.0",
 		"@atlaskit/task-decision": "^21.4.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^126.1.0",
-		"@atlaskit/tokens": "^15.8.0",
+		"@atlaskit/tmp-editor-statsig": "^126.3.0",
+		"@atlaskit/tokens": "^16.0.0",
 		"@atlaskit/tooltip": "^23.1.0",
-		"@atlaskit/visually-hidden": "^4.1.0",
+		"@atlaskit/visually-hidden": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"@emotion/react": "^11.7.1",
@@ -103,7 +103,7 @@
 		"@atlaskit/mention": "^27.7.0",
 		"@atlaskit/modal-dialog": "^16.1.0",
 		"@atlaskit/navigation-system": "^10.5.0",
-		"@atlaskit/profilecard": "^26.9.0",
+		"@atlaskit/profilecard": "^26.10.0",
 		"@atlaskit/side-nav-items": "^2.2.0",
 		"@atlaskit/util-data-test": "^19.1.0",
 		"@atlassian/a11y-jest-testing": "^0.13.0",