@atlaskit/editor-plugin-quick-insert 6.0.1 → 6.0.2

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 (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/ui/ModalElementBrowser/ModalElementBrowser.js +16 -3
  3. package/dist/es2019/ui/ModalElementBrowser/ModalElementBrowser.js +17 -4
  4. package/dist/esm/ui/ModalElementBrowser/ModalElementBrowser.js +17 -4
  5. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-quick-insert
2
2
 
3
+ ## 6.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`a369fcd2d81f3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a369fcd2d81f3) -
8
+ [ux] [ENGHEALTH-30483] Add close button to element browser modal header section
9
+ - Updated dependencies
10
+
3
11
  ## 6.0.1
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/ui/ModalElementBrowser/ModalElementBrowser.js CHANGED
@@ -16,6 +16,7 @@ var _quickInsert = require("@atlaskit/editor-common/quick-insert");
16
16
  var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/question-circle"));
17
17
  var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
18
18
  var _colors = require("@atlaskit/theme/colors");
19
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
19
20
  var _categories = require("./categories");
20
21
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
21
22
  /**
@@ -50,6 +51,12 @@ var modalFooterStyles = (0, _react2.css)({
50
51
  alignItems: 'center',
51
52
  justifyContent: 'space-between'
52
53
  });
54
+ var modalCloseButtonStyles = (0, _react2.css)({
55
+ display: 'flex',
56
+ justifyContent: 'flex-end',
57
+ paddingBlockStart: "var(--ds-space-200, 16px)",
58
+ paddingInline: "var(--ds-space-200, 16px)"
59
+ });
53
60
  var ModalElementBrowser = function ModalElementBrowser(props) {
54
61
  var _useState = (0, _react.useState)(),
55
62
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -58,6 +65,7 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
58
65
  var helpUrl = props.helpUrl,
59
66
  intl = props.intl,
60
67
  onInsertItemFn = props.onInsertItem;
68
+ var isUpdateModalCloseButtonEnabled = (0, _expValEquals.expValEquals)('platform_editor_update_modal_close_button', 'isEnabled', true);
61
69
  var onSelectItem = (0, _react.useCallback)(function (item) {
62
70
  setSelectedItem(item);
63
71
  }, [setSelectedItem]);
@@ -86,9 +94,10 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
86
94
  mode: "full",
87
95
  onSelectItem: onSelectItem,
88
96
  onInsertItem: onInsertItem,
89
- emptyStateHandler: props.emptyStateHandler
97
+ emptyStateHandler: props.emptyStateHandler,
98
+ autoFocusSearch: !isUpdateModalCloseButtonEnabled
90
99
  }));
91
- }, [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler]);
100
+ }, [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler, isUpdateModalCloseButtonEnabled]);
92
101
  return (0, _react2.jsx)("div", {
93
102
  "data-editor-popup": true
94
103
  }, (0, _react2.jsx)(_modalDialog.ModalTransition, null, props.isOpen && (0, _react2.jsx)(_modalDialog.default, {
@@ -100,7 +109,11 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
100
109
  height: "664px",
101
110
  width: "x-large",
102
111
  shouldReturnFocus: props.shouldReturnFocus
103
- }, (0, _react2.jsx)(RenderBody, null), (0, _react2.jsx)(RenderFooter, null))));
112
+ }, isUpdateModalCloseButtonEnabled && (0, _react2.jsx)("div", {
113
+ css: modalCloseButtonStyles
114
+ }, (0, _react2.jsx)(_modalDialog.CloseButton, {
115
+ onClick: props.onClose
116
+ })), (0, _react2.jsx)(RenderBody, null), (0, _react2.jsx)(RenderFooter, null))));
104
117
  };
105
118
  ModalElementBrowser.displayName = 'ModalElementBrowser';
106
119
  var Footer = function Footer(_ref) {
package/dist/es2019/ui/ModalElementBrowser/ModalElementBrowser.js CHANGED
@@ -11,8 +11,9 @@ import Button from '@atlaskit/button';
11
11
  import { ElementBrowser } from '@atlaskit/editor-common/element-browser';
12
12
  import { messages } from '@atlaskit/editor-common/quick-insert';
13
13
  import QuestionCircleIcon from '@atlaskit/icon/core/migration/question-circle';
14
- import Modal, { ModalTransition, useModal } from '@atlaskit/modal-dialog';
14
+ import Modal, { CloseButton, ModalTransition, useModal } from '@atlaskit/modal-dialog';
15
15
  import { N0 } from '@atlaskit/theme/colors';
16
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
16
17
  import { getCategories } from './categories';
17
18
  export const MODAL_WRAPPER_PADDING = 16;
18
19
  const actionsStyles = css({
@@ -39,6 +40,12 @@ const modalFooterStyles = css({
39
40
  alignItems: 'center',
40
41
  justifyContent: 'space-between'
41
42
  });
43
+ const modalCloseButtonStyles = css({
44
+ display: 'flex',
45
+ justifyContent: 'flex-end',
46
+ paddingBlockStart: "var(--ds-space-200, 16px)",
47
+ paddingInline: "var(--ds-space-200, 16px)"
48
+ });
42
49
  const ModalElementBrowser = props => {
43
50
  const [selectedItem, setSelectedItem] = useState();
44
51
  const {
@@ -46,6 +53,7 @@ const ModalElementBrowser = props => {
46
53
  intl,
47
54
  onInsertItem: onInsertItemFn
48
55
  } = props;
56
+ const isUpdateModalCloseButtonEnabled = expValEquals('platform_editor_update_modal_close_button', 'isEnabled', true);
49
57
  const onSelectItem = useCallback(item => {
50
58
  setSelectedItem(item);
51
59
  }, [setSelectedItem]);
@@ -69,8 +77,9 @@ const ModalElementBrowser = props => {
69
77
  mode: "full",
70
78
  onSelectItem: onSelectItem,
71
79
  onInsertItem: onInsertItem,
72
- emptyStateHandler: props.emptyStateHandler
73
- })), [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler]);
80
+ emptyStateHandler: props.emptyStateHandler,
81
+ autoFocusSearch: !isUpdateModalCloseButtonEnabled
82
+ })), [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler, isUpdateModalCloseButtonEnabled]);
74
83
  return jsx("div", {
75
84
  "data-editor-popup": true
76
85
  }, jsx(ModalTransition, null, props.isOpen && jsx(Modal, {
@@ -82,7 +91,11 @@ const ModalElementBrowser = props => {
82
91
  height: "664px",
83
92
  width: "x-large",
84
93
  shouldReturnFocus: props.shouldReturnFocus
85
- }, jsx(RenderBody, null), jsx(RenderFooter, null))));
94
+ }, isUpdateModalCloseButtonEnabled && jsx("div", {
95
+ css: modalCloseButtonStyles
96
+ }, jsx(CloseButton, {
97
+ onClick: props.onClose
98
+ })), jsx(RenderBody, null), jsx(RenderFooter, null))));
86
99
  };
87
100
  ModalElementBrowser.displayName = 'ModalElementBrowser';
88
101
  const Footer = ({
package/dist/esm/ui/ModalElementBrowser/ModalElementBrowser.js CHANGED
@@ -12,8 +12,9 @@ import Button from '@atlaskit/button';
12
12
  import { ElementBrowser } from '@atlaskit/editor-common/element-browser';
13
13
  import { messages } from '@atlaskit/editor-common/quick-insert';
14
14
  import QuestionCircleIcon from '@atlaskit/icon/core/migration/question-circle';
15
- import Modal, { ModalTransition, useModal } from '@atlaskit/modal-dialog';
15
+ import Modal, { CloseButton, ModalTransition, useModal } from '@atlaskit/modal-dialog';
16
16
  import { N0 } from '@atlaskit/theme/colors';
17
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
17
18
  import { getCategories } from './categories';
18
19
  export var MODAL_WRAPPER_PADDING = 16;
19
20
  var actionsStyles = css({
@@ -40,6 +41,12 @@ var modalFooterStyles = css({
40
41
  alignItems: 'center',
41
42
  justifyContent: 'space-between'
42
43
  });
44
+ var modalCloseButtonStyles = css({
45
+ display: 'flex',
46
+ justifyContent: 'flex-end',
47
+ paddingBlockStart: "var(--ds-space-200, 16px)",
48
+ paddingInline: "var(--ds-space-200, 16px)"
49
+ });
43
50
  var ModalElementBrowser = function ModalElementBrowser(props) {
44
51
  var _useState = useState(),
45
52
  _useState2 = _slicedToArray(_useState, 2),
@@ -48,6 +55,7 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
48
55
  var helpUrl = props.helpUrl,
49
56
  intl = props.intl,
50
57
  onInsertItemFn = props.onInsertItem;
58
+ var isUpdateModalCloseButtonEnabled = expValEquals('platform_editor_update_modal_close_button', 'isEnabled', true);
51
59
  var onSelectItem = useCallback(function (item) {
52
60
  setSelectedItem(item);
53
61
  }, [setSelectedItem]);
@@ -76,9 +84,10 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
76
84
  mode: "full",
77
85
  onSelectItem: onSelectItem,
78
86
  onInsertItem: onInsertItem,
79
- emptyStateHandler: props.emptyStateHandler
87
+ emptyStateHandler: props.emptyStateHandler,
88
+ autoFocusSearch: !isUpdateModalCloseButtonEnabled
80
89
  }));
81
- }, [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler]);
90
+ }, [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler, isUpdateModalCloseButtonEnabled]);
82
91
  return jsx("div", {
83
92
  "data-editor-popup": true
84
93
  }, jsx(ModalTransition, null, props.isOpen && jsx(Modal, {
@@ -90,7 +99,11 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
90
99
  height: "664px",
91
100
  width: "x-large",
92
101
  shouldReturnFocus: props.shouldReturnFocus
93
- }, jsx(RenderBody, null), jsx(RenderFooter, null))));
102
+ }, isUpdateModalCloseButtonEnabled && jsx("div", {
103
+ css: modalCloseButtonStyles
104
+ }, jsx(CloseButton, {
105
+ onClick: props.onClose
106
+ })), jsx(RenderBody, null), jsx(RenderFooter, null))));
94
107
  };
95
108
  ModalElementBrowser.displayName = 'ModalElementBrowser';
96
109
  var Footer = function Footer(_ref) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-quick-insert",
3
- "version": "6.0.1",
3
+ "version": "6.0.2",
4
4
  "description": "Quick insert plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -29,16 +29,16 @@
29
29
  ],
30
30
  "atlaskit:src": "src/index.ts",
31
31
  "dependencies": {
32
- "@atlaskit/button": "^23.4.0",
32
+ "@atlaskit/button": "^23.5.0",
33
33
  "@atlaskit/editor-plugin-connectivity": "^6.0.0",
34
34
  "@atlaskit/editor-plugin-metrics": "^7.0.0",
35
- "@atlaskit/editor-plugin-type-ahead": "^6.1.0",
35
+ "@atlaskit/editor-plugin-type-ahead": "^6.2.0",
36
36
  "@atlaskit/editor-prosemirror": "7.0.0",
37
- "@atlaskit/icon": "^28.3.0",
37
+ "@atlaskit/icon": "^28.4.0",
38
38
  "@atlaskit/modal-dialog": "^14.4.0",
39
39
  "@atlaskit/platform-feature-flags": "^1.1.0",
40
40
  "@atlaskit/theme": "^21.0.0",
41
- "@atlaskit/tmp-editor-statsig": "^13.0.0",
41
+ "@atlaskit/tmp-editor-statsig": "^13.2.0",
42
42
  "@atlaskit/tokens": "^6.4.0",
43
43
  "@babel/runtime": "^7.0.0",
44
44
  "@emotion/react": "^11.7.1"