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

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 +16 -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 +9 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-quick-insert
2
2
 
3
+ ## 6.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`663926469ec70`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/663926469ec70) -
8
+ Switch to use fg() to check feature gate platform_editor_update_modal_close_button
9
+ - Updated dependencies
10
+
11
+ ## 6.0.2
12
+
13
+ ### Patch Changes
14
+
15
+ - [`a369fcd2d81f3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a369fcd2d81f3) -
16
+ [ux] [ENGHEALTH-30483] Add close button to element browser modal header section
17
+ - Updated dependencies
18
+
3
19
  ## 6.0.1
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/ui/ModalElementBrowser/ModalElementBrowser.js CHANGED
@@ -15,6 +15,7 @@ var _elementBrowser = require("@atlaskit/editor-common/element-browser");
15
15
  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
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
19
  var _colors = require("@atlaskit/theme/colors");
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); }
@@ -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, _platformFeatureFlags.fg)('platform_editor_update_modal_close_button');
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,7 +11,8 @@ 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
+ import { fg } from '@atlaskit/platform-feature-flags';
15
16
  import { N0 } from '@atlaskit/theme/colors';
16
17
  import { getCategories } from './categories';
17
18
  export const MODAL_WRAPPER_PADDING = 16;
@@ -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 = fg('platform_editor_update_modal_close_button');
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,7 +12,8 @@ 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
+ import { fg } from '@atlaskit/platform-feature-flags';
16
17
  import { N0 } from '@atlaskit/theme/colors';
17
18
  import { getCategories } from './categories';
18
19
  export var MODAL_WRAPPER_PADDING = 16;
@@ -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 = fg('platform_editor_update_modal_close_button');
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.3",
4
4
  "description": "Quick insert plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -29,22 +29,22 @@
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.3.0",
36
36
  "@atlaskit/editor-prosemirror": "7.0.0",
37
- "@atlaskit/icon": "^28.3.0",
37
+ "@atlaskit/icon": "^28.5.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.5.0",
42
42
  "@atlaskit/tokens": "^6.4.0",
43
43
  "@babel/runtime": "^7.0.0",
44
44
  "@emotion/react": "^11.7.1"
45
45
  },
46
46
  "peerDependencies": {
47
- "@atlaskit/editor-common": "^110.4.0",
47
+ "@atlaskit/editor-common": "^110.7.0",
48
48
  "react": "^18.2.0",
49
49
  "react-dom": "^18.2.0",
50
50
  "react-intl-next": "npm:react-intl@^5.18.1"
@@ -103,6 +103,9 @@
103
103
  },
104
104
  "platform_editor_controls_fix_view_more_in_comment": {
105
105
  "type": "boolean"
106
+ },
107
+ "platform_editor_update_modal_close_button": {
108
+ "type": "boolean"
106
109
  }
107
110
  }
108
111
  }