@atlaskit/editor-plugin-floating-toolbar 1.13.11 → 1.13.13

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 +17 -0
  2. package/dist/cjs/ui/Input.js +41 -9
  3. package/dist/cjs/ui/Toolbar.js +19 -3
  4. package/dist/es2019/ui/Input.js +33 -3
  5. package/dist/es2019/ui/Toolbar.js +15 -3
  6. package/dist/esm/ui/Input.js +40 -9
  7. package/dist/esm/ui/Toolbar.js +19 -3
  8. package/dist/types/ui/Input.d.ts +2 -1
  9. package/dist/types-ts4.5/ui/Input.d.ts +2 -1
  10. package/package.json +10 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/editor-plugin-floating-toolbar
2
2
 
3
+ ## 1.13.13
4
+
5
+ ### Patch Changes
6
+
7
+ - [#152399](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152399)
8
+ [`fbd7217f0cb51`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fbd7217f0cb51) -
9
+ [ux] ED-25092: Migrated table toolbar icons
10
+ - Updated dependencies
11
+
12
+ ## 1.13.12
13
+
14
+ ### Patch Changes
15
+
16
+ - [#151620](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/151620)
17
+ [`d8b4e8466f2a8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d8b4e8466f2a8) -
18
+ Refactor Input in floating toolbar to functional component to remove UNSAFE lifecycle method
19
+
3
20
  ## 1.13.11
4
21
 
5
22
  ### Patch Changes
package/dist/cjs/ui/Input.js CHANGED
@@ -5,7 +5,8 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.default = void 0;
8
+ exports.InputOld = exports.InputNew = void 0;
9
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
10
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
10
11
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
11
12
  var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -24,12 +25,12 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
24
25
  * @jsx jsx
25
26
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
26
27
  // eslint-disable-next-line @repo/internal/react/no-class-components
27
- var TextField = exports.default = /*#__PURE__*/function (_Component) {
28
- (0, _inherits2.default)(TextField, _Component);
29
- var _super = _createSuper(TextField);
30
- function TextField(props) {
28
+ var InputOld = exports.InputOld = /*#__PURE__*/function (_Component) {
29
+ (0, _inherits2.default)(InputOld, _Component);
30
+ var _super = _createSuper(InputOld);
31
+ function InputOld(props) {
31
32
  var _this;
32
- (0, _classCallCheck2.default)(this, TextField);
33
+ (0, _classCallCheck2.default)(this, InputOld);
33
34
  _this = _super.call(this, props);
34
35
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function (e) {
35
36
  _this.setState({
@@ -53,7 +54,7 @@ var TextField = exports.default = /*#__PURE__*/function (_Component) {
53
54
  };
54
55
  return _this;
55
56
  }
56
- (0, _createClass2.default)(TextField, [{
57
+ (0, _createClass2.default)(InputOld, [{
57
58
  key: "UNSAFE_componentWillReceiveProps",
58
59
  value: function UNSAFE_componentWillReceiveProps(nextProps) {
59
60
  if (this.state.text !== nextProps.defaultValue) {
@@ -78,5 +79,36 @@ var TextField = exports.default = /*#__PURE__*/function (_Component) {
78
79
  }));
79
80
  }
80
81
  }]);
81
- return TextField;
82
- }(_react.Component);
82
+ return InputOld;
83
+ }(_react.Component);
84
+ var InputNew = exports.InputNew = function InputNew(props) {
85
+ var defaultValue = props.defaultValue,
86
+ onBlur = props.onBlur,
87
+ onSubmit = props.onSubmit,
88
+ placeholder = props.placeholder;
89
+ var _useState = (0, _react.useState)(defaultValue || ''),
90
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
91
+ text = _useState2[0],
92
+ setText = _useState2[1];
93
+ var handleChange = function handleChange(e) {
94
+ setText(e.target.value);
95
+ };
96
+ var handleSubmit = function handleSubmit(e) {
97
+ e.preventDefault();
98
+ onSubmit && onSubmit(text);
99
+ };
100
+ var handleBlur = function handleBlur(e) {
101
+ e.preventDefault();
102
+ onBlur && onBlur(text);
103
+ };
104
+ return (0, _react2.jsx)("form", {
105
+ onSubmit: handleSubmit
106
+ }, (0, _react2.jsx)("input", {
107
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
108
+ css: _ui.panelTextInput,
109
+ value: text,
110
+ onChange: handleChange,
111
+ placeholder: placeholder,
112
+ onBlur: handleBlur
113
+ }));
114
+ };
package/dist/cjs/ui/Toolbar.js CHANGED
@@ -25,12 +25,13 @@ var _uiColor = require("@atlaskit/editor-common/ui-color");
25
25
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
26
26
  var _editorPalette = require("@atlaskit/editor-palette");
27
27
  var _commands = require("@atlaskit/editor-plugin-table/commands");
28
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
28
29
  var _forceFocus = require("../pm-plugins/force-focus");
29
30
  var _commands2 = require("../pm-plugins/toolbar-data/commands");
30
31
  var _Dropdown = _interopRequireDefault(require("./Dropdown"));
31
32
  var _EmojiPickerButton = require("./EmojiPickerButton");
32
33
  var _ExtensionsPlaceholder = require("./ExtensionsPlaceholder");
33
- var _Input = _interopRequireDefault(require("./Input"));
34
+ var _Input = require("./Input");
34
35
  var _ScrollButtons = require("./ScrollButtons");
35
36
  var _Select = _interopRequireDefault(require("./Select"));
36
37
  var _Separator = _interopRequireDefault(require("./Separator"));
@@ -110,7 +111,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
110
111
  title: item.title,
111
112
  href: item.href,
112
113
  icon: item.icon ? item.iconFallback ? (0, _react2.jsx)(ButtonIcon, {
113
- color: "var(--ds-icon, #44546F)",
114
+ color: item.disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)",
114
115
  spacing: "spacious",
115
116
  label: item.title,
116
117
  LEGACY_fallbackIcon: item.iconFallback,
@@ -146,7 +147,22 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
146
147
  pulse: item.pulse
147
148
  }, item.showTitle && item.title);
148
149
  case 'input':
149
- return (0, _react2.jsx)(_Input.default, {
150
+ if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2')) {
151
+ return (0, _react2.jsx)(_Input.InputNew, {
152
+ key: idx,
153
+ mountPoint: popupsMountPoint,
154
+ boundariesElement: popupsBoundariesElement,
155
+ defaultValue: item.defaultValue,
156
+ placeholder: item.placeholder,
157
+ onSubmit: function onSubmit(value) {
158
+ return dispatchCommand(item.onSubmit(value));
159
+ },
160
+ onBlur: function onBlur(value) {
161
+ return dispatchCommand(item.onBlur(value));
162
+ }
163
+ });
164
+ }
165
+ return (0, _react2.jsx)(_Input.InputOld, {
150
166
  key: idx,
151
167
  mountPoint: popupsMountPoint,
152
168
  boundariesElement: popupsBoundariesElement,
package/dist/es2019/ui/Input.js CHANGED
@@ -3,13 +3,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  * @jsxRuntime classic
4
4
  * @jsx jsx
5
5
  */
6
- import React, { Component } from 'react';
6
+ import React, { Component, useState } from 'react';
7
7
 
8
8
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
9
  import { jsx } from '@emotion/react';
10
10
  import { panelTextInput } from '@atlaskit/editor-common/ui';
11
11
  // eslint-disable-next-line @repo/internal/react/no-class-components
12
- export default class TextField extends Component {
12
+ export class InputOld extends Component {
13
13
  constructor(props) {
14
14
  super(props);
15
15
  _defineProperty(this, "handleChange", e => {
@@ -55,4 +55,34 @@ export default class TextField extends Component {
55
55
  onBlur: this.handleBlur
56
56
  }));
57
57
  }
58
- }
58
+ }
59
+ export const InputNew = props => {
60
+ const {
61
+ defaultValue,
62
+ onBlur,
63
+ onSubmit,
64
+ placeholder
65
+ } = props;
66
+ const [text, setText] = useState(defaultValue || '');
67
+ const handleChange = e => {
68
+ setText(e.target.value);
69
+ };
70
+ const handleSubmit = e => {
71
+ e.preventDefault();
72
+ onSubmit && onSubmit(text);
73
+ };
74
+ const handleBlur = e => {
75
+ e.preventDefault();
76
+ onBlur && onBlur(text);
77
+ };
78
+ return jsx("form", {
79
+ onSubmit: handleSubmit
80
+ }, jsx("input", {
81
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
82
+ css: panelTextInput,
83
+ value: text,
84
+ onChange: handleChange,
85
+ placeholder: placeholder,
86
+ onBlur: handleBlur
87
+ }));
88
+ };
package/dist/es2019/ui/Toolbar.js CHANGED
@@ -17,12 +17,13 @@ import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-col
17
17
  import { ColorPickerButton, ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
18
18
  import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
19
19
  import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
20
+ import { fg } from '@atlaskit/platform-feature-flags';
20
21
  import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
21
22
  import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
22
23
  import Dropdown from './Dropdown';
23
24
  import { EmojiPickerButton } from './EmojiPickerButton';
24
25
  import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
25
- import Input from './Input';
26
+ import { InputNew, InputOld } from './Input';
26
27
  import { ScrollButtons } from './ScrollButtons';
27
28
  import Select from './Select';
28
29
  import Separator from './Separator';
@@ -98,7 +99,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
98
99
  title: item.title,
99
100
  href: item.href,
100
101
  icon: item.icon ? item.iconFallback ? jsx(ButtonIcon, {
101
- color: "var(--ds-icon, #44546F)",
102
+ color: item.disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)",
102
103
  spacing: "spacious",
103
104
  label: item.title,
104
105
  LEGACY_fallbackIcon: item.iconFallback,
@@ -126,7 +127,18 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
126
127
  pulse: item.pulse
127
128
  }, item.showTitle && item.title);
128
129
  case 'input':
129
- return jsx(Input, {
130
+ if (fg('platform_editor_react18_phase2')) {
131
+ return jsx(InputNew, {
132
+ key: idx,
133
+ mountPoint: popupsMountPoint,
134
+ boundariesElement: popupsBoundariesElement,
135
+ defaultValue: item.defaultValue,
136
+ placeholder: item.placeholder,
137
+ onSubmit: value => dispatchCommand(item.onSubmit(value)),
138
+ onBlur: value => dispatchCommand(item.onBlur(value))
139
+ });
140
+ }
141
+ return jsx(InputOld, {
130
142
  key: idx,
131
143
  mountPoint: popupsMountPoint,
132
144
  boundariesElement: popupsBoundariesElement,
package/dist/esm/ui/Input.js CHANGED
@@ -1,3 +1,4 @@
1
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
1
2
  import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2
3
  import _createClass from "@babel/runtime/helpers/createClass";
3
4
  import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -11,18 +12,18 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
11
12
  * @jsxRuntime classic
12
13
  * @jsx jsx
13
14
  */
14
- import React, { Component } from 'react';
15
+ import React, { Component, useState } from 'react';
15
16
 
16
17
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
17
18
  import { jsx } from '@emotion/react';
18
19
  import { panelTextInput } from '@atlaskit/editor-common/ui';
19
20
  // eslint-disable-next-line @repo/internal/react/no-class-components
20
- var TextField = /*#__PURE__*/function (_Component) {
21
- _inherits(TextField, _Component);
22
- var _super = _createSuper(TextField);
23
- function TextField(props) {
21
+ export var InputOld = /*#__PURE__*/function (_Component) {
22
+ _inherits(InputOld, _Component);
23
+ var _super = _createSuper(InputOld);
24
+ function InputOld(props) {
24
25
  var _this;
25
- _classCallCheck(this, TextField);
26
+ _classCallCheck(this, InputOld);
26
27
  _this = _super.call(this, props);
27
28
  _defineProperty(_assertThisInitialized(_this), "handleChange", function (e) {
28
29
  _this.setState({
@@ -46,7 +47,7 @@ var TextField = /*#__PURE__*/function (_Component) {
46
47
  };
47
48
  return _this;
48
49
  }
49
- _createClass(TextField, [{
50
+ _createClass(InputOld, [{
50
51
  key: "UNSAFE_componentWillReceiveProps",
51
52
  value: function UNSAFE_componentWillReceiveProps(nextProps) {
52
53
  if (this.state.text !== nextProps.defaultValue) {
@@ -71,6 +72,36 @@ var TextField = /*#__PURE__*/function (_Component) {
71
72
  }));
72
73
  }
73
74
  }]);
74
- return TextField;
75
+ return InputOld;
75
76
  }(Component);
76
- export { TextField as default };
77
+ export var InputNew = function InputNew(props) {
78
+ var defaultValue = props.defaultValue,
79
+ onBlur = props.onBlur,
80
+ onSubmit = props.onSubmit,
81
+ placeholder = props.placeholder;
82
+ var _useState = useState(defaultValue || ''),
83
+ _useState2 = _slicedToArray(_useState, 2),
84
+ text = _useState2[0],
85
+ setText = _useState2[1];
86
+ var handleChange = function handleChange(e) {
87
+ setText(e.target.value);
88
+ };
89
+ var handleSubmit = function handleSubmit(e) {
90
+ e.preventDefault();
91
+ onSubmit && onSubmit(text);
92
+ };
93
+ var handleBlur = function handleBlur(e) {
94
+ e.preventDefault();
95
+ onBlur && onBlur(text);
96
+ };
97
+ return jsx("form", {
98
+ onSubmit: handleSubmit
99
+ }, jsx("input", {
100
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
101
+ css: panelTextInput,
102
+ value: text,
103
+ onChange: handleChange,
104
+ placeholder: placeholder,
105
+ onBlur: handleBlur
106
+ }));
107
+ };
package/dist/esm/ui/Toolbar.js CHANGED
@@ -25,12 +25,13 @@ import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-col
25
25
  import { ColorPickerButton, ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
26
26
  import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
27
27
  import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
28
+ import { fg } from '@atlaskit/platform-feature-flags';
28
29
  import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
29
30
  import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
30
31
  import Dropdown from './Dropdown';
31
32
  import { EmojiPickerButton } from './EmojiPickerButton';
32
33
  import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
33
- import Input from './Input';
34
+ import { InputNew, InputOld } from './Input';
34
35
  import { ScrollButtons } from './ScrollButtons';
35
36
  import Select from './Select';
36
37
  import Separator from './Separator';
@@ -103,7 +104,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
103
104
  title: item.title,
104
105
  href: item.href,
105
106
  icon: item.icon ? item.iconFallback ? jsx(ButtonIcon, {
106
- color: "var(--ds-icon, #44546F)",
107
+ color: item.disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)",
107
108
  spacing: "spacious",
108
109
  label: item.title,
109
110
  LEGACY_fallbackIcon: item.iconFallback,
@@ -139,7 +140,22 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
139
140
  pulse: item.pulse
140
141
  }, item.showTitle && item.title);
141
142
  case 'input':
142
- return jsx(Input, {
143
+ if (fg('platform_editor_react18_phase2')) {
144
+ return jsx(InputNew, {
145
+ key: idx,
146
+ mountPoint: popupsMountPoint,
147
+ boundariesElement: popupsBoundariesElement,
148
+ defaultValue: item.defaultValue,
149
+ placeholder: item.placeholder,
150
+ onSubmit: function onSubmit(value) {
151
+ return dispatchCommand(item.onSubmit(value));
152
+ },
153
+ onBlur: function onBlur(value) {
154
+ return dispatchCommand(item.onBlur(value));
155
+ }
156
+ });
157
+ }
158
+ return jsx(InputOld, {
143
159
  key: idx,
144
160
  mountPoint: popupsMountPoint,
145
161
  boundariesElement: popupsBoundariesElement,
package/dist/types/ui/Input.d.ts CHANGED
@@ -15,7 +15,7 @@ export interface Props {
15
15
  export interface State {
16
16
  text: string;
17
17
  }
18
- export default class TextField extends Component<Props, State> {
18
+ export declare class InputOld extends Component<Props, State> {
19
19
  constructor(props: Props);
20
20
  UNSAFE_componentWillReceiveProps(nextProps: Props): void;
21
21
  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -23,3 +23,4 @@ export default class TextField extends Component<Props, State> {
23
23
  handleBlur: (e: React.FocusEvent<{}>) => void;
24
24
  render(): jsx.JSX.Element;
25
25
  }
26
+ export declare const InputNew: (props: Props) => jsx.JSX.Element;
package/dist/types-ts4.5/ui/Input.d.ts CHANGED
@@ -15,7 +15,7 @@ export interface Props {
15
15
  export interface State {
16
16
  text: string;
17
17
  }
18
- export default class TextField extends Component<Props, State> {
18
+ export declare class InputOld extends Component<Props, State> {
19
19
  constructor(props: Props);
20
20
  UNSAFE_componentWillReceiveProps(nextProps: Props): void;
21
21
  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -23,3 +23,4 @@ export default class TextField extends Component<Props, State> {
23
23
  handleBlur: (e: React.FocusEvent<{}>) => void;
24
24
  render(): jsx.JSX.Element;
25
25
  }
26
+ export declare const InputNew: (props: Props) => jsx.JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-floating-toolbar",
3
- "version": "1.13.11",
3
+ "version": "1.13.13",
4
4
  "description": "Floating toolbar plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -26,9 +26,9 @@
26
26
  "@atlaskit/adf-utils": "^19.9.0",
27
27
  "@atlaskit/button": "^20.2.0",
28
28
  "@atlaskit/checkbox": "^14.0.0",
29
- "@atlaskit/editor-common": "^93.4.0",
29
+ "@atlaskit/editor-common": "^93.5.0",
30
30
  "@atlaskit/editor-palette": "1.6.1",
31
- "@atlaskit/editor-plugin-block-controls": "^2.5.0",
31
+ "@atlaskit/editor-plugin-block-controls": "^2.6.0",
32
32
  "@atlaskit/editor-plugin-context-panel": "^1.3.0",
33
33
  "@atlaskit/editor-plugin-copy-button": "^1.3.0",
34
34
  "@atlaskit/editor-plugin-decorations": "^1.3.0",
@@ -42,9 +42,10 @@
42
42
  "@atlaskit/icon": "^22.22.0",
43
43
  "@atlaskit/menu": "^2.12.0",
44
44
  "@atlaskit/modal-dialog": "^12.17.0",
45
+ "@atlaskit/platform-feature-flags": "^0.3.0",
45
46
  "@atlaskit/primitives": "^12.2.0",
46
47
  "@atlaskit/select": "^18.1.0",
47
- "@atlaskit/theme": "^13.0.0",
48
+ "@atlaskit/theme": "^13.1.0",
48
49
  "@atlaskit/tokens": "^2.0.0",
49
50
  "@atlaskit/tooltip": "^18.8.0",
50
51
  "@babel/runtime": "^7.0.0",
@@ -104,5 +105,10 @@
104
105
  "dist/types-ts4.5/index.d.ts"
105
106
  ]
106
107
  }
108
+ },
109
+ "platform-feature-flags": {
110
+ "platform_editor_react18_phase2": {
111
+ "type": "boolean"
112
+ }
107
113
  }
108
114
  }