@atlaskit/editor-plugin-insert-block 2.4.28 → 2.4.30

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 (11) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/ui/ToolbarInsertBlock/block-insert-element-browser.js +1 -2
  3. package/dist/cjs/ui/ToolbarInsertBlock/index.js +97 -95
  4. package/dist/cjs/ui/ToolbarInsertBlock/table-selector-popup.js +1 -0
  5. package/dist/es2019/ui/ToolbarInsertBlock/block-insert-element-browser.js +1 -2
  6. package/dist/es2019/ui/ToolbarInsertBlock/index.js +98 -93
  7. package/dist/es2019/ui/ToolbarInsertBlock/table-selector-popup.js +1 -0
  8. package/dist/esm/ui/ToolbarInsertBlock/block-insert-element-browser.js +1 -2
  9. package/dist/esm/ui/ToolbarInsertBlock/index.js +98 -93
  10. package/dist/esm/ui/ToolbarInsertBlock/table-selector-popup.js +1 -0
  11. package/package.json +8 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-insert-block
2
2
 
3
+ ## 2.4.30
4
+
5
+ ### Patch Changes
6
+
7
+ - [#100162](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100162)
8
+ [`e80e57fc37719`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e80e57fc37719) -
9
+ [ux] ED-26089: Add 4px gap to main nav bar items
10
+
11
+ ## 2.4.29
12
+
13
+ ### Patch Changes
14
+
15
+ - [#99549](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99549)
16
+ [`df909788e15e8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/df909788e15e8) -
17
+ [ux] Cleanup feature flag for consistent insert menu behaviour.
18
+
3
19
  ## 2.4.28
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/ui/ToolbarInsertBlock/block-insert-element-browser.js CHANGED
@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.BlockInsertElementBrowser = void 0;
9
9
  var _react = _interopRequireDefault(require("react"));
10
10
  var _ui = require("@atlaskit/editor-common/ui");
11
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
11
  var _InsertMenu = _interopRequireWildcard(require("../ElementBrowser/InsertMenu"));
13
12
  var _dropdownButton = require("./dropdown-button");
14
13
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -20,7 +19,7 @@ var FIT_HEIGHT_BUFFER = 100;
20
19
  var BlockInsertElementBrowser = exports.BlockInsertElementBrowser = function BlockInsertElementBrowser(props) {
21
20
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.open && /*#__PURE__*/_react.default.createElement(_ui.Popup, {
22
21
  target: props.plusButtonRef,
23
- fitHeight: (0, _platformFeatureFlags.fg)('platform_editor_consistent_insert_menu') ? _InsertMenu.DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER : 500,
22
+ fitHeight: _InsertMenu.DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER,
24
23
  fitWidth: 350,
25
24
  offset: [0, 3],
26
25
  mountTo: props.popupsMountPoint,
package/dist/cjs/ui/ToolbarInsertBlock/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
@@ -26,13 +25,15 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
26
25
  var _uiReact = require("@atlaskit/editor-common/ui-react");
27
26
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
28
27
  var _picker = require("@atlaskit/emoji/picker");
29
- var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
28
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
29
+ var _colors = require("@atlaskit/theme/colors");
30
30
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
31
31
  var _commands = require("../../pm-plugins/commands");
32
32
  var _blockInsertMenu = require("./block-insert-menu");
33
33
  var _createItems3 = require("./create-items");
34
34
  var _tableSelectorPopupWithListeners = _interopRequireDefault(require("./table-selector-popup-with-listeners"));
35
35
  var _templateObject;
36
+ /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
36
37
  /**
37
38
  * @jsxRuntime classic
38
39
  * @jsx jsx
@@ -42,8 +43,6 @@ var _templateObject;
42
43
  // eslint-disable-next-line import/no-namespace
43
44
  // Ignored via go/ees005
44
45
  // eslint-disable-next-line import/no-named-as-default
45
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
46
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
47
46
  function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
48
47
  function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
49
48
  function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -61,7 +60,7 @@ var TABLE_SELECTOR_STRING = 'table selector';
61
60
 
62
61
  // TODO: Jenga team will create a component for a split button using this css
63
62
  var getHoverStyles = function getHoverStyles(selector) {
64
- return "&:hover ".concat(selector, " {\n background: ", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N20A, ")"), ";\n\n &:hover {\n background: ", "var(--ds-background-neutral-hovered, ".concat(colors.N30A, ")"), ";\n }\n }");
63
+ return "&:hover ".concat(selector, " {\n background: ", "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20A, ")"), ";\n\n &:hover {\n background: ", "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")"), ";\n }\n }");
65
64
  };
66
65
  var EmojiPicker = function EmojiPicker(props) {
67
66
  var setOutsideClickTargetRef = _react.default.useContext(_uiReact.OutsideClickTargetRefContext);
@@ -735,97 +734,100 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
735
734
  _iterator.f();
736
735
  }
737
736
  var isFullPageAppearance = ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '');
738
- return (
739
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
740
- (0, _react2.jsx)("span", {
741
- css: _styles.buttonGroupStyle
742
- }, toolbarButtons.map(function (btn) {
743
- return (0, _react2.jsx)(_uiMenu.ToolbarButton, {
744
- item: btn,
745
- testId: String(btn.content),
746
- ref: _this3.handleToolbarRef(btn.value.name),
747
- key: btn.value.name,
748
- spacing: isReducedSpacing ? 'none' : 'default',
749
- disabled: isDisabled || btn.isDisabled,
750
- iconBefore: btn.elemBefore,
751
- selected: btn.value.name === 'emoji' && emojiPickerOpen || btn.isActive,
752
- title: btn.title,
753
- "aria-label": btn['aria-label'],
754
- "aria-haspopup": btn['aria-haspopup'],
755
- "aria-keyshortcuts": btn['aria-keyshortcuts'],
756
- onItemClick: _this3.insertToolbarMenuItem
757
- });
758
- }), this.props.tableSelectorSupported && (isTableButtonVisible || isTableSizeVisible) && (0, _react2.jsx)("div", {
759
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
760
- css: tableButtonWrapper({
761
- isTableSelectorOpen: isTableSelectorOpen,
762
- isButtonDisabled: (_tableButton = tableButton) === null || _tableButton === void 0 ? void 0 : _tableButton.isDisabled
763
- })
764
- }, isTableButtonVisible && (0, _react2.jsx)(_uiMenu.ToolbarButton
765
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
766
- , {
767
- className: "table-toolbar-btn",
768
- item: tableButton,
769
- ref: this.tableButtonRef,
770
- testId: String((_tableButton2 = tableButton) === null || _tableButton2 === void 0 ? void 0 : _tableButton2.content),
771
- key: (_tableButton3 = tableButton) === null || _tableButton3 === void 0 ? void 0 : _tableButton3.value.name,
772
- spacing: isReducedSpacing ? 'none' : 'default',
773
- disabled: isDisabled || ((_tableButton4 = tableButton) === null || _tableButton4 === void 0 ? void 0 : _tableButton4.isDisabled),
774
- iconBefore: (_tableButton5 = tableButton) === null || _tableButton5 === void 0 ? void 0 : _tableButton5.elemBefore,
775
- selected: ((_tableButton6 = tableButton) === null || _tableButton6 === void 0 ? void 0 : _tableButton6.isActive) || isTableSelectorOpen,
776
- title: (_tableButton7 = tableButton) === null || _tableButton7 === void 0 ? void 0 : _tableButton7.title,
777
- "aria-label": tableButton ? tableButton['aria-label'] : undefined,
778
- "aria-haspopup": tableButton ? tableButton['aria-haspopup'] : undefined,
779
- "aria-keyshortcuts": tableButton ? tableButton['aria-keyshortcuts'] : undefined,
780
- onItemClick: this.insertToolbarMenuItem
781
- }), isTableButtonVisible && (0, _react2.jsx)(_uiMenu.ToolbarButton
782
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
783
- , {
784
- className: "table-selector-toolbar-btn",
785
- item: tableSelectorButton,
786
- testId: String((_tableSelectorButton = tableSelectorButton) === null || _tableSelectorButton === void 0 ? void 0 : _tableSelectorButton.content),
787
- key: (_tableSelectorButton2 = tableSelectorButton) === null || _tableSelectorButton2 === void 0 ? void 0 : _tableSelectorButton2.value.name,
788
- ref: this.tableSelectorButtonRef,
737
+ return (0, _react2.jsx)("span", {
738
+ css:
739
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/platform/ensure-feature-flag-prefix
740
+ (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ?
741
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
742
+ _styles.buttonGroupStyle :
743
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
744
+ _styles.buttonGroupStyleBeforeVisualRefresh
745
+ }, toolbarButtons.map(function (btn) {
746
+ return (0, _react2.jsx)(_uiMenu.ToolbarButton, {
747
+ item: btn,
748
+ testId: String(btn.content),
749
+ ref: _this3.handleToolbarRef(btn.value.name),
750
+ key: btn.value.name,
789
751
  spacing: isReducedSpacing ? 'none' : 'default',
790
- disabled: isDisabled || ((_tableSelectorButton3 = tableSelectorButton) === null || _tableSelectorButton3 === void 0 ? void 0 : _tableSelectorButton3.isDisabled),
791
- iconBefore: (_tableSelectorButton4 = tableSelectorButton) === null || _tableSelectorButton4 === void 0 ? void 0 : _tableSelectorButton4.elemBefore,
792
- selected: ((_tableSelectorButton5 = tableSelectorButton) === null || _tableSelectorButton5 === void 0 ? void 0 : _tableSelectorButton5.isActive) || isTableSelectorOpen,
793
- title: (_tableSelectorButton6 = tableSelectorButton) === null || _tableSelectorButton6 === void 0 ? void 0 : _tableSelectorButton6.title,
794
- "aria-label": tableSelectorButton ? tableSelectorButton['aria-label'] : undefined,
795
- "aria-haspopup": tableSelectorButton ? tableSelectorButton['aria-haspopup'] : undefined,
796
- "aria-keyshortcuts": tableSelectorButton ? tableSelectorButton['aria-keyshortcuts'] : undefined,
797
- onItemClick: this.insertToolbarMenuItem,
798
- onKeyDown: this.handleTableSelectorOpenByKeyboard
799
- })), (0, _react2.jsx)("span", {
800
- css: _styles.wrapperStyle
801
- }, this.renderPopup(), this.renderTableSelectorPopup(), (0, _react2.jsx)(_blockInsertMenu.BlockInsertMenu, {
802
- popupsMountPoint: this.props.popupsMountPoint,
803
- popupsBoundariesElement: this.props.popupsBoundariesElement,
804
- popupsScrollableElement: this.props.popupsScrollableElement,
805
- disabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
806
- editorView: this.props.editorView,
807
- spacing: this.props.isReducedSpacing ? 'none' : 'default',
808
- label: this.props.intl.formatMessage(_messages.toolbarInsertBlockMessages.insertMenu),
809
- open: (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true) ? !isFullPageAppearance && this.state.isPlusMenuOpen : this.state.isPlusMenuOpen,
810
- plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
811
- items: this.state.dropdownItems,
812
- onRef: this.handleDropDownButtonRef,
813
- onPlusButtonRef: this.handlePlusButtonRef,
814
- onClick: this.handleClick,
815
- onKeyDown: this.handleOpenByKeyboard,
816
- onItemActivated: this.insertInsertMenuItem,
817
- onInsert: this.insertInsertMenuItem,
818
- onOpenChange: this.onOpenChange,
819
- togglePlusMenuVisibility: this.togglePlusMenuVisibility,
820
- showElementBrowserLink: this.props.showElementBrowserLink || false,
821
- pluginInjectionApi: this.props.pluginInjectionApi,
822
- isFullPageAppearance: isFullPageAppearance
823
- })), !((_this$props$pluginInj3 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj3 !== void 0 && _this$props$pluginInj3.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
824
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
825
- (0, _react2.jsx)("span", {
826
- css: _styles.separatorStyles
827
- }))
828
- );
752
+ disabled: isDisabled || btn.isDisabled,
753
+ iconBefore: btn.elemBefore,
754
+ selected: btn.value.name === 'emoji' && emojiPickerOpen || btn.isActive,
755
+ title: btn.title,
756
+ "aria-label": btn['aria-label'],
757
+ "aria-haspopup": btn['aria-haspopup'],
758
+ "aria-keyshortcuts": btn['aria-keyshortcuts'],
759
+ onItemClick: _this3.insertToolbarMenuItem
760
+ });
761
+ }), this.props.tableSelectorSupported && (isTableButtonVisible || isTableSizeVisible) && (0, _react2.jsx)("div", {
762
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
763
+ css: tableButtonWrapper({
764
+ isTableSelectorOpen: isTableSelectorOpen,
765
+ isButtonDisabled: (_tableButton = tableButton) === null || _tableButton === void 0 ? void 0 : _tableButton.isDisabled
766
+ })
767
+ }, isTableButtonVisible && (0, _react2.jsx)(_uiMenu.ToolbarButton
768
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
769
+ , {
770
+ className: "table-toolbar-btn",
771
+ item: tableButton,
772
+ ref: this.tableButtonRef,
773
+ testId: String((_tableButton2 = tableButton) === null || _tableButton2 === void 0 ? void 0 : _tableButton2.content),
774
+ key: (_tableButton3 = tableButton) === null || _tableButton3 === void 0 ? void 0 : _tableButton3.value.name,
775
+ spacing: isReducedSpacing ? 'none' : 'default',
776
+ disabled: isDisabled || ((_tableButton4 = tableButton) === null || _tableButton4 === void 0 ? void 0 : _tableButton4.isDisabled),
777
+ iconBefore: (_tableButton5 = tableButton) === null || _tableButton5 === void 0 ? void 0 : _tableButton5.elemBefore,
778
+ selected: ((_tableButton6 = tableButton) === null || _tableButton6 === void 0 ? void 0 : _tableButton6.isActive) || isTableSelectorOpen,
779
+ title: (_tableButton7 = tableButton) === null || _tableButton7 === void 0 ? void 0 : _tableButton7.title,
780
+ "aria-label": tableButton ? tableButton['aria-label'] : undefined,
781
+ "aria-haspopup": tableButton ? tableButton['aria-haspopup'] : undefined,
782
+ "aria-keyshortcuts": tableButton ? tableButton['aria-keyshortcuts'] : undefined,
783
+ onItemClick: this.insertToolbarMenuItem
784
+ }), isTableButtonVisible && (0, _react2.jsx)(_uiMenu.ToolbarButton
785
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
786
+ , {
787
+ className: "table-selector-toolbar-btn",
788
+ item: tableSelectorButton,
789
+ testId: String((_tableSelectorButton = tableSelectorButton) === null || _tableSelectorButton === void 0 ? void 0 : _tableSelectorButton.content),
790
+ key: (_tableSelectorButton2 = tableSelectorButton) === null || _tableSelectorButton2 === void 0 ? void 0 : _tableSelectorButton2.value.name,
791
+ ref: this.tableSelectorButtonRef,
792
+ spacing: isReducedSpacing ? 'none' : 'default',
793
+ disabled: isDisabled || ((_tableSelectorButton3 = tableSelectorButton) === null || _tableSelectorButton3 === void 0 ? void 0 : _tableSelectorButton3.isDisabled),
794
+ iconBefore: (_tableSelectorButton4 = tableSelectorButton) === null || _tableSelectorButton4 === void 0 ? void 0 : _tableSelectorButton4.elemBefore,
795
+ selected: ((_tableSelectorButton5 = tableSelectorButton) === null || _tableSelectorButton5 === void 0 ? void 0 : _tableSelectorButton5.isActive) || isTableSelectorOpen,
796
+ title: (_tableSelectorButton6 = tableSelectorButton) === null || _tableSelectorButton6 === void 0 ? void 0 : _tableSelectorButton6.title,
797
+ "aria-label": tableSelectorButton ? tableSelectorButton['aria-label'] : undefined,
798
+ "aria-haspopup": tableSelectorButton ? tableSelectorButton['aria-haspopup'] : undefined,
799
+ "aria-keyshortcuts": tableSelectorButton ? tableSelectorButton['aria-keyshortcuts'] : undefined,
800
+ onItemClick: this.insertToolbarMenuItem,
801
+ onKeyDown: this.handleTableSelectorOpenByKeyboard
802
+ })), (0, _react2.jsx)("span", {
803
+ css: _styles.wrapperStyle
804
+ }, this.renderPopup(), this.renderTableSelectorPopup(), (0, _react2.jsx)(_blockInsertMenu.BlockInsertMenu, {
805
+ popupsMountPoint: this.props.popupsMountPoint,
806
+ popupsBoundariesElement: this.props.popupsBoundariesElement,
807
+ popupsScrollableElement: this.props.popupsScrollableElement,
808
+ disabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
809
+ editorView: this.props.editorView,
810
+ spacing: this.props.isReducedSpacing ? 'none' : 'default',
811
+ label: this.props.intl.formatMessage(_messages.toolbarInsertBlockMessages.insertMenu),
812
+ open: (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true) ? !isFullPageAppearance && this.state.isPlusMenuOpen : this.state.isPlusMenuOpen,
813
+ plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
814
+ items: this.state.dropdownItems,
815
+ onRef: this.handleDropDownButtonRef,
816
+ onPlusButtonRef: this.handlePlusButtonRef,
817
+ onClick: this.handleClick,
818
+ onKeyDown: this.handleOpenByKeyboard,
819
+ onItemActivated: this.insertInsertMenuItem,
820
+ onInsert: this.insertInsertMenuItem,
821
+ onOpenChange: this.onOpenChange,
822
+ togglePlusMenuVisibility: this.togglePlusMenuVisibility,
823
+ showElementBrowserLink: this.props.showElementBrowserLink || false,
824
+ pluginInjectionApi: this.props.pluginInjectionApi,
825
+ isFullPageAppearance: isFullPageAppearance
826
+ })), !((_this$props$pluginInj3 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj3 !== void 0 && _this$props$pluginInj3.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
827
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
828
+ (0, _react2.jsx)("span", {
829
+ css: _styles.separatorStyles
830
+ }));
829
831
  }
830
832
  }], [{
831
833
  key: "getDerivedStateFromProps",
package/dist/cjs/ui/ToolbarInsertBlock/table-selector-popup.js CHANGED
@@ -39,6 +39,7 @@ var buttonStyles = (0, _react2.css)({
39
39
  }
40
40
  });
41
41
  var selectionSizeTextStyles = (0, _react2.css)({
42
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
42
43
  lineHeight: '14px',
43
44
  display: 'flex',
44
45
  justifyContent: 'center',
package/dist/es2019/ui/ToolbarInsertBlock/block-insert-element-browser.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import React from 'react';
2
2
  import { Popup } from '@atlaskit/editor-common/ui';
3
- import { fg } from '@atlaskit/platform-feature-flags';
4
3
  import InsertMenu, { DEFAULT_HEIGHT } from '../ElementBrowser/InsertMenu';
5
4
  import { DropDownButton } from './dropdown-button';
6
5
  // This determines how the popup should fit. We prefer the insert menu
@@ -10,7 +9,7 @@ const FIT_HEIGHT_BUFFER = 100;
10
9
  export const BlockInsertElementBrowser = props => {
11
10
  return /*#__PURE__*/React.createElement(React.Fragment, null, props.open && /*#__PURE__*/React.createElement(Popup, {
12
11
  target: props.plusButtonRef,
13
- fitHeight: fg('platform_editor_consistent_insert_menu') ? DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER : 500,
12
+ fitHeight: DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER,
14
13
  fitWidth: 350,
15
14
  offset: [0, 3],
16
15
  mountTo: props.popupsMountPoint,
package/dist/es2019/ui/ToolbarInsertBlock/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
+ /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
3
4
  /**
4
5
  * @jsxRuntime classic
5
6
  * @jsx jsx
@@ -11,7 +12,7 @@ import { css, jsx } from '@emotion/react';
11
12
  import { injectIntl } from 'react-intl-next';
12
13
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
13
14
  import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
14
- import { buttonGroupStyle, separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
15
+ import { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh, separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
15
16
  import { Popup } from '@atlaskit/editor-common/ui';
16
17
  import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
17
18
  import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
@@ -19,7 +20,8 @@ import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
19
20
  import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
20
21
  // Ignored via go/ees005
21
22
  // eslint-disable-next-line import/no-namespace
22
- import * as colors from '@atlaskit/theme/colors';
23
+ import { fg } from '@atlaskit/platform-feature-flags';
24
+ import { N20A, N30A } from '@atlaskit/theme/colors';
23
25
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
24
26
  import { toggleInsertMenuRightRail } from '../../pm-plugins/commands';
25
27
  import { BlockInsertMenu } from './block-insert-menu';
@@ -35,10 +37,10 @@ const TABLE_SELECTOR_STRING = 'table selector';
35
37
 
36
38
  // TODO: Jenga team will create a component for a split button using this css
37
39
  const getHoverStyles = selector => `&:hover ${selector} {
38
- background: ${`var(--ds-background-neutral-subtle-hovered, ${colors.N20A})`};
40
+ background: ${`var(--ds-background-neutral-subtle-hovered, ${N20A})`};
39
41
 
40
42
  &:hover {
41
- background: ${`var(--ds-background-neutral-hovered, ${colors.N30A})`};
43
+ background: ${`var(--ds-background-neutral-hovered, ${N30A})`};
42
44
  }
43
45
  }`;
44
46
  const EmojiPicker = props => {
@@ -771,97 +773,100 @@ export class ToolbarInsertBlock extends React.PureComponent {
771
773
  }
772
774
  }
773
775
  const isFullPageAppearance = ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '');
774
- return (
775
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
776
- jsx("span", {
777
- css: buttonGroupStyle
778
- }, toolbarButtons.map(btn => {
779
- return jsx(ToolbarButton, {
780
- item: btn,
781
- testId: String(btn.content),
782
- ref: this.handleToolbarRef(btn.value.name),
783
- key: btn.value.name,
784
- spacing: isReducedSpacing ? 'none' : 'default',
785
- disabled: isDisabled || btn.isDisabled,
786
- iconBefore: btn.elemBefore,
787
- selected: btn.value.name === 'emoji' && emojiPickerOpen || btn.isActive,
788
- title: btn.title,
789
- "aria-label": btn['aria-label'],
790
- "aria-haspopup": btn['aria-haspopup'],
791
- "aria-keyshortcuts": btn['aria-keyshortcuts'],
792
- onItemClick: this.insertToolbarMenuItem
793
- });
794
- }), this.props.tableSelectorSupported && (isTableButtonVisible || isTableSizeVisible) && jsx("div", {
795
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
796
- css: tableButtonWrapper({
797
- isTableSelectorOpen,
798
- isButtonDisabled: (_tableButton = tableButton) === null || _tableButton === void 0 ? void 0 : _tableButton.isDisabled
799
- })
800
- }, isTableButtonVisible && jsx(ToolbarButton
801
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
802
- , {
803
- className: "table-toolbar-btn",
804
- item: tableButton,
805
- ref: this.tableButtonRef,
806
- testId: String((_tableButton2 = tableButton) === null || _tableButton2 === void 0 ? void 0 : _tableButton2.content),
807
- key: (_tableButton3 = tableButton) === null || _tableButton3 === void 0 ? void 0 : _tableButton3.value.name,
776
+ return jsx("span", {
777
+ css:
778
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/platform/ensure-feature-flag-prefix
779
+ fg('platform-visual-refresh-icons') ?
780
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
781
+ buttonGroupStyle :
782
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
783
+ buttonGroupStyleBeforeVisualRefresh
784
+ }, toolbarButtons.map(btn => {
785
+ return jsx(ToolbarButton, {
786
+ item: btn,
787
+ testId: String(btn.content),
788
+ ref: this.handleToolbarRef(btn.value.name),
789
+ key: btn.value.name,
808
790
  spacing: isReducedSpacing ? 'none' : 'default',
809
- disabled: isDisabled || ((_tableButton4 = tableButton) === null || _tableButton4 === void 0 ? void 0 : _tableButton4.isDisabled),
810
- iconBefore: (_tableButton5 = tableButton) === null || _tableButton5 === void 0 ? void 0 : _tableButton5.elemBefore,
811
- selected: ((_tableButton6 = tableButton) === null || _tableButton6 === void 0 ? void 0 : _tableButton6.isActive) || isTableSelectorOpen,
812
- title: (_tableButton7 = tableButton) === null || _tableButton7 === void 0 ? void 0 : _tableButton7.title,
813
- "aria-label": tableButton ? tableButton['aria-label'] : undefined,
814
- "aria-haspopup": tableButton ? tableButton['aria-haspopup'] : undefined,
815
- "aria-keyshortcuts": tableButton ? tableButton['aria-keyshortcuts'] : undefined,
791
+ disabled: isDisabled || btn.isDisabled,
792
+ iconBefore: btn.elemBefore,
793
+ selected: btn.value.name === 'emoji' && emojiPickerOpen || btn.isActive,
794
+ title: btn.title,
795
+ "aria-label": btn['aria-label'],
796
+ "aria-haspopup": btn['aria-haspopup'],
797
+ "aria-keyshortcuts": btn['aria-keyshortcuts'],
816
798
  onItemClick: this.insertToolbarMenuItem
817
- }), isTableButtonVisible && jsx(ToolbarButton
818
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
819
- , {
820
- className: "table-selector-toolbar-btn",
821
- item: tableSelectorButton,
822
- testId: String((_tableSelectorButton = tableSelectorButton) === null || _tableSelectorButton === void 0 ? void 0 : _tableSelectorButton.content),
823
- key: (_tableSelectorButton2 = tableSelectorButton) === null || _tableSelectorButton2 === void 0 ? void 0 : _tableSelectorButton2.value.name,
824
- ref: this.tableSelectorButtonRef,
825
- spacing: isReducedSpacing ? 'none' : 'default',
826
- disabled: isDisabled || ((_tableSelectorButton3 = tableSelectorButton) === null || _tableSelectorButton3 === void 0 ? void 0 : _tableSelectorButton3.isDisabled),
827
- iconBefore: (_tableSelectorButton4 = tableSelectorButton) === null || _tableSelectorButton4 === void 0 ? void 0 : _tableSelectorButton4.elemBefore,
828
- selected: ((_tableSelectorButton5 = tableSelectorButton) === null || _tableSelectorButton5 === void 0 ? void 0 : _tableSelectorButton5.isActive) || isTableSelectorOpen,
829
- title: (_tableSelectorButton6 = tableSelectorButton) === null || _tableSelectorButton6 === void 0 ? void 0 : _tableSelectorButton6.title,
830
- "aria-label": tableSelectorButton ? tableSelectorButton['aria-label'] : undefined,
831
- "aria-haspopup": tableSelectorButton ? tableSelectorButton['aria-haspopup'] : undefined,
832
- "aria-keyshortcuts": tableSelectorButton ? tableSelectorButton['aria-keyshortcuts'] : undefined,
833
- onItemClick: this.insertToolbarMenuItem,
834
- onKeyDown: this.handleTableSelectorOpenByKeyboard
835
- })), jsx("span", {
836
- css: wrapperStyle
837
- }, this.renderPopup(), this.renderTableSelectorPopup(), jsx(BlockInsertMenu, {
838
- popupsMountPoint: this.props.popupsMountPoint,
839
- popupsBoundariesElement: this.props.popupsBoundariesElement,
840
- popupsScrollableElement: this.props.popupsScrollableElement,
841
- disabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
842
- editorView: this.props.editorView,
843
- spacing: this.props.isReducedSpacing ? 'none' : 'default',
844
- label: this.props.intl.formatMessage(messages.insertMenu),
845
- open: editorExperiment('insert-menu-in-right-rail', true) ? !isFullPageAppearance && this.state.isPlusMenuOpen : this.state.isPlusMenuOpen,
846
- plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
847
- items: this.state.dropdownItems,
848
- onRef: this.handleDropDownButtonRef,
849
- onPlusButtonRef: this.handlePlusButtonRef,
850
- onClick: this.handleClick,
851
- onKeyDown: this.handleOpenByKeyboard,
852
- onItemActivated: this.insertInsertMenuItem,
853
- onInsert: this.insertInsertMenuItem,
854
- onOpenChange: this.onOpenChange,
855
- togglePlusMenuVisibility: this.togglePlusMenuVisibility,
856
- showElementBrowserLink: this.props.showElementBrowserLink || false,
857
- pluginInjectionApi: this.props.pluginInjectionApi,
858
- isFullPageAppearance: isFullPageAppearance
859
- })), !((_this$props$pluginInj7 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj7 !== void 0 && _this$props$pluginInj7.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
860
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
861
- jsx("span", {
862
- css: separatorStyles
863
- }))
864
- );
799
+ });
800
+ }), this.props.tableSelectorSupported && (isTableButtonVisible || isTableSizeVisible) && jsx("div", {
801
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
802
+ css: tableButtonWrapper({
803
+ isTableSelectorOpen,
804
+ isButtonDisabled: (_tableButton = tableButton) === null || _tableButton === void 0 ? void 0 : _tableButton.isDisabled
805
+ })
806
+ }, isTableButtonVisible && jsx(ToolbarButton
807
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
808
+ , {
809
+ className: "table-toolbar-btn",
810
+ item: tableButton,
811
+ ref: this.tableButtonRef,
812
+ testId: String((_tableButton2 = tableButton) === null || _tableButton2 === void 0 ? void 0 : _tableButton2.content),
813
+ key: (_tableButton3 = tableButton) === null || _tableButton3 === void 0 ? void 0 : _tableButton3.value.name,
814
+ spacing: isReducedSpacing ? 'none' : 'default',
815
+ disabled: isDisabled || ((_tableButton4 = tableButton) === null || _tableButton4 === void 0 ? void 0 : _tableButton4.isDisabled),
816
+ iconBefore: (_tableButton5 = tableButton) === null || _tableButton5 === void 0 ? void 0 : _tableButton5.elemBefore,
817
+ selected: ((_tableButton6 = tableButton) === null || _tableButton6 === void 0 ? void 0 : _tableButton6.isActive) || isTableSelectorOpen,
818
+ title: (_tableButton7 = tableButton) === null || _tableButton7 === void 0 ? void 0 : _tableButton7.title,
819
+ "aria-label": tableButton ? tableButton['aria-label'] : undefined,
820
+ "aria-haspopup": tableButton ? tableButton['aria-haspopup'] : undefined,
821
+ "aria-keyshortcuts": tableButton ? tableButton['aria-keyshortcuts'] : undefined,
822
+ onItemClick: this.insertToolbarMenuItem
823
+ }), isTableButtonVisible && jsx(ToolbarButton
824
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
825
+ , {
826
+ className: "table-selector-toolbar-btn",
827
+ item: tableSelectorButton,
828
+ testId: String((_tableSelectorButton = tableSelectorButton) === null || _tableSelectorButton === void 0 ? void 0 : _tableSelectorButton.content),
829
+ key: (_tableSelectorButton2 = tableSelectorButton) === null || _tableSelectorButton2 === void 0 ? void 0 : _tableSelectorButton2.value.name,
830
+ ref: this.tableSelectorButtonRef,
831
+ spacing: isReducedSpacing ? 'none' : 'default',
832
+ disabled: isDisabled || ((_tableSelectorButton3 = tableSelectorButton) === null || _tableSelectorButton3 === void 0 ? void 0 : _tableSelectorButton3.isDisabled),
833
+ iconBefore: (_tableSelectorButton4 = tableSelectorButton) === null || _tableSelectorButton4 === void 0 ? void 0 : _tableSelectorButton4.elemBefore,
834
+ selected: ((_tableSelectorButton5 = tableSelectorButton) === null || _tableSelectorButton5 === void 0 ? void 0 : _tableSelectorButton5.isActive) || isTableSelectorOpen,
835
+ title: (_tableSelectorButton6 = tableSelectorButton) === null || _tableSelectorButton6 === void 0 ? void 0 : _tableSelectorButton6.title,
836
+ "aria-label": tableSelectorButton ? tableSelectorButton['aria-label'] : undefined,
837
+ "aria-haspopup": tableSelectorButton ? tableSelectorButton['aria-haspopup'] : undefined,
838
+ "aria-keyshortcuts": tableSelectorButton ? tableSelectorButton['aria-keyshortcuts'] : undefined,
839
+ onItemClick: this.insertToolbarMenuItem,
840
+ onKeyDown: this.handleTableSelectorOpenByKeyboard
841
+ })), jsx("span", {
842
+ css: wrapperStyle
843
+ }, this.renderPopup(), this.renderTableSelectorPopup(), jsx(BlockInsertMenu, {
844
+ popupsMountPoint: this.props.popupsMountPoint,
845
+ popupsBoundariesElement: this.props.popupsBoundariesElement,
846
+ popupsScrollableElement: this.props.popupsScrollableElement,
847
+ disabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
848
+ editorView: this.props.editorView,
849
+ spacing: this.props.isReducedSpacing ? 'none' : 'default',
850
+ label: this.props.intl.formatMessage(messages.insertMenu),
851
+ open: editorExperiment('insert-menu-in-right-rail', true) ? !isFullPageAppearance && this.state.isPlusMenuOpen : this.state.isPlusMenuOpen,
852
+ plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
853
+ items: this.state.dropdownItems,
854
+ onRef: this.handleDropDownButtonRef,
855
+ onPlusButtonRef: this.handlePlusButtonRef,
856
+ onClick: this.handleClick,
857
+ onKeyDown: this.handleOpenByKeyboard,
858
+ onItemActivated: this.insertInsertMenuItem,
859
+ onInsert: this.insertInsertMenuItem,
860
+ onOpenChange: this.onOpenChange,
861
+ togglePlusMenuVisibility: this.togglePlusMenuVisibility,
862
+ showElementBrowserLink: this.props.showElementBrowserLink || false,
863
+ pluginInjectionApi: this.props.pluginInjectionApi,
864
+ isFullPageAppearance: isFullPageAppearance
865
+ })), !((_this$props$pluginInj7 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj7 !== void 0 && _this$props$pluginInj7.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
866
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
867
+ jsx("span", {
868
+ css: separatorStyles
869
+ }));
865
870
  }
866
871
  }
867
872
  export default injectIntl(ToolbarInsertBlock);
package/dist/es2019/ui/ToolbarInsertBlock/table-selector-popup.js CHANGED
@@ -31,6 +31,7 @@ const buttonStyles = css({
31
31
  }
32
32
  });
33
33
  const selectionSizeTextStyles = css({
34
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
34
35
  lineHeight: '14px',
35
36
  display: 'flex',
36
37
  justifyContent: 'center',
package/dist/esm/ui/ToolbarInsertBlock/block-insert-element-browser.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import React from 'react';
2
2
  import { Popup } from '@atlaskit/editor-common/ui';
3
- import { fg } from '@atlaskit/platform-feature-flags';
4
3
  import InsertMenu, { DEFAULT_HEIGHT } from '../ElementBrowser/InsertMenu';
5
4
  import { DropDownButton } from './dropdown-button';
6
5
  // This determines how the popup should fit. We prefer the insert menu
@@ -10,7 +9,7 @@ var FIT_HEIGHT_BUFFER = 100;
10
9
  export var BlockInsertElementBrowser = function BlockInsertElementBrowser(props) {
11
10
  return /*#__PURE__*/React.createElement(React.Fragment, null, props.open && /*#__PURE__*/React.createElement(Popup, {
12
11
  target: props.plusButtonRef,
13
- fitHeight: fg('platform_editor_consistent_insert_menu') ? DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER : 500,
12
+ fitHeight: DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER,
14
13
  fitWidth: 350,
15
14
  offset: [0, 3],
16
15
  mountTo: props.popupsMountPoint,
package/dist/esm/ui/ToolbarInsertBlock/index.js CHANGED
@@ -15,6 +15,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
15
15
  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) { _defineProperty(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; }
16
16
  function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
17
17
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
18
+ /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
18
19
  /**
19
20
  * @jsxRuntime classic
20
21
  * @jsx jsx
@@ -26,7 +27,7 @@ import { css, jsx } from '@emotion/react';
26
27
  import { injectIntl } from 'react-intl-next';
27
28
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
28
29
  import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
29
- import { buttonGroupStyle, separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
30
+ import { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh, separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
30
31
  import { Popup } from '@atlaskit/editor-common/ui';
31
32
  import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
32
33
  import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
@@ -34,7 +35,8 @@ import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
34
35
  import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
35
36
  // Ignored via go/ees005
36
37
  // eslint-disable-next-line import/no-namespace
37
- import * as colors from '@atlaskit/theme/colors';
38
+ import { fg } from '@atlaskit/platform-feature-flags';
39
+ import { N20A, N30A } from '@atlaskit/theme/colors';
38
40
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
39
41
  import { toggleInsertMenuRightRail } from '../../pm-plugins/commands';
40
42
  import { BlockInsertMenu } from './block-insert-menu';
@@ -52,7 +54,7 @@ var TABLE_SELECTOR_STRING = 'table selector';
52
54
 
53
55
  // TODO: Jenga team will create a component for a split button using this css
54
56
  var getHoverStyles = function getHoverStyles(selector) {
55
- return "&:hover ".concat(selector, " {\n background: ", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N20A, ")"), ";\n\n &:hover {\n background: ", "var(--ds-background-neutral-hovered, ".concat(colors.N30A, ")"), ";\n }\n }");
57
+ return "&:hover ".concat(selector, " {\n background: ", "var(--ds-background-neutral-subtle-hovered, ".concat(N20A, ")"), ";\n\n &:hover {\n background: ", "var(--ds-background-neutral-hovered, ".concat(N30A, ")"), ";\n }\n }");
56
58
  };
57
59
  var EmojiPicker = function EmojiPicker(props) {
58
60
  var setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
@@ -726,97 +728,100 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
726
728
  _iterator.f();
727
729
  }
728
730
  var isFullPageAppearance = ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '');
729
- return (
730
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
731
- jsx("span", {
732
- css: buttonGroupStyle
733
- }, toolbarButtons.map(function (btn) {
734
- return jsx(ToolbarButton, {
735
- item: btn,
736
- testId: String(btn.content),
737
- ref: _this3.handleToolbarRef(btn.value.name),
738
- key: btn.value.name,
739
- spacing: isReducedSpacing ? 'none' : 'default',
740
- disabled: isDisabled || btn.isDisabled,
741
- iconBefore: btn.elemBefore,
742
- selected: btn.value.name === 'emoji' && emojiPickerOpen || btn.isActive,
743
- title: btn.title,
744
- "aria-label": btn['aria-label'],
745
- "aria-haspopup": btn['aria-haspopup'],
746
- "aria-keyshortcuts": btn['aria-keyshortcuts'],
747
- onItemClick: _this3.insertToolbarMenuItem
748
- });
749
- }), this.props.tableSelectorSupported && (isTableButtonVisible || isTableSizeVisible) && jsx("div", {
750
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
751
- css: tableButtonWrapper({
752
- isTableSelectorOpen: isTableSelectorOpen,
753
- isButtonDisabled: (_tableButton = tableButton) === null || _tableButton === void 0 ? void 0 : _tableButton.isDisabled
754
- })
755
- }, isTableButtonVisible && jsx(ToolbarButton
756
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
757
- , {
758
- className: "table-toolbar-btn",
759
- item: tableButton,
760
- ref: this.tableButtonRef,
761
- testId: String((_tableButton2 = tableButton) === null || _tableButton2 === void 0 ? void 0 : _tableButton2.content),
762
- key: (_tableButton3 = tableButton) === null || _tableButton3 === void 0 ? void 0 : _tableButton3.value.name,
763
- spacing: isReducedSpacing ? 'none' : 'default',
764
- disabled: isDisabled || ((_tableButton4 = tableButton) === null || _tableButton4 === void 0 ? void 0 : _tableButton4.isDisabled),
765
- iconBefore: (_tableButton5 = tableButton) === null || _tableButton5 === void 0 ? void 0 : _tableButton5.elemBefore,
766
- selected: ((_tableButton6 = tableButton) === null || _tableButton6 === void 0 ? void 0 : _tableButton6.isActive) || isTableSelectorOpen,
767
- title: (_tableButton7 = tableButton) === null || _tableButton7 === void 0 ? void 0 : _tableButton7.title,
768
- "aria-label": tableButton ? tableButton['aria-label'] : undefined,
769
- "aria-haspopup": tableButton ? tableButton['aria-haspopup'] : undefined,
770
- "aria-keyshortcuts": tableButton ? tableButton['aria-keyshortcuts'] : undefined,
771
- onItemClick: this.insertToolbarMenuItem
772
- }), isTableButtonVisible && jsx(ToolbarButton
773
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
774
- , {
775
- className: "table-selector-toolbar-btn",
776
- item: tableSelectorButton,
777
- testId: String((_tableSelectorButton = tableSelectorButton) === null || _tableSelectorButton === void 0 ? void 0 : _tableSelectorButton.content),
778
- key: (_tableSelectorButton2 = tableSelectorButton) === null || _tableSelectorButton2 === void 0 ? void 0 : _tableSelectorButton2.value.name,
779
- ref: this.tableSelectorButtonRef,
731
+ return jsx("span", {
732
+ css:
733
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/platform/ensure-feature-flag-prefix
734
+ fg('platform-visual-refresh-icons') ?
735
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
736
+ buttonGroupStyle :
737
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
738
+ buttonGroupStyleBeforeVisualRefresh
739
+ }, toolbarButtons.map(function (btn) {
740
+ return jsx(ToolbarButton, {
741
+ item: btn,
742
+ testId: String(btn.content),
743
+ ref: _this3.handleToolbarRef(btn.value.name),
744
+ key: btn.value.name,
780
745
  spacing: isReducedSpacing ? 'none' : 'default',
781
- disabled: isDisabled || ((_tableSelectorButton3 = tableSelectorButton) === null || _tableSelectorButton3 === void 0 ? void 0 : _tableSelectorButton3.isDisabled),
782
- iconBefore: (_tableSelectorButton4 = tableSelectorButton) === null || _tableSelectorButton4 === void 0 ? void 0 : _tableSelectorButton4.elemBefore,
783
- selected: ((_tableSelectorButton5 = tableSelectorButton) === null || _tableSelectorButton5 === void 0 ? void 0 : _tableSelectorButton5.isActive) || isTableSelectorOpen,
784
- title: (_tableSelectorButton6 = tableSelectorButton) === null || _tableSelectorButton6 === void 0 ? void 0 : _tableSelectorButton6.title,
785
- "aria-label": tableSelectorButton ? tableSelectorButton['aria-label'] : undefined,
786
- "aria-haspopup": tableSelectorButton ? tableSelectorButton['aria-haspopup'] : undefined,
787
- "aria-keyshortcuts": tableSelectorButton ? tableSelectorButton['aria-keyshortcuts'] : undefined,
788
- onItemClick: this.insertToolbarMenuItem,
789
- onKeyDown: this.handleTableSelectorOpenByKeyboard
790
- })), jsx("span", {
791
- css: wrapperStyle
792
- }, this.renderPopup(), this.renderTableSelectorPopup(), jsx(BlockInsertMenu, {
793
- popupsMountPoint: this.props.popupsMountPoint,
794
- popupsBoundariesElement: this.props.popupsBoundariesElement,
795
- popupsScrollableElement: this.props.popupsScrollableElement,
796
- disabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
797
- editorView: this.props.editorView,
798
- spacing: this.props.isReducedSpacing ? 'none' : 'default',
799
- label: this.props.intl.formatMessage(messages.insertMenu),
800
- open: editorExperiment('insert-menu-in-right-rail', true) ? !isFullPageAppearance && this.state.isPlusMenuOpen : this.state.isPlusMenuOpen,
801
- plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
802
- items: this.state.dropdownItems,
803
- onRef: this.handleDropDownButtonRef,
804
- onPlusButtonRef: this.handlePlusButtonRef,
805
- onClick: this.handleClick,
806
- onKeyDown: this.handleOpenByKeyboard,
807
- onItemActivated: this.insertInsertMenuItem,
808
- onInsert: this.insertInsertMenuItem,
809
- onOpenChange: this.onOpenChange,
810
- togglePlusMenuVisibility: this.togglePlusMenuVisibility,
811
- showElementBrowserLink: this.props.showElementBrowserLink || false,
812
- pluginInjectionApi: this.props.pluginInjectionApi,
813
- isFullPageAppearance: isFullPageAppearance
814
- })), !((_this$props$pluginInj3 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj3 !== void 0 && _this$props$pluginInj3.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
815
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
816
- jsx("span", {
817
- css: separatorStyles
818
- }))
819
- );
746
+ disabled: isDisabled || btn.isDisabled,
747
+ iconBefore: btn.elemBefore,
748
+ selected: btn.value.name === 'emoji' && emojiPickerOpen || btn.isActive,
749
+ title: btn.title,
750
+ "aria-label": btn['aria-label'],
751
+ "aria-haspopup": btn['aria-haspopup'],
752
+ "aria-keyshortcuts": btn['aria-keyshortcuts'],
753
+ onItemClick: _this3.insertToolbarMenuItem
754
+ });
755
+ }), this.props.tableSelectorSupported && (isTableButtonVisible || isTableSizeVisible) && jsx("div", {
756
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
757
+ css: tableButtonWrapper({
758
+ isTableSelectorOpen: isTableSelectorOpen,
759
+ isButtonDisabled: (_tableButton = tableButton) === null || _tableButton === void 0 ? void 0 : _tableButton.isDisabled
760
+ })
761
+ }, isTableButtonVisible && jsx(ToolbarButton
762
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
763
+ , {
764
+ className: "table-toolbar-btn",
765
+ item: tableButton,
766
+ ref: this.tableButtonRef,
767
+ testId: String((_tableButton2 = tableButton) === null || _tableButton2 === void 0 ? void 0 : _tableButton2.content),
768
+ key: (_tableButton3 = tableButton) === null || _tableButton3 === void 0 ? void 0 : _tableButton3.value.name,
769
+ spacing: isReducedSpacing ? 'none' : 'default',
770
+ disabled: isDisabled || ((_tableButton4 = tableButton) === null || _tableButton4 === void 0 ? void 0 : _tableButton4.isDisabled),
771
+ iconBefore: (_tableButton5 = tableButton) === null || _tableButton5 === void 0 ? void 0 : _tableButton5.elemBefore,
772
+ selected: ((_tableButton6 = tableButton) === null || _tableButton6 === void 0 ? void 0 : _tableButton6.isActive) || isTableSelectorOpen,
773
+ title: (_tableButton7 = tableButton) === null || _tableButton7 === void 0 ? void 0 : _tableButton7.title,
774
+ "aria-label": tableButton ? tableButton['aria-label'] : undefined,
775
+ "aria-haspopup": tableButton ? tableButton['aria-haspopup'] : undefined,
776
+ "aria-keyshortcuts": tableButton ? tableButton['aria-keyshortcuts'] : undefined,
777
+ onItemClick: this.insertToolbarMenuItem
778
+ }), isTableButtonVisible && jsx(ToolbarButton
779
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
780
+ , {
781
+ className: "table-selector-toolbar-btn",
782
+ item: tableSelectorButton,
783
+ testId: String((_tableSelectorButton = tableSelectorButton) === null || _tableSelectorButton === void 0 ? void 0 : _tableSelectorButton.content),
784
+ key: (_tableSelectorButton2 = tableSelectorButton) === null || _tableSelectorButton2 === void 0 ? void 0 : _tableSelectorButton2.value.name,
785
+ ref: this.tableSelectorButtonRef,
786
+ spacing: isReducedSpacing ? 'none' : 'default',
787
+ disabled: isDisabled || ((_tableSelectorButton3 = tableSelectorButton) === null || _tableSelectorButton3 === void 0 ? void 0 : _tableSelectorButton3.isDisabled),
788
+ iconBefore: (_tableSelectorButton4 = tableSelectorButton) === null || _tableSelectorButton4 === void 0 ? void 0 : _tableSelectorButton4.elemBefore,
789
+ selected: ((_tableSelectorButton5 = tableSelectorButton) === null || _tableSelectorButton5 === void 0 ? void 0 : _tableSelectorButton5.isActive) || isTableSelectorOpen,
790
+ title: (_tableSelectorButton6 = tableSelectorButton) === null || _tableSelectorButton6 === void 0 ? void 0 : _tableSelectorButton6.title,
791
+ "aria-label": tableSelectorButton ? tableSelectorButton['aria-label'] : undefined,
792
+ "aria-haspopup": tableSelectorButton ? tableSelectorButton['aria-haspopup'] : undefined,
793
+ "aria-keyshortcuts": tableSelectorButton ? tableSelectorButton['aria-keyshortcuts'] : undefined,
794
+ onItemClick: this.insertToolbarMenuItem,
795
+ onKeyDown: this.handleTableSelectorOpenByKeyboard
796
+ })), jsx("span", {
797
+ css: wrapperStyle
798
+ }, this.renderPopup(), this.renderTableSelectorPopup(), jsx(BlockInsertMenu, {
799
+ popupsMountPoint: this.props.popupsMountPoint,
800
+ popupsBoundariesElement: this.props.popupsBoundariesElement,
801
+ popupsScrollableElement: this.props.popupsScrollableElement,
802
+ disabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
803
+ editorView: this.props.editorView,
804
+ spacing: this.props.isReducedSpacing ? 'none' : 'default',
805
+ label: this.props.intl.formatMessage(messages.insertMenu),
806
+ open: editorExperiment('insert-menu-in-right-rail', true) ? !isFullPageAppearance && this.state.isPlusMenuOpen : this.state.isPlusMenuOpen,
807
+ plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
808
+ items: this.state.dropdownItems,
809
+ onRef: this.handleDropDownButtonRef,
810
+ onPlusButtonRef: this.handlePlusButtonRef,
811
+ onClick: this.handleClick,
812
+ onKeyDown: this.handleOpenByKeyboard,
813
+ onItemActivated: this.insertInsertMenuItem,
814
+ onInsert: this.insertInsertMenuItem,
815
+ onOpenChange: this.onOpenChange,
816
+ togglePlusMenuVisibility: this.togglePlusMenuVisibility,
817
+ showElementBrowserLink: this.props.showElementBrowserLink || false,
818
+ pluginInjectionApi: this.props.pluginInjectionApi,
819
+ isFullPageAppearance: isFullPageAppearance
820
+ })), !((_this$props$pluginInj3 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj3 !== void 0 && _this$props$pluginInj3.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
821
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
822
+ jsx("span", {
823
+ css: separatorStyles
824
+ }));
820
825
  }
821
826
  }], [{
822
827
  key: "getDerivedStateFromProps",
package/dist/esm/ui/ToolbarInsertBlock/table-selector-popup.js CHANGED
@@ -31,6 +31,7 @@ var buttonStyles = css({
31
31
  }
32
32
  });
33
33
  var selectionSizeTextStyles = css({
34
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
34
35
  lineHeight: '14px',
35
36
  display: 'flex',
36
37
  justifyContent: 'center',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-insert-block",
3
- "version": "2.4.28",
3
+ "version": "2.4.30",
4
4
  "description": "Insert block plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -32,7 +32,7 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@atlaskit/button": "^20.3.0",
35
- "@atlaskit/editor-common": "^98.0.0",
35
+ "@atlaskit/editor-common": "^98.2.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.10.0",
37
37
  "@atlaskit/editor-plugin-block-type": "^4.1.0",
38
38
  "@atlaskit/editor-plugin-code-block": "^3.5.0",
@@ -47,26 +47,26 @@
47
47
  "@atlaskit/editor-plugin-layout": "^1.12.0",
48
48
  "@atlaskit/editor-plugin-media": "^1.43.0",
49
49
  "@atlaskit/editor-plugin-media-insert": "^4.0.0",
50
- "@atlaskit/editor-plugin-mentions": "^2.10.0",
50
+ "@atlaskit/editor-plugin-mentions": "^2.11.0",
51
51
  "@atlaskit/editor-plugin-panel": "^3.2.0",
52
52
  "@atlaskit/editor-plugin-placeholder-text": "^1.9.0",
53
53
  "@atlaskit/editor-plugin-primary-toolbar": "^2.1.0",
54
54
  "@atlaskit/editor-plugin-quick-insert": "^1.8.0",
55
55
  "@atlaskit/editor-plugin-rule": "^1.9.0",
56
56
  "@atlaskit/editor-plugin-status": "^2.6.0",
57
- "@atlaskit/editor-plugin-table": "^9.0.0",
57
+ "@atlaskit/editor-plugin-table": "^9.1.0",
58
58
  "@atlaskit/editor-plugin-tasks-and-decisions": "^2.12.0",
59
59
  "@atlaskit/editor-plugin-type-ahead": "^1.11.0",
60
60
  "@atlaskit/editor-prosemirror": "6.2.1",
61
61
  "@atlaskit/editor-shared-styles": "^3.2.0",
62
- "@atlaskit/emoji": "^67.11.0",
62
+ "@atlaskit/emoji": "^67.12.0",
63
63
  "@atlaskit/heading": "4.0.0",
64
- "@atlaskit/icon": "^23.1.0",
65
- "@atlaskit/icon-lab": "^2.0.0",
64
+ "@atlaskit/icon": "^23.2.0",
65
+ "@atlaskit/icon-lab": "^2.1.0",
66
66
  "@atlaskit/platform-feature-flags": "^0.3.0",
67
67
  "@atlaskit/primitives": "^13.3.0",
68
68
  "@atlaskit/theme": "^14.0.0",
69
- "@atlaskit/tmp-editor-statsig": "^2.31.0",
69
+ "@atlaskit/tmp-editor-statsig": "^2.33.0",
70
70
  "@atlaskit/tokens": "^2.5.0",
71
71
  "@atlaskit/tooltip": "19.0.0",
72
72
  "@babel/runtime": "^7.0.0",
@@ -130,9 +130,6 @@
130
130
  "platform_editor_toolbar_responsive_fixes": {
131
131
  "type": "boolean"
132
132
  },
133
- "platform_editor_consistent_insert_menu": {
134
- "type": "boolean"
135
- },
136
133
  "platform_editor_preload_insert_menu": {
137
134
  "type": "boolean"
138
135
  },