@atlaskit/editor-core 203.5.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
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
+
3
11
  ## 203.5.0
4
12
 
5
13
  ### Minor Changes
@@ -124,23 +124,33 @@ var SwappableContentArea = exports.SwappableContentArea = /*#__PURE__*/function
124
124
  }, {
125
125
  key: "render",
126
126
  value: function render() {
127
- var _this2 = this;
128
- 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;
129
130
  var userVisible = !!this.props.visible;
130
131
  var visible = userVisible || !!this.state.currentPluginContent;
131
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
+ });
132
138
  return (0, _react2.jsx)(_ui.ContextPanelConsumer, null, function (_ref) {
133
139
  var broadcastWidth = _ref.broadcastWidth;
134
140
  var contextPanelWidth = visible ? width : 0;
135
141
  broadcastWidth(contextPanelWidth);
136
142
  return (0, _react2.jsx)("div", {
137
- 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],
138
146
  "data-testid": "context-panel-panel",
139
147
  "aria-labelledby": "context-panel-title",
140
148
  role: "dialog"
141
149
  }, (0, _react2.jsx)("div", {
142
150
  "data-testid": "context-panel-content",
143
- css: [content, hasPadding && paddingStyles, !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]
144
154
  }, _this2.showPluginContent() || _this2.showProvidedContent(userVisible)));
145
155
  });
146
156
  }
@@ -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.5.0";
8
+ var version = exports.version = "203.6.0";
@@ -112,23 +112,33 @@ export class SwappableContentArea extends React.PureComponent {
112
112
  });
113
113
  }
114
114
  render() {
115
- 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;
116
117
  const userVisible = !!this.props.visible;
117
118
  const visible = userVisible || !!this.state.currentPluginContent;
118
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
+ });
119
125
  return jsx(ContextPanelConsumer, null, ({
120
126
  broadcastWidth
121
127
  }) => {
122
128
  const contextPanelWidth = visible ? width : 0;
123
129
  broadcastWidth(contextPanelWidth);
124
130
  return jsx("div", {
125
- 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],
126
134
  "data-testid": "context-panel-panel",
127
135
  "aria-labelledby": "context-panel-title",
128
136
  role: "dialog"
129
137
  }, jsx("div", {
130
138
  "data-testid": "context-panel-content",
131
- css: [content, hasPadding && paddingStyles, !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]
132
142
  }, this.showPluginContent() || this.showProvidedContent(userVisible)));
133
143
  });
134
144
  }
@@ -1,2 +1,2 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "203.5.0";
2
+ export const version = "203.6.0";
@@ -119,23 +119,33 @@ export var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
119
119
  }, {
120
120
  key: "render",
121
121
  value: function render() {
122
- var _this2 = this;
123
- 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;
124
125
  var userVisible = !!this.props.visible;
125
126
  var visible = userVisible || !!this.state.currentPluginContent;
126
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
+ });
127
133
  return jsx(ContextPanelConsumer, null, function (_ref) {
128
134
  var broadcastWidth = _ref.broadcastWidth;
129
135
  var contextPanelWidth = visible ? width : 0;
130
136
  broadcastWidth(contextPanelWidth);
131
137
  return jsx("div", {
132
- 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],
133
141
  "data-testid": "context-panel-panel",
134
142
  "aria-labelledby": "context-panel-title",
135
143
  role: "dialog"
136
144
  }, jsx("div", {
137
145
  "data-testid": "context-panel-content",
138
- css: [content, hasPadding && paddingStyles, !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]
139
149
  }, _this2.showPluginContent() || _this2.showProvidedContent(userVisible)));
140
150
  });
141
151
  }
@@ -1,2 +1,2 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "203.5.0";
2
+ export var version = "203.6.0";
@@ -12,6 +12,7 @@ export type Props = {
12
12
  editorAPI: PublicPluginAPI<[OptionalPlugin<ContextPanelPlugin>]> | undefined;
13
13
  children?: React.ReactElement;
14
14
  hasPadding?: boolean;
15
+ customWidth?: number;
15
16
  };
16
17
  export declare const panel: import("@emotion/react").SerializedStyles;
17
18
  export declare const content: import("@emotion/react").SerializedStyles;
@@ -14,6 +14,7 @@ export type Props = {
14
14
  ]> | undefined;
15
15
  children?: React.ReactElement;
16
16
  hasPadding?: boolean;
17
+ customWidth?: number;
17
18
  };
18
19
  export declare const panel: import("@emotion/react").SerializedStyles;
19
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.5.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.9",
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",