@atlaskit/renderer 124.19.0 → 124.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 124.20.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`ffb6f2957dccf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ffb6f2957dccf) -
8
+ fg clean up: platform_editor_multi_body_extension_extensibility
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies
13
+
3
14
  ## 124.19.0
4
15
 
5
16
  ### Minor Changes
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var _react = require("@emotion/react");
8
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
9
8
  /**
10
9
  * @jsxRuntime classic
11
10
  * @jsx jsx
@@ -13,11 +12,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
12
 
14
13
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
15
14
 
16
- var containerCSSOld = (0, _react.css)({
17
- minHeight: '100px',
18
- flexBasis: '100%'
19
- });
20
- var containerCSSNew = (0, _react.css)({
15
+ var containerCSS = (0, _react.css)({
21
16
  padding: "var(--ds-space-100, 8px)",
22
17
  minHeight: '100px',
23
18
  // by default all frames are hidden, this style is overridden in multiBodiedExtensions for active frame
@@ -25,7 +20,7 @@ var containerCSSNew = (0, _react.css)({
25
20
  });
26
21
  var ExtensionFrame = function ExtensionFrame(props) {
27
22
  return (0, _react.jsx)("div", {
28
- css: [(0, _platformFeatureFlags.fg)('platform_editor_multi_body_extension_extensibility') ? containerCSSNew : containerCSSOld],
23
+ css: [containerCSS],
29
24
  "data-extension-frame": "true"
30
25
  }, props.children);
31
26
  };
@@ -160,7 +160,6 @@ var _ui = require("@atlaskit/editor-common/ui");
160
160
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
161
161
  var _blockquote = _interopRequireDefault(require("./blockquote"));
162
162
  var _bodiedExtension = _interopRequireDefault(require("./bodiedExtension"));
163
- var _multiBodiedExtensionOld = _interopRequireDefault(require("./multiBodiedExtensionOld"));
164
163
  var _multiBodiedExtension = _interopRequireDefault(require("./multiBodiedExtension"));
165
164
  var _extensionFrame = _interopRequireDefault(require("./extensionFrame"));
166
165
  var _bulletList = _interopRequireDefault(require("./bulletList"));
@@ -535,7 +534,7 @@ var toReact = exports.toReact = function toReact(node, flags, nodeComponents
535
534
  return (_nodes$codeBlock = nodes.codeBlock) !== null && _nodes$codeBlock !== void 0 ? _nodes$codeBlock : CodeBlock;
536
535
  }
537
536
  }
538
- nodes['multiBodiedExtension'] = (0, _platformFeatureFlags.fg)('platform_editor_multi_body_extension_extensibility') ? _multiBodiedExtension.default : _multiBodiedExtensionOld.default;
537
+ nodes['multiBodiedExtension'] = _multiBodiedExtension.default;
539
538
  return nodes[node.type.name];
540
539
  };
541
540
  /*
@@ -26,9 +26,11 @@ var useMultiBodiedExtensionActions = exports.useMultiBodiedExtensionActions = fu
26
26
  getChildrenCount: function getChildrenCount() {
27
27
  return children && Array.isArray(children) ? children.length : 0;
28
28
  },
29
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
29
30
  removeChild: function removeChild(_index) {
30
31
  return false;
31
32
  },
33
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
32
34
  updateParameters: function updateParameters(_parameters) {
33
35
  return false;
34
36
  },
@@ -62,7 +62,7 @@ var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLega
62
62
  width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%'
63
63
  },
64
64
  "data-layout": layout,
65
- "data-testid": "multiBodiedExtension--wrapper"
65
+ "data-testid": "multiBodiedExtension--wrapper-renderer"
66
66
  }, (0, _react.jsx)("div", {
67
67
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
68
68
  className: "".concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
@@ -85,7 +85,7 @@ var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_
85
85
  (0, _breakout.calcBreakoutWidthCss)(layout) : '100%'
86
86
  },
87
87
  "data-layout": layout,
88
- "data-testid": "multiBodiedExtension--wrapper"
88
+ "data-testid": "multiBodiedExtension--wrapper-renderer"
89
89
  }, (0, _react.jsx)("div", {
90
90
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
91
91
  className: "".concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
@@ -69,7 +69,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
69
69
  // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
70
70
  var TABLE_INFO_TIMEOUT = 10000;
71
71
  var packageName = "@atlaskit/renderer";
72
- var packageVersion = "124.18.0";
72
+ var packageVersion = "124.19.0";
73
73
  var setAsQueryContainerStyles = (0, _react2.css)({
74
74
  containerName: 'ak-renderer-wrapper',
75
75
  containerType: 'inline-size'
@@ -5,12 +5,7 @@
5
5
 
6
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
7
  import { jsx, css } from '@emotion/react';
8
- import { fg } from '@atlaskit/platform-feature-flags';
9
- const containerCSSOld = css({
10
- minHeight: '100px',
11
- flexBasis: '100%'
12
- });
13
- const containerCSSNew = css({
8
+ const containerCSS = css({
14
9
  padding: `${"var(--ds-space-100, 8px)"}`,
15
10
  minHeight: '100px',
16
11
  // by default all frames are hidden, this style is overridden in multiBodiedExtensions for active frame
@@ -18,7 +13,7 @@ const containerCSSNew = css({
18
13
  });
19
14
  const ExtensionFrame = props => {
20
15
  return jsx("div", {
21
- css: [fg('platform_editor_multi_body_extension_extensibility') ? containerCSSNew : containerCSSOld],
16
+ css: [containerCSS],
22
17
  "data-extension-frame": "true"
23
18
  }, props.children);
24
19
  };
@@ -6,7 +6,6 @@ import { UnsupportedBlock, UnsupportedInline } from '@atlaskit/editor-common/ui'
6
6
  import { fg } from '@atlaskit/platform-feature-flags';
7
7
  import Blockquote from './blockquote';
8
8
  import BodiedExtension from './bodiedExtension';
9
- import MultiBodiedExtensionOld from './multiBodiedExtensionOld';
10
9
  import MultiBodiedExtension from './multiBodiedExtension';
11
10
  import ExtensionFrame from './extensionFrame';
12
11
  import BulletList from './bulletList';
@@ -214,7 +213,7 @@ export const toReact = (node, flags, nodeComponents
214
213
  return (_nodes$codeBlock = nodes.codeBlock) !== null && _nodes$codeBlock !== void 0 ? _nodes$codeBlock : CodeBlock;
215
214
  }
216
215
  }
217
- nodes['multiBodiedExtension'] = fg('platform_editor_multi_body_extension_extensibility') ? MultiBodiedExtension : MultiBodiedExtensionOld;
216
+ nodes['multiBodiedExtension'] = MultiBodiedExtension;
218
217
  return nodes[node.type.name];
219
218
  };
220
219
  /*
@@ -20,9 +20,11 @@ export const useMultiBodiedExtensionActions = ({
20
20
  getChildrenCount() {
21
21
  return children && Array.isArray(children) ? children.length : 0;
22
22
  },
23
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
23
24
  removeChild(_index) {
24
25
  return false;
25
26
  },
27
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
26
28
  updateParameters(_parameters) {
27
29
  return false;
28
30
  },
@@ -54,7 +54,7 @@ const MultiBodiedExtensionWrapperLegacy = ({
54
54
  width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
55
55
  },
56
56
  "data-layout": layout,
57
- "data-testid": "multiBodiedExtension--wrapper"
57
+ "data-testid": "multiBodiedExtension--wrapper-renderer"
58
58
  }, jsx("div", {
59
59
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
60
60
  className: `${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`
@@ -78,7 +78,7 @@ const MultiBodiedExtensionWrapperNext = ({
78
78
  calcBreakoutWidthCss(layout) : '100%'
79
79
  },
80
80
  "data-layout": layout,
81
- "data-testid": "multiBodiedExtension--wrapper"
81
+ "data-testid": "multiBodiedExtension--wrapper-renderer"
82
82
  }, jsx("div", {
83
83
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
84
84
  className: `${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`
@@ -55,7 +55,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
55
55
  // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
56
56
  const TABLE_INFO_TIMEOUT = 10000;
57
57
  const packageName = "@atlaskit/renderer";
58
- const packageVersion = "124.18.0";
58
+ const packageVersion = "124.19.0";
59
59
  const setAsQueryContainerStyles = css({
60
60
  containerName: 'ak-renderer-wrapper',
61
61
  containerType: 'inline-size'
@@ -5,12 +5,7 @@
5
5
 
6
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
7
  import { jsx, css } from '@emotion/react';
8
- import { fg } from '@atlaskit/platform-feature-flags';
9
- var containerCSSOld = css({
10
- minHeight: '100px',
11
- flexBasis: '100%'
12
- });
13
- var containerCSSNew = css({
8
+ var containerCSS = css({
14
9
  padding: "var(--ds-space-100, 8px)",
15
10
  minHeight: '100px',
16
11
  // by default all frames are hidden, this style is overridden in multiBodiedExtensions for active frame
@@ -18,7 +13,7 @@ var containerCSSNew = css({
18
13
  });
19
14
  var ExtensionFrame = function ExtensionFrame(props) {
20
15
  return jsx("div", {
21
- css: [fg('platform_editor_multi_body_extension_extensibility') ? containerCSSNew : containerCSSOld],
16
+ css: [containerCSS],
22
17
  "data-extension-frame": "true"
23
18
  }, props.children);
24
19
  };
@@ -9,7 +9,6 @@ import { UnsupportedBlock, UnsupportedInline } from '@atlaskit/editor-common/ui'
9
9
  import { fg } from '@atlaskit/platform-feature-flags';
10
10
  import Blockquote from './blockquote';
11
11
  import BodiedExtension from './bodiedExtension';
12
- import MultiBodiedExtensionOld from './multiBodiedExtensionOld';
13
12
  import MultiBodiedExtension from './multiBodiedExtension';
14
13
  import ExtensionFrame from './extensionFrame';
15
14
  import BulletList from './bulletList';
@@ -340,7 +339,7 @@ export var toReact = function toReact(node, flags, nodeComponents
340
339
  return (_nodes$codeBlock = nodes.codeBlock) !== null && _nodes$codeBlock !== void 0 ? _nodes$codeBlock : CodeBlock;
341
340
  }
342
341
  }
343
- nodes['multiBodiedExtension'] = fg('platform_editor_multi_body_extension_extensibility') ? MultiBodiedExtension : MultiBodiedExtensionOld;
342
+ nodes['multiBodiedExtension'] = MultiBodiedExtension;
344
343
  return nodes[node.type.name];
345
344
  };
346
345
  /*
@@ -19,9 +19,11 @@ export var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActi
19
19
  getChildrenCount: function getChildrenCount() {
20
20
  return children && Array.isArray(children) ? children.length : 0;
21
21
  },
22
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
22
23
  removeChild: function removeChild(_index) {
23
24
  return false;
24
25
  },
26
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
25
27
  updateParameters: function updateParameters(_parameters) {
26
28
  return false;
27
29
  },
@@ -54,7 +54,7 @@ var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLega
54
54
  width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
55
55
  },
56
56
  "data-layout": layout,
57
- "data-testid": "multiBodiedExtension--wrapper"
57
+ "data-testid": "multiBodiedExtension--wrapper-renderer"
58
58
  }, jsx("div", {
59
59
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
60
60
  className: "".concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
@@ -77,7 +77,7 @@ var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_
77
77
  calcBreakoutWidthCss(layout) : '100%'
78
78
  },
79
79
  "data-layout": layout,
80
- "data-testid": "multiBodiedExtension--wrapper"
80
+ "data-testid": "multiBodiedExtension--wrapper-renderer"
81
81
  }, jsx("div", {
82
82
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
83
83
  className: "".concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
@@ -60,7 +60,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
60
60
  // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
61
61
  var TABLE_INFO_TIMEOUT = 10000;
62
62
  var packageName = "@atlaskit/renderer";
63
- var packageVersion = "124.18.0";
63
+ var packageVersion = "124.19.0";
64
64
  var setAsQueryContainerStyles = css({
65
65
  containerName: 'ak-renderer-wrapper',
66
66
  containerType: 'inline-size'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/renderer",
3
- "version": "124.19.0",
3
+ "version": "124.20.0",
4
4
  "description": "Renderer component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -52,7 +52,7 @@
52
52
  "@atlaskit/media-viewer": "^52.5.0",
53
53
  "@atlaskit/platform-feature-flags": "^1.1.0",
54
54
  "@atlaskit/platform-feature-flags-react": "^0.4.0",
55
- "@atlaskit/react-ufo": "^4.15.0",
55
+ "@atlaskit/react-ufo": "^4.16.0",
56
56
  "@atlaskit/smart-card": "^43.15.0",
57
57
  "@atlaskit/status": "^3.0.0",
58
58
  "@atlaskit/task-decision": "^19.2.0",
@@ -71,7 +71,7 @@
71
71
  "uuid": "^3.1.0"
72
72
  },
73
73
  "peerDependencies": {
74
- "@atlaskit/editor-common": "^110.42.0",
74
+ "@atlaskit/editor-common": "^110.43.0",
75
75
  "@atlaskit/link-provider": "^4.0.0",
76
76
  "@atlaskit/media-core": "^37.0.0",
77
77
  "react": "^18.2.0",
@@ -158,9 +158,6 @@
158
158
  "platform_editor_querySelector_fix_table_renderer": {
159
159
  "type": "boolean"
160
160
  },
161
- "platform_editor_multi_body_extension_extensibility": {
162
- "type": "boolean"
163
- },
164
161
  "platform_editor_fix_media_in_renderer": {
165
162
  "type": "boolean"
166
163
  },
@@ -1,156 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = void 0;
9
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
12
- var _react = require("@emotion/react");
13
- var _colors = require("@atlaskit/theme/colors");
14
- var _react2 = _interopRequireWildcard(require("react"));
15
- var _extension = require("./extension");
16
- var _ExtensionRenderer = _interopRequireDefault(require("../../ui/ExtensionRenderer"));
17
- var _ui = require("@atlaskit/editor-common/ui");
18
- var _consts = require("../../consts");
19
- var _utils = require("@atlaskit/editor-common/utils");
20
- var _templateObject, _templateObject2;
21
- /* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
22
- /**
23
- * @jsxRuntime classic
24
- * @jsx jsx
25
- */
26
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
27
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
28
- var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_ref) {
29
- var updateActiveChild = _ref.updateActiveChild,
30
- children = _ref.children;
31
- var actions = _react2.default.useMemo(function () {
32
- return {
33
- changeActive: function changeActive(index) {
34
- return updateActiveChild(index);
35
- },
36
- addChild: function addChild() {
37
- return false;
38
- },
39
- getChildrenCount: function getChildrenCount() {
40
- return children ? children === null || children === void 0 ? void 0 : children.length : 0;
41
- },
42
- removeChild: function removeChild(_index) {
43
- return false;
44
- },
45
- updateParameters: function updateParameters(_parameters) {
46
- return false;
47
- },
48
- // Ignored via go/ees005
49
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
50
- getChildren: function getChildren() {
51
- return [];
52
- },
53
- getChildrenContainer: function getChildrenContainer() {
54
- return null;
55
- }
56
- };
57
- }, [updateActiveChild, children]);
58
- return actions;
59
- };
60
-
61
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
62
- var navigationCssExtended = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n\t.mbe-add-tab-button,\n\t.mbe-remove-tab {\n\t\tdisplay: none;\n\t}\n"])), _ui.sharedMultiBodiedExtensionStyles.mbeNavigation);
63
- var MultiBodiedExtension = function MultiBodiedExtension(props) {
64
- var children = props.children,
65
- _props$layout = props.layout,
66
- layout = _props$layout === void 0 ? 'default' : _props$layout,
67
- _props$path = props.path,
68
- path = _props$path === void 0 ? [] : _props$path;
69
- var _useState = (0, _react2.useState)(0),
70
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
71
- activeChildIndex = _useState2[0],
72
- setActiveChildIndex = _useState2[1];
73
- var removeOverflow = _react2.default.Children.toArray(children)
74
- // Ignored via go/ees005
75
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
76
- .map(function (child) {
77
- return /*#__PURE__*/_react2.default.isValidElement(child) ? child.props.nodeType === 'table' : false;
78
- }).every(Boolean);
79
- var overflowContainerClass = !removeOverflow ? _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
80
- var updateActiveChild = _react2.default.useCallback(function (index) {
81
- if (typeof index !== 'number') {
82
- // Ignored via go/ees007
83
- // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
84
- // TODO: Make sure we log this somewhere if this happens
85
- setActiveChildIndex(0);
86
- return false;
87
- }
88
- setActiveChildIndex(index);
89
- return true;
90
- }, [setActiveChildIndex]);
91
- var actions = useMultiBodiedExtensionActions({
92
- updateActiveChild: updateActiveChild,
93
- children: children
94
- });
95
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
96
- var containerCssExtended = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t", ";\n\t\t.ak-renderer-extension {\n\t\t\tmargin-top: 0 !important;\n\t\t}\n\n\t\t[data-layout='full-width'],\n\t\t[data-layout='wide'] {\n\t\t\t.multiBodiedExtension-navigation {\n\t\t\t\tborder-right: 3px solid ", " !important;\n\t\t\t}\n\t\t}\n\n\t\t.multiBodiedExtension--frames\n\t\t\t> [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\t", "\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\t"])), _ui.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(_colors.N40, ")"), activeChildIndex + 1, _ui.sharedMultiBodiedExtensionStyles.extensionFrameContent);
97
- var isTopLevel = path.length < 1;
98
- var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
99
- function renderMbeContent(width) {
100
- return (0, _react.jsx)("div", {
101
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
102
- className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass, " ").concat(overflowContainerClass),
103
- style: {
104
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
105
- width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%'
106
- },
107
- "data-layout": layout
108
- }, (0, _react.jsx)("nav", {
109
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
110
- className: "multiBodiedExtension-navigation",
111
- css: navigationCssExtended,
112
- "data-testid": "multiBodiedExtension-navigation"
113
- }, (0, _react.jsx)(_ExtensionRenderer.default
114
- // Ignored via go/ees005
115
- // eslint-disable-next-line react/jsx-props-no-spreading
116
- , (0, _extends2.default)({}, props, {
117
- actions: actions,
118
- type: "multiBodiedExtension"
119
- }), function (_ref2) {
120
- var result = _ref2.result;
121
- try {
122
- if (result && /*#__PURE__*/_react2.default.isValidElement(result)) {
123
- // Return the content directly if it's a valid JSX.Element
124
- return (0, _extension.renderExtension)(result, layout, {
125
- isTopLevel: path.length < 1
126
- });
127
- }
128
- } catch (e) {
129
- /** We don't want this error to block renderer */
130
- /** We keep rendering the default content */
131
- }
132
-
133
- // Always return default content if anything goes wrong
134
- return (0, _extension.renderExtension)(children, layout, {
135
- isTopLevel: path.length < 1
136
- });
137
- })), (0, _react.jsx)("article", {
138
- "data-testid": "multiBodiedExtension--frames"
139
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
140
- ,
141
- className: "multiBodiedExtension--frames"
142
- }, children));
143
- }
144
- return (0, _react.jsx)("section", {
145
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
146
- className: "multiBodiedExtension--container",
147
- css: containerCssExtended,
148
- "data-testid": "multiBodiedExtension--container",
149
- "data-active-child-index": activeChildIndex,
150
- "data-layout": layout
151
- }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref3) {
152
- var width = _ref3.width;
153
- return renderMbeContent(width);
154
- }));
155
- };
156
- var _default = exports.default = MultiBodiedExtension;
@@ -1,168 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- /* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
3
- /**
4
- * @jsxRuntime classic
5
- * @jsx jsx
6
- */
7
-
8
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
- import { jsx, css } from '@emotion/react';
10
- import { N40 } from '@atlaskit/theme/colors';
11
- import React, { useState } from 'react';
12
- import { renderExtension } from './extension';
13
- import ExtensionRenderer from '../../ui/ExtensionRenderer';
14
- import { WidthConsumer, sharedMultiBodiedExtensionStyles } from '@atlaskit/editor-common/ui';
15
- import { RendererCssClassName } from '../../consts';
16
- import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
17
- const useMultiBodiedExtensionActions = ({
18
- updateActiveChild,
19
- children
20
- }) => {
21
- const actions = React.useMemo(() => {
22
- return {
23
- changeActive(index) {
24
- return updateActiveChild(index);
25
- },
26
- addChild() {
27
- return false;
28
- },
29
- getChildrenCount() {
30
- return children ? children === null || children === void 0 ? void 0 : children.length : 0;
31
- },
32
- removeChild(_index) {
33
- return false;
34
- },
35
- updateParameters(_parameters) {
36
- return false;
37
- },
38
- // Ignored via go/ees005
39
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
40
- getChildren() {
41
- return [];
42
- },
43
- getChildrenContainer() {
44
- return null;
45
- }
46
- };
47
- }, [updateActiveChild, children]);
48
- return actions;
49
- };
50
-
51
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
52
- const navigationCssExtended = css`
53
- ${sharedMultiBodiedExtensionStyles.mbeNavigation};
54
- margin-left: 0 !important;
55
- margin-right: 0 !important;
56
- .mbe-add-tab-button,
57
- .mbe-remove-tab {
58
- display: none;
59
- }
60
- `;
61
- const MultiBodiedExtension = props => {
62
- const {
63
- children,
64
- layout = 'default',
65
- path = []
66
- } = props;
67
- const [activeChildIndex, setActiveChildIndex] = useState(0);
68
- const removeOverflow = React.Children.toArray(children)
69
- // Ignored via go/ees005
70
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
71
- .map(child => /*#__PURE__*/React.isValidElement(child) ? child.props.nodeType === 'table' : false).every(Boolean);
72
- const overflowContainerClass = !removeOverflow ? RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
73
- const updateActiveChild = React.useCallback(index => {
74
- if (typeof index !== 'number') {
75
- // Ignored via go/ees007
76
- // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
77
- // TODO: Make sure we log this somewhere if this happens
78
- setActiveChildIndex(0);
79
- return false;
80
- }
81
- setActiveChildIndex(index);
82
- return true;
83
- }, [setActiveChildIndex]);
84
- const actions = useMultiBodiedExtensionActions({
85
- updateActiveChild,
86
- children
87
- });
88
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
89
- const containerCssExtended = css`
90
- ${sharedMultiBodiedExtensionStyles.mbeExtensionContainer};
91
- .ak-renderer-extension {
92
- margin-top: 0 !important;
93
- }
94
-
95
- [data-layout='full-width'],
96
- [data-layout='wide'] {
97
- .multiBodiedExtension-navigation {
98
- border-right: 3px solid ${`var(--ds-border, ${N40})`} !important;
99
- }
100
- }
101
-
102
- .multiBodiedExtension--frames
103
- > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
104
- ${sharedMultiBodiedExtensionStyles.extensionFrameContent}
105
- margin-left: 0;
106
- margin-right: 0;
107
- }
108
- `;
109
- const isTopLevel = path.length < 1;
110
- const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
111
- function renderMbeContent(width) {
112
- return jsx("div", {
113
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
114
- className: `${RendererCssClassName.EXTENSION} ${centerAlignClass} ${overflowContainerClass}`,
115
- style: {
116
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
117
- width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
118
- },
119
- "data-layout": layout
120
- }, jsx("nav", {
121
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
122
- className: "multiBodiedExtension-navigation",
123
- css: navigationCssExtended,
124
- "data-testid": "multiBodiedExtension-navigation"
125
- }, jsx(ExtensionRenderer
126
- // Ignored via go/ees005
127
- // eslint-disable-next-line react/jsx-props-no-spreading
128
- , _extends({}, props, {
129
- actions: actions,
130
- type: "multiBodiedExtension"
131
- }), ({
132
- result
133
- }) => {
134
- try {
135
- if (result && /*#__PURE__*/React.isValidElement(result)) {
136
- // Return the content directly if it's a valid JSX.Element
137
- return renderExtension(result, layout, {
138
- isTopLevel: path.length < 1
139
- });
140
- }
141
- } catch (e) {
142
- /** We don't want this error to block renderer */
143
- /** We keep rendering the default content */
144
- }
145
-
146
- // Always return default content if anything goes wrong
147
- return renderExtension(children, layout, {
148
- isTopLevel: path.length < 1
149
- });
150
- })), jsx("article", {
151
- "data-testid": "multiBodiedExtension--frames"
152
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
153
- ,
154
- className: `multiBodiedExtension--frames`
155
- }, children));
156
- }
157
- return jsx("section", {
158
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
159
- className: "multiBodiedExtension--container",
160
- css: containerCssExtended,
161
- "data-testid": "multiBodiedExtension--container",
162
- "data-active-child-index": activeChildIndex,
163
- "data-layout": layout
164
- }, jsx(WidthConsumer, null, ({
165
- width
166
- }) => renderMbeContent(width)));
167
- };
168
- export default MultiBodiedExtension;
@@ -1,148 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
4
- var _templateObject, _templateObject2;
5
- /* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
6
- /**
7
- * @jsxRuntime classic
8
- * @jsx jsx
9
- */
10
-
11
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
12
- import { jsx, css } from '@emotion/react';
13
- import { N40 } from '@atlaskit/theme/colors';
14
- import React, { useState } from 'react';
15
- import { renderExtension } from './extension';
16
- import ExtensionRenderer from '../../ui/ExtensionRenderer';
17
- import { WidthConsumer, sharedMultiBodiedExtensionStyles } from '@atlaskit/editor-common/ui';
18
- import { RendererCssClassName } from '../../consts';
19
- import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
20
- var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_ref) {
21
- var updateActiveChild = _ref.updateActiveChild,
22
- children = _ref.children;
23
- var actions = React.useMemo(function () {
24
- return {
25
- changeActive: function changeActive(index) {
26
- return updateActiveChild(index);
27
- },
28
- addChild: function addChild() {
29
- return false;
30
- },
31
- getChildrenCount: function getChildrenCount() {
32
- return children ? children === null || children === void 0 ? void 0 : children.length : 0;
33
- },
34
- removeChild: function removeChild(_index) {
35
- return false;
36
- },
37
- updateParameters: function updateParameters(_parameters) {
38
- return false;
39
- },
40
- // Ignored via go/ees005
41
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
42
- getChildren: function getChildren() {
43
- return [];
44
- },
45
- getChildrenContainer: function getChildrenContainer() {
46
- return null;
47
- }
48
- };
49
- }, [updateActiveChild, children]);
50
- return actions;
51
- };
52
-
53
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
54
- var navigationCssExtended = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t", ";\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n\t.mbe-add-tab-button,\n\t.mbe-remove-tab {\n\t\tdisplay: none;\n\t}\n"])), sharedMultiBodiedExtensionStyles.mbeNavigation);
55
- var MultiBodiedExtension = function MultiBodiedExtension(props) {
56
- var children = props.children,
57
- _props$layout = props.layout,
58
- layout = _props$layout === void 0 ? 'default' : _props$layout,
59
- _props$path = props.path,
60
- path = _props$path === void 0 ? [] : _props$path;
61
- var _useState = useState(0),
62
- _useState2 = _slicedToArray(_useState, 2),
63
- activeChildIndex = _useState2[0],
64
- setActiveChildIndex = _useState2[1];
65
- var removeOverflow = React.Children.toArray(children)
66
- // Ignored via go/ees005
67
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
68
- .map(function (child) {
69
- return /*#__PURE__*/React.isValidElement(child) ? child.props.nodeType === 'table' : false;
70
- }).every(Boolean);
71
- var overflowContainerClass = !removeOverflow ? RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
72
- var updateActiveChild = React.useCallback(function (index) {
73
- if (typeof index !== 'number') {
74
- // Ignored via go/ees007
75
- // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
76
- // TODO: Make sure we log this somewhere if this happens
77
- setActiveChildIndex(0);
78
- return false;
79
- }
80
- setActiveChildIndex(index);
81
- return true;
82
- }, [setActiveChildIndex]);
83
- var actions = useMultiBodiedExtensionActions({
84
- updateActiveChild: updateActiveChild,
85
- children: children
86
- });
87
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
88
- var containerCssExtended = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t", ";\n\t\t.ak-renderer-extension {\n\t\t\tmargin-top: 0 !important;\n\t\t}\n\n\t\t[data-layout='full-width'],\n\t\t[data-layout='wide'] {\n\t\t\t.multiBodiedExtension-navigation {\n\t\t\t\tborder-right: 3px solid ", " !important;\n\t\t\t}\n\t\t}\n\n\t\t.multiBodiedExtension--frames\n\t\t\t> [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\t", "\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\t"])), sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(N40, ")"), activeChildIndex + 1, sharedMultiBodiedExtensionStyles.extensionFrameContent);
89
- var isTopLevel = path.length < 1;
90
- var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
91
- function renderMbeContent(width) {
92
- return jsx("div", {
93
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
94
- className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass, " ").concat(overflowContainerClass),
95
- style: {
96
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
97
- width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
98
- },
99
- "data-layout": layout
100
- }, jsx("nav", {
101
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
102
- className: "multiBodiedExtension-navigation",
103
- css: navigationCssExtended,
104
- "data-testid": "multiBodiedExtension-navigation"
105
- }, jsx(ExtensionRenderer
106
- // Ignored via go/ees005
107
- // eslint-disable-next-line react/jsx-props-no-spreading
108
- , _extends({}, props, {
109
- actions: actions,
110
- type: "multiBodiedExtension"
111
- }), function (_ref2) {
112
- var result = _ref2.result;
113
- try {
114
- if (result && /*#__PURE__*/React.isValidElement(result)) {
115
- // Return the content directly if it's a valid JSX.Element
116
- return renderExtension(result, layout, {
117
- isTopLevel: path.length < 1
118
- });
119
- }
120
- } catch (e) {
121
- /** We don't want this error to block renderer */
122
- /** We keep rendering the default content */
123
- }
124
-
125
- // Always return default content if anything goes wrong
126
- return renderExtension(children, layout, {
127
- isTopLevel: path.length < 1
128
- });
129
- })), jsx("article", {
130
- "data-testid": "multiBodiedExtension--frames"
131
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
132
- ,
133
- className: "multiBodiedExtension--frames"
134
- }, children));
135
- }
136
- return jsx("section", {
137
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
138
- className: "multiBodiedExtension--container",
139
- css: containerCssExtended,
140
- "data-testid": "multiBodiedExtension--container",
141
- "data-active-child-index": activeChildIndex,
142
- "data-layout": layout
143
- }, jsx(WidthConsumer, null, function (_ref3) {
144
- var width = _ref3.width;
145
- return renderMbeContent(width);
146
- }));
147
- };
148
- export default MultiBodiedExtension;
@@ -1,29 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { jsx } from '@emotion/react';
6
- import React from 'react';
7
- import type { Mark as PMMark, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
8
- import type { RendererContext } from '../types';
9
- import type { Serializer } from '../../serializer';
10
- import type { ExtensionLayout } from '@atlaskit/adf-schema';
11
- import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
12
- import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
13
- type Props = React.PropsWithChildren<{
14
- content?: any;
15
- extensionHandlers?: ExtensionHandlers;
16
- extensionKey: string;
17
- extensionType: string;
18
- layout?: ExtensionLayout;
19
- localId?: string;
20
- marks?: PMMark[];
21
- originalContent?: any;
22
- parameters?: any;
23
- path?: PMNode[];
24
- providers: ProviderFactory;
25
- rendererContext: RendererContext;
26
- serializer: Serializer<any>;
27
- }>;
28
- declare const MultiBodiedExtension: (props: Props) => jsx.JSX.Element;
29
- export default MultiBodiedExtension;
@@ -1,29 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { jsx } from '@emotion/react';
6
- import React from 'react';
7
- import type { Mark as PMMark, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
8
- import type { RendererContext } from '../types';
9
- import type { Serializer } from '../../serializer';
10
- import type { ExtensionLayout } from '@atlaskit/adf-schema';
11
- import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
12
- import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
13
- type Props = React.PropsWithChildren<{
14
- content?: any;
15
- extensionHandlers?: ExtensionHandlers;
16
- extensionKey: string;
17
- extensionType: string;
18
- layout?: ExtensionLayout;
19
- localId?: string;
20
- marks?: PMMark[];
21
- originalContent?: any;
22
- parameters?: any;
23
- path?: PMNode[];
24
- providers: ProviderFactory;
25
- rendererContext: RendererContext;
26
- serializer: Serializer<any>;
27
- }>;
28
- declare const MultiBodiedExtension: (props: Props) => jsx.JSX.Element;
29
- export default MultiBodiedExtension;