@atlaskit/editor-core 203.4.0 → 203.6.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.
Files changed (10) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/ui/ContextPanel/index.js +18 -5
  3. package/dist/cjs/version-wrapper.js +1 -1
  4. package/dist/es2019/ui/ContextPanel/index.js +17 -4
  5. package/dist/es2019/version-wrapper.js +1 -1
  6. package/dist/esm/ui/ContextPanel/index.js +18 -5
  7. package/dist/esm/version-wrapper.js +1 -1
  8. package/dist/types/ui/ContextPanel/index.d.ts +2 -0
  9. package/dist/types-ts4.5/ui/ContextPanel/index.d.ts +2 -0
  10. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 203.6.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#179329](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/179329)
8
+ [`d3944ea7be4f6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d3944ea7be4f6) -
9
+ [ux] Allowing custom width for editor context panel
10
+
11
+ ## 203.5.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [#178994](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/178994)
16
+ [`75a272d4afdbb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/75a272d4afdbb) -
17
+ [ux] making padding optional for content panels
18
+
3
19
  ## 203.4.0
4
20
 
5
21
  ### Minor Changes
package/dist/cjs/ui/ContextPanel/index.js CHANGED
@@ -47,12 +47,14 @@ var content = exports.content = (0, _react2.css)({
47
47
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
48
48
  transition: "width 600ms ".concat(_editorSharedStyles.akEditorSwoopCubicBezier),
49
49
  boxSizing: 'border-box',
50
- padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-200, 16px)", " 0px"),
51
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
52
51
  width: "".concat(_editorSharedStyles.akEditorContextPanelWidth, "px"),
53
52
  height: '100%',
54
53
  overflowY: 'auto'
55
54
  });
55
+ var paddingStyles = (0, _react2.css)({
56
+ padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-200, 16px)", " 0px")
57
+ });
56
58
  var SwappableContentArea = exports.SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
57
59
  function SwappableContentArea() {
58
60
  var _this;
@@ -122,22 +124,33 @@ var SwappableContentArea = exports.SwappableContentArea = /*#__PURE__*/function
122
124
  }, {
123
125
  key: "render",
124
126
  value: function render() {
125
- var _this2 = this;
126
- var width = _editorSharedStyles.akEditorContextPanelWidth;
127
+ var _this$props$customWid,
128
+ _this2 = this;
129
+ var width = (_this$props$customWid = this.props.customWidth) !== null && _this$props$customWid !== void 0 ? _this$props$customWid : _editorSharedStyles.akEditorContextPanelWidth;
127
130
  var userVisible = !!this.props.visible;
128
131
  var visible = userVisible || !!this.state.currentPluginContent;
132
+ var hasPadding = this.props.hasPadding === undefined ? true : this.props.hasPadding;
133
+ var customPanelWidthStyles = (0, _react2.css)({
134
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
135
+ width: "".concat(this.props.customWidth, "px"),
136
+ overflowX: 'hidden'
137
+ });
129
138
  return (0, _react2.jsx)(_ui.ContextPanelConsumer, null, function (_ref) {
130
139
  var broadcastWidth = _ref.broadcastWidth;
131
140
  var contextPanelWidth = visible ? width : 0;
132
141
  broadcastWidth(contextPanelWidth);
133
142
  return (0, _react2.jsx)("div", {
134
- css: [panel, !visible && panelHidden],
143
+ css: [panel,
144
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
145
+ _this2.props.customWidth && customPanelWidthStyles, !visible && panelHidden],
135
146
  "data-testid": "context-panel-panel",
136
147
  "aria-labelledby": "context-panel-title",
137
148
  role: "dialog"
138
149
  }, (0, _react2.jsx)("div", {
139
150
  "data-testid": "context-panel-content",
140
- css: [content, !visible && panelHidden]
151
+ css: [content, hasPadding && paddingStyles,
152
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
153
+ _this2.props.customWidth && customPanelWidthStyles, !visible && panelHidden]
141
154
  }, _this2.showPluginContent() || _this2.showProvidedContent(userVisible)));
142
155
  });
143
156
  }
package/dist/cjs/version-wrapper.js CHANGED
@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.version = exports.name = void 0;
7
7
  var name = exports.name = "@atlaskit/editor-core";
8
- var version = exports.version = "203.4.0";
8
+ var version = exports.version = "203.6.0";
package/dist/es2019/ui/ContextPanel/index.js CHANGED
@@ -33,12 +33,14 @@ export const content = css({
33
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
34
  transition: `width 600ms ${akEditorSwoopCubicBezier}`,
35
35
  boxSizing: 'border-box',
36
- padding: `${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"} 0px`,
37
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
38
37
  width: `${akEditorContextPanelWidth}px`,
39
38
  height: '100%',
40
39
  overflowY: 'auto'
41
40
  });
41
+ const paddingStyles = css({
42
+ padding: `${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"} 0px`
43
+ });
42
44
  export class SwappableContentArea extends React.PureComponent {
43
45
  constructor(...args) {
44
46
  super(...args);
@@ -110,22 +112,33 @@ export class SwappableContentArea extends React.PureComponent {
110
112
  });
111
113
  }
112
114
  render() {
113
- const width = akEditorContextPanelWidth;
115
+ var _this$props$customWid;
116
+ const width = (_this$props$customWid = this.props.customWidth) !== null && _this$props$customWid !== void 0 ? _this$props$customWid : akEditorContextPanelWidth;
114
117
  const userVisible = !!this.props.visible;
115
118
  const visible = userVisible || !!this.state.currentPluginContent;
119
+ const hasPadding = this.props.hasPadding === undefined ? true : this.props.hasPadding;
120
+ const customPanelWidthStyles = css({
121
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
122
+ width: `${this.props.customWidth}px`,
123
+ overflowX: 'hidden'
124
+ });
116
125
  return jsx(ContextPanelConsumer, null, ({
117
126
  broadcastWidth
118
127
  }) => {
119
128
  const contextPanelWidth = visible ? width : 0;
120
129
  broadcastWidth(contextPanelWidth);
121
130
  return jsx("div", {
122
- css: [panel, !visible && panelHidden],
131
+ css: [panel,
132
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
133
+ this.props.customWidth && customPanelWidthStyles, !visible && panelHidden],
123
134
  "data-testid": "context-panel-panel",
124
135
  "aria-labelledby": "context-panel-title",
125
136
  role: "dialog"
126
137
  }, jsx("div", {
127
138
  "data-testid": "context-panel-content",
128
- css: [content, !visible && panelHidden]
139
+ css: [content, hasPadding && paddingStyles,
140
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
141
+ this.props.customWidth && customPanelWidthStyles, !visible && panelHidden]
129
142
  }, this.showPluginContent() || this.showProvidedContent(userVisible)));
130
143
  });
131
144
  }
package/dist/es2019/version-wrapper.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "203.4.0";
2
+ export const version = "203.6.0";
package/dist/esm/ui/ContextPanel/index.js CHANGED
@@ -42,12 +42,14 @@ export var content = css({
42
42
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
43
43
  transition: "width 600ms ".concat(akEditorSwoopCubicBezier),
44
44
  boxSizing: 'border-box',
45
- padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-200, 16px)", " 0px"),
46
45
  // 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
46
  width: "".concat(akEditorContextPanelWidth, "px"),
48
47
  height: '100%',
49
48
  overflowY: 'auto'
50
49
  });
50
+ var paddingStyles = css({
51
+ padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-200, 16px)", " 0px")
52
+ });
51
53
  export var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
52
54
  function SwappableContentArea() {
53
55
  var _this;
@@ -117,22 +119,33 @@ export var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
117
119
  }, {
118
120
  key: "render",
119
121
  value: function render() {
120
- var _this2 = this;
121
- var width = akEditorContextPanelWidth;
122
+ var _this$props$customWid,
123
+ _this2 = this;
124
+ var width = (_this$props$customWid = this.props.customWidth) !== null && _this$props$customWid !== void 0 ? _this$props$customWid : akEditorContextPanelWidth;
122
125
  var userVisible = !!this.props.visible;
123
126
  var visible = userVisible || !!this.state.currentPluginContent;
127
+ var hasPadding = this.props.hasPadding === undefined ? true : this.props.hasPadding;
128
+ var customPanelWidthStyles = css({
129
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
130
+ width: "".concat(this.props.customWidth, "px"),
131
+ overflowX: 'hidden'
132
+ });
124
133
  return jsx(ContextPanelConsumer, null, function (_ref) {
125
134
  var broadcastWidth = _ref.broadcastWidth;
126
135
  var contextPanelWidth = visible ? width : 0;
127
136
  broadcastWidth(contextPanelWidth);
128
137
  return jsx("div", {
129
- css: [panel, !visible && panelHidden],
138
+ css: [panel,
139
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
140
+ _this2.props.customWidth && customPanelWidthStyles, !visible && panelHidden],
130
141
  "data-testid": "context-panel-panel",
131
142
  "aria-labelledby": "context-panel-title",
132
143
  role: "dialog"
133
144
  }, jsx("div", {
134
145
  "data-testid": "context-panel-content",
135
- css: [content, !visible && panelHidden]
146
+ css: [content, hasPadding && paddingStyles,
147
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
148
+ _this2.props.customWidth && customPanelWidthStyles, !visible && panelHidden]
136
149
  }, _this2.showPluginContent() || _this2.showProvidedContent(userVisible)));
137
150
  });
138
151
  }
package/dist/esm/version-wrapper.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "203.4.0";
2
+ export var version = "203.6.0";
package/dist/types/ui/ContextPanel/index.d.ts CHANGED
@@ -11,6 +11,8 @@ export type Props = {
11
11
  visible: boolean;
12
12
  editorAPI: PublicPluginAPI<[OptionalPlugin<ContextPanelPlugin>]> | undefined;
13
13
  children?: React.ReactElement;
14
+ hasPadding?: boolean;
15
+ customWidth?: number;
14
16
  };
15
17
  export declare const panel: import("@emotion/react").SerializedStyles;
16
18
  export declare const content: import("@emotion/react").SerializedStyles;
package/dist/types-ts4.5/ui/ContextPanel/index.d.ts CHANGED
@@ -13,6 +13,8 @@ export type Props = {
13
13
  OptionalPlugin<ContextPanelPlugin>
14
14
  ]> | undefined;
15
15
  children?: React.ReactElement;
16
+ hasPadding?: boolean;
17
+ customWidth?: number;
16
18
  };
17
19
  export declare const panel: import("@emotion/react").SerializedStyles;
18
20
  export declare const content: import("@emotion/react").SerializedStyles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "203.4.0",
3
+ "version": "203.6.0",
4
4
  "description": "A package contains Atlassian editor core functionality",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -55,7 +55,7 @@
55
55
  "@atlaskit/mention": "^23.4.0",
56
56
  "@atlaskit/platform-feature-flags": "^0.3.0",
57
57
  "@atlaskit/task-decision": "^17.11.0",
58
- "@atlaskit/tmp-editor-statsig": "^2.26.0",
58
+ "@atlaskit/tmp-editor-statsig": "^2.27.0",
59
59
  "@atlaskit/tokens": "^2.4.0",
60
60
  "@atlaskit/tooltip": "^19.0.0",
61
61
  "@atlaskit/width-detector": "^4.3.0",
@@ -103,7 +103,7 @@
103
103
  "@atlaskit/visual-regression": "*",
104
104
  "@atlassian/adf-schema-json": "^1.22.0",
105
105
  "@atlassian/feature-flags-test-utils": "*",
106
- "@atlassian/search-provider": "3.0.8",
106
+ "@atlassian/search-provider": "3.0.10",
107
107
  "@emotion/jest": "^11.8.0",
108
108
  "@storybook/addon-knobs": "^6.4.0",
109
109
  "@testing-library/react": "^12.1.5",