@atlaskit/renderer 108.18.0 → 108.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 +17 -0
- package/afm-cc/tsconfig.json +109 -0
- package/dist/cjs/react/marks/alignment.js +3 -2
- package/dist/cjs/react/marks/breakout.js +3 -2
- package/dist/cjs/react/marks/link.js +4 -3
- package/dist/cjs/react/nodes/blockCard.js +13 -11
- package/dist/cjs/react/nodes/codeBlock/codeBlock.js +5 -2
- package/dist/cjs/react/nodes/codeBlock/components/codeBlockButtonContainer.js +6 -4
- package/dist/cjs/react/nodes/codeBlock/components/codeBlockContainer.js +3 -2
- package/dist/cjs/react/nodes/codeBlock/components/codeBlockCopyButton.js +11 -8
- package/dist/cjs/react/nodes/codeBlock/components/codeBlockWrapButton.js +11 -8
- package/dist/cjs/react/nodes/codeBlock/components/lightWeightCodeBlock.js +8 -7
- package/dist/cjs/react/nodes/codeBlock/windowedCodeBlock.js +6 -5
- package/dist/cjs/react/nodes/embedCard.js +9 -8
- package/dist/cjs/react/nodes/heading-anchor.js +5 -4
- package/dist/cjs/react/nodes/layoutColumn.js +3 -2
- package/dist/cjs/react/nodes/media/index.js +11 -8
- package/dist/cjs/react/nodes/mediaInline.js +47 -20
- package/dist/cjs/react/nodes/mediaSingle/index.js +6 -3
- package/dist/cjs/react/nodes/mediaSingle/styles.js +1 -0
- package/dist/cjs/react/nodes/panel.js +9 -7
- package/dist/cjs/react/nodes/table/sticky.js +7 -6
- package/dist/cjs/ui/Expand.js +18 -16
- package/dist/cjs/ui/MediaCard.js +74 -71
- package/dist/cjs/ui/Renderer/index.js +28 -35
- package/dist/cjs/ui/Renderer/truncated-wrapper.js +3 -2
- package/dist/cjs/ui/SortingIcon.js +5 -4
- package/dist/cjs/ui/annotations/draft/component.js +9 -8
- package/dist/cjs/ui/annotations/element/mark.js +2 -1
- package/dist/es2019/react/marks/alignment.js +4 -3
- package/dist/es2019/react/marks/breakout.js +4 -3
- package/dist/es2019/react/marks/link.js +5 -4
- package/dist/es2019/react/nodes/blockCard.js +13 -12
- package/dist/es2019/react/nodes/codeBlock/codeBlock.js +4 -2
- package/dist/es2019/react/nodes/codeBlock/components/codeBlockButtonContainer.js +6 -5
- package/dist/es2019/react/nodes/codeBlock/components/codeBlockContainer.js +4 -3
- package/dist/es2019/react/nodes/codeBlock/components/codeBlockCopyButton.js +7 -5
- package/dist/es2019/react/nodes/codeBlock/components/codeBlockWrapButton.js +9 -7
- package/dist/es2019/react/nodes/codeBlock/components/lightWeightCodeBlock.js +9 -8
- package/dist/es2019/react/nodes/codeBlock/windowedCodeBlock.js +6 -4
- package/dist/es2019/react/nodes/embedCard.js +10 -9
- package/dist/es2019/react/nodes/heading-anchor.js +6 -5
- package/dist/es2019/react/nodes/layoutColumn.js +4 -3
- package/dist/es2019/react/nodes/media/index.js +13 -7
- package/dist/es2019/react/nodes/mediaInline.js +20 -12
- package/dist/es2019/react/nodes/mediaSingle/index.js +6 -3
- package/dist/es2019/react/nodes/mediaSingle/styles.js +1 -0
- package/dist/es2019/react/nodes/panel.js +8 -7
- package/dist/es2019/react/nodes/table/sticky.js +8 -7
- package/dist/es2019/ui/Expand.js +17 -16
- package/dist/es2019/ui/MediaCard.js +29 -25
- package/dist/es2019/ui/Renderer/index.js +31 -36
- package/dist/es2019/ui/Renderer/truncated-wrapper.js +4 -3
- package/dist/es2019/ui/SortingIcon.js +6 -5
- package/dist/es2019/ui/annotations/draft/component.js +10 -9
- package/dist/es2019/ui/annotations/element/mark.js +3 -2
- package/dist/esm/react/marks/alignment.js +4 -3
- package/dist/esm/react/marks/breakout.js +4 -3
- package/dist/esm/react/marks/link.js +5 -4
- package/dist/esm/react/nodes/blockCard.js +13 -12
- package/dist/esm/react/nodes/codeBlock/codeBlock.js +4 -2
- package/dist/esm/react/nodes/codeBlock/components/codeBlockButtonContainer.js +6 -5
- package/dist/esm/react/nodes/codeBlock/components/codeBlockContainer.js +4 -3
- package/dist/esm/react/nodes/codeBlock/components/codeBlockCopyButton.js +7 -5
- package/dist/esm/react/nodes/codeBlock/components/codeBlockWrapButton.js +9 -7
- package/dist/esm/react/nodes/codeBlock/components/lightWeightCodeBlock.js +9 -8
- package/dist/esm/react/nodes/codeBlock/windowedCodeBlock.js +6 -4
- package/dist/esm/react/nodes/embedCard.js +10 -9
- package/dist/esm/react/nodes/heading-anchor.js +6 -5
- package/dist/esm/react/nodes/layoutColumn.js +4 -3
- package/dist/esm/react/nodes/media/index.js +14 -8
- package/dist/esm/react/nodes/mediaInline.js +48 -21
- package/dist/esm/react/nodes/mediaSingle/index.js +6 -3
- package/dist/esm/react/nodes/mediaSingle/styles.js +1 -0
- package/dist/esm/react/nodes/panel.js +8 -7
- package/dist/esm/react/nodes/table/sticky.js +8 -7
- package/dist/esm/ui/Expand.js +17 -16
- package/dist/esm/ui/MediaCard.js +74 -71
- package/dist/esm/ui/Renderer/index.js +31 -36
- package/dist/esm/ui/Renderer/truncated-wrapper.js +4 -3
- package/dist/esm/ui/SortingIcon.js +6 -5
- package/dist/esm/ui/annotations/draft/component.js +10 -9
- package/dist/esm/ui/annotations/element/mark.js +3 -2
- package/dist/types/react/nodes/media/index.d.ts +3 -2
- package/dist/types/react/nodes/mediaInline.d.ts +1 -2
- package/dist/types/ui/MediaCard.d.ts +5 -6
- package/dist/types/ui/Renderer/index.d.ts +1 -2
- package/dist/types-ts4.5/react/nodes/media/index.d.ts +3 -2
- package/dist/types-ts4.5/react/nodes/mediaInline.d.ts +1 -2
- package/dist/types-ts4.5/ui/MediaCard.d.ts +5 -6
- package/dist/types-ts4.5/ui/Renderer/index.d.ts +1 -2
- package/package.json +2 -1
- package/dist/cjs/react/utils/EditorMediaClientProvider.js +0 -40
- package/dist/es2019/react/utils/EditorMediaClientProvider.js +0 -27
- package/dist/esm/react/utils/EditorMediaClientProvider.js +0 -30
- package/dist/types/react/utils/EditorMediaClientProvider.d.ts +0 -5
- package/dist/types-ts4.5/react/utils/EditorMediaClientProvider.d.ts +0 -5
|
@@ -26,13 +26,14 @@ var _reactIntlNext = require("react-intl-next");
|
|
|
26
26
|
var _messages = require("../../messages");
|
|
27
27
|
var _templateObject;
|
|
28
28
|
var _excluded = ["children"];
|
|
29
|
+
/** @jsx jsx */
|
|
29
30
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
30
31
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
31
32
|
var HeadingAnchorWrapperClassName = exports.HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
|
|
32
33
|
var CopyAnchorWrapperWithRef = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
33
34
|
var children = props.children,
|
|
34
35
|
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
35
|
-
return
|
|
36
|
+
return (0, _react2.jsx)("span", (0, _extends2.default)({}, rest, {
|
|
36
37
|
className: HeadingAnchorWrapperClassName,
|
|
37
38
|
ref: ref
|
|
38
39
|
}), children);
|
|
@@ -97,12 +98,12 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
97
98
|
_this.setTooltipState(_messages.headingAnchorLinkMessages.copyHeadingLinkToClipboard);
|
|
98
99
|
});
|
|
99
100
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAnchorButton", function () {
|
|
100
|
-
return
|
|
101
|
+
return (0, _react2.jsx)("button", {
|
|
101
102
|
css: copyAnchorButtonStyles,
|
|
102
103
|
onMouseLeave: _this.resetMessage,
|
|
103
104
|
onClick: _this.copyToClipboard,
|
|
104
105
|
"aria-label": _this.state.tooltipMessage
|
|
105
|
-
},
|
|
106
|
+
}, (0, _react2.jsx)(_link.default, {
|
|
106
107
|
label: _this.getCopyAriaLabel(),
|
|
107
108
|
size: _this.props.level > 3 ? 'small' : 'medium',
|
|
108
109
|
primaryColor: _this.state.isClicked ? "var(--ds-icon-selected, ".concat(_colors.B400, ")") : "var(--ds-icon-subtle, ".concat(_colors.N200, ")")
|
|
@@ -123,7 +124,7 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
123
124
|
// We set the key to the message to ensure it remounts when the message
|
|
124
125
|
// changes, so that it correctly repositions.
|
|
125
126
|
// @see https://ecosystem.atlassian.net/projects/AK/queues/issue/AK-6548
|
|
126
|
-
return
|
|
127
|
+
return (0, _react2.jsx)(_tooltip.default, {
|
|
127
128
|
tag: CopyAnchorWrapperWithRef,
|
|
128
129
|
content: tooltipMessage,
|
|
129
130
|
position: "top",
|
|
@@ -10,15 +10,16 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
10
10
|
var _react2 = require("@emotion/react");
|
|
11
11
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
12
12
|
var _templateObject;
|
|
13
|
+
/** @jsx jsx */
|
|
13
14
|
var layoutColumnClearMarginTopStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", "\n"])), _ui.clearNextSiblingMarginTopStyle, _ui.clearNextSiblingBlockMarkMarginTopStyle);
|
|
14
15
|
function LayoutSection(props) {
|
|
15
|
-
return
|
|
16
|
+
return (0, _react2.jsx)("div", {
|
|
16
17
|
"data-layout-column": true,
|
|
17
18
|
"data-column-width": props.width,
|
|
18
19
|
style: {
|
|
19
20
|
flexBasis: "".concat(props.width, "%")
|
|
20
21
|
}
|
|
21
|
-
},
|
|
22
|
+
}, (0, _react2.jsx)(_ui.WidthProvider, null, (0, _react2.jsx)("div", {
|
|
22
23
|
css: layoutColumnClearMarginTopStyles
|
|
23
24
|
}), props.children));
|
|
24
25
|
}
|
|
@@ -15,6 +15,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
|
|
|
15
15
|
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
16
16
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
17
17
|
var _react = _interopRequireWildcard(require("react"));
|
|
18
|
+
var _react2 = require("@emotion/react");
|
|
18
19
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
19
20
|
var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
|
|
20
21
|
var _providerFactory = require("@atlaskit/editor-common/provider-factory");
|
|
@@ -28,7 +29,7 @@ var _styles = require("./styles");
|
|
|
28
29
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
29
30
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
30
31
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
31
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
32
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
|
|
32
33
|
var Media = exports.default = /*#__PURE__*/function (_PureComponent) {
|
|
33
34
|
(0, _inherits2.default)(Media, _PureComponent);
|
|
34
35
|
var _super = _createSuper(Media);
|
|
@@ -42,7 +43,8 @@ var Media = exports.default = /*#__PURE__*/function (_PureComponent) {
|
|
|
42
43
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCard", function () {
|
|
43
44
|
var _borderMark$attrs$col, _borderMark$attrs$siz;
|
|
44
45
|
var providers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
45
|
-
var
|
|
46
|
+
var mediaProvider = providers.mediaProvider,
|
|
47
|
+
contextIdentifierProvider = providers.contextIdentifierProvider;
|
|
46
48
|
var _this$props = _this.props,
|
|
47
49
|
allowAltTextOnImages = _this$props.allowAltTextOnImages,
|
|
48
50
|
alt = _this$props.alt,
|
|
@@ -57,11 +59,12 @@ var Media = exports.default = /*#__PURE__*/function (_PureComponent) {
|
|
|
57
59
|
var linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
|
|
58
60
|
var eventHandlers = linkHref ? undefined : _this.props.eventHandlers;
|
|
59
61
|
var shouldOpenMediaViewer = !linkHref && allowMediaViewer;
|
|
60
|
-
var mediaComponent =
|
|
62
|
+
var mediaComponent = (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
|
|
61
63
|
data: (0, _defineProperty2.default)({}, _analyticsNamespacedContext.MEDIA_CONTEXT, {
|
|
62
64
|
border: !!borderMark
|
|
63
65
|
})
|
|
64
|
-
},
|
|
66
|
+
}, (0, _react2.jsx)(_MediaCard.MediaCard, (0, _extends2.default)({
|
|
67
|
+
mediaProvider: mediaProvider,
|
|
65
68
|
contextIdentifierProvider: contextIdentifierProvider
|
|
66
69
|
}, _this.props, {
|
|
67
70
|
shouldOpenMediaViewer: shouldOpenMediaViewer,
|
|
@@ -72,15 +75,15 @@ var Media = exports.default = /*#__PURE__*/function (_PureComponent) {
|
|
|
72
75
|
ssr: ssr
|
|
73
76
|
})));
|
|
74
77
|
var paletteColorValue = (0, _editorPalette.hexToEditorBorderPaletteColor)(borderColor) || borderColor;
|
|
75
|
-
var mediaComponentWithBorder = borderMark ?
|
|
78
|
+
var mediaComponentWithBorder = borderMark ? (0, _react2.jsx)("div", {
|
|
76
79
|
"data-mark-type": "border",
|
|
77
80
|
"data-color": borderColor,
|
|
78
81
|
"data-size": borderWidth,
|
|
79
82
|
css: (0, _styles.borderStyle)(paletteColorValue, borderWidth)
|
|
80
|
-
},
|
|
83
|
+
}, (0, _react2.jsx)(_ui.MediaBorderGapFiller, {
|
|
81
84
|
borderColor: borderColor
|
|
82
85
|
}), mediaComponent) : mediaComponent;
|
|
83
|
-
return linkHref ?
|
|
86
|
+
return linkHref ? (0, _react2.jsx)("a", {
|
|
84
87
|
href: linkHref,
|
|
85
88
|
rel: "noreferrer noopener",
|
|
86
89
|
onClick: _this.handleMediaLinkClick,
|
|
@@ -122,7 +125,7 @@ var Media = exports.default = /*#__PURE__*/function (_PureComponent) {
|
|
|
122
125
|
if (!providers) {
|
|
123
126
|
return this.renderCard();
|
|
124
127
|
}
|
|
125
|
-
return
|
|
128
|
+
return (0, _react2.jsx)(_providerFactory.WithProviders, {
|
|
126
129
|
providers: ['mediaProvider', 'contextIdentifierProvider'],
|
|
127
130
|
providerFactory: providers,
|
|
128
131
|
renderNode: this.renderCard
|
|
@@ -28,6 +28,7 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
|
|
|
28
28
|
clipboardAttrs = _ref.clipboardAttrs,
|
|
29
29
|
mediaInlineProviders = _ref.mediaInlineProviders,
|
|
30
30
|
collectionName = _ref.collection,
|
|
31
|
+
featureFlags = _ref.featureFlags,
|
|
31
32
|
eventHandlers = _ref.eventHandlers,
|
|
32
33
|
identifier = _ref.identifier;
|
|
33
34
|
var _useState = (0, _react.useState)(),
|
|
@@ -36,9 +37,12 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
|
|
|
36
37
|
setContextIdentifierProvider = _useState2[1];
|
|
37
38
|
var _useState3 = (0, _react.useState)(),
|
|
38
39
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
var
|
|
40
|
+
viewMediaClientConfigState = _useState4[0],
|
|
41
|
+
setViewMediaClientConfigState = _useState4[1];
|
|
42
|
+
var _useState5 = (0, _react.useState)(),
|
|
43
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
44
|
+
fileState = _useState6[0],
|
|
45
|
+
setFileState = _useState6[1];
|
|
42
46
|
var updateContext = /*#__PURE__*/function () {
|
|
43
47
|
var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(contextIdentifierProvider) {
|
|
44
48
|
var resolvedContextID;
|
|
@@ -65,40 +69,36 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
|
|
|
65
69
|
};
|
|
66
70
|
}();
|
|
67
71
|
var updateFileState = (0, _react.useCallback)( /*#__PURE__*/function () {
|
|
68
|
-
var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(id) {
|
|
69
|
-
var options, _fileState;
|
|
72
|
+
var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(id, mediaClientConfig) {
|
|
73
|
+
var mediaClient, options, _fileState;
|
|
70
74
|
return _regenerator.default.wrap(function _callee2$(_context2) {
|
|
71
75
|
while (1) switch (_context2.prev = _context2.next) {
|
|
72
76
|
case 0:
|
|
77
|
+
mediaClient = (0, _mediaClientReact.getMediaClient)(mediaClientConfig);
|
|
73
78
|
options = {
|
|
74
79
|
collectionName: collectionName
|
|
75
80
|
};
|
|
76
|
-
_context2.prev =
|
|
77
|
-
if (!mediaClient) {
|
|
78
|
-
_context2.next = 7;
|
|
79
|
-
break;
|
|
80
|
-
}
|
|
81
|
+
_context2.prev = 2;
|
|
81
82
|
_context2.next = 5;
|
|
82
83
|
return mediaClient.file.getCurrentState(id, options);
|
|
83
84
|
case 5:
|
|
84
85
|
_fileState = _context2.sent;
|
|
85
86
|
setFileState(_fileState);
|
|
86
|
-
case 7:
|
|
87
87
|
_context2.next = 11;
|
|
88
88
|
break;
|
|
89
89
|
case 9:
|
|
90
90
|
_context2.prev = 9;
|
|
91
|
-
_context2.t0 = _context2["catch"](
|
|
91
|
+
_context2.t0 = _context2["catch"](2);
|
|
92
92
|
case 11:
|
|
93
93
|
case "end":
|
|
94
94
|
return _context2.stop();
|
|
95
95
|
}
|
|
96
|
-
}, _callee2, null, [[
|
|
96
|
+
}, _callee2, null, [[2, 9]]);
|
|
97
97
|
}));
|
|
98
|
-
return function (_x2) {
|
|
98
|
+
return function (_x2, _x3) {
|
|
99
99
|
return _ref3.apply(this, arguments);
|
|
100
100
|
};
|
|
101
|
-
}(), [collectionName
|
|
101
|
+
}(), [collectionName]);
|
|
102
102
|
(0, _react.useEffect)(function () {
|
|
103
103
|
var id = identifier.id;
|
|
104
104
|
var nodeIsInCache = id && _MediaCard.mediaIdentifierMap.has(id);
|
|
@@ -112,17 +112,44 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
|
|
|
112
112
|
};
|
|
113
113
|
}, [identifier, collectionName]);
|
|
114
114
|
(0, _react.useEffect)(function () {
|
|
115
|
-
var
|
|
115
|
+
var mediaProvider = mediaInlineProviders.mediaProvider,
|
|
116
|
+
contextIdentifierProvider = mediaInlineProviders.contextIdentifierProvider;
|
|
116
117
|
var id = clipboardAttrs.id;
|
|
118
|
+
updateViewMediaClientConfigState(mediaProvider);
|
|
117
119
|
updateContext(contextIdentifierProvider);
|
|
118
|
-
id && updateFileState(id);
|
|
119
|
-
}, [mediaInlineProviders, contextIdentifierProvider, clipboardAttrs, updateFileState]);
|
|
120
|
+
id && viewMediaClientConfigState && updateFileState(id, viewMediaClientConfigState);
|
|
121
|
+
}, [mediaInlineProviders, contextIdentifierProvider, clipboardAttrs, viewMediaClientConfigState, updateFileState]);
|
|
122
|
+
var updateViewMediaClientConfigState = /*#__PURE__*/function () {
|
|
123
|
+
var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(mediaProvider) {
|
|
124
|
+
var mediaClientConfig;
|
|
125
|
+
return _regenerator.default.wrap(function _callee3$(_context3) {
|
|
126
|
+
while (1) switch (_context3.prev = _context3.next) {
|
|
127
|
+
case 0:
|
|
128
|
+
if (!mediaProvider) {
|
|
129
|
+
_context3.next = 5;
|
|
130
|
+
break;
|
|
131
|
+
}
|
|
132
|
+
_context3.next = 3;
|
|
133
|
+
return mediaProvider;
|
|
134
|
+
case 3:
|
|
135
|
+
mediaClientConfig = _context3.sent;
|
|
136
|
+
setViewMediaClientConfigState(mediaClientConfig.viewMediaClientConfig);
|
|
137
|
+
case 5:
|
|
138
|
+
case "end":
|
|
139
|
+
return _context3.stop();
|
|
140
|
+
}
|
|
141
|
+
}, _callee3);
|
|
142
|
+
}));
|
|
143
|
+
return function updateViewMediaClientConfigState(_x4) {
|
|
144
|
+
return _ref4.apply(this, arguments);
|
|
145
|
+
};
|
|
146
|
+
}();
|
|
120
147
|
|
|
121
148
|
/*
|
|
122
149
|
* Only show the loading view if the media provider is not ready
|
|
123
150
|
* prevents calling the media API before the provider is ready
|
|
124
151
|
*/
|
|
125
|
-
if (!
|
|
152
|
+
if (!viewMediaClientConfigState) {
|
|
126
153
|
return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadingView, {
|
|
127
154
|
message: "",
|
|
128
155
|
isSelected: false
|
|
@@ -152,7 +179,7 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
|
|
|
152
179
|
onClick: handleMediaInlineClick,
|
|
153
180
|
shouldOpenMediaViewer: shouldOpenMediaViewer,
|
|
154
181
|
shouldDisplayToolTip: shouldDisplayToolTip,
|
|
155
|
-
mediaClientConfig:
|
|
182
|
+
mediaClientConfig: viewMediaClientConfigState,
|
|
156
183
|
mediaViewerItems: Array.from(_MediaCard.mediaIdentifierMap.values())
|
|
157
184
|
}) : /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
|
|
158
185
|
message: (intl || (0, _reactIntlNext.createIntl)({
|
|
@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.getMediaContainerWidth = exports.default = void 0;
|
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _react2 = require("@emotion/react");
|
|
11
12
|
var _reactIntlNext = require("react-intl-next");
|
|
12
13
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
13
14
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
@@ -15,6 +16,8 @@ var _style = require("../../../ui/Renderer/style");
|
|
|
15
16
|
var _styles = require("./styles");
|
|
16
17
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
|
+
/** @jsx jsx */
|
|
20
|
+
|
|
18
21
|
var DEFAULT_WIDTH = 250;
|
|
19
22
|
var DEFAULT_HEIGHT = 200;
|
|
20
23
|
var isMediaElement = function isMediaElement(media) {
|
|
@@ -164,7 +167,7 @@ var MediaSingle = function MediaSingle(props) {
|
|
|
164
167
|
featureFlags: featureFlags
|
|
165
168
|
});
|
|
166
169
|
var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? [_styles.uiMediaSingleBaseStyles, _styles.uiMediaSingleLayoutStyles] : [_styles.uiMediaSingleBaseStyles];
|
|
167
|
-
return
|
|
170
|
+
return (0, _react2.jsx)(_ui.MediaSingle, {
|
|
168
171
|
css: uiMediaSingleStyles,
|
|
169
172
|
handleMediaSingleRef: ref,
|
|
170
173
|
layout: layout,
|
|
@@ -177,9 +180,9 @@ var MediaSingle = function MediaSingle(props) {
|
|
|
177
180
|
widthType: widthType
|
|
178
181
|
},
|
|
179
182
|
fullWidthMode: isFullWidth
|
|
180
|
-
},
|
|
183
|
+
}, (0, _react2.jsx)(_react.Fragment, null, mediaComponent), allowCaptions && caption);
|
|
181
184
|
};
|
|
182
|
-
return
|
|
185
|
+
return (0, _react2.jsx)(_ui.WidthConsumer, null, function (_ref3) {
|
|
183
186
|
var width = _ref3.width;
|
|
184
187
|
// Note: in SSR mode the `window` object is not defined,
|
|
185
188
|
// therefore width here is 0, see:
|
|
@@ -8,5 +8,6 @@ exports.uiMediaSingleLayoutStyles = exports.uiMediaSingleBaseStyles = void 0;
|
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _templateObject, _templateObject2;
|
|
11
|
+
/** @jsx jsx */
|
|
11
12
|
var uiMediaSingleBaseStyles = exports.uiMediaSingleBaseStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n transition: all 0.1s linear;\n"])));
|
|
12
13
|
var uiMediaSingleLayoutStyles = exports.uiMediaSingleLayoutStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 50%;\n transform: translateX(-50%);\n"])));
|
|
@@ -19,7 +19,9 @@ var _emoji2 = _interopRequireDefault(require("./emoji"));
|
|
|
19
19
|
var _theme = require("@atlaskit/theme");
|
|
20
20
|
var _icons = require("@atlaskit/editor-common/icons");
|
|
21
21
|
var _templateObject, _templateObject2;
|
|
22
|
-
var _excluded = ["backgroundColor", "hasIcon"];
|
|
22
|
+
var _excluded = ["backgroundColor", "hasIcon"];
|
|
23
|
+
/** @jsx jsx */
|
|
24
|
+
// AFP-2532 TODO: Fix automatic suppressions below
|
|
23
25
|
// eslint-disable-next-line @atlassian/tangerine/import/entry-points
|
|
24
26
|
var PanelStyled = function PanelStyled(_ref) {
|
|
25
27
|
var backgroundColor = _ref.backgroundColor,
|
|
@@ -44,7 +46,7 @@ var PanelStyled = function PanelStyled(_ref) {
|
|
|
44
46
|
}), _adfSchema.PanelType.CUSTOM, customStyle, hasIcon ? '' : 'padding-left: 12px;');
|
|
45
47
|
};
|
|
46
48
|
}
|
|
47
|
-
return
|
|
49
|
+
return (0, _react2.jsx)("div", (0, _extends2.default)({
|
|
48
50
|
css: styles
|
|
49
51
|
}, props), props.children);
|
|
50
52
|
};
|
|
@@ -73,7 +75,7 @@ var Panel = function Panel(props) {
|
|
|
73
75
|
var getIcon = function getIcon() {
|
|
74
76
|
if (panelType === _adfSchema.PanelType.CUSTOM) {
|
|
75
77
|
if (panelIcon && providers) {
|
|
76
|
-
return
|
|
78
|
+
return (0, _react2.jsx)(_emoji2.default, {
|
|
77
79
|
id: panelIconId,
|
|
78
80
|
text: panelIconText,
|
|
79
81
|
shortName: panelIcon,
|
|
@@ -83,19 +85,19 @@ var Panel = function Panel(props) {
|
|
|
83
85
|
return null;
|
|
84
86
|
}
|
|
85
87
|
var Icon = panelIcons[panelType];
|
|
86
|
-
return
|
|
88
|
+
return (0, _react2.jsx)(Icon, {
|
|
87
89
|
label: "Panel ".concat(panelType)
|
|
88
90
|
});
|
|
89
91
|
};
|
|
90
92
|
var icon = getIcon();
|
|
91
93
|
var renderIcon = function renderIcon() {
|
|
92
94
|
if (icon) {
|
|
93
|
-
return
|
|
95
|
+
return (0, _react2.jsx)("div", {
|
|
94
96
|
className: _panel.PanelSharedCssClassName.icon
|
|
95
97
|
}, icon);
|
|
96
98
|
}
|
|
97
99
|
};
|
|
98
|
-
return
|
|
100
|
+
return (0, _react2.jsx)(PanelStyled, {
|
|
99
101
|
className: _panel.PanelSharedCssClassName.prefix,
|
|
100
102
|
"data-panel-type": panelType,
|
|
101
103
|
"data-panel-color": panelColor,
|
|
@@ -104,7 +106,7 @@ var Panel = function Panel(props) {
|
|
|
104
106
|
"data-panel-icon-text": panelIconText,
|
|
105
107
|
backgroundColor: panelColor,
|
|
106
108
|
hasIcon: Boolean(icon)
|
|
107
|
-
}, renderIcon(),
|
|
109
|
+
}, renderIcon(), (0, _react2.jsx)("div", {
|
|
108
110
|
className: _panel.PanelSharedCssClassName.content
|
|
109
111
|
}, children));
|
|
110
112
|
};
|
|
@@ -18,6 +18,7 @@ var _table = require("./table");
|
|
|
18
18
|
var _injectProps = require("../../utils/inject-props");
|
|
19
19
|
var _table2 = require("../table");
|
|
20
20
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
21
|
+
/** @jsx jsx */
|
|
21
22
|
var tableStickyPadding = exports.tableStickyPadding = 8;
|
|
22
23
|
var modeSpecficStyles = {
|
|
23
24
|
none: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: none;\n "]))),
|
|
@@ -44,7 +45,7 @@ var FixedTableDiv = exports.FixedTableDiv = function FixedTableDiv(props) {
|
|
|
44
45
|
var attrs = {
|
|
45
46
|
mode: mode
|
|
46
47
|
};
|
|
47
|
-
return
|
|
48
|
+
return (0, _react2.jsx)("div", (0, _extends2.default)({}, attrs, {
|
|
48
49
|
"data-testid": "sticky-table-fixed",
|
|
49
50
|
css: fixedTableCss
|
|
50
51
|
}), props.children);
|
|
@@ -80,26 +81,26 @@ var StickyTable = exports.StickyTable = function StickyTable(_ref) {
|
|
|
80
81
|
});
|
|
81
82
|
}
|
|
82
83
|
/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
|
|
83
|
-
return
|
|
84
|
+
return (0, _react2.jsx)("div", {
|
|
84
85
|
css: styles
|
|
85
|
-
},
|
|
86
|
+
}, (0, _react2.jsx)(FixedTableDiv, {
|
|
86
87
|
top: mode === 'stick' ? top : undefined,
|
|
87
88
|
mode: rowHeight > 300 ? 'none' : mode,
|
|
88
89
|
wrapperWidth: wrapperWidth,
|
|
89
90
|
rendererAppearance: rendererAppearance
|
|
90
|
-
},
|
|
91
|
+
}, (0, _react2.jsx)("div", {
|
|
91
92
|
className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " is-sticky ").concat(shadowClassNames || ''),
|
|
92
93
|
"data-layout": layout,
|
|
93
94
|
style: {
|
|
94
95
|
width: tableWidth
|
|
95
96
|
}
|
|
96
|
-
},
|
|
97
|
+
}, (0, _react2.jsx)("div", {
|
|
97
98
|
ref: innerRef,
|
|
98
99
|
className: "".concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER),
|
|
99
100
|
style: {
|
|
100
101
|
overflow: 'hidden'
|
|
101
102
|
}
|
|
102
|
-
},
|
|
103
|
+
}, (0, _react2.jsx)(_table.Table, {
|
|
103
104
|
columnWidths: columnWidths,
|
|
104
105
|
layout: layout,
|
|
105
106
|
isNumberColumnEnabled: isNumberColumnEnabled,
|
package/dist/cjs/ui/Expand.js
CHANGED
|
@@ -22,7 +22,9 @@ var _reactIntlNext = require("react-intl-next");
|
|
|
22
22
|
var _activeHeaderIdProvider = require("./active-header-id-provider");
|
|
23
23
|
var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
|
|
24
24
|
var _utils = require("../utils");
|
|
25
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
25
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
26
|
+
/** @jsx jsx */
|
|
27
|
+
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
26
28
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
29
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
28
30
|
var titleStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n outline: none;\n border: none;\n font-size: ", ";\n line-height: ", ";\n font-weight: normal;\n display: flex;\n flex: 1;\n margin: 0;\n padding: 0 0 0 ", ";\n text-align: left;\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, "var(--ds-space-050, 4px)");
|
|
@@ -34,7 +36,7 @@ var Container = function Container(props) {
|
|
|
34
36
|
theme: themeProps
|
|
35
37
|
}), paddingBottom);
|
|
36
38
|
};
|
|
37
|
-
return
|
|
39
|
+
return (0, _react2.jsx)("div", (0, _extends2.default)({
|
|
38
40
|
css: styles
|
|
39
41
|
}, props), props.children);
|
|
40
42
|
};
|
|
@@ -45,7 +47,7 @@ var TitleContainer = function TitleContainer(props) {
|
|
|
45
47
|
theme: themeProps
|
|
46
48
|
}), "var(--ds-space-100, 8px)", paddingBottom);
|
|
47
49
|
};
|
|
48
|
-
return
|
|
50
|
+
return (0, _react2.jsx)("button", (0, _extends2.default)({
|
|
49
51
|
css: styles
|
|
50
52
|
}, props), props.children);
|
|
51
53
|
};
|
|
@@ -58,7 +60,7 @@ var ContentContainer = function ContentContainer(props) {
|
|
|
58
60
|
theme: themeProps
|
|
59
61
|
}), "var(--ds-space-200, 16px)", (0, _constants.gridSize)() * 5 - (0, _constants.gridSize)() / 2, visibility);
|
|
60
62
|
};
|
|
61
|
-
return
|
|
63
|
+
return (0, _react2.jsx)("div", (0, _extends2.default)({
|
|
62
64
|
css: styles
|
|
63
65
|
}, props), props.children);
|
|
64
66
|
};
|
|
@@ -105,18 +107,18 @@ function Expand(_ref) {
|
|
|
105
107
|
var handleBlur = (0, _react.useCallback)(function () {
|
|
106
108
|
return setFocused(false);
|
|
107
109
|
}, []);
|
|
108
|
-
return
|
|
110
|
+
return (0, _react2.jsx)(Container, {
|
|
109
111
|
"data-node-type": nodeType,
|
|
110
112
|
"data-title": title,
|
|
111
113
|
"data-expanded": expanded,
|
|
112
114
|
expanded: expanded,
|
|
113
115
|
focused: focused
|
|
114
|
-
}, nestedHeaderIds && nestedHeaderIds.length > 0 ?
|
|
116
|
+
}, nestedHeaderIds && nestedHeaderIds.length > 0 ? (0, _react2.jsx)(_activeHeaderIdProvider.ActiveHeaderIdConsumer, {
|
|
115
117
|
nestedHeaderIds: nestedHeaderIds,
|
|
116
118
|
onNestedHeaderIdMatch: function onNestedHeaderIdMatch() {
|
|
117
119
|
return setExpanded(true);
|
|
118
120
|
}
|
|
119
|
-
}) : null,
|
|
121
|
+
}) : null, (0, _react2.jsx)(TitleContainer, {
|
|
120
122
|
onClick: function onClick(e) {
|
|
121
123
|
e.stopPropagation();
|
|
122
124
|
fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent);
|
|
@@ -131,27 +133,27 @@ function Expand(_ref) {
|
|
|
131
133
|
"aria-expanded": expanded,
|
|
132
134
|
contentEditable: false,
|
|
133
135
|
expanded: expanded
|
|
134
|
-
}, isMobile ?
|
|
136
|
+
}, isMobile ? (0, _react2.jsx)(_ui.ExpandIconWrapper, {
|
|
135
137
|
expanded: expanded
|
|
136
|
-
},
|
|
138
|
+
}, (0, _react2.jsx)(_chevronRight.default, {
|
|
137
139
|
label: label
|
|
138
|
-
})) :
|
|
140
|
+
})) : (0, _react2.jsx)(_tooltip.default, {
|
|
139
141
|
content: label,
|
|
140
142
|
position: "top",
|
|
141
143
|
tag: _ui.ExpandLayoutWrapperWithRef,
|
|
142
144
|
testId: 'tooltip'
|
|
143
|
-
},
|
|
145
|
+
}, (0, _react2.jsx)(_ui.ExpandIconWrapper, {
|
|
144
146
|
expanded: expanded
|
|
145
|
-
},
|
|
147
|
+
}, (0, _react2.jsx)(_chevronRight.default, {
|
|
146
148
|
label: label
|
|
147
|
-
}))),
|
|
149
|
+
}))), (0, _react2.jsx)("span", {
|
|
148
150
|
css: titleStyles,
|
|
149
151
|
id: id
|
|
150
|
-
}, title || intl.formatMessage(_ui.expandMessages.expandDefaultTitle))),
|
|
152
|
+
}, title || intl.formatMessage(_ui.expandMessages.expandDefaultTitle))), (0, _react2.jsx)(ContentContainer, {
|
|
151
153
|
expanded: expanded
|
|
152
|
-
},
|
|
154
|
+
}, (0, _react2.jsx)("div", {
|
|
153
155
|
className: "".concat(nodeType, "-content-wrapper")
|
|
154
|
-
},
|
|
156
|
+
}, (0, _react2.jsx)(_ui.WidthProvider, null, (0, _react2.jsx)("div", {
|
|
155
157
|
css: _ui.clearNextSiblingMarginTopStyle
|
|
156
158
|
}), children))));
|
|
157
159
|
}
|