@atlaskit/editor-core 187.48.6 → 187.48.8

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 (142) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/labs/next/presets/default.js +2 -2
  3. package/dist/cjs/plugins/index.js +0 -7
  4. package/dist/cjs/version-wrapper.js +1 -1
  5. package/dist/es2019/labs/next/presets/default.js +1 -1
  6. package/dist/es2019/plugins/index.js +0 -1
  7. package/dist/es2019/version-wrapper.js +1 -1
  8. package/dist/esm/labs/next/presets/default.js +1 -1
  9. package/dist/esm/plugins/index.js +0 -1
  10. package/dist/esm/version-wrapper.js +1 -1
  11. package/dist/types/plugins/index.d.ts +0 -1
  12. package/dist/types/ui/Appearance/FullPage/StyledComponents.d.ts +1 -1
  13. package/dist/types/ui/ContentStyles/index.d.ts +2 -2
  14. package/dist/types-ts4.5/plugins/index.d.ts +0 -1
  15. package/dist/types-ts4.5/ui/Appearance/FullPage/StyledComponents.d.ts +1 -1
  16. package/dist/types-ts4.5/ui/ContentStyles/index.d.ts +2 -2
  17. package/package.json +7 -3
  18. package/dist/cjs/plugins/floating-toolbar/index.js +0 -386
  19. package/dist/cjs/plugins/floating-toolbar/pm-plugins/force-focus/index.js +0 -73
  20. package/dist/cjs/plugins/floating-toolbar/pm-plugins/toolbar-data/commands.js +0 -26
  21. package/dist/cjs/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin-factory.js +0 -16
  22. package/dist/cjs/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin-key.js +0 -9
  23. package/dist/cjs/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin.js +0 -16
  24. package/dist/cjs/plugins/floating-toolbar/pm-plugins/toolbar-data/reducer.js +0 -25
  25. package/dist/cjs/plugins/floating-toolbar/pm-plugins/toolbar-data/types.js +0 -5
  26. package/dist/cjs/plugins/floating-toolbar/ui/CheckboxModal.js +0 -83
  27. package/dist/cjs/plugins/floating-toolbar/ui/ConfirmationModal.js +0 -22
  28. package/dist/cjs/plugins/floating-toolbar/ui/Dropdown.js +0 -208
  29. package/dist/cjs/plugins/floating-toolbar/ui/DropdownMenu.js +0 -205
  30. package/dist/cjs/plugins/floating-toolbar/ui/EditorEmojiAddIcon.js +0 -32
  31. package/dist/cjs/plugins/floating-toolbar/ui/EmojiPickerButton.js +0 -120
  32. package/dist/cjs/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js +0 -179
  33. package/dist/cjs/plugins/floating-toolbar/ui/Input.js +0 -78
  34. package/dist/cjs/plugins/floating-toolbar/ui/ScrollButtons.js +0 -152
  35. package/dist/cjs/plugins/floating-toolbar/ui/Select.js +0 -74
  36. package/dist/cjs/plugins/floating-toolbar/ui/Separator.js +0 -9
  37. package/dist/cjs/plugins/floating-toolbar/ui/SimpleModal.js +0 -42
  38. package/dist/cjs/plugins/floating-toolbar/ui/Toolbar.js +0 -427
  39. package/dist/cjs/plugins/floating-toolbar/ui/ToolbarLoader.js +0 -25
  40. package/dist/cjs/plugins/floating-toolbar/ui/messages.js +0 -55
  41. package/dist/cjs/plugins/floating-toolbar/ui/styles.js +0 -79
  42. package/dist/cjs/plugins/floating-toolbar/utils.js +0 -22
  43. package/dist/es2019/plugins/floating-toolbar/index.js +0 -368
  44. package/dist/es2019/plugins/floating-toolbar/pm-plugins/force-focus/index.js +0 -63
  45. package/dist/es2019/plugins/floating-toolbar/pm-plugins/toolbar-data/commands.js +0 -10
  46. package/dist/es2019/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin-factory.js +0 -8
  47. package/dist/es2019/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin-key.js +0 -2
  48. package/dist/es2019/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin.js +0 -9
  49. package/dist/es2019/plugins/floating-toolbar/pm-plugins/toolbar-data/reducer.js +0 -16
  50. package/dist/es2019/plugins/floating-toolbar/pm-plugins/toolbar-data/types.js +0 -1
  51. package/dist/es2019/plugins/floating-toolbar/ui/CheckboxModal.js +0 -71
  52. package/dist/es2019/plugins/floating-toolbar/ui/ConfirmationModal.js +0 -13
  53. package/dist/es2019/plugins/floating-toolbar/ui/Dropdown.js +0 -180
  54. package/dist/es2019/plugins/floating-toolbar/ui/DropdownMenu.js +0 -191
  55. package/dist/es2019/plugins/floating-toolbar/ui/EditorEmojiAddIcon.js +0 -25
  56. package/dist/es2019/plugins/floating-toolbar/ui/EmojiPickerButton.js +0 -107
  57. package/dist/es2019/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js +0 -100
  58. package/dist/es2019/plugins/floating-toolbar/ui/Input.js +0 -52
  59. package/dist/es2019/plugins/floating-toolbar/ui/ScrollButtons.js +0 -137
  60. package/dist/es2019/plugins/floating-toolbar/ui/Select.js +0 -62
  61. package/dist/es2019/plugins/floating-toolbar/ui/Separator.js +0 -2
  62. package/dist/es2019/plugins/floating-toolbar/ui/SimpleModal.js +0 -35
  63. package/dist/es2019/plugins/floating-toolbar/ui/Toolbar.js +0 -419
  64. package/dist/es2019/plugins/floating-toolbar/ui/ToolbarLoader.js +0 -6
  65. package/dist/es2019/plugins/floating-toolbar/ui/messages.js +0 -48
  66. package/dist/es2019/plugins/floating-toolbar/ui/styles.js +0 -64
  67. package/dist/es2019/plugins/floating-toolbar/utils.js +0 -16
  68. package/dist/esm/plugins/floating-toolbar/index.js +0 -375
  69. package/dist/esm/plugins/floating-toolbar/pm-plugins/force-focus/index.js +0 -64
  70. package/dist/esm/plugins/floating-toolbar/pm-plugins/toolbar-data/commands.js +0 -18
  71. package/dist/esm/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin-factory.js +0 -8
  72. package/dist/esm/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin-key.js +0 -2
  73. package/dist/esm/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin.js +0 -9
  74. package/dist/esm/plugins/floating-toolbar/pm-plugins/toolbar-data/reducer.js +0 -17
  75. package/dist/esm/plugins/floating-toolbar/pm-plugins/toolbar-data/types.js +0 -1
  76. package/dist/esm/plugins/floating-toolbar/ui/CheckboxModal.js +0 -72
  77. package/dist/esm/plugins/floating-toolbar/ui/ConfirmationModal.js +0 -14
  78. package/dist/esm/plugins/floating-toolbar/ui/Dropdown.js +0 -199
  79. package/dist/esm/plugins/floating-toolbar/ui/DropdownMenu.js +0 -197
  80. package/dist/esm/plugins/floating-toolbar/ui/EditorEmojiAddIcon.js +0 -25
  81. package/dist/esm/plugins/floating-toolbar/ui/EmojiPickerButton.js +0 -113
  82. package/dist/esm/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js +0 -168
  83. package/dist/esm/plugins/floating-toolbar/ui/Input.js +0 -70
  84. package/dist/esm/plugins/floating-toolbar/ui/ScrollButtons.js +0 -141
  85. package/dist/esm/plugins/floating-toolbar/ui/Select.js +0 -64
  86. package/dist/esm/plugins/floating-toolbar/ui/Separator.js +0 -2
  87. package/dist/esm/plugins/floating-toolbar/ui/SimpleModal.js +0 -31
  88. package/dist/esm/plugins/floating-toolbar/ui/Toolbar.js +0 -417
  89. package/dist/esm/plugins/floating-toolbar/ui/ToolbarLoader.js +0 -12
  90. package/dist/esm/plugins/floating-toolbar/ui/messages.js +0 -48
  91. package/dist/esm/plugins/floating-toolbar/ui/styles.js +0 -68
  92. package/dist/esm/plugins/floating-toolbar/utils.js +0 -16
  93. package/dist/types/plugins/floating-toolbar/index.d.ts +0 -13
  94. package/dist/types/plugins/floating-toolbar/pm-plugins/force-focus/index.d.ts +0 -21
  95. package/dist/types/plugins/floating-toolbar/pm-plugins/toolbar-data/commands.d.ts +0 -3
  96. package/dist/types/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin-factory.d.ts +0 -1
  97. package/dist/types/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin-key.d.ts +0 -3
  98. package/dist/types/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin.d.ts +0 -3
  99. package/dist/types/plugins/floating-toolbar/pm-plugins/toolbar-data/reducer.d.ts +0 -3
  100. package/dist/types/plugins/floating-toolbar/pm-plugins/toolbar-data/types.d.ts +0 -8
  101. package/dist/types/plugins/floating-toolbar/ui/CheckboxModal.d.ts +0 -4
  102. package/dist/types/plugins/floating-toolbar/ui/ConfirmationModal.d.ts +0 -6
  103. package/dist/types/plugins/floating-toolbar/ui/Dropdown.d.ts +0 -41
  104. package/dist/types/plugins/floating-toolbar/ui/DropdownMenu.d.ts +0 -29
  105. package/dist/types/plugins/floating-toolbar/ui/EditorEmojiAddIcon.d.ts +0 -2
  106. package/dist/types/plugins/floating-toolbar/ui/EmojiPickerButton.d.ts +0 -15
  107. package/dist/types/plugins/floating-toolbar/ui/ExtensionsPlaceholder.d.ts +0 -16
  108. package/dist/types/plugins/floating-toolbar/ui/Input.d.ts +0 -23
  109. package/dist/types/plugins/floating-toolbar/ui/ScrollButtons.d.ts +0 -13
  110. package/dist/types/plugins/floating-toolbar/ui/Select.d.ts +0 -21
  111. package/dist/types/plugins/floating-toolbar/ui/Separator.d.ts +0 -2
  112. package/dist/types/plugins/floating-toolbar/ui/SimpleModal.d.ts +0 -4
  113. package/dist/types/plugins/floating-toolbar/ui/Toolbar.d.ts +0 -44
  114. package/dist/types/plugins/floating-toolbar/ui/ToolbarLoader.d.ts +0 -4
  115. package/dist/types/plugins/floating-toolbar/ui/messages.d.ts +0 -48
  116. package/dist/types/plugins/floating-toolbar/ui/styles.d.ts +0 -20
  117. package/dist/types/plugins/floating-toolbar/utils.d.ts +0 -2
  118. package/dist/types-ts4.5/plugins/floating-toolbar/index.d.ts +0 -13
  119. package/dist/types-ts4.5/plugins/floating-toolbar/pm-plugins/force-focus/index.d.ts +0 -21
  120. package/dist/types-ts4.5/plugins/floating-toolbar/pm-plugins/toolbar-data/commands.d.ts +0 -3
  121. package/dist/types-ts4.5/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin-factory.d.ts +0 -1
  122. package/dist/types-ts4.5/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin-key.d.ts +0 -3
  123. package/dist/types-ts4.5/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin.d.ts +0 -3
  124. package/dist/types-ts4.5/plugins/floating-toolbar/pm-plugins/toolbar-data/reducer.d.ts +0 -3
  125. package/dist/types-ts4.5/plugins/floating-toolbar/pm-plugins/toolbar-data/types.d.ts +0 -8
  126. package/dist/types-ts4.5/plugins/floating-toolbar/ui/CheckboxModal.d.ts +0 -4
  127. package/dist/types-ts4.5/plugins/floating-toolbar/ui/ConfirmationModal.d.ts +0 -6
  128. package/dist/types-ts4.5/plugins/floating-toolbar/ui/Dropdown.d.ts +0 -41
  129. package/dist/types-ts4.5/plugins/floating-toolbar/ui/DropdownMenu.d.ts +0 -29
  130. package/dist/types-ts4.5/plugins/floating-toolbar/ui/EditorEmojiAddIcon.d.ts +0 -2
  131. package/dist/types-ts4.5/plugins/floating-toolbar/ui/EmojiPickerButton.d.ts +0 -15
  132. package/dist/types-ts4.5/plugins/floating-toolbar/ui/ExtensionsPlaceholder.d.ts +0 -16
  133. package/dist/types-ts4.5/plugins/floating-toolbar/ui/Input.d.ts +0 -23
  134. package/dist/types-ts4.5/plugins/floating-toolbar/ui/ScrollButtons.d.ts +0 -13
  135. package/dist/types-ts4.5/plugins/floating-toolbar/ui/Select.d.ts +0 -21
  136. package/dist/types-ts4.5/plugins/floating-toolbar/ui/Separator.d.ts +0 -2
  137. package/dist/types-ts4.5/plugins/floating-toolbar/ui/SimpleModal.d.ts +0 -4
  138. package/dist/types-ts4.5/plugins/floating-toolbar/ui/Toolbar.d.ts +0 -44
  139. package/dist/types-ts4.5/plugins/floating-toolbar/ui/ToolbarLoader.d.ts +0 -4
  140. package/dist/types-ts4.5/plugins/floating-toolbar/ui/messages.d.ts +0 -48
  141. package/dist/types-ts4.5/plugins/floating-toolbar/ui/styles.d.ts +0 -20
  142. package/dist/types-ts4.5/plugins/floating-toolbar/utils.d.ts +0 -2
@@ -1,72 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
- import React, { useState } from 'react';
4
- import Button from '@atlaskit/button/standard-button';
5
- import { Checkbox } from '@atlaskit/checkbox';
6
- import Modal, { ModalBody, ModalTitle, ModalHeader, ModalFooter } from '@atlaskit/modal-dialog';
7
- import messages from './messages';
8
- export var CheckboxModal = function CheckboxModal(props) {
9
- var _options$getChildrenI;
10
- var _useState = useState(false),
11
- _useState2 = _slicedToArray(_useState, 2),
12
- isChecked = _useState2[0],
13
- setCheckbox = _useState2[1];
14
- var onConfirm = props.onConfirm,
15
- onClose = props.onClose,
16
- options = props.options,
17
- formatMessage = props.intl.formatMessage,
18
- testId = props.testId;
19
- var heading = (options === null || options === void 0 ? void 0 : options.title) || formatMessage(messages.confirmModalDefaultHeading);
20
- var okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(messages.confirmModalOK);
21
- var cancelButtonLabel = (options === null || options === void 0 ? void 0 : options.cancelButtonLabel) || formatMessage(messages.confirmModalCancel);
22
- var checkboxlabel = options === null || options === void 0 ? void 0 : options.checkboxLabel;
23
- var childrenInfo = options === null || options === void 0 ? void 0 : (_options$getChildrenI = options.getChildrenInfo) === null || _options$getChildrenI === void 0 ? void 0 : _options$getChildrenI.call(options);
24
- var ListComponent = function ListComponent(_ref) {
25
- var nodes = _ref.nodes;
26
- if (nodes.length === 0) {
27
- return null;
28
- }
29
- return /*#__PURE__*/React.createElement("ul", null, nodes.map(function (node) {
30
- return /*#__PURE__*/React.createElement(ListItem, _extends({}, node, {
31
- key: node.id
32
- }));
33
- }));
34
- };
35
- var ListItem = function ListItem(props) {
36
- var id = props.id,
37
- name = props.name,
38
- amount = props.amount;
39
- return /*#__PURE__*/React.createElement("li", {
40
- id: id
41
- }, formatMessage(messages.confirmModalListUnit, {
42
- name: name,
43
- amount: amount
44
- }));
45
- };
46
- return /*#__PURE__*/React.createElement(Modal, {
47
- onClose: onClose,
48
- testId: testId
49
- }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
50
- appearance: "warning"
51
- }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, options === null || options === void 0 ? void 0 : options.message), !!(childrenInfo !== null && childrenInfo !== void 0 && childrenInfo.length) && /*#__PURE__*/React.createElement(ListComponent, {
52
- nodes: childrenInfo
53
- }), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Checkbox, {
54
- isChecked: isChecked,
55
- onChange: function onChange() {
56
- return setCheckbox(!isChecked);
57
- },
58
- label: checkboxlabel,
59
- testId: testId ? "".concat(testId, "-checkbox") : undefined
60
- }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
61
- appearance: "default",
62
- onClick: onClose,
63
- testId: testId ? "".concat(testId, "-cancel-button") : undefined
64
- }, cancelButtonLabel), /*#__PURE__*/React.createElement(Button, {
65
- appearance: "warning",
66
- onClick: function onClick() {
67
- onConfirm(isChecked);
68
- onClose();
69
- },
70
- testId: testId ? "".concat(testId, "-confirm-button") : undefined
71
- }, okButtonLabel)));
72
- };
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- import { injectIntl } from 'react-intl-next';
3
- import { SimpleModal } from './SimpleModal';
4
- import { CheckboxModal } from './CheckboxModal';
5
- import { ModalTransition } from '@atlaskit/modal-dialog';
6
- var ConfirmationModalImpl = function ConfirmationModalImpl(props) {
7
- var options = props.options;
8
- var renderModel = function renderModel() {
9
- var isReferentialityDialog = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
10
- return isReferentialityDialog ? /*#__PURE__*/React.createElement(CheckboxModal, props) : /*#__PURE__*/React.createElement(SimpleModal, props);
11
- };
12
- return options ? /*#__PURE__*/React.createElement(ModalTransition, null, renderModel(options === null || options === void 0 ? void 0 : options.isReferentialityDialog)) : null;
13
- };
14
- export var ConfirmationModal = injectIntl(ConfirmationModalImpl);
@@ -1,199 +0,0 @@
1
- import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2
- import _createClass from "@babel/runtime/helpers/createClass";
3
- import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
4
- import _inherits from "@babel/runtime/helpers/inherits";
5
- import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
6
- import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
7
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
8
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
9
- var _templateObject, _templateObject2;
10
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
11
- 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; }
12
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
13
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
14
- /** @jsx jsx */
15
-
16
- import React, { Component } from 'react';
17
- import { css, jsx } from '@emotion/react';
18
- import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
19
- import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
20
- import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
21
- import DropdownMenu, { itemSpacing, menuItemDimensions } from './DropdownMenu';
22
- var dropdownExpandContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin: 0px ", ";\n"])), "var(--ds-space-negative-050, -4px)");
23
- var iconGroup = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n"])));
24
- var CompositeIcon = function CompositeIcon(_ref) {
25
- var icon = _ref.icon;
26
- return jsx("div", {
27
- css: iconGroup
28
- }, icon, jsx("span", {
29
- css: dropdownExpandContainer
30
- }, jsx(ExpandIcon, {
31
- label: "Expand dropdown menu"
32
- })));
33
- };
34
- var Dropdown = /*#__PURE__*/function (_Component) {
35
- _inherits(Dropdown, _Component);
36
- var _super = _createSuper(Dropdown);
37
- function Dropdown() {
38
- var _this;
39
- _classCallCheck(this, Dropdown);
40
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
41
- args[_key] = arguments[_key];
42
- }
43
- _this = _super.call.apply(_super, [this].concat(args));
44
- _defineProperty(_assertThisInitialized(_this), "state", {
45
- isOpen: false,
46
- isOpenedByKeyboard: false
47
- });
48
- _defineProperty(_assertThisInitialized(_this), "triggerRef", /*#__PURE__*/React.createRef());
49
- _defineProperty(_assertThisInitialized(_this), "renderArrayOptions", function (options) {
50
- var _this$props = _this.props,
51
- showSelected = _this$props.showSelected,
52
- dispatchCommand = _this$props.dispatchCommand,
53
- editorView = _this$props.editorView;
54
- return jsx(DropdownMenu, {
55
- hide: _this.hide,
56
- dispatchCommand: dispatchCommand,
57
- items: options,
58
- showSelected: showSelected,
59
- editorView: editorView
60
- });
61
- });
62
- _defineProperty(_assertThisInitialized(_this), "toggleOpen", function () {
63
- _this.setState({
64
- isOpen: !_this.state.isOpen,
65
- isOpenedByKeyboard: false
66
- });
67
- });
68
- _defineProperty(_assertThisInitialized(_this), "toggleOpenByKeyboard", function (event) {
69
- if (event.key === 'Enter' || event.key === ' ') {
70
- event.preventDefault();
71
- _this.setState({
72
- isOpen: !_this.state.isOpen,
73
- isOpenedByKeyboard: true
74
- });
75
- }
76
- });
77
- _defineProperty(_assertThisInitialized(_this), "hide", function () {
78
- _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
79
- isOpen: false
80
- }));
81
- });
82
- _defineProperty(_assertThisInitialized(_this), "hideOnEsc", function () {
83
- var _document$querySelect;
84
- // Focus the trigger button only on Escape
85
- // Focus is done before hiding to ensure onBlur is called
86
- (_document$querySelect = document.querySelector("[data-testid=".concat(_this.props.buttonTestId, "]"))) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.focus();
87
- _this.hide();
88
- });
89
- _defineProperty(_assertThisInitialized(_this), "onOpenChanged", function (openChangedEvent) {
90
- if (!openChangedEvent.isOpen && openChangedEvent.event instanceof KeyboardEvent) {
91
- var _openChangedEvent$eve;
92
- ((_openChangedEvent$eve = openChangedEvent.event) === null || _openChangedEvent$eve === void 0 ? void 0 : _openChangedEvent$eve.key) === 'Escape' ? _this.hideOnEsc() : _this.hide();
93
- }
94
- });
95
- return _this;
96
- }
97
- _createClass(Dropdown, [{
98
- key: "render",
99
- value: function render() {
100
- var isOpen = this.state.isOpen;
101
- var _this$props2 = this.props,
102
- title = _this$props2.title,
103
- icon = _this$props2.icon,
104
- options = _this$props2.options,
105
- dispatchCommand = _this$props2.dispatchCommand,
106
- mountPoint = _this$props2.mountPoint,
107
- boundariesElement = _this$props2.boundariesElement,
108
- scrollableElement = _this$props2.scrollableElement,
109
- hideExpandIcon = _this$props2.hideExpandIcon,
110
- disabled = _this$props2.disabled,
111
- tooltip = _this$props2.tooltip,
112
- buttonTestId = _this$props2.buttonTestId,
113
- dropdownWidth = _this$props2.dropdownWidth,
114
- dropdownListId = _this$props2.dropdownListId,
115
- alignDropdownWithToolbar = _this$props2.alignDropdownWithToolbar;
116
- var trigger;
117
- if (icon) {
118
- var TriggerIcon = hideExpandIcon ? icon : jsx(CompositeIcon, {
119
- icon: icon
120
- });
121
- trigger = jsx(Button, {
122
- testId: buttonTestId,
123
- title: title,
124
- icon: TriggerIcon,
125
- onClick: this.toggleOpen,
126
- onKeyDown: this.toggleOpenByKeyboard,
127
- selected: isOpen,
128
- disabled: disabled,
129
- tooltipContent: tooltip
130
- });
131
- } else {
132
- trigger = jsx(Button, {
133
- testId: buttonTestId,
134
- iconAfter: jsx("span", {
135
- css: dropdownExpandContainer
136
- }, jsx(ExpandIcon, {
137
- label: "Expand dropdown menu"
138
- })),
139
- onClick: this.toggleOpen,
140
- onKeyDown: this.toggleOpenByKeyboard,
141
- selected: isOpen,
142
- disabled: disabled,
143
- tooltipContent: tooltip,
144
- ariaHasPopup: true,
145
- areaControls: dropdownListId
146
- }, title);
147
- }
148
-
149
- /**
150
- * We want to change direction of our dropdowns a bit early,
151
- * not exactly when it hits the boundary.
152
- */
153
- var fitTolerance = 10;
154
- var fitWidth = Array.isArray(options) ? dropdownWidth || menuItemDimensions.width : options.width;
155
- var fitHeight = Array.isArray(options) ? options.length * menuItemDimensions.height + itemSpacing * 2 : options.height;
156
- return jsx(UiDropdown, {
157
- mountTo: mountPoint,
158
- boundariesElement: boundariesElement,
159
- scrollableElement: scrollableElement,
160
- isOpen: isOpen,
161
- handleClickOutside: this.hide,
162
- handleEscapeKeydown: this.hideOnEsc,
163
- onOpenChange: this.onOpenChanged,
164
- fitWidth: fitWidth + fitTolerance,
165
- fitHeight: fitHeight + fitTolerance,
166
- trigger: trigger,
167
- dropdownListId: dropdownListId,
168
- alignDropdownWithParentElement: alignDropdownWithToolbar,
169
- arrowKeyNavigationProviderOptions: {
170
- type: ArrowKeyNavigationType.MENU
171
- }
172
- }, Array.isArray(options) ? this.renderArrayOptions(options) : options.render({
173
- hide: this.hide,
174
- dispatchCommand: dispatchCommand
175
- }));
176
- }
177
- }, {
178
- key: "componentDidUpdate",
179
- value: function componentDidUpdate(prevProps, prevState) {
180
- if (prevState.isOpen !== this.state.isOpen) {
181
- if (this.props.setDisableParentScroll) {
182
- this.props.setDisableParentScroll(this.state.isOpen);
183
- }
184
- if (this.state.isOpen && this.state.isOpenedByKeyboard) {
185
- var dropList = document.querySelector('[data-role="droplistContent"]');
186
- if (dropList) {
187
- var keyboardEvent = new KeyboardEvent('keydown', {
188
- bubbles: true,
189
- key: 'ArrowDown'
190
- });
191
- dropList.dispatchEvent(keyboardEvent);
192
- }
193
- }
194
- }
195
- }
196
- }]);
197
- return Dropdown;
198
- }(Component);
199
- export { Dropdown as default };
@@ -1,197 +0,0 @@
1
- import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2
- import _createClass from "@babel/runtime/helpers/createClass";
3
- import _inherits from "@babel/runtime/helpers/inherits";
4
- import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
5
- import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
6
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
7
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
8
- var _templateObject, _templateObject2, _templateObject3;
9
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
10
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
11
- /** @jsx jsx */
12
- import { useState, useCallback, useEffect, createRef } from 'react';
13
- import { css, jsx } from '@emotion/react';
14
- import { Component } from 'react';
15
- // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
16
- import { gridSize } from '@atlaskit/theme/constants';
17
- import { B400 } from '@atlaskit/theme/colors';
18
- import { ButtonItem } from '@atlaskit/menu';
19
- import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
20
- import Tooltip from '@atlaskit/tooltip';
21
- import { injectIntl } from 'react-intl-next';
22
- import messages from './messages';
23
- export var menuItemDimensions = {
24
- width: 175,
25
- height: 32
26
- };
27
- var spacer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n padding: ", ";\n"])), "var(--ds-space-100, 8px)");
28
- var menuContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n min-width: ", "px;\n\n // temporary solution to retain spacing defined by @atlaskit/Item\n & button {\n min-height: ", ";\n padding: ", " ", " 7px;\n\n & > [data-item-elem-before] {\n margin-right: ", ";\n }\n }\n"])), menuItemDimensions.width, "var(--ds-space-400, 32px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)");
29
- var label = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: inline-block;\n width: 100%;\n"])));
30
-
31
- // TODO: Migrate away from gridSize
32
- // Recommendation: Replace with 4 as itemSpacing is used in calculations expecting a number
33
- export var itemSpacing = gridSize() / 2;
34
-
35
- // Extend the ButtonItem component type to allow mouse events to be accepted from the Typescript check
36
-
37
- var DropdownButtonItem = ButtonItem;
38
- var DropdownMenuItem = function DropdownMenuItem(_ref) {
39
- var item = _ref.item,
40
- hide = _ref.hide,
41
- dispatchCommand = _ref.dispatchCommand,
42
- editorView = _ref.editorView,
43
- iconBefore = _ref.iconBefore;
44
- var _useState = useState(item.tooltip || ''),
45
- _useState2 = _slicedToArray(_useState, 2),
46
- tooltipContent = _useState2[0],
47
- setTooltipContent = _useState2[1];
48
- var handleItemMouseOut = useCallback(function () {
49
- setTooltipContent('');
50
- if (item.onMouseOut) {
51
- dispatchCommand(item.onMouseOut);
52
- }
53
- }, [item.onMouseOut, dispatchCommand]);
54
- var handleItemMouseDown = useCallback(function (e) {
55
- e.preventDefault(); // ED-16204 - This is needed for safari to get handleItemClick() to work
56
- if (item.onMouseDown) {
57
- dispatchCommand(item.onMouseDown);
58
- }
59
- }, [item.onMouseDown, dispatchCommand]);
60
- var handleItemMouseOver = useCallback(function () {
61
- setTooltipContent(item.tooltip || '');
62
- if (item.onMouseOver) {
63
- dispatchCommand(item.onMouseOver);
64
- }
65
- }, [item.tooltip, item.onMouseOver, dispatchCommand]);
66
- var handleItemMouseEnter = useCallback(function (e) {
67
- if (item.onMouseEnter) {
68
- e.preventDefault();
69
- dispatchCommand(item.onMouseEnter);
70
- }
71
- }, [item.onMouseEnter, dispatchCommand]);
72
- var handleItemMouseLeave = useCallback(function (e) {
73
- if (item.onMouseLeave) {
74
- e.preventDefault();
75
- dispatchCommand(item.onMouseLeave);
76
- }
77
- }, [item.onMouseLeave, dispatchCommand]);
78
- var handleItemOnFocus = useCallback(function (e) {
79
- if (item.onFocus) {
80
- e.preventDefault();
81
- dispatchCommand(item.onFocus);
82
- }
83
- }, [item.onFocus, dispatchCommand]);
84
- var handleItemOnBlur = useCallback(function (e) {
85
- if (item.onBlur) {
86
- e.preventDefault();
87
- dispatchCommand(item.onBlur);
88
- }
89
- }, [item.onBlur, dispatchCommand]);
90
- var handleItemClick = useCallback(function () {
91
- /**
92
- * The order of dispatching the event and hide() is important, because
93
- * the ClickAreaBlock will be relying on the element to calculate the
94
- * click coordinate.
95
- * For more details, please visit the comment in this PR https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5328/edm-1321-set-selection-near-smart-link?link_source=email#chg-packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
96
- */
97
- dispatchCommand(item.onClick);
98
- hide();
99
- if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
100
- editorView === null || editorView === void 0 ? void 0 : editorView.focus();
101
- }
102
- }, [dispatchCommand, item.onClick, hide, editorView]);
103
-
104
- /* ED-16704 - Native mouse event handler to overcome firefox issue on disabled <button> - https://github.com/whatwg/html/issues/5886 */
105
- var labelRef = /*#__PURE__*/createRef();
106
- var handleTitleWrapperMouseEvent = useCallback(function (e) {
107
- if (item.disabled) {
108
- e.stopPropagation();
109
- e.preventDefault();
110
- }
111
- }, [item.disabled]);
112
- useEffect(function () {
113
- var labelRefCurrent = labelRef.current;
114
- labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.addEventListener('click', handleTitleWrapperMouseEvent);
115
- labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.addEventListener('mousedown', handleTitleWrapperMouseEvent);
116
- return function () {
117
- labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.removeEventListener('click', handleTitleWrapperMouseEvent);
118
- labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.removeEventListener('mousedown', handleTitleWrapperMouseEvent);
119
- };
120
- });
121
- var itemContent = jsx(DropdownButtonItem, {
122
- iconBefore: iconBefore,
123
- iconAfter: item.elemAfter,
124
- onClick: handleItemClick,
125
- "data-testid": item.testId,
126
- isDisabled: item.disabled,
127
- onMouseDown: handleItemMouseDown,
128
- onMouseOver: handleItemMouseOver,
129
- onMouseEnter: handleItemMouseEnter,
130
- onMouseLeave: handleItemMouseLeave,
131
- onMouseOut: handleItemMouseOut,
132
- onFocus: handleItemOnFocus,
133
- onBlur: handleItemOnBlur
134
- }, jsx("span", {
135
- ref: labelRef,
136
- css: label
137
- }, item.title));
138
- if (tooltipContent) {
139
- return jsx(Tooltip, {
140
- content: tooltipContent
141
- }, itemContent);
142
- }
143
- return itemContent;
144
- };
145
- var Dropdown = /*#__PURE__*/function (_Component) {
146
- _inherits(Dropdown, _Component);
147
- var _super = _createSuper(Dropdown);
148
- function Dropdown() {
149
- _classCallCheck(this, Dropdown);
150
- return _super.apply(this, arguments);
151
- }
152
- _createClass(Dropdown, [{
153
- key: "render",
154
- value: function render() {
155
- var _this = this;
156
- var _this$props = this.props,
157
- hide = _this$props.hide,
158
- dispatchCommand = _this$props.dispatchCommand,
159
- items = _this$props.items,
160
- intl = _this$props.intl,
161
- editorView = _this$props.editorView;
162
- return jsx("div", {
163
- css: menuContainer
164
- }, items.filter(function (item) {
165
- return !item.hidden;
166
- }).map(function (item, idx) {
167
- return jsx(DropdownMenuItem, {
168
- key: idx,
169
- item: item,
170
- hide: hide,
171
- dispatchCommand: dispatchCommand,
172
- editorView: editorView,
173
- iconBefore: _this.renderSelected(item, intl)
174
- });
175
- }));
176
- }
177
- }, {
178
- key: "renderSelected",
179
- value: function renderSelected(item, intl) {
180
- var _this$props$showSelec = this.props.showSelected,
181
- showSelected = _this$props$showSelec === void 0 ? true : _this$props$showSelec;
182
- var selected = item.selected;
183
- if (showSelected && selected) {
184
- return jsx(EditorDoneIcon, {
185
- primaryColor: "var(--ds-icon-selected, ".concat(B400, ")"),
186
- size: "small",
187
- label: intl.formatMessage(messages.confirmModalOK)
188
- });
189
- }
190
- return jsx("span", {
191
- css: spacer
192
- });
193
- }
194
- }]);
195
- return Dropdown;
196
- }(Component);
197
- export default injectIntl(Dropdown);
@@ -1,25 +0,0 @@
1
- import React from 'react';
2
- export default function EditorEmojiAddIcon() {
3
- return /*#__PURE__*/React.createElement("svg", {
4
- width: 24,
5
- height: 24,
6
- viewBox: "0 0 24 24",
7
- fill: "none",
8
- "aria-label": "editor-add-emoji"
9
- }, /*#__PURE__*/React.createElement("rect", {
10
- width: 24,
11
- height: 24,
12
- fill: "var(--ds-background-neutral-subtle, white)",
13
- fillOpacity: "0.01"
14
- }), /*#__PURE__*/React.createElement("path", {
15
- fillRule: "evenodd",
16
- clipRule: "evenodd",
17
- d: "M14.5715 6.20367C13.7531 5.88041 12.8807 5.71423 12 5.71423C10.1435 5.71423 8.36301 6.45173 7.05025 7.76449C5.7375 9.07724 5 10.8577 5 12.7142C5 14.5708 5.7375 16.3512 7.05025 17.664C8.36301 18.9767 10.1435 19.7142 12 19.7142C12.9193 19.7142 13.8295 19.5332 14.6788 19.1814C15.5281 18.8296 16.2997 18.314 16.9497 17.664C17.5998 17.014 18.1154 16.2423 18.4672 15.393C18.8189 14.5437 19 13.6335 19 12.7142C19 12.1349 18.9281 11.5591 18.7868 10.9999H17.2266C17.404 11.5396 17.5 12.1159 17.5 12.7142C17.5 15.7472 15.033 18.2142 12 18.2142C8.967 18.2142 6.5 15.7472 6.5 12.7142C6.50159 11.256 7.08156 9.85801 8.11267 8.8269C9.14377 7.79579 10.5418 7.21582 12 7.21423C12.9284 7.21423 13.8037 7.44537 14.5715 7.85312V6.20367ZM9.79289 11.9213C9.98043 12.1089 10.2348 12.2142 10.5 12.2142C10.7652 12.2142 11.0196 12.1089 11.2071 11.9213C11.3946 11.7338 11.5 11.4795 11.5 11.2142C11.5 10.949 11.3946 10.6947 11.2071 10.5071C11.0196 10.3196 10.7652 10.2142 10.5 10.2142C10.2348 10.2142 9.98043 10.3196 9.79289 10.5071C9.60536 10.6947 9.5 10.949 9.5 11.2142C9.5 11.4795 9.60536 11.7338 9.79289 11.9213ZM12.7929 11.9213C12.9804 12.1089 13.2348 12.2142 13.5 12.2142C13.7652 12.2142 14.0196 12.1089 14.2071 11.9213C14.3946 11.7338 14.5 11.4795 14.5 11.2142C14.5 10.949 14.3946 10.6947 14.2071 10.5071C14.0196 10.3196 13.7652 10.2142 13.5 10.2142C13.2348 10.2142 12.9804 10.3196 12.7929 10.5071C12.6054 10.6947 12.5 10.949 12.5 11.2142C12.5 11.4795 12.6054 11.7338 12.7929 11.9213ZM14.1965 13.61C14.0355 13.6153 13.8828 13.6823 13.77 13.7972C12.871 14.8032 11.133 14.8032 10.232 13.8002C10.1205 13.6799 9.96614 13.6082 9.80223 13.6006C9.63832 13.5931 9.47801 13.6503 9.35592 13.7599C9.23383 13.8695 9.15974 14.0227 9.14965 14.1865C9.13956 14.3503 9.19428 14.5115 9.302 14.6352C9.64217 15.0139 10.0582 15.3167 10.523 15.5241C10.9878 15.7316 11.491 15.8389 12 15.8392C12.51 15.839 13.0142 15.7313 13.4797 15.5231C13.9453 15.315 14.3617 15.0111 14.702 14.6312C14.8037 14.5064 14.8535 14.3472 14.8409 14.1866C14.8282 14.0261 14.7542 13.8766 14.6342 13.7692C14.5142 13.6618 14.3574 13.6048 14.1965 13.61Z",
18
- fill: "currentColor"
19
- }), /*#__PURE__*/React.createElement("path", {
20
- fillRule: "evenodd",
21
- clipRule: "evenodd",
22
- d: "M16.2856 8.31714H17.0228V9.05429C17.0228 9.28161 17.1131 9.49963 17.2738 9.66038C17.4345 9.82112 17.6526 9.91143 17.8799 9.91143C18.1072 9.91143 18.3252 9.82112 18.486 9.66038C18.6467 9.49963 18.737 9.28161 18.737 9.05429V8.31714H19.4828C19.7101 8.31714 19.9281 8.22684 20.0888 8.06609C20.2496 7.90535 20.3399 7.68733 20.3399 7.46C20.3399 7.23267 20.2496 7.01465 20.0888 6.85391C19.9281 6.69316 19.7101 6.60286 19.4828 6.60286H18.737V5.85714C18.737 5.62981 18.6467 5.4118 18.486 5.25105C18.3252 5.09031 18.1072 5 17.8799 5C17.6526 5 17.4345 5.09031 17.2738 5.25105C17.1131 5.4118 17.0228 5.62981 17.0228 5.85714V6.60286H16.2856C16.0583 6.60286 15.8403 6.69316 15.6795 6.85391C15.5188 7.01465 15.4285 7.23267 15.4285 7.46C15.4285 7.68733 15.5188 7.90535 15.6795 8.06609C15.8403 8.22684 16.0583 8.31714 16.2856 8.31714Z",
23
- fill: "currentColor"
24
- }));
25
- }
@@ -1,113 +0,0 @@
1
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
3
- var _templateObject;
4
- /** @jsx jsx */
5
- import { css, jsx } from '@emotion/react';
6
- import React from 'react';
7
- import Button from '@atlaskit/button';
8
- import { WithProviders } from '@atlaskit/editor-common/provider-factory';
9
- import { Popup } from '@atlaskit/editor-common/ui';
10
- import { EmojiPicker } from '@atlaskit/emoji';
11
- import Tooltip from '@atlaskit/tooltip';
12
- import EditorEmojiAddIcon from './EditorEmojiAddIcon';
13
- import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
14
-
15
- // helps adjusts position of popup
16
- var emojiPickerButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n"])));
17
- var EmojiPickerWithListener = withReactEditorViewOuterListeners(EmojiPicker);
18
- export var EmojiPickerButton = function EmojiPickerButton(props) {
19
- var buttonRef = React.useRef(null);
20
- var _React$useState = React.useState(false),
21
- _React$useState2 = _slicedToArray(_React$useState, 2),
22
- isPopupOpen = _React$useState2[0],
23
- setIsPopupOpen = _React$useState2[1];
24
- React.useEffect(function () {
25
- if (props.setDisableParentScroll) {
26
- props.setDisableParentScroll(isPopupOpen);
27
- }
28
- // eslint-disable-next-line react-hooks/exhaustive-deps
29
- }, [isPopupOpen]);
30
- var togglePopup = function togglePopup() {
31
- setIsPopupOpen(!isPopupOpen);
32
- };
33
- var updateEmoji = function updateEmoji(emoji) {
34
- setIsPopupOpen(false);
35
- props.onChange && props.onChange(emoji);
36
- requestAnimationFrame(function () {
37
- var _props$editorView;
38
- (_props$editorView = props.editorView) === null || _props$editorView === void 0 ? void 0 : _props$editorView.focus();
39
- });
40
- };
41
- var isDetachedElement = function isDetachedElement(el) {
42
- return !document.body.contains(el);
43
- };
44
- var handleEmojiClickOutside = function handleEmojiClickOutside(e) {
45
- // Ignore click events for detached elements.
46
- // Workaround for CETI-240 - where two onClicks fire - one when the upload button is
47
- // still in the document, and one once it's detached. Does not always occur, and
48
- // may be a side effect of a react render optimisation
49
- if (e && e.target && !isDetachedElement(e.target)) {
50
- togglePopup();
51
- }
52
- };
53
- var handleEmojiPressEscape = function handleEmojiPressEscape() {
54
- var _buttonRef$current;
55
- setIsPopupOpen(false);
56
- (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
57
- };
58
- var renderPicker = function renderPicker(providers) {
59
- if (!providers.emojiProvider) {
60
- return null;
61
- }
62
- return jsx(EmojiPickerWithListener, {
63
- emojiProvider: providers.emojiProvider,
64
- onSelection: updateEmoji,
65
- onPickerRef: function onPickerRef() {},
66
- handleClickOutside: handleEmojiClickOutside,
67
- handleEscapeKeydown: handleEmojiPressEscape
68
- });
69
- };
70
- var renderPopup = function renderPopup() {
71
- if (!buttonRef.current || !isPopupOpen) {
72
- return;
73
- }
74
- return jsx(Popup, {
75
- target: buttonRef.current,
76
- mountTo: props.setDisableParentScroll ? props.mountPoint : buttonRef.current.parentElement,
77
- fitHeight: 350,
78
- fitWidth: 350,
79
- offset: [0, 10]
80
- // Confluence inline comment editor has z-index: 500
81
- // if the toolbar is scrollable, this will be mounted in the root editor
82
- // we need an index of > 500 to display over it
83
- ,
84
- zIndex: props.setDisableParentScroll ? 600 : undefined,
85
- focusTrap: true
86
- }, jsx(WithProviders, {
87
- providers: ['emojiProvider'],
88
- providerFactory: props.providerFactory,
89
- renderNode: renderPicker
90
- }));
91
- };
92
- var title = props.title || '';
93
- return jsx("div", {
94
- css: emojiPickerButtonWrapper
95
- }, jsx(Tooltip, {
96
- content: title,
97
- position: "top"
98
- }, jsx(Button, {
99
- appearance: 'subtle',
100
- key: props.idx,
101
- style: {
102
- padding: 0,
103
- margin: 0,
104
- display: 'flex',
105
- height: '24px',
106
- width: '24px'
107
- },
108
- onClick: togglePopup,
109
- ref: buttonRef,
110
- isSelected: props.isSelected,
111
- iconBefore: jsx(EditorEmojiAddIcon, null)
112
- })), renderPopup());
113
- };