@contentful/field-editor-rich-text 2.3.20 → 3.0.1

package/dist/field-editor-rich-text.esm.js

@@ -1,5 +1,5 @@
-import React__default, { createContext, useContext, useMemo, useState, useEffect, useRef, createElement, Fragment, useCallback, useLayoutEffect, memo } from 'react';
-import { useEntities, MissingEntityCard, WrappedAssetCard, WrappedEntryCard, ScheduledIconWithTooltip, EntityProvider, getScheduleTooltipContent } from '@contentful/field-editor-reference';
+import React__default, { createContext, useContext, useMemo, useState, useEffect, useRef, createElement, Fragment, memo, useCallback } from 'react';
+import { MissingEntityCard, WrappedAssetCard, useEntity, useEntityLoader, WrappedEntryCard, ScheduledIconWithTooltip, EntityProvider, getScheduleTooltipContent } from '@contentful/field-editor-reference';
 import { entityHelpers, ModalDialogLauncher, FieldConnector } from '@contentful/field-editor-shared';
 import { BLOCKS, INLINES, TEXT_CONTAINERS, HEADINGS, LIST_ITEM_BLOCKS, MARKS, CONTAINERS, TOP_LEVEL_BLOCKS, VOID_BLOCKS, EMPTY_DOCUMENT } from '@contentful/rich-text-types';
 import { usePlateEditorRef, usePlateEditorState, toggleNodeType, getText, getAbove, removeMark, setMarks, isMarkActive, getNodes, setNodes, isAncestorEmpty, match, getLastChildPath, wrapNodes, getPluginType, unwrapNodes, isCollapsed, isRangeAcrossBlocks, ELEMENT_DEFAULT, findNode, getParent, getBlockAbove, isSelectionAtBlockStart, isSelectionAtBlockEnd, isFirstChild, insertNodes, moveChildren, isBlockAboveEmpty, mockPlugin, deleteFragment, toggleMark, someHtmlElement, KEY_DESERIALIZE_HTML, hasSingleChild, isLastChild, someNode, getChildren as getChildren$1, queryNode, createDeserializeHtmlPlugin, createDeserializeAstPlugin, createPlateEditor, getPlateSelectors, getPlateActions, Plate } from '@udecode/plate-core';
@@ -1948,7 +1948,7 @@ var CommandList = function CommandList(_ref5) {
     contentEditable: false
   }, /*#__PURE__*/createElement("div", {
     role: "alert"
-  }, /*#__PURE__*/createElement(ScreenReaderOnly, null, "Richtext commands. Currently focused item: ", selectedItem, ". Press ", /*#__PURE__*/createElement("kbd", null, "enter"), " to select, ", /*#__PURE__*/createElement("kbd", null, "arrows"), " to navigate, ", /*#__PURE__*/createElement("kbd", null, "escape"), " to close.")), /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement("div", Object.assign({
+  }, /*#__PURE__*/createElement(ScreenReaderOnly, null, "Richtext commands. Currently focused item: ", selectedItem, ". Press ", /*#__PURE__*/createElement("kbd", null, "enter"), " to select, ", /*#__PURE__*/createElement("kbd", null, "arrows"), " to navigate, ", /*#__PURE__*/createElement("kbd", null, "escape"), " to close.")), /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement("div", _extends({
     "aria-hidden": true,
     ref: popoverContainer,
     style: popper.styles.popper
@@ -1992,7 +1992,7 @@ var CommandPrompt = function CommandPrompt(props) {
       textElement = _React$useState[0],
       setTextElement = _React$useState[1];
 
-  return /*#__PURE__*/createElement("span", Object.assign({
+  return /*#__PURE__*/createElement("span", _extends({
     ref: function ref(e) {
       setTextElement(e);
     }
@@ -2136,82 +2136,12 @@ function withLinkTracking(Component) {
     var onEntityFetchComplete = React__default.useCallback(function () {
       return editor.tracking.onViewportAction('linkRendered');
     }, [editor]);
-    return /*#__PURE__*/React__default.createElement(Component, Object.assign({}, props, {
+    return /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
       onEntityFetchComplete: onEntityFetchComplete
     }));
   };
 }
 
-function useFetchedEntity(_ref) {
-  var type = _ref.type,
-      id = _ref.id,
-      onEntityFetchComplete = _ref.onEntityFetchComplete;
-
-  var _useEntities = useEntities(),
-      entries = _useEntities.entries,
-      assets = _useEntities.assets,
-      getEntry = _useEntities.getEntry,
-      getAsset = _useEntities.getAsset;
-
-  var store = type === 'Entry' ? entries : assets;
-
-  var _useState = useState(store == null ? void 0 : store[id]),
-      entity = _useState[0],
-      setEntity = _useState[1]; // Deep compare the entity value to keep re-rendering to minimal
-
-
-  useEffect(function () {
-    if (!store) {
-      return;
-    }
-
-    var newValue = store[id];
-
-    if (!areEqual(entity, newValue)) {
-      setEntity(newValue);
-    }
-  }, [store, entity, id]); // Fetch the entity if needed
-
-  useEffect(function () {
-    if (!store) {
-      return;
-    }
-
-    (type === 'Entry' ? getEntry : getAsset)(id); // "getEntry" and "getAsset" instances change with every
-    // entity store update causing page lag on initial load
-    // TODO: consider rewriting useEntities() hook to avoid that happening in
-    // first place.
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: explain this disable
-  }, [type, id]);
-  useEffect(function () {
-    if (entity) {
-      onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
-    }
-  }, [onEntityFetchComplete, entity]);
-  return entity;
-}
-
-/**
- * A userland implementation of useEvent RFC
- *
- * See: https://github.com/reactjs/rfcs/pull/220
- */
-
-var useStableCallback = function useStableCallback(callback) {
-  var callbackRef = useRef(callback); // Makes sure the callbackRef points to the latest `callback` props
-  // The useLayoutEffect is here for concurrent safety. It has the
-  // disadvantage of not being able to use the result callback during
-  // the render but that's Ok.
-
-  useLayoutEffect(function () {
-    callbackRef.current = callback;
-  }); // The stable callback that won't change
-
-  return useCallback(function () {
-    return callbackRef.current.apply(callbackRef, arguments);
-  }, []);
-};
-
 var InternalAssetCard = /*#__PURE__*/memo(function (props) {
   if (props.asset === undefined) {
     return /*#__PURE__*/createElement(AssetCard, {
@@ -2243,26 +2173,29 @@ var InternalAssetCard = /*#__PURE__*/memo(function (props) {
 }, areEqual);
 InternalAssetCard.displayName = 'InternalAssetCard';
 function FetchingWrappedAssetCard(props) {
-  var onEntityFetchComplete = props.onEntityFetchComplete,
-      assetId = props.assetId;
+  var onEntityFetchComplete = props.onEntityFetchComplete;
 
-  var _useEntities = useEntities(),
-      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions; // FIXME: remove when useEntities() has been refactored to avoid
-  // unnecessary re-rendering
+  var _useEntity = useEntity('Asset', props.assetId),
+      asset = _useEntity.data,
+      status = _useEntity.status;
 
+  var _useEntityLoader = useEntityLoader(),
+      getEntityScheduledActions = _useEntityLoader.getEntityScheduledActions;
 
-  var stableLoadEntityScheduledActions = useStableCallback(loadEntityScheduledActions);
-  var asset = useFetchedEntity({
-    type: 'Asset',
-    id: assetId,
-    onEntityFetchComplete: onEntityFetchComplete
-  });
+  var loadEntityScheduledActions = useCallback(function () {
+    return getEntityScheduledActions('Asset', props.assetId);
+  }, [getEntityScheduledActions, props.assetId]);
+  useEffect(function () {
+    if (status === 'success') {
+      onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
+    }
+  }, [onEntityFetchComplete, status]);
   return /*#__PURE__*/createElement(InternalAssetCard, {
     asset: asset,
     sdk: props.sdk,
     isDisabled: props.isDisabled,
     isSelected: props.isSelected,
-    loadEntityScheduledActions: stableLoadEntityScheduledActions,
+    loadEntityScheduledActions: loadEntityScheduledActions,
     locale: props.locale,
     onEdit: props.onEdit,
     onRemove: props.onRemove
@@ -2311,17 +2244,21 @@ var FetchingWrappedEntryCard = function FetchingWrappedEntryCard(props) {
   var entryId = props.entryId,
       onEntityFetchComplete = props.onEntityFetchComplete;
 
-  var _useEntities = useEntities(),
-      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions; // FIXME: remove when useEntities() has been refactored to avoid
-  // unnecessary re-rendering
+  var _useEntity = useEntity('Entry', entryId),
+      entry = _useEntity.data,
+      status = _useEntity.status;
 
+  var _useEntityLoader = useEntityLoader(),
+      getEntityScheduledActions = _useEntityLoader.getEntityScheduledActions;
 
-  var stableLoadEntityScheduledActions = useStableCallback(loadEntityScheduledActions);
-  var entry = useFetchedEntity({
-    type: 'Entry',
-    id: entryId,
-    onEntityFetchComplete: onEntityFetchComplete
-  });
+  var loadEntityScheduledActions = useCallback(function () {
+    return getEntityScheduledActions('Entry', entryId);
+  }, [getEntityScheduledActions, entryId]);
+  useEffect(function () {
+    if (status === 'success') {
+      onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
+    }
+  }, [onEntityFetchComplete, status]);
   return /*#__PURE__*/createElement(InternalEntryCard, {
     entry: entry,
     sdk: props.sdk,
@@ -2330,7 +2267,7 @@ var FetchingWrappedEntryCard = function FetchingWrappedEntryCard(props) {
     isSelected: props.isSelected,
     onEdit: props.onEdit,
     onRemove: props.onRemove,
-    loadEntityScheduledActions: stableLoadEntityScheduledActions
+    loadEntityScheduledActions: loadEntityScheduledActions
   });
 };
 
@@ -2372,7 +2309,7 @@ function LinkedEntityBlock(props) {
       at: pathToElement
     });
   }, [editor, element]);
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, attributes, {
     className: styles$1.root,
     "data-entity-type": entityType,
     "data-entity-id": entityId,
@@ -2756,29 +2693,32 @@ var styles$3 = {
   })
 };
 function FetchingWrappedInlineEntryCard(props) {
-  var _useEntities = useEntities(),
-      getEntry = _useEntities.getEntry,
-      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions,
-      entries = _useEntities.entries;
-
-  var entry = React__default.useMemo(function () {
-    return entries[props.entryId];
-  }, [entries, props.entryId]);
+  var _useEntity = useEntity('Entry', props.entryId),
+      entry = _useEntity.data,
+      requestStatus = _useEntity.status;
+
+  var _useEntityLoader = useEntityLoader(),
+      getEntityScheduledActions = _useEntityLoader.getEntityScheduledActions;
+
+  var loadEntityScheduledActions = function loadEntityScheduledActions() {
+    return getEntityScheduledActions('Entry', props.entryId);
+  };
+
   var allContentTypes = props.sdk.space.getCachedContentTypes();
   var onEntityFetchComplete = props.onEntityFetchComplete;
   var contentType = React__default.useMemo(function () {
-    if (!entry || entry === 'failed' || !allContentTypes) return undefined;
+    if (!entry || !allContentTypes) return undefined;
     return allContentTypes.find(function (contentType) {
       return contentType.sys.id === entry.sys.contentType.sys.id;
     });
   }, [allContentTypes, entry]);
   React__default.useEffect(function () {
-    if (!entry) {
+    if (requestStatus !== 'success') {
       return;
     }
 
     onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
-  }, [entry, onEntityFetchComplete]);
+  }, [requestStatus, onEntityFetchComplete]);
   var contentTypeName = contentType ? contentType.name : '';
   var title = React__default.useMemo(function () {
     return getEntryTitle({
@@ -2789,14 +2729,8 @@ function FetchingWrappedInlineEntryCard(props) {
       defaultTitle: 'Untitled'
     });
   }, [entry, contentType, props.sdk.field.locale, props.sdk.locales["default"]]);
-  React__default.useEffect(function () {
-    if (!props.entryId) return;
-    getEntry(props.entryId); // We don't include getEntry below because it's part of the constate-derived
-    // useEntities(), not props.
-    // eslint-disable-next-line -- TODO: explain this disable
-  }, [props.entryId]);
 
-  if (entry === 'failed') {
+  if (requestStatus === 'error') {
     return /*#__PURE__*/React__default.createElement(InlineEntryCard, {
       title: "Entry missing or inaccessible",
       testId: INLINES.EMBEDDED_ENTRY,
@@ -2804,15 +2738,15 @@ function FetchingWrappedInlineEntryCard(props) {
     });
   }
 
-  if (entry === undefined) {
+  if (requestStatus === 'loading') {
     return /*#__PURE__*/React__default.createElement(InlineEntryCard, {
       isLoading: true
     });
   }
 
-  var status = getEntryStatus(entry.sys);
+  var entryStatus = getEntryStatus(entry.sys);
 
-  if (status === 'deleted') {
+  if (entryStatus === 'deleted') {
     return /*#__PURE__*/React__default.createElement(InlineEntryCard, {
       title: "Entry missing or inaccessible",
       testId: INLINES.EMBEDDED_ENTRY,
@@ -2829,7 +2763,7 @@ function FetchingWrappedInlineEntryCard(props) {
     testId: INLINES.EMBEDDED_ENTRY,
     isSelected: props.isSelected,
     title: contentTypeName + ": " + title,
-    status: status,
+    status: entryStatus,
     actions: [/*#__PURE__*/React__default.createElement(MenuItem, {
       key: "edit",
       onClick: props.onEdit
@@ -2903,7 +2837,7 @@ function EmbeddedEntityInline(props) {
     });
   }
 
-  return /*#__PURE__*/createElement("span", Object.assign({}, props.attributes, {
+  return /*#__PURE__*/createElement("span", _extends({}, props.attributes, {
     className: styles$4.root,
     "data-embedded-entity-inline-id": entryId,
     // COMPAT: This makes copy & paste work for Firefox
@@ -3254,7 +3188,7 @@ var styles$6 = {
 
 function createHeading(Tag, block) {
   return function Heading(props) {
-    return /*#__PURE__*/createElement(Tag, Object.assign({}, props.attributes, {
+    return /*#__PURE__*/createElement(Tag, _extends({}, props.attributes, {
       className: cx(styles$6.headings.root, styles$6.headings[block])
     }), props.children);
   };
@@ -3455,7 +3389,7 @@ function ToolbarHrButton(props) {
 function Hr(props) {
   var isSelected = useSelected();
   var isFocused = useFocused();
-  return /*#__PURE__*/createElement("div", Object.assign({}, props.attributes, {
+  return /*#__PURE__*/createElement("div", _extends({}, props.attributes, {
     className: styles$8.container,
     "data-void-element": BLOCKS.HR
   }), /*#__PURE__*/createElement("div", {
@@ -3793,7 +3727,8 @@ function _addOrEditLink() {
             });
             logAction(isEditing ? 'edit' : 'insert', {
               nodeType: type,
-              linkType: (_target$sys$linkType = target == null ? void 0 : target.sys.linkType) != null ? _target$sys$linkType : 'uri'
+              linkType: (_target$sys$linkType = target == null ? void 0 : target.sys.linkType) != null ? _target$sys$linkType : 'uri' // we want to keep the same values we've been using for the old editor, which can be `uri`, `Asset` or `Entry`
+
             });
             focus(editor);
 
@@ -4227,7 +4162,7 @@ var styles$b = (_styles = {}, _styles[BLOCKS.UL_LIST] = /*#__PURE__*/css(_templa
 
 function createList(Tag, block) {
   return function List(props) {
-    return /*#__PURE__*/createElement(Tag, Object.assign({}, props.attributes, {
+    return /*#__PURE__*/createElement(Tag, _extends({}, props.attributes, {
       className: cx(baseStyle, styles$b[block])
     }), props.children);
   };
@@ -4239,7 +4174,7 @@ var ListOL = /*#__PURE__*/createList('ol', BLOCKS.OL_LIST);
 var _templateObject$5;
 var style = /*#__PURE__*/css(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  list-style: inherit;\n  margin-top: ", ";\n\n  ol,\n  ul {\n    margin: 0 0 0 ", ";\n  }\n"])), tokens.spacingXs, tokens.spacingL);
 function ListItem(props) {
-  return /*#__PURE__*/createElement("li", Object.assign({}, props.attributes, {
+  return /*#__PURE__*/createElement("li", _extends({}, props.attributes, {
     className: style
   }), props.children);
 }
@@ -5215,7 +5150,7 @@ var styles$c = {
   })
 };
 function Bold(props) {
-  return /*#__PURE__*/createElement("strong", Object.assign({}, props.attributes, {
+  return /*#__PURE__*/createElement("strong", _extends({}, props.attributes, {
     className: styles$c.bold
   }), props.children);
 }
@@ -5263,7 +5198,7 @@ var styles$d = {
   })
 };
 function Code(props) {
-  return /*#__PURE__*/createElement("code", Object.assign({}, props.attributes, {
+  return /*#__PURE__*/createElement("code", _extends({}, props.attributes, {
     className: styles$d.code
   }), props.children);
 }
@@ -5300,7 +5235,7 @@ var styles$e = {
   })
 };
 function Italic(props) {
-  return /*#__PURE__*/createElement("em", Object.assign({}, props.attributes, {
+  return /*#__PURE__*/createElement("em", _extends({}, props.attributes, {
     className: styles$e.italic
   }), props.children);
 }
@@ -5337,7 +5272,7 @@ var ToolbarUnderlineButton = /*#__PURE__*/createMarkToolbarButton({
   icon: /*#__PURE__*/createElement(FormatUnderlinedIcon, null)
 });
 function Underline(props) {
-  return /*#__PURE__*/createElement("u", Object.assign({}, props.attributes), props.children);
+  return /*#__PURE__*/createElement("u", _extends({}, props.attributes), props.children);
 }
 var createUnderlinePlugin = function createUnderlinePlugin() {
   return createUnderlinePlugin$1({
@@ -5579,7 +5514,7 @@ var createNormalizerPlugin = function createNormalizerPlugin() {
 var _templateObject$6, _styles$1;
 var styles$f = (_styles$1 = {}, _styles$1[BLOCKS.PARAGRAPH] = /*#__PURE__*/css(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    margin-bottom: 1.5em;\n  "])), tokens.lineHeightDefault), _styles$1);
 function Paragraph(props) {
-  return /*#__PURE__*/createElement("div", Object.assign({}, props.attributes, {
+  return /*#__PURE__*/createElement("div", _extends({}, props.attributes, {
     className: styles$f[BLOCKS.PARAGRAPH]
   }), props.children);
 }
@@ -5799,7 +5734,7 @@ var style$1 = /*#__PURE__*/css({
   fontStyle: 'normal'
 });
 function Quote(props) {
-  return /*#__PURE__*/createElement("blockquote", Object.assign({}, props.attributes, {
+  return /*#__PURE__*/createElement("blockquote", _extends({}, props.attributes, {
     className: style$1
   }), props.children);
 }
@@ -6339,7 +6274,7 @@ var _templateObject$7;
 var style$2 = /*#__PURE__*/css(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid ", ";\n  border-collapse: collapse;\n  padding: 10px 12px;\n  min-width: 48px;\n  position: relative;\n  vertical-align: top;\n\n  div:last-child {\n    margin-bottom: 0;\n  }\n"])), tokens.gray400);
 var Cell = function Cell(props) {
   var isSelected = useSelected();
-  return /*#__PURE__*/createElement("td", Object.assign({}, props.attributes, props.element.data, {
+  return /*#__PURE__*/createElement("td", _extends({}, props.attributes, props.element.data, {
     className: style$2
   }), isSelected && /*#__PURE__*/createElement(TableActions, null), props.children);
 };
@@ -6348,7 +6283,7 @@ var _templateObject$8;
 var style$3 = /*#__PURE__*/css(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-clip: padding-box;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-collapse: collapse;\n  padding: 10px 12px;\n  font-weight: ", ";\n  text-align: left;\n  min-width: 48px;\n  position: relative;\n\n  div:last-child {\n    margin-bottom: 0;\n  }\n"])), tokens.gray200, tokens.gray400, tokens.fontWeightNormal);
 var HeaderCell = function HeaderCell(props) {
   var isSelected = useSelected();
-  return /*#__PURE__*/createElement("th", Object.assign({}, props.attributes, props.element.data, {
+  return /*#__PURE__*/createElement("th", _extends({}, props.attributes, props.element.data, {
     className: style$3
   }), isSelected && /*#__PURE__*/createElement(TableActions, null), props.children);
 };
@@ -6356,7 +6291,7 @@ var HeaderCell = function HeaderCell(props) {
 var _templateObject$9;
 var style$4 = /*#__PURE__*/css(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid ", ";\n  border-collapse: collapse;\n\n  &:hover td {\n    background-color: transparent !important;\n  }\n"])), tokens.gray400);
 var Row = function Row(props) {
-  return /*#__PURE__*/createElement("tr", Object.assign({}, props.attributes, {
+  return /*#__PURE__*/createElement("tr", _extends({}, props.attributes, {
     className: style$4
   }), props.children);
 };
@@ -6366,7 +6301,7 @@ var style$5 = /*#__PURE__*/css(_templateObject$a || (_templateObject$a = /*#__PU
 var Table = function Table(props) {
   return /*#__PURE__*/createElement("div", {
     "data-block-type": BLOCKS.TABLE
-  }, /*#__PURE__*/createElement("table", Object.assign({
+  }, /*#__PURE__*/createElement("table", _extends({
     className: style$5
   }, props.attributes), /*#__PURE__*/createElement("tbody", null, props.children)));
 };
@@ -7642,7 +7577,7 @@ var RichTextEditor = function RichTextEditor(props) {
     var lastRemoteValue = _ref.lastRemoteValue,
         disabled = _ref.disabled,
         setValue = _ref.setValue;
-    return /*#__PURE__*/React__default.createElement(ConnectedRichTextEditor, Object.assign({}, otherProps, {
+    return /*#__PURE__*/React__default.createElement(ConnectedRichTextEditor, _extends({}, otherProps, {
       key: "rich-text-editor-" + id,
       value: lastRemoteValue,
       sdk: sdk,
@@ -7997,7 +7932,7 @@ var openRichTextDialog = function openRichTextDialog(sdk) {
     if (((_options$parameters = options.parameters) == null ? void 0 : _options$parameters.type) === 'rich-text-hyperlink-dialog') {
       return ModalDialogLauncher.openDialog(options, function (_ref) {
         var onClose = _ref.onClose;
-        return /*#__PURE__*/React__default.createElement(HyperlinkDialog, Object.assign({}, options.parameters, {
+        return /*#__PURE__*/React__default.createElement(HyperlinkDialog, _extends({}, options.parameters, {
           onClose: onClose,
           sdk: sdk
         }));
@@ -8013,7 +7948,7 @@ var renderRichTextDialog = function renderRichTextDialog(sdk) {
 
   if ((parameters == null ? void 0 : parameters.type) === 'rich-text-hyperlink-dialog') {
     sdk.window.startAutoResizer();
-    return /*#__PURE__*/React__default.createElement(HyperlinkDialog, Object.assign({}, sdk.parameters.invocation, {
+    return /*#__PURE__*/React__default.createElement(HyperlinkDialog, _extends({}, sdk.parameters.invocation, {
       onClose: sdk.close,
       sdk: sdk
     }));