@atlaskit/editor-core 219.9.3 → 219.9.5
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 +14 -0
- package/dist/cjs/ui/ContextPanel/index-compiled.compiled.css +15 -0
- package/dist/cjs/ui/ContextPanel/index-compiled.js +66 -0
- package/dist/cjs/ui/ContextPanel/index-emotion.js +94 -0
- package/dist/cjs/ui/ContextPanel/index.js +29 -56
- package/dist/es2019/ui/ContextPanel/index-compiled.compiled.css +15 -0
- package/dist/es2019/ui/ContextPanel/index-compiled.js +53 -0
- package/dist/es2019/ui/ContextPanel/index-emotion.js +82 -0
- package/dist/es2019/ui/ContextPanel/index.js +24 -58
- package/dist/esm/ui/ContextPanel/index-compiled.compiled.css +15 -0
- package/dist/esm/ui/ContextPanel/index-compiled.js +58 -0
- package/dist/esm/ui/ContextPanel/index-emotion.js +87 -0
- package/dist/esm/ui/ContextPanel/index.js +28 -58
- package/dist/types/ui/ContextPanel/index-compiled.d.ts +25 -0
- package/dist/types/ui/ContextPanel/index-emotion.d.ts +15 -0
- package/dist/types/ui/ContextPanel/index.d.ts +1 -9
- package/dist/types-ts4.5/ui/ContextPanel/index-compiled.d.ts +25 -0
- package/dist/types-ts4.5/ui/ContextPanel/index-emotion.d.ts +15 -0
- package/dist/types-ts4.5/ui/ContextPanel/index.d.ts +1 -9
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 219.9.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`56bda2bb69c77`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/56bda2bb69c77) -
|
|
8
|
+
EDITOR-6461 - migrate contextpanel styles
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 219.9.4
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 219.9.3
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
|
|
2
|
+
._v5648l2w{transition:width .5s cubic-bezier(.15,1,.3,1)}
|
|
3
|
+
._v564e1q5{transition:width .6s cubic-bezier(.15,1,.3,1)}
|
|
4
|
+
._v564glyw{transition:none}._16qshh4h{box-shadow:inset 2px 0 0 0 var(--ds-border,#0b120e24)}
|
|
5
|
+
._18m915vq{overflow-y:hidden}
|
|
6
|
+
._18m91wug{overflow-y:auto}
|
|
7
|
+
._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
|
|
8
|
+
._1bsbidpf{width:0}
|
|
9
|
+
._1bsbnklw{width:20pc}
|
|
10
|
+
._1reo15vq{overflow-x:hidden}
|
|
11
|
+
._4t3i1osq{height:100%}
|
|
12
|
+
._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
|
|
13
|
+
._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
|
|
14
|
+
._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
|
|
15
|
+
._vchhusvi{box-sizing:border-box}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/* index-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
+
"use strict";
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
|
7
|
+
value: true
|
|
8
|
+
});
|
|
9
|
+
exports.ContextPanelWrapperCompiled = exports.ContextPanelContentCompiled = void 0;
|
|
10
|
+
require("./index-compiled.compiled.css");
|
|
11
|
+
var React = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _runtime = require("@compiled/react/runtime");
|
|
13
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
14
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
15
|
+
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
16
|
+
var _excluded = ["children", "customWidth", "visible", "disableAnimation"],
|
|
17
|
+
_excluded2 = ["children", "customWidth", "visible", "disableAnimation", "hasPadding"];
|
|
18
|
+
/**
|
|
19
|
+
* Compiled branch of the `platform_editor_core_non_ecc_static_css` experiment.
|
|
20
|
+
* Used via `componentWithCondition` in `index.tsx`.
|
|
21
|
+
*
|
|
22
|
+
* Cleanup: delete this file once the `platform_editor_core_non_ecc_static_css` experiment has shipped.
|
|
23
|
+
*/
|
|
24
|
+
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); }
|
|
25
|
+
var ANIM_SPEED_MS = 500;
|
|
26
|
+
var panelStyles = {
|
|
27
|
+
panel: "_v5648l2w _1reo15vq _18m915vq _1bsbnklw _4t3i1osq _16qshh4h",
|
|
28
|
+
panelHidden: "_1bsbidpf",
|
|
29
|
+
disablePanelAnimation: "_v564glyw",
|
|
30
|
+
content: "_v564e1q5 _vchhusvi _1bsbnklw _4t3i1osq _18m91wug",
|
|
31
|
+
padding: "_ca0qpxbi _u5f3pxbi _n3tdze3t _19bvpxbi",
|
|
32
|
+
customWidthOverflow: "_1reo15vq"
|
|
33
|
+
};
|
|
34
|
+
var ContextPanelWrapperCompiled = exports.ContextPanelWrapperCompiled = function ContextPanelWrapperCompiled(_ref) {
|
|
35
|
+
var children = _ref.children,
|
|
36
|
+
customWidth = _ref.customWidth,
|
|
37
|
+
visible = _ref.visible,
|
|
38
|
+
disableAnimation = _ref.disableAnimation,
|
|
39
|
+
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
40
|
+
return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
|
|
41
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic width cannot be expressed as static compiled CSS
|
|
42
|
+
style: customWidth && visible ? {
|
|
43
|
+
width: "".concat(customWidth, "px")
|
|
44
|
+
} : undefined
|
|
45
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
46
|
+
}, rest, {
|
|
47
|
+
className: (0, _runtime.ax)([panelStyles.panel, customWidth && "", !visible && panelStyles.panelHidden, disableAnimation && panelStyles.disablePanelAnimation])
|
|
48
|
+
}), children);
|
|
49
|
+
};
|
|
50
|
+
var ContextPanelContentCompiled = exports.ContextPanelContentCompiled = function ContextPanelContentCompiled(_ref2) {
|
|
51
|
+
var children = _ref2.children,
|
|
52
|
+
customWidth = _ref2.customWidth,
|
|
53
|
+
visible = _ref2.visible,
|
|
54
|
+
disableAnimation = _ref2.disableAnimation,
|
|
55
|
+
hasPadding = _ref2.hasPadding,
|
|
56
|
+
rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
|
|
57
|
+
return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
|
|
58
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic width cannot be expressed as static compiled CSS
|
|
59
|
+
style: customWidth && visible ? {
|
|
60
|
+
width: "".concat(customWidth, "px")
|
|
61
|
+
} : undefined
|
|
62
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
63
|
+
}, rest, {
|
|
64
|
+
className: (0, _runtime.ax)([panelStyles.content, hasPadding && panelStyles.padding, customWidth && "", !visible && panelStyles.panelHidden, disableAnimation && panelStyles.disablePanelAnimation])
|
|
65
|
+
}), children);
|
|
66
|
+
};
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.ContextPanelWrapperEmotion = exports.ContextPanelContentEmotion = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
|
+
var _react = require("react");
|
|
11
|
+
var _react2 = require("@emotion/react");
|
|
12
|
+
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
13
|
+
var _excluded = ["children", "customWidth", "visible", "disableAnimation"],
|
|
14
|
+
_excluded2 = ["children", "customWidth", "visible", "disableAnimation", "hasPadding"];
|
|
15
|
+
/**
|
|
16
|
+
* @jsxRuntime classic
|
|
17
|
+
* @jsx jsx
|
|
18
|
+
*/
|
|
19
|
+
/**
|
|
20
|
+
* Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
|
|
21
|
+
* Used via `componentWithCondition` in `index.tsx`.
|
|
22
|
+
*
|
|
23
|
+
* Cleanup: delete this file once the `platform_editor_core_non_ecc_static_css` experiment has shipped.
|
|
24
|
+
*/
|
|
25
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration
|
|
26
|
+
var ANIM_SPEED_MS = 500;
|
|
27
|
+
var panelHidden = (0, _react2.css)({
|
|
28
|
+
width: 0
|
|
29
|
+
});
|
|
30
|
+
var panel = (0, _react2.css)({
|
|
31
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
32
|
+
width: "".concat(_editorSharedStyles.akEditorContextPanelWidth, "px"),
|
|
33
|
+
height: '100%',
|
|
34
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
35
|
+
transition: "width ".concat(ANIM_SPEED_MS, "ms ").concat(_editorSharedStyles.akEditorSwoopCubicBezier),
|
|
36
|
+
overflow: 'hidden',
|
|
37
|
+
boxShadow: "inset 2px 0 0 0 ".concat("var(--ds-border, #0B120E24)")
|
|
38
|
+
});
|
|
39
|
+
var disablePanelAnimation = (0, _react2.css)({
|
|
40
|
+
transition: 'none'
|
|
41
|
+
});
|
|
42
|
+
var content = (0, _react2.css)({
|
|
43
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
44
|
+
transition: "width 600ms ".concat(_editorSharedStyles.akEditorSwoopCubicBezier),
|
|
45
|
+
boxSizing: 'border-box',
|
|
46
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
47
|
+
width: "".concat(_editorSharedStyles.akEditorContextPanelWidth, "px"),
|
|
48
|
+
height: '100%',
|
|
49
|
+
overflowY: 'auto'
|
|
50
|
+
});
|
|
51
|
+
var paddingStyles = (0, _react2.css)({
|
|
52
|
+
padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-200, 16px)", " 0px")
|
|
53
|
+
});
|
|
54
|
+
var ContextPanelWrapperEmotion = exports.ContextPanelWrapperEmotion = function ContextPanelWrapperEmotion(_ref) {
|
|
55
|
+
var children = _ref.children,
|
|
56
|
+
customWidth = _ref.customWidth,
|
|
57
|
+
visible = _ref.visible,
|
|
58
|
+
disableAnimation = _ref.disableAnimation,
|
|
59
|
+
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
60
|
+
var customPanelWidthStyles = (0, _react.useMemo)(function () {
|
|
61
|
+
return customWidth ? (0, _react2.css)({
|
|
62
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
|
|
63
|
+
width: "".concat(customWidth, "px"),
|
|
64
|
+
overflowX: 'hidden'
|
|
65
|
+
}) : undefined;
|
|
66
|
+
}, [customWidth]);
|
|
67
|
+
return (0, _react2.jsx)("div", (0, _extends2.default)({
|
|
68
|
+
css: [panel,
|
|
69
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
|
|
70
|
+
customPanelWidthStyles, !visible && panelHidden, disableAnimation && disablePanelAnimation]
|
|
71
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
72
|
+
}, rest), children);
|
|
73
|
+
};
|
|
74
|
+
var ContextPanelContentEmotion = exports.ContextPanelContentEmotion = function ContextPanelContentEmotion(_ref2) {
|
|
75
|
+
var children = _ref2.children,
|
|
76
|
+
customWidth = _ref2.customWidth,
|
|
77
|
+
visible = _ref2.visible,
|
|
78
|
+
disableAnimation = _ref2.disableAnimation,
|
|
79
|
+
hasPadding = _ref2.hasPadding,
|
|
80
|
+
rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
|
|
81
|
+
var customPanelWidthStyles = (0, _react.useMemo)(function () {
|
|
82
|
+
return customWidth ? (0, _react2.css)({
|
|
83
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
|
|
84
|
+
width: "".concat(customWidth, "px"),
|
|
85
|
+
overflowX: 'hidden'
|
|
86
|
+
}) : undefined;
|
|
87
|
+
}, [customWidth]);
|
|
88
|
+
return (0, _react2.jsx)("div", (0, _extends2.default)({
|
|
89
|
+
css: [content, hasPadding && paddingStyles,
|
|
90
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
|
|
91
|
+
customPanelWidthStyles, !visible && panelHidden, disableAnimation && disablePanelAnimation]
|
|
92
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
93
|
+
}, rest), children);
|
|
94
|
+
};
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.ContextPanel = ContextPanel;
|
|
8
|
-
exports.
|
|
8
|
+
exports.SwappableContentArea = void 0;
|
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
10
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
11
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
@@ -14,7 +14,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
|
|
|
14
14
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
15
15
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
16
|
var _react = _interopRequireDefault(require("react"));
|
|
17
|
-
var _react2 = require("@emotion/react");
|
|
18
17
|
var _reactIntl = require("react-intl");
|
|
19
18
|
var _Transition = _interopRequireDefault(require("react-transition-group/Transition"));
|
|
20
19
|
var _contextPanel = require("@atlaskit/editor-common/context-panel");
|
|
@@ -22,46 +21,21 @@ var _hooks = require("@atlaskit/editor-common/hooks");
|
|
|
22
21
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
23
22
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
24
23
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
24
|
+
var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
|
|
25
25
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
26
|
+
var _indexCompiled = require("./index-compiled");
|
|
27
|
+
var _indexEmotion = require("./index-emotion");
|
|
26
28
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
27
29
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
28
30
|
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
|
|
29
|
-
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable jsdoc/require-jsdoc -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
|
|
30
|
-
* @jsxRuntime classic
|
|
31
|
-
* @jsx jsx
|
|
32
|
-
*/ /* eslint-disable @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
|
|
31
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable jsdoc/require-jsdoc -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
|
|
33
32
|
var ANIM_SPEED_MS = 500;
|
|
34
|
-
var
|
|
35
|
-
|
|
36
|
-
});
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
41
|
-
width: "".concat(_editorSharedStyles.akEditorContextPanelWidth, "px"),
|
|
42
|
-
height: '100%',
|
|
43
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
44
|
-
transition: "width ".concat(ANIM_SPEED_MS, "ms ").concat(_editorSharedStyles.akEditorSwoopCubicBezier),
|
|
45
|
-
overflow: 'hidden',
|
|
46
|
-
boxShadow: "inset 2px 0 0 0 ".concat("var(--ds-border, #0B120E24)")
|
|
47
|
-
});
|
|
48
|
-
var disablePanelAnimation = (0, _react2.css)({
|
|
49
|
-
transition: 'none'
|
|
50
|
-
});
|
|
51
|
-
|
|
52
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
53
|
-
var content = exports.content = (0, _react2.css)({
|
|
54
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
55
|
-
transition: "width 600ms ".concat(_editorSharedStyles.akEditorSwoopCubicBezier),
|
|
56
|
-
boxSizing: 'border-box',
|
|
57
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
58
|
-
width: "".concat(_editorSharedStyles.akEditorContextPanelWidth, "px"),
|
|
59
|
-
height: '100%',
|
|
60
|
-
overflowY: 'auto'
|
|
61
|
-
});
|
|
62
|
-
var paddingStyles = (0, _react2.css)({
|
|
63
|
-
padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-200, 16px)", " 0px")
|
|
64
|
-
});
|
|
33
|
+
var ContextPanelWrapperMigration = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
|
|
34
|
+
return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
|
|
35
|
+
}, _indexCompiled.ContextPanelWrapperCompiled, _indexEmotion.ContextPanelWrapperEmotion);
|
|
36
|
+
var ContextPanelContentMigration = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
|
|
37
|
+
return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
|
|
38
|
+
}, _indexCompiled.ContextPanelContentCompiled, _indexEmotion.ContextPanelContentEmotion);
|
|
65
39
|
// Ignored via go/ees005
|
|
66
40
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
67
41
|
var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
|
|
@@ -96,7 +70,7 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
96
70
|
var onExited = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? _this.handleTransitionExited : function () {
|
|
97
71
|
return _this.unsetPluginContent();
|
|
98
72
|
};
|
|
99
|
-
return
|
|
73
|
+
return /*#__PURE__*/_react.default.createElement(_Transition.default, {
|
|
100
74
|
timeout: _this.state.mounted ? animSpeedMs : 0,
|
|
101
75
|
in: !!pluginContent,
|
|
102
76
|
mountOnEnter: true,
|
|
@@ -110,7 +84,7 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
110
84
|
return;
|
|
111
85
|
}
|
|
112
86
|
var animSpeedMs = (0, _platformFeatureFlags.fg)('platform_editor_disable_context_panel_animation') ? 0 : ANIM_SPEED_MS;
|
|
113
|
-
return
|
|
87
|
+
return /*#__PURE__*/_react.default.createElement(_Transition.default, {
|
|
114
88
|
timeout: _this.state.mounted ? animSpeedMs : 0,
|
|
115
89
|
in: isVisible,
|
|
116
90
|
mountOnEnter: true,
|
|
@@ -145,34 +119,33 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
145
119
|
var userVisible = !!this.props.visible;
|
|
146
120
|
var visible = userVisible || !!this.state.currentPluginContent;
|
|
147
121
|
var hasPadding = this.props.hasPadding === undefined ? true : this.props.hasPadding;
|
|
148
|
-
var
|
|
149
|
-
|
|
150
|
-
width: "".concat(this.props.customWidth, "px"),
|
|
151
|
-
overflowX: 'hidden'
|
|
152
|
-
});
|
|
153
|
-
return (0, _react2.jsx)(_contextPanel.ContextPanelConsumer, null, function (_ref) {
|
|
122
|
+
var disableAnimation = (0, _platformFeatureFlags.fg)('platform_editor_disable_context_panel_animation');
|
|
123
|
+
return /*#__PURE__*/_react.default.createElement(_contextPanel.ContextPanelConsumer, null, function (_ref) {
|
|
154
124
|
var _this2$props$intl, _this2$props$intl2;
|
|
155
125
|
var broadcastWidth = _ref.broadcastWidth;
|
|
156
126
|
var contextPanelWidth = visible ? width : 0;
|
|
157
127
|
broadcastWidth(contextPanelWidth);
|
|
158
|
-
return
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
"data-testid": "context-panel-panel"
|
|
128
|
+
return /*#__PURE__*/_react.default.createElement(ContextPanelWrapperMigration, {
|
|
129
|
+
customWidth: _this2.props.customWidth,
|
|
130
|
+
visible: visible,
|
|
131
|
+
disableAnimation: disableAnimation,
|
|
132
|
+
"data-testid": "context-panel-panel"
|
|
133
|
+
// eslint-disable-next-line @atlassian/a11y/no-empty-aria-label -- Pre-existing; intl should always resolve a label here
|
|
134
|
+
,
|
|
163
135
|
"aria-label": ((_this2$props$intl = _this2.props.intl) === null || _this2$props$intl === void 0 ? void 0 : _this2$props$intl.formatMessage(_messages.contextPanelMessages.panelLabel)) || '',
|
|
164
136
|
"aria-modal": "false",
|
|
165
137
|
role: "dialog"
|
|
166
|
-
},
|
|
138
|
+
}, /*#__PURE__*/_react.default.createElement(ContextPanelContentMigration, {
|
|
139
|
+
customWidth: _this2.props.customWidth,
|
|
140
|
+
visible: visible,
|
|
141
|
+
disableAnimation: disableAnimation,
|
|
142
|
+
hasPadding: hasPadding,
|
|
167
143
|
"data-testid": "context-panel-content"
|
|
168
144
|
// Adding tabIndex=0 here to make content focusable as it is a scrollable region
|
|
169
145
|
,
|
|
170
146
|
tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_nov_a11y_fixes') ? 0 : undefined,
|
|
171
147
|
role: (0, _platformFeatureFlags.fg)('platform_editor_nov_a11y_fixes') ? 'region' : undefined,
|
|
172
|
-
"aria-label": (0, _platformFeatureFlags.fg)('platform_editor_nov_a11y_fixes') ? (_this2$props$intl2 = _this2.props.intl) === null || _this2$props$intl2 === void 0 ? void 0 : _this2$props$intl2.formatMessage(_messages.contextPanelMessages.panelContentLabel) : undefined
|
|
173
|
-
css: [content, hasPadding && paddingStyles,
|
|
174
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
|
|
175
|
-
_this2.props.customWidth && customPanelWidthStyles, !visible && panelHidden, (0, _platformFeatureFlags.fg)('platform_editor_disable_context_panel_animation') && disablePanelAnimation]
|
|
148
|
+
"aria-label": (0, _platformFeatureFlags.fg)('platform_editor_nov_a11y_fixes') ? (_this2$props$intl2 = _this2.props.intl) === null || _this2$props$intl2 === void 0 ? void 0 : _this2$props$intl2.formatMessage(_messages.contextPanelMessages.panelContentLabel) : undefined
|
|
176
149
|
}, _this2.showPluginContent() || _this2.showProvidedContent(userVisible)));
|
|
177
150
|
});
|
|
178
151
|
}
|
|
@@ -195,7 +168,7 @@ function ContextPanel(props) {
|
|
|
195
168
|
return states === null || states === void 0 || (_states$contextPanelS = states.contextPanelState) === null || _states$contextPanelS === void 0 ? void 0 : _states$contextPanelS.contents;
|
|
196
169
|
});
|
|
197
170
|
var firstContent = contextPanelContents && contextPanelContents.find(Boolean);
|
|
198
|
-
return
|
|
171
|
+
return /*#__PURE__*/_react.default.createElement(SwappableContentArea
|
|
199
172
|
// Ignored via go/ees005
|
|
200
173
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
201
174
|
, (0, _extends2.default)({}, props, {
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
|
|
2
|
+
._v5648l2w{transition:width .5s cubic-bezier(.15,1,.3,1)}
|
|
3
|
+
._v564e1q5{transition:width .6s cubic-bezier(.15,1,.3,1)}
|
|
4
|
+
._v564glyw{transition:none}._16qshh4h{box-shadow:inset 2px 0 0 0 var(--ds-border,#0b120e24)}
|
|
5
|
+
._18m915vq{overflow-y:hidden}
|
|
6
|
+
._18m91wug{overflow-y:auto}
|
|
7
|
+
._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
|
|
8
|
+
._1bsbidpf{width:0}
|
|
9
|
+
._1bsbnklw{width:20pc}
|
|
10
|
+
._1reo15vq{overflow-x:hidden}
|
|
11
|
+
._4t3i1osq{height:100%}
|
|
12
|
+
._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
|
|
13
|
+
._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
|
|
14
|
+
._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
|
|
15
|
+
._vchhusvi{box-sizing:border-box}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/* index-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import "./index-compiled.compiled.css";
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
6
|
+
/**
|
|
7
|
+
* Compiled branch of the `platform_editor_core_non_ecc_static_css` experiment.
|
|
8
|
+
* Used via `componentWithCondition` in `index.tsx`.
|
|
9
|
+
*
|
|
10
|
+
* Cleanup: delete this file once the `platform_editor_core_non_ecc_static_css` experiment has shipped.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
|
|
14
|
+
const ANIM_SPEED_MS = 500;
|
|
15
|
+
const panelStyles = {
|
|
16
|
+
panel: "_v5648l2w _1reo15vq _18m915vq _1bsbnklw _4t3i1osq _16qshh4h",
|
|
17
|
+
panelHidden: "_1bsbidpf",
|
|
18
|
+
disablePanelAnimation: "_v564glyw",
|
|
19
|
+
content: "_v564e1q5 _vchhusvi _1bsbnklw _4t3i1osq _18m91wug",
|
|
20
|
+
padding: "_ca0qpxbi _u5f3pxbi _n3tdze3t _19bvpxbi",
|
|
21
|
+
customWidthOverflow: "_1reo15vq"
|
|
22
|
+
};
|
|
23
|
+
export const ContextPanelWrapperCompiled = ({
|
|
24
|
+
children,
|
|
25
|
+
customWidth,
|
|
26
|
+
visible,
|
|
27
|
+
disableAnimation,
|
|
28
|
+
...rest
|
|
29
|
+
}) => /*#__PURE__*/React.createElement("div", _extends({
|
|
30
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic width cannot be expressed as static compiled CSS
|
|
31
|
+
style: customWidth && visible ? {
|
|
32
|
+
width: `${customWidth}px`
|
|
33
|
+
} : undefined
|
|
34
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
35
|
+
}, rest, {
|
|
36
|
+
className: ax([panelStyles.panel, customWidth && "", !visible && panelStyles.panelHidden, disableAnimation && panelStyles.disablePanelAnimation])
|
|
37
|
+
}), children);
|
|
38
|
+
export const ContextPanelContentCompiled = ({
|
|
39
|
+
children,
|
|
40
|
+
customWidth,
|
|
41
|
+
visible,
|
|
42
|
+
disableAnimation,
|
|
43
|
+
hasPadding,
|
|
44
|
+
...rest
|
|
45
|
+
}) => /*#__PURE__*/React.createElement("div", _extends({
|
|
46
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic width cannot be expressed as static compiled CSS
|
|
47
|
+
style: customWidth && visible ? {
|
|
48
|
+
width: `${customWidth}px`
|
|
49
|
+
} : undefined
|
|
50
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
51
|
+
}, rest, {
|
|
52
|
+
className: ax([panelStyles.content, hasPadding && panelStyles.padding, customWidth && "", !visible && panelStyles.panelHidden, disableAnimation && panelStyles.disablePanelAnimation])
|
|
53
|
+
}), children);
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
/**
|
|
3
|
+
* @jsxRuntime classic
|
|
4
|
+
* @jsx jsx
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
|
|
8
|
+
* Used via `componentWithCondition` in `index.tsx`.
|
|
9
|
+
*
|
|
10
|
+
* Cleanup: delete this file once the `platform_editor_core_non_ecc_static_css` experiment has shipped.
|
|
11
|
+
*/
|
|
12
|
+
import { useMemo } from 'react';
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration
|
|
14
|
+
import { css, jsx } from '@emotion/react';
|
|
15
|
+
import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
|
|
16
|
+
const ANIM_SPEED_MS = 500;
|
|
17
|
+
const panelHidden = css({
|
|
18
|
+
width: 0
|
|
19
|
+
});
|
|
20
|
+
const panel = css({
|
|
21
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
22
|
+
width: `${akEditorContextPanelWidth}px`,
|
|
23
|
+
height: '100%',
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
25
|
+
transition: `width ${ANIM_SPEED_MS}ms ${akEditorSwoopCubicBezier}`,
|
|
26
|
+
overflow: 'hidden',
|
|
27
|
+
boxShadow: `inset 2px 0 0 0 ${"var(--ds-border, #0B120E24)"}`
|
|
28
|
+
});
|
|
29
|
+
const disablePanelAnimation = css({
|
|
30
|
+
transition: 'none'
|
|
31
|
+
});
|
|
32
|
+
const content = css({
|
|
33
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
34
|
+
transition: `width 600ms ${akEditorSwoopCubicBezier}`,
|
|
35
|
+
boxSizing: 'border-box',
|
|
36
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
37
|
+
width: `${akEditorContextPanelWidth}px`,
|
|
38
|
+
height: '100%',
|
|
39
|
+
overflowY: 'auto'
|
|
40
|
+
});
|
|
41
|
+
const paddingStyles = css({
|
|
42
|
+
padding: `${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"} 0px`
|
|
43
|
+
});
|
|
44
|
+
export const ContextPanelWrapperEmotion = ({
|
|
45
|
+
children,
|
|
46
|
+
customWidth,
|
|
47
|
+
visible,
|
|
48
|
+
disableAnimation,
|
|
49
|
+
...rest
|
|
50
|
+
}) => {
|
|
51
|
+
const customPanelWidthStyles = useMemo(() => customWidth ? css({
|
|
52
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
|
|
53
|
+
width: `${customWidth}px`,
|
|
54
|
+
overflowX: 'hidden'
|
|
55
|
+
}) : undefined, [customWidth]);
|
|
56
|
+
return jsx("div", _extends({
|
|
57
|
+
css: [panel,
|
|
58
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
|
|
59
|
+
customPanelWidthStyles, !visible && panelHidden, disableAnimation && disablePanelAnimation]
|
|
60
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
61
|
+
}, rest), children);
|
|
62
|
+
};
|
|
63
|
+
export const ContextPanelContentEmotion = ({
|
|
64
|
+
children,
|
|
65
|
+
customWidth,
|
|
66
|
+
visible,
|
|
67
|
+
disableAnimation,
|
|
68
|
+
hasPadding,
|
|
69
|
+
...rest
|
|
70
|
+
}) => {
|
|
71
|
+
const customPanelWidthStyles = useMemo(() => customWidth ? css({
|
|
72
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
|
|
73
|
+
width: `${customWidth}px`,
|
|
74
|
+
overflowX: 'hidden'
|
|
75
|
+
}) : undefined, [customWidth]);
|
|
76
|
+
return jsx("div", _extends({
|
|
77
|
+
css: [content, hasPadding && paddingStyles,
|
|
78
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
|
|
79
|
+
customPanelWidthStyles, !visible && panelHidden, disableAnimation && disablePanelAnimation]
|
|
80
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
81
|
+
}, rest), children);
|
|
82
|
+
};
|
|
@@ -1,54 +1,21 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
/* eslint-disable jsdoc/require-jsdoc -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
|
|
4
|
-
/**
|
|
5
|
-
* @jsxRuntime classic
|
|
6
|
-
* @jsx jsx
|
|
7
|
-
*/
|
|
8
4
|
import React from 'react';
|
|
9
|
-
|
|
10
|
-
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
|
|
11
|
-
import { css, jsx } from '@emotion/react';
|
|
12
5
|
import { injectIntl } from 'react-intl';
|
|
13
6
|
import Transition from 'react-transition-group/Transition';
|
|
14
7
|
import { ContextPanelConsumer } from '@atlaskit/editor-common/context-panel';
|
|
15
8
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
16
9
|
import { contextPanelMessages } from '@atlaskit/editor-common/messages';
|
|
17
|
-
import { akEditorContextPanelWidth
|
|
10
|
+
import { akEditorContextPanelWidth } from '@atlaskit/editor-shared-styles';
|
|
18
11
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
|
+
import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
|
|
19
13
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
14
|
+
import { ContextPanelContentCompiled, ContextPanelWrapperCompiled } from './index-compiled';
|
|
15
|
+
import { ContextPanelContentEmotion, ContextPanelWrapperEmotion } from './index-emotion';
|
|
20
16
|
const ANIM_SPEED_MS = 500;
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
26
|
-
export const panel = css({
|
|
27
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
28
|
-
width: `${akEditorContextPanelWidth}px`,
|
|
29
|
-
height: '100%',
|
|
30
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
31
|
-
transition: `width ${ANIM_SPEED_MS}ms ${akEditorSwoopCubicBezier}`,
|
|
32
|
-
overflow: 'hidden',
|
|
33
|
-
boxShadow: `inset 2px 0 0 0 ${"var(--ds-border, #0B120E24)"}`
|
|
34
|
-
});
|
|
35
|
-
const disablePanelAnimation = css({
|
|
36
|
-
transition: 'none'
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
40
|
-
export const content = css({
|
|
41
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
42
|
-
transition: `width 600ms ${akEditorSwoopCubicBezier}`,
|
|
43
|
-
boxSizing: 'border-box',
|
|
44
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
45
|
-
width: `${akEditorContextPanelWidth}px`,
|
|
46
|
-
height: '100%',
|
|
47
|
-
overflowY: 'auto'
|
|
48
|
-
});
|
|
49
|
-
const paddingStyles = css({
|
|
50
|
-
padding: `${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"} 0px`
|
|
51
|
-
});
|
|
17
|
+
const ContextPanelWrapperMigration = componentWithCondition(() => expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true), ContextPanelWrapperCompiled, ContextPanelWrapperEmotion);
|
|
18
|
+
const ContextPanelContentMigration = componentWithCondition(() => expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true), ContextPanelContentCompiled, ContextPanelContentEmotion);
|
|
52
19
|
// Ignored via go/ees005
|
|
53
20
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
54
21
|
class SwappableContentAreaInner extends React.PureComponent {
|
|
@@ -82,7 +49,7 @@ class SwappableContentAreaInner extends React.PureComponent {
|
|
|
82
49
|
}
|
|
83
50
|
const animSpeedMs = fg('platform_editor_disable_context_panel_animation') ? 0 : ANIM_SPEED_MS;
|
|
84
51
|
const onExited = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? this.handleTransitionExited : () => this.unsetPluginContent();
|
|
85
|
-
return
|
|
52
|
+
return /*#__PURE__*/React.createElement(Transition, {
|
|
86
53
|
timeout: this.state.mounted ? animSpeedMs : 0,
|
|
87
54
|
in: !!pluginContent,
|
|
88
55
|
mountOnEnter: true,
|
|
@@ -98,7 +65,7 @@ class SwappableContentAreaInner extends React.PureComponent {
|
|
|
98
65
|
return;
|
|
99
66
|
}
|
|
100
67
|
const animSpeedMs = fg('platform_editor_disable_context_panel_animation') ? 0 : ANIM_SPEED_MS;
|
|
101
|
-
return
|
|
68
|
+
return /*#__PURE__*/React.createElement(Transition, {
|
|
102
69
|
timeout: this.state.mounted ? animSpeedMs : 0,
|
|
103
70
|
in: isVisible,
|
|
104
71
|
mountOnEnter: true,
|
|
@@ -133,35 +100,34 @@ class SwappableContentAreaInner extends React.PureComponent {
|
|
|
133
100
|
const userVisible = !!this.props.visible;
|
|
134
101
|
const visible = userVisible || !!this.state.currentPluginContent;
|
|
135
102
|
const hasPadding = this.props.hasPadding === undefined ? true : this.props.hasPadding;
|
|
136
|
-
const
|
|
137
|
-
|
|
138
|
-
width: `${this.props.customWidth}px`,
|
|
139
|
-
overflowX: 'hidden'
|
|
140
|
-
});
|
|
141
|
-
return jsx(ContextPanelConsumer, null, ({
|
|
103
|
+
const disableAnimation = fg('platform_editor_disable_context_panel_animation');
|
|
104
|
+
return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, ({
|
|
142
105
|
broadcastWidth
|
|
143
106
|
}) => {
|
|
144
107
|
var _this$props$intl, _this$props$intl2;
|
|
145
108
|
const contextPanelWidth = visible ? width : 0;
|
|
146
109
|
broadcastWidth(contextPanelWidth);
|
|
147
|
-
return
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
"data-testid": "context-panel-panel"
|
|
110
|
+
return /*#__PURE__*/React.createElement(ContextPanelWrapperMigration, {
|
|
111
|
+
customWidth: this.props.customWidth,
|
|
112
|
+
visible: visible,
|
|
113
|
+
disableAnimation: disableAnimation,
|
|
114
|
+
"data-testid": "context-panel-panel"
|
|
115
|
+
// eslint-disable-next-line @atlassian/a11y/no-empty-aria-label -- Pre-existing; intl should always resolve a label here
|
|
116
|
+
,
|
|
152
117
|
"aria-label": ((_this$props$intl = this.props.intl) === null || _this$props$intl === void 0 ? void 0 : _this$props$intl.formatMessage(contextPanelMessages.panelLabel)) || '',
|
|
153
118
|
"aria-modal": "false",
|
|
154
119
|
role: "dialog"
|
|
155
|
-
},
|
|
120
|
+
}, /*#__PURE__*/React.createElement(ContextPanelContentMigration, {
|
|
121
|
+
customWidth: this.props.customWidth,
|
|
122
|
+
visible: visible,
|
|
123
|
+
disableAnimation: disableAnimation,
|
|
124
|
+
hasPadding: hasPadding,
|
|
156
125
|
"data-testid": "context-panel-content"
|
|
157
126
|
// Adding tabIndex=0 here to make content focusable as it is a scrollable region
|
|
158
127
|
,
|
|
159
128
|
tabIndex: fg('platform_editor_nov_a11y_fixes') ? 0 : undefined,
|
|
160
129
|
role: fg('platform_editor_nov_a11y_fixes') ? 'region' : undefined,
|
|
161
|
-
"aria-label": fg('platform_editor_nov_a11y_fixes') ? (_this$props$intl2 = this.props.intl) === null || _this$props$intl2 === void 0 ? void 0 : _this$props$intl2.formatMessage(contextPanelMessages.panelContentLabel) : undefined
|
|
162
|
-
css: [content, hasPadding && paddingStyles,
|
|
163
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
|
|
164
|
-
this.props.customWidth && customPanelWidthStyles, !visible && panelHidden, fg('platform_editor_disable_context_panel_animation') && disablePanelAnimation]
|
|
130
|
+
"aria-label": fg('platform_editor_nov_a11y_fixes') ? (_this$props$intl2 = this.props.intl) === null || _this$props$intl2 === void 0 ? void 0 : _this$props$intl2.formatMessage(contextPanelMessages.panelContentLabel) : undefined
|
|
165
131
|
}, this.showPluginContent() || this.showProvidedContent(userVisible)));
|
|
166
132
|
});
|
|
167
133
|
}
|
|
@@ -175,7 +141,7 @@ export function ContextPanel(props) {
|
|
|
175
141
|
return states === null || states === void 0 ? void 0 : (_states$contextPanelS = states.contextPanelState) === null || _states$contextPanelS === void 0 ? void 0 : _states$contextPanelS.contents;
|
|
176
142
|
});
|
|
177
143
|
const firstContent = contextPanelContents && contextPanelContents.find(Boolean);
|
|
178
|
-
return
|
|
144
|
+
return /*#__PURE__*/React.createElement(SwappableContentArea
|
|
179
145
|
// Ignored via go/ees005
|
|
180
146
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
181
147
|
, _extends({}, props, {
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
|
|
2
|
+
._v5648l2w{transition:width .5s cubic-bezier(.15,1,.3,1)}
|
|
3
|
+
._v564e1q5{transition:width .6s cubic-bezier(.15,1,.3,1)}
|
|
4
|
+
._v564glyw{transition:none}._16qshh4h{box-shadow:inset 2px 0 0 0 var(--ds-border,#0b120e24)}
|
|
5
|
+
._18m915vq{overflow-y:hidden}
|
|
6
|
+
._18m91wug{overflow-y:auto}
|
|
7
|
+
._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
|
|
8
|
+
._1bsbidpf{width:0}
|
|
9
|
+
._1bsbnklw{width:20pc}
|
|
10
|
+
._1reo15vq{overflow-x:hidden}
|
|
11
|
+
._4t3i1osq{height:100%}
|
|
12
|
+
._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
|
|
13
|
+
._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
|
|
14
|
+
._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
|
|
15
|
+
._vchhusvi{box-sizing:border-box}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/* index-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
+
var _excluded = ["children", "customWidth", "visible", "disableAnimation"],
|
|
5
|
+
_excluded2 = ["children", "customWidth", "visible", "disableAnimation", "hasPadding"];
|
|
6
|
+
import "./index-compiled.compiled.css";
|
|
7
|
+
import * as React from 'react';
|
|
8
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
9
|
+
/**
|
|
10
|
+
* Compiled branch of the `platform_editor_core_non_ecc_static_css` experiment.
|
|
11
|
+
* Used via `componentWithCondition` in `index.tsx`.
|
|
12
|
+
*
|
|
13
|
+
* Cleanup: delete this file once the `platform_editor_core_non_ecc_static_css` experiment has shipped.
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
|
|
17
|
+
var ANIM_SPEED_MS = 500;
|
|
18
|
+
var panelStyles = {
|
|
19
|
+
panel: "_v5648l2w _1reo15vq _18m915vq _1bsbnklw _4t3i1osq _16qshh4h",
|
|
20
|
+
panelHidden: "_1bsbidpf",
|
|
21
|
+
disablePanelAnimation: "_v564glyw",
|
|
22
|
+
content: "_v564e1q5 _vchhusvi _1bsbnklw _4t3i1osq _18m91wug",
|
|
23
|
+
padding: "_ca0qpxbi _u5f3pxbi _n3tdze3t _19bvpxbi",
|
|
24
|
+
customWidthOverflow: "_1reo15vq"
|
|
25
|
+
};
|
|
26
|
+
export var ContextPanelWrapperCompiled = function ContextPanelWrapperCompiled(_ref) {
|
|
27
|
+
var children = _ref.children,
|
|
28
|
+
customWidth = _ref.customWidth,
|
|
29
|
+
visible = _ref.visible,
|
|
30
|
+
disableAnimation = _ref.disableAnimation,
|
|
31
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
32
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
33
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic width cannot be expressed as static compiled CSS
|
|
34
|
+
style: customWidth && visible ? {
|
|
35
|
+
width: "".concat(customWidth, "px")
|
|
36
|
+
} : undefined
|
|
37
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
38
|
+
}, rest, {
|
|
39
|
+
className: ax([panelStyles.panel, customWidth && "", !visible && panelStyles.panelHidden, disableAnimation && panelStyles.disablePanelAnimation])
|
|
40
|
+
}), children);
|
|
41
|
+
};
|
|
42
|
+
export var ContextPanelContentCompiled = function ContextPanelContentCompiled(_ref2) {
|
|
43
|
+
var children = _ref2.children,
|
|
44
|
+
customWidth = _ref2.customWidth,
|
|
45
|
+
visible = _ref2.visible,
|
|
46
|
+
disableAnimation = _ref2.disableAnimation,
|
|
47
|
+
hasPadding = _ref2.hasPadding,
|
|
48
|
+
rest = _objectWithoutProperties(_ref2, _excluded2);
|
|
49
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
50
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic width cannot be expressed as static compiled CSS
|
|
51
|
+
style: customWidth && visible ? {
|
|
52
|
+
width: "".concat(customWidth, "px")
|
|
53
|
+
} : undefined
|
|
54
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
55
|
+
}, rest, {
|
|
56
|
+
className: ax([panelStyles.content, hasPadding && panelStyles.padding, customWidth && "", !visible && panelStyles.panelHidden, disableAnimation && panelStyles.disablePanelAnimation])
|
|
57
|
+
}), children);
|
|
58
|
+
};
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["children", "customWidth", "visible", "disableAnimation"],
|
|
4
|
+
_excluded2 = ["children", "customWidth", "visible", "disableAnimation", "hasPadding"];
|
|
5
|
+
/**
|
|
6
|
+
* @jsxRuntime classic
|
|
7
|
+
* @jsx jsx
|
|
8
|
+
*/
|
|
9
|
+
/**
|
|
10
|
+
* Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
|
|
11
|
+
* Used via `componentWithCondition` in `index.tsx`.
|
|
12
|
+
*
|
|
13
|
+
* Cleanup: delete this file once the `platform_editor_core_non_ecc_static_css` experiment has shipped.
|
|
14
|
+
*/
|
|
15
|
+
import { useMemo } from 'react';
|
|
16
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration
|
|
17
|
+
import { css, jsx } from '@emotion/react';
|
|
18
|
+
import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
|
|
19
|
+
var ANIM_SPEED_MS = 500;
|
|
20
|
+
var panelHidden = css({
|
|
21
|
+
width: 0
|
|
22
|
+
});
|
|
23
|
+
var panel = css({
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
25
|
+
width: "".concat(akEditorContextPanelWidth, "px"),
|
|
26
|
+
height: '100%',
|
|
27
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
28
|
+
transition: "width ".concat(ANIM_SPEED_MS, "ms ").concat(akEditorSwoopCubicBezier),
|
|
29
|
+
overflow: 'hidden',
|
|
30
|
+
boxShadow: "inset 2px 0 0 0 ".concat("var(--ds-border, #0B120E24)")
|
|
31
|
+
});
|
|
32
|
+
var disablePanelAnimation = css({
|
|
33
|
+
transition: 'none'
|
|
34
|
+
});
|
|
35
|
+
var content = css({
|
|
36
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
37
|
+
transition: "width 600ms ".concat(akEditorSwoopCubicBezier),
|
|
38
|
+
boxSizing: 'border-box',
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
40
|
+
width: "".concat(akEditorContextPanelWidth, "px"),
|
|
41
|
+
height: '100%',
|
|
42
|
+
overflowY: 'auto'
|
|
43
|
+
});
|
|
44
|
+
var paddingStyles = css({
|
|
45
|
+
padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-200, 16px)", " 0px")
|
|
46
|
+
});
|
|
47
|
+
export var ContextPanelWrapperEmotion = function ContextPanelWrapperEmotion(_ref) {
|
|
48
|
+
var children = _ref.children,
|
|
49
|
+
customWidth = _ref.customWidth,
|
|
50
|
+
visible = _ref.visible,
|
|
51
|
+
disableAnimation = _ref.disableAnimation,
|
|
52
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
53
|
+
var customPanelWidthStyles = useMemo(function () {
|
|
54
|
+
return customWidth ? css({
|
|
55
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
|
|
56
|
+
width: "".concat(customWidth, "px"),
|
|
57
|
+
overflowX: 'hidden'
|
|
58
|
+
}) : undefined;
|
|
59
|
+
}, [customWidth]);
|
|
60
|
+
return jsx("div", _extends({
|
|
61
|
+
css: [panel,
|
|
62
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
|
|
63
|
+
customPanelWidthStyles, !visible && panelHidden, disableAnimation && disablePanelAnimation]
|
|
64
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
65
|
+
}, rest), children);
|
|
66
|
+
};
|
|
67
|
+
export var ContextPanelContentEmotion = function ContextPanelContentEmotion(_ref2) {
|
|
68
|
+
var children = _ref2.children,
|
|
69
|
+
customWidth = _ref2.customWidth,
|
|
70
|
+
visible = _ref2.visible,
|
|
71
|
+
disableAnimation = _ref2.disableAnimation,
|
|
72
|
+
hasPadding = _ref2.hasPadding,
|
|
73
|
+
rest = _objectWithoutProperties(_ref2, _excluded2);
|
|
74
|
+
var customPanelWidthStyles = useMemo(function () {
|
|
75
|
+
return customWidth ? css({
|
|
76
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
|
|
77
|
+
width: "".concat(customWidth, "px"),
|
|
78
|
+
overflowX: 'hidden'
|
|
79
|
+
}) : undefined;
|
|
80
|
+
}, [customWidth]);
|
|
81
|
+
return jsx("div", _extends({
|
|
82
|
+
css: [content, hasPadding && paddingStyles,
|
|
83
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
|
|
84
|
+
customPanelWidthStyles, !visible && panelHidden, disableAnimation && disablePanelAnimation]
|
|
85
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
86
|
+
}, rest), children);
|
|
87
|
+
};
|
|
@@ -10,54 +10,25 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
10
10
|
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
11
11
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
12
12
|
/* eslint-disable jsdoc/require-jsdoc -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
|
|
13
|
-
/**
|
|
14
|
-
* @jsxRuntime classic
|
|
15
|
-
* @jsx jsx
|
|
16
|
-
*/
|
|
17
13
|
import React from 'react';
|
|
18
|
-
|
|
19
|
-
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
|
|
20
|
-
import { css, jsx } from '@emotion/react';
|
|
21
14
|
import { injectIntl } from 'react-intl';
|
|
22
15
|
import Transition from 'react-transition-group/Transition';
|
|
23
16
|
import { ContextPanelConsumer } from '@atlaskit/editor-common/context-panel';
|
|
24
17
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
25
18
|
import { contextPanelMessages } from '@atlaskit/editor-common/messages';
|
|
26
|
-
import { akEditorContextPanelWidth
|
|
19
|
+
import { akEditorContextPanelWidth } from '@atlaskit/editor-shared-styles';
|
|
27
20
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
21
|
+
import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
|
|
28
22
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
23
|
+
import { ContextPanelContentCompiled, ContextPanelWrapperCompiled } from './index-compiled';
|
|
24
|
+
import { ContextPanelContentEmotion, ContextPanelWrapperEmotion } from './index-emotion';
|
|
29
25
|
var ANIM_SPEED_MS = 500;
|
|
30
|
-
var
|
|
31
|
-
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
37
|
-
width: "".concat(akEditorContextPanelWidth, "px"),
|
|
38
|
-
height: '100%',
|
|
39
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
40
|
-
transition: "width ".concat(ANIM_SPEED_MS, "ms ").concat(akEditorSwoopCubicBezier),
|
|
41
|
-
overflow: 'hidden',
|
|
42
|
-
boxShadow: "inset 2px 0 0 0 ".concat("var(--ds-border, #0B120E24)")
|
|
43
|
-
});
|
|
44
|
-
var disablePanelAnimation = css({
|
|
45
|
-
transition: 'none'
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
49
|
-
export var content = css({
|
|
50
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
51
|
-
transition: "width 600ms ".concat(akEditorSwoopCubicBezier),
|
|
52
|
-
boxSizing: 'border-box',
|
|
53
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
54
|
-
width: "".concat(akEditorContextPanelWidth, "px"),
|
|
55
|
-
height: '100%',
|
|
56
|
-
overflowY: 'auto'
|
|
57
|
-
});
|
|
58
|
-
var paddingStyles = css({
|
|
59
|
-
padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-200, 16px)", " 0px")
|
|
60
|
-
});
|
|
26
|
+
var ContextPanelWrapperMigration = componentWithCondition(function () {
|
|
27
|
+
return expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
|
|
28
|
+
}, ContextPanelWrapperCompiled, ContextPanelWrapperEmotion);
|
|
29
|
+
var ContextPanelContentMigration = componentWithCondition(function () {
|
|
30
|
+
return expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
|
|
31
|
+
}, ContextPanelContentCompiled, ContextPanelContentEmotion);
|
|
61
32
|
// Ignored via go/ees005
|
|
62
33
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
63
34
|
var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
|
|
@@ -92,7 +63,7 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
92
63
|
var onExited = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? _this.handleTransitionExited : function () {
|
|
93
64
|
return _this.unsetPluginContent();
|
|
94
65
|
};
|
|
95
|
-
return
|
|
66
|
+
return /*#__PURE__*/React.createElement(Transition, {
|
|
96
67
|
timeout: _this.state.mounted ? animSpeedMs : 0,
|
|
97
68
|
in: !!pluginContent,
|
|
98
69
|
mountOnEnter: true,
|
|
@@ -106,7 +77,7 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
106
77
|
return;
|
|
107
78
|
}
|
|
108
79
|
var animSpeedMs = fg('platform_editor_disable_context_panel_animation') ? 0 : ANIM_SPEED_MS;
|
|
109
|
-
return
|
|
80
|
+
return /*#__PURE__*/React.createElement(Transition, {
|
|
110
81
|
timeout: _this.state.mounted ? animSpeedMs : 0,
|
|
111
82
|
in: isVisible,
|
|
112
83
|
mountOnEnter: true,
|
|
@@ -141,34 +112,33 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
141
112
|
var userVisible = !!this.props.visible;
|
|
142
113
|
var visible = userVisible || !!this.state.currentPluginContent;
|
|
143
114
|
var hasPadding = this.props.hasPadding === undefined ? true : this.props.hasPadding;
|
|
144
|
-
var
|
|
145
|
-
|
|
146
|
-
width: "".concat(this.props.customWidth, "px"),
|
|
147
|
-
overflowX: 'hidden'
|
|
148
|
-
});
|
|
149
|
-
return jsx(ContextPanelConsumer, null, function (_ref) {
|
|
115
|
+
var disableAnimation = fg('platform_editor_disable_context_panel_animation');
|
|
116
|
+
return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, function (_ref) {
|
|
150
117
|
var _this2$props$intl, _this2$props$intl2;
|
|
151
118
|
var broadcastWidth = _ref.broadcastWidth;
|
|
152
119
|
var contextPanelWidth = visible ? width : 0;
|
|
153
120
|
broadcastWidth(contextPanelWidth);
|
|
154
|
-
return
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
"data-testid": "context-panel-panel"
|
|
121
|
+
return /*#__PURE__*/React.createElement(ContextPanelWrapperMigration, {
|
|
122
|
+
customWidth: _this2.props.customWidth,
|
|
123
|
+
visible: visible,
|
|
124
|
+
disableAnimation: disableAnimation,
|
|
125
|
+
"data-testid": "context-panel-panel"
|
|
126
|
+
// eslint-disable-next-line @atlassian/a11y/no-empty-aria-label -- Pre-existing; intl should always resolve a label here
|
|
127
|
+
,
|
|
159
128
|
"aria-label": ((_this2$props$intl = _this2.props.intl) === null || _this2$props$intl === void 0 ? void 0 : _this2$props$intl.formatMessage(contextPanelMessages.panelLabel)) || '',
|
|
160
129
|
"aria-modal": "false",
|
|
161
130
|
role: "dialog"
|
|
162
|
-
},
|
|
131
|
+
}, /*#__PURE__*/React.createElement(ContextPanelContentMigration, {
|
|
132
|
+
customWidth: _this2.props.customWidth,
|
|
133
|
+
visible: visible,
|
|
134
|
+
disableAnimation: disableAnimation,
|
|
135
|
+
hasPadding: hasPadding,
|
|
163
136
|
"data-testid": "context-panel-content"
|
|
164
137
|
// Adding tabIndex=0 here to make content focusable as it is a scrollable region
|
|
165
138
|
,
|
|
166
139
|
tabIndex: fg('platform_editor_nov_a11y_fixes') ? 0 : undefined,
|
|
167
140
|
role: fg('platform_editor_nov_a11y_fixes') ? 'region' : undefined,
|
|
168
|
-
"aria-label": fg('platform_editor_nov_a11y_fixes') ? (_this2$props$intl2 = _this2.props.intl) === null || _this2$props$intl2 === void 0 ? void 0 : _this2$props$intl2.formatMessage(contextPanelMessages.panelContentLabel) : undefined
|
|
169
|
-
css: [content, hasPadding && paddingStyles,
|
|
170
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
|
|
171
|
-
_this2.props.customWidth && customPanelWidthStyles, !visible && panelHidden, fg('platform_editor_disable_context_panel_animation') && disablePanelAnimation]
|
|
141
|
+
"aria-label": fg('platform_editor_nov_a11y_fixes') ? (_this2$props$intl2 = _this2.props.intl) === null || _this2$props$intl2 === void 0 ? void 0 : _this2$props$intl2.formatMessage(contextPanelMessages.panelContentLabel) : undefined
|
|
172
142
|
}, _this2.showPluginContent() || _this2.showProvidedContent(userVisible)));
|
|
173
143
|
});
|
|
174
144
|
}
|
|
@@ -191,7 +161,7 @@ export function ContextPanel(props) {
|
|
|
191
161
|
return states === null || states === void 0 || (_states$contextPanelS = states.contextPanelState) === null || _states$contextPanelS === void 0 ? void 0 : _states$contextPanelS.contents;
|
|
192
162
|
});
|
|
193
163
|
var firstContent = contextPanelContents && contextPanelContents.find(Boolean);
|
|
194
|
-
return
|
|
164
|
+
return /*#__PURE__*/React.createElement(SwappableContentArea
|
|
195
165
|
// Ignored via go/ees005
|
|
196
166
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
197
167
|
, _extends({}, props, {
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
* Compiled migration: platform_editor_core_non_ecc_static_css
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Compiled branch of the `platform_editor_core_non_ecc_static_css` experiment.
|
|
8
|
+
* Used via `componentWithCondition` in `index.tsx`.
|
|
9
|
+
*
|
|
10
|
+
* Cleanup: delete this file once the `platform_editor_core_non_ecc_static_css` experiment has shipped.
|
|
11
|
+
*/
|
|
12
|
+
import type { HTMLAttributes } from 'react';
|
|
13
|
+
export interface ContextPanelWrapperProps extends HTMLAttributes<HTMLDivElement> {
|
|
14
|
+
customWidth?: number;
|
|
15
|
+
disableAnimation: boolean;
|
|
16
|
+
visible: boolean;
|
|
17
|
+
}
|
|
18
|
+
export interface ContextPanelContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
19
|
+
customWidth?: number;
|
|
20
|
+
disableAnimation: boolean;
|
|
21
|
+
hasPadding: boolean;
|
|
22
|
+
visible: boolean;
|
|
23
|
+
}
|
|
24
|
+
export declare const ContextPanelWrapperCompiled: ({ children, customWidth, visible, disableAnimation, ...rest }: ContextPanelWrapperProps) => React.JSX.Element;
|
|
25
|
+
export declare const ContextPanelContentCompiled: ({ children, customWidth, visible, disableAnimation, hasPadding, ...rest }: ContextPanelContentProps) => React.JSX.Element;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
import { jsx } from '@emotion/react';
|
|
3
|
+
export interface ContextPanelWrapperProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
customWidth?: number;
|
|
5
|
+
disableAnimation: boolean;
|
|
6
|
+
visible: boolean;
|
|
7
|
+
}
|
|
8
|
+
export interface ContextPanelContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
9
|
+
customWidth?: number;
|
|
10
|
+
disableAnimation: boolean;
|
|
11
|
+
hasPadding: boolean;
|
|
12
|
+
visible: boolean;
|
|
13
|
+
}
|
|
14
|
+
export declare const ContextPanelWrapperEmotion: ({ children, customWidth, visible, disableAnimation, ...rest }: ContextPanelWrapperProps) => jsx.JSX.Element;
|
|
15
|
+
export declare const ContextPanelContentEmotion: ({ children, customWidth, visible, disableAnimation, hasPadding, ...rest }: ContextPanelContentProps) => jsx.JSX.Element;
|
|
@@ -1,10 +1,4 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
1
|
import React from 'react';
|
|
6
|
-
import { jsx } from '@emotion/react';
|
|
7
|
-
import type { SerializedStyles } from '@emotion/react';
|
|
8
2
|
import type { IntlShape, WithIntlProps } from 'react-intl';
|
|
9
3
|
import type { OptionalPlugin, PublicPluginAPI } from '@atlaskit/editor-common/types';
|
|
10
4
|
import type { ContextPanelPlugin } from '@atlaskit/editor-plugins/context-panel';
|
|
@@ -16,8 +10,6 @@ export type Props = {
|
|
|
16
10
|
hasPadding?: boolean;
|
|
17
11
|
visible: boolean;
|
|
18
12
|
};
|
|
19
|
-
export declare const panel: SerializedStyles;
|
|
20
|
-
export declare const content: SerializedStyles;
|
|
21
13
|
type SwappableContentAreaProps = {
|
|
22
14
|
editorView?: EditorView;
|
|
23
15
|
intl: IntlShape;
|
|
@@ -26,5 +18,5 @@ type SwappableContentAreaProps = {
|
|
|
26
18
|
export declare const SwappableContentArea: React.FC<WithIntlProps<SwappableContentAreaProps>> & {
|
|
27
19
|
WrappedComponent: React.ComponentType<SwappableContentAreaProps>;
|
|
28
20
|
};
|
|
29
|
-
export declare function ContextPanel(props: Props):
|
|
21
|
+
export declare function ContextPanel(props: Props): React.JSX.Element;
|
|
30
22
|
export {};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
* Compiled migration: platform_editor_core_non_ecc_static_css
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Compiled branch of the `platform_editor_core_non_ecc_static_css` experiment.
|
|
8
|
+
* Used via `componentWithCondition` in `index.tsx`.
|
|
9
|
+
*
|
|
10
|
+
* Cleanup: delete this file once the `platform_editor_core_non_ecc_static_css` experiment has shipped.
|
|
11
|
+
*/
|
|
12
|
+
import type { HTMLAttributes } from 'react';
|
|
13
|
+
export interface ContextPanelWrapperProps extends HTMLAttributes<HTMLDivElement> {
|
|
14
|
+
customWidth?: number;
|
|
15
|
+
disableAnimation: boolean;
|
|
16
|
+
visible: boolean;
|
|
17
|
+
}
|
|
18
|
+
export interface ContextPanelContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
19
|
+
customWidth?: number;
|
|
20
|
+
disableAnimation: boolean;
|
|
21
|
+
hasPadding: boolean;
|
|
22
|
+
visible: boolean;
|
|
23
|
+
}
|
|
24
|
+
export declare const ContextPanelWrapperCompiled: ({ children, customWidth, visible, disableAnimation, ...rest }: ContextPanelWrapperProps) => React.JSX.Element;
|
|
25
|
+
export declare const ContextPanelContentCompiled: ({ children, customWidth, visible, disableAnimation, hasPadding, ...rest }: ContextPanelContentProps) => React.JSX.Element;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
import { jsx } from '@emotion/react';
|
|
3
|
+
export interface ContextPanelWrapperProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
customWidth?: number;
|
|
5
|
+
disableAnimation: boolean;
|
|
6
|
+
visible: boolean;
|
|
7
|
+
}
|
|
8
|
+
export interface ContextPanelContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
9
|
+
customWidth?: number;
|
|
10
|
+
disableAnimation: boolean;
|
|
11
|
+
hasPadding: boolean;
|
|
12
|
+
visible: boolean;
|
|
13
|
+
}
|
|
14
|
+
export declare const ContextPanelWrapperEmotion: ({ children, customWidth, visible, disableAnimation, ...rest }: ContextPanelWrapperProps) => jsx.JSX.Element;
|
|
15
|
+
export declare const ContextPanelContentEmotion: ({ children, customWidth, visible, disableAnimation, hasPadding, ...rest }: ContextPanelContentProps) => jsx.JSX.Element;
|
|
@@ -1,10 +1,4 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
1
|
import React from 'react';
|
|
6
|
-
import { jsx } from '@emotion/react';
|
|
7
|
-
import type { SerializedStyles } from '@emotion/react';
|
|
8
2
|
import type { IntlShape, WithIntlProps } from 'react-intl';
|
|
9
3
|
import type { OptionalPlugin, PublicPluginAPI } from '@atlaskit/editor-common/types';
|
|
10
4
|
import type { ContextPanelPlugin } from '@atlaskit/editor-plugins/context-panel';
|
|
@@ -18,8 +12,6 @@ export type Props = {
|
|
|
18
12
|
hasPadding?: boolean;
|
|
19
13
|
visible: boolean;
|
|
20
14
|
};
|
|
21
|
-
export declare const panel: SerializedStyles;
|
|
22
|
-
export declare const content: SerializedStyles;
|
|
23
15
|
type SwappableContentAreaProps = {
|
|
24
16
|
editorView?: EditorView;
|
|
25
17
|
intl: IntlShape;
|
|
@@ -28,5 +20,5 @@ type SwappableContentAreaProps = {
|
|
|
28
20
|
export declare const SwappableContentArea: React.FC<WithIntlProps<SwappableContentAreaProps>> & {
|
|
29
21
|
WrappedComponent: React.ComponentType<SwappableContentAreaProps>;
|
|
30
22
|
};
|
|
31
|
-
export declare function ContextPanel(props: Props):
|
|
23
|
+
export declare function ContextPanel(props: Props): React.JSX.Element;
|
|
32
24
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "219.9.
|
|
3
|
+
"version": "219.9.5",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@atlaskit/activity-provider": "^2.6.0",
|
|
49
|
-
"@atlaskit/adf-schema": "^52.
|
|
49
|
+
"@atlaskit/adf-schema": "^52.13.0",
|
|
50
50
|
"@atlaskit/afm-i18n-platform-editor-editor-core": "2.10.0",
|
|
51
51
|
"@atlaskit/analytics-namespaced-context": "^7.3.0",
|
|
52
52
|
"@atlaskit/analytics-next": "^11.2.0",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"@atlaskit/editor-prosemirror": "^7.3.0",
|
|
63
63
|
"@atlaskit/editor-shared-styles": "^3.11.0",
|
|
64
64
|
"@atlaskit/editor-ssr-renderer": "^5.2.0",
|
|
65
|
-
"@atlaskit/editor-toolbar": "^1.
|
|
65
|
+
"@atlaskit/editor-toolbar": "^1.7.0",
|
|
66
66
|
"@atlaskit/editor-toolbar-model": "^0.5.0",
|
|
67
67
|
"@atlaskit/emoji": "^70.10.0",
|
|
68
68
|
"@atlaskit/feature-gate-js-client": "^5.7.0",
|
|
@@ -72,9 +72,9 @@
|
|
|
72
72
|
"@atlaskit/mention": "^26.0.0",
|
|
73
73
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
74
74
|
"@atlaskit/platform-feature-flags-react": "^0.5.0",
|
|
75
|
-
"@atlaskit/react-ufo": "^
|
|
75
|
+
"@atlaskit/react-ufo": "^6.0.0",
|
|
76
76
|
"@atlaskit/task-decision": "^20.1.0",
|
|
77
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
77
|
+
"@atlaskit/tmp-editor-statsig": "^82.1.0",
|
|
78
78
|
"@atlaskit/tokens": "^13.0.0",
|
|
79
79
|
"@atlaskit/tooltip": "^22.2.0",
|
|
80
80
|
"@atlaskit/width-detector": "^5.1.0",
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
"uuid": "^3.1.0"
|
|
93
93
|
},
|
|
94
94
|
"peerDependencies": {
|
|
95
|
-
"@atlaskit/editor-common": "^114.
|
|
95
|
+
"@atlaskit/editor-common": "^114.39.0",
|
|
96
96
|
"@atlaskit/link-provider": "^4.4.0",
|
|
97
97
|
"@atlaskit/media-core": "^37.1.0",
|
|
98
98
|
"react": "^18.2.0",
|
|
@@ -122,7 +122,7 @@
|
|
|
122
122
|
"@atlaskit/popper": "^7.2.0",
|
|
123
123
|
"@atlaskit/portal": "^5.5.0",
|
|
124
124
|
"@atlaskit/renderer": "^131.1.0",
|
|
125
|
-
"@atlaskit/section-message": "^8.
|
|
125
|
+
"@atlaskit/section-message": "^8.13.0",
|
|
126
126
|
"@atlaskit/synchrony-test-helpers": "workspace:^",
|
|
127
127
|
"@atlaskit/toggle": "^15.6.0",
|
|
128
128
|
"@atlaskit/util-data-test": "^18.6.0",
|