@atlaskit/jql-editor 4.0.1 → 4.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 (19) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/analytics/util.js +1 -1
  3. package/dist/cjs/plugins/autocomplete/components/autocomplete-dropdown/styled.js +46 -10
  4. package/dist/cjs/plugins/autocomplete/components/autocomplete-option/styled.js +46 -15
  5. package/dist/cjs/plugins/rich-inline-nodes/nodes/user/styled.js +52 -10
  6. package/dist/cjs/state/index.js +9 -11
  7. package/dist/es2019/analytics/util.js +1 -1
  8. package/dist/es2019/plugins/autocomplete/components/autocomplete-dropdown/styled.js +46 -43
  9. package/dist/es2019/plugins/autocomplete/components/autocomplete-option/styled.js +45 -48
  10. package/dist/es2019/plugins/rich-inline-nodes/nodes/user/styled.js +52 -58
  11. package/dist/es2019/state/index.js +3 -6
  12. package/dist/esm/analytics/util.js +1 -1
  13. package/dist/esm/plugins/autocomplete/components/autocomplete-dropdown/styled.js +47 -12
  14. package/dist/esm/plugins/autocomplete/components/autocomplete-option/styled.js +47 -18
  15. package/dist/esm/plugins/rich-inline-nodes/nodes/user/styled.js +52 -10
  16. package/dist/esm/state/index.js +3 -6
  17. package/dist/types/plugins/rich-inline-nodes/nodes/user/styled.d.ts +1 -1
  18. package/dist/types-ts4.5/plugins/rich-inline-nodes/nodes/user/styled.d.ts +1 -1
  19. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/jql-editor
2
2
 
3
+ ## 4.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#77532](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77532) [`bc03b137ce3a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bc03b137ce3a) - Internal changes to use space tokens. There is no expected visual or behaviour change.
8
+
3
9
  ## 4.0.1
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/analytics/util.js CHANGED
@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.useJqlEditorAnalytics = void 0;
7
7
  var _jqlEditorCommon = require("@atlaskit/jql-editor-common");
8
8
  var useJqlEditorAnalytics = exports.useJqlEditorAnalytics = function useJqlEditorAnalytics(analyticsSource) {
9
- return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "4.0.1", _jqlEditorCommon.ANALYTICS_CHANNEL);
9
+ return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "4.0.2", _jqlEditorCommon.ANALYTICS_CHANNEL);
10
10
  };
package/dist/cjs/plugins/autocomplete/components/autocomplete-dropdown/styled.js CHANGED
@@ -5,18 +5,54 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.OptionList = exports.AutocompleteOptionsContainer = exports.AutocompleteLoadingFooter = exports.AutocompleteContainer = void 0;
8
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
8
  var _react = require("@emotion/react");
10
9
  var _styled = _interopRequireDefault(require("@emotion/styled"));
11
10
  var _colors = require("@atlaskit/theme/colors");
12
11
  var _constants = require("@atlaskit/theme/constants");
13
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
14
- var AutocompleteContainer = exports.AutocompleteContainer = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n background-color: ", ";\n border-radius: ", ";\n will-change: top, left;\n visibility: ", ";\n z-index: ", ";\n box-shadow: ", ";\n padding: ", " 0;\n min-width: ", "px;\n max-width: ", "px;\n\n &:focus {\n outline: none;\n }\n"])), "var(--ds-surface-overlay, white)", "var(--ds-border-radius-100, 3px)", function (props) {
15
- return props.isOpen ? 'visible' : 'hidden';
16
- }, _constants.layers.dialog, "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"), "var(--ds-space-075, 6px)", 25 * (0, _constants.gridSize)(), 50 * (0, _constants.gridSize)());
17
- var AutocompleteOptionsContainer = exports.AutocompleteOptionsContainer = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n max-height: ", "px;\n overflow: auto;\n"])), 36 * (0, _constants.gridSize)());
18
- var OptionList = exports.OptionList = _styled.default.ul(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n margin: 0;\n padding: 0;\n"])));
19
- var AutocompleteLoadingFooter = exports.AutocompleteLoadingFooter = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n color: ", ";\n font-style: italic;\n padding: ", ";\n text-align: center;\n ", ";\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-150, 12px)", function (props) {
20
- return props.hasOptions ? // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
21
- (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n border-top: solid 1px ", ";\n margin-top: ", ";\n /* 3/2 + 3/4 */\n padding-top: ", "px;\n "])), "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-space-075, 6px)", 9 / 4 * (0, _constants.gridSize)()) : '';
12
+ var AutocompleteContainer = exports.AutocompleteContainer = _styled.default.div({
13
+ position: 'absolute',
14
+ backgroundColor: "var(--ds-surface-overlay, white)",
15
+ borderRadius: "var(--ds-border-radius-100, 3px)",
16
+ willChange: 'top, left',
17
+ zIndex: _constants.layers.dialog(),
18
+ boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
19
+ padding: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-0, 0)"),
20
+ minWidth: '200px',
21
+ maxWidth: '400px',
22
+ '&:focus': {
23
+ outline: 'none'
24
+ },
25
+ marginLeft: "var(--ds-space-negative-100, -8px)",
26
+ marginTop: "var(--ds-space-200, 16px)"
27
+ }, function (_ref) {
28
+ var isOpen = _ref.isOpen;
29
+ return isOpen ? (0, _react.css)({
30
+ visibility: 'visible'
31
+ }) : (0, _react.css)({
32
+ visibility: 'hidden'
33
+ });
34
+ });
35
+ var AutocompleteOptionsContainer = exports.AutocompleteOptionsContainer = _styled.default.div({
36
+ maxHeight: '288px',
37
+ overflow: 'auto'
38
+ });
39
+ var OptionList = exports.OptionList = _styled.default.ul({
40
+ listStyle: 'none',
41
+ margin: "var(--ds-space-0, 0)",
42
+ padding: "var(--ds-space-0, 0)"
43
+ });
44
+ var AutocompleteLoadingFooter = exports.AutocompleteLoadingFooter = _styled.default.div({
45
+ display: 'flex',
46
+ justifyContent: 'center',
47
+ color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
48
+ fontStyle: 'italic',
49
+ padding: "var(--ds-space-150, 12px)",
50
+ textAlign: 'center'
51
+ }, function (_ref2) {
52
+ var hasOptions = _ref2.hasOptions;
53
+ return hasOptions && {
54
+ borderTop: "solid 1px ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
55
+ marginTop: "var(--ds-space-075, 6px)",
56
+ paddingTop: "var(--ds-space-250, 20px)"
57
+ };
22
58
  });
package/dist/cjs/plugins/autocomplete/components/autocomplete-option/styled.js CHANGED
@@ -5,22 +5,53 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.TooltipContent = exports.OptionName = exports.OptionListItem = exports.OptionHighlight = exports.FieldTypeIcon = exports.FieldType = exports.DeprecatedOptionContainer = void 0;
8
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
- var _react = require("@emotion/react");
10
8
  var _styled = _interopRequireDefault(require("@emotion/styled"));
11
9
  var _colors = require("@atlaskit/theme/colors");
12
10
  var _constants = require("@atlaskit/theme/constants");
13
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
14
- var TooltipContent = exports.TooltipContent = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: ", ";\n"])), _constants.fontFamily);
15
-
16
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
17
- var OptionListItem = exports.OptionListItem = _styled.default.li(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n cursor: pointer;\n padding: ", " ", "px;\n font-family: ", ";\n line-height: 24px;\n ", "\n ", "\n"])), "var(--ds-space-075, 6px)", 5 / 4 * (0, _constants.gridSize)(), _constants.codeFontFamily, function (props) {
18
- return props.isSelected ? (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n "])), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")")) : '';
19
- }, function (props) {
20
- return props.isDeprecated ? (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n cursor: default;\n color: ", ";\n "])), "var(--ds-text-disabled, ".concat(_colors.N50, ")")) : '';
11
+ var TooltipContent = exports.TooltipContent = _styled.default.div({
12
+ fontFamily: (0, _constants.fontFamily)()
13
+ });
14
+ var OptionListItem = exports.OptionListItem = _styled.default.li({
15
+ cursor: 'pointer',
16
+ padding: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-100, 8px)"),
17
+ fontFamily: (0, _constants.codeFontFamily)(),
18
+ lineHeight: '24px'
19
+ }, function (_ref) {
20
+ var isSelected = _ref.isSelected;
21
+ return isSelected && {
22
+ background: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")")
23
+ };
24
+ }, function (_ref2) {
25
+ var isDeprecated = _ref2.isDeprecated;
26
+ return isDeprecated && {
27
+ cursor: 'default',
28
+ color: "var(--ds-text-disabled, ".concat(_colors.N50, ")")
29
+ };
30
+ });
31
+ var OptionName = exports.OptionName = _styled.default.div({
32
+ color: "var(--ds-text, ".concat(_colors.N800, ")"),
33
+ overflow: 'hidden',
34
+ whiteSpace: 'nowrap',
35
+ textOverflow: 'ellipsis',
36
+ // Added so that overflowed option names do not squish the deprecated info icon
37
+ flex: 1
38
+ });
39
+ var DeprecatedOptionContainer = exports.DeprecatedOptionContainer = _styled.default.div({
40
+ color: "var(--ds-text-disabled, ".concat(_colors.N50, ")"),
41
+ display: 'flex',
42
+ justifyContent: 'space-between',
43
+ opacity: 0.6
44
+ });
45
+ var OptionHighlight = exports.OptionHighlight = _styled.default.span({
46
+ fontWeight: 'bold'
47
+ });
48
+ var FieldType = exports.FieldType = _styled.default.div({
49
+ display: 'flex',
50
+ alignItems: 'center',
51
+ marginTop: "var(--ds-space-negative-025, -2px)",
52
+ color: "var(--ds-text-subtlest, ".concat(_colors.N100, ")")
21
53
  });
22
- var OptionName = exports.OptionName = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n // Added so that overflowed option names do not squish the deprecated info icon\n flex: 1;\n"])), "var(--ds-text, ".concat(_colors.N800, ")"));
23
- var DeprecatedOptionContainer = exports.DeprecatedOptionContainer = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n display: flex;\n justify-content: space-between;\n opacity: 0.6;\n"])), "var(--ds-text-disabled, ".concat(_colors.N50, ")"));
24
- var OptionHighlight = exports.OptionHighlight = _styled.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: bold;\n"])));
25
- var FieldType = exports.FieldType = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n margin-top: ", ";\n color: ", ";\n"])), "var(--ds-space-negative-025, -2px)", "var(--ds-text-subtlest, ".concat(_colors.N100, ")"));
26
- var FieldTypeIcon = exports.FieldTypeIcon = _styled.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
54
+ var FieldTypeIcon = exports.FieldTypeIcon = _styled.default.span({
55
+ display: 'flex',
56
+ marginRight: "var(--ds-space-050, 4px)"
57
+ });
package/dist/cjs/plugins/rich-inline-nodes/nodes/user/styled.js CHANGED
@@ -5,31 +5,73 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.UserContainer = exports.NameContainer = exports.AvatarWrapper = void 0;
8
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
8
  var _react = require("@emotion/react");
10
9
  var _styled = _interopRequireDefault(require("@emotion/styled"));
11
10
  var _colors = require("@atlaskit/theme/colors");
12
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
13
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
14
- var UserContainer = exports.UserContainer = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n align-items: center;\n height: ", ";\n padding: 1px;\n border-radius: 10px;\n cursor: pointer;\n user-select: none;\n\n ", "\n"])), "var(--ds-space-200, 16px)", function (_ref) {
11
+ var UserContainer = exports.UserContainer = _styled.default.span({
12
+ display: 'inline-flex',
13
+ alignItems: 'baseline',
14
+ paddingLeft: "var(--ds-space-025, 2px)",
15
+ borderRadius: '10px',
16
+ cursor: 'pointer',
17
+ userSelect: 'none'
18
+ }, function (_ref) {
15
19
  var selected = _ref.selected,
16
20
  error = _ref.error;
17
21
  if (selected) {
18
22
  if (error) {
19
- return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n background-color: ", ";\n text-decoration: wavy underline;\n text-decoration-thickness: 1px;\n text-decoration-skip-ink: none;\n text-decoration-color: ", ";\n "])), "var(--ds-text-inverse, ".concat(_colors.N0, ")"), "var(--ds-background-danger-bold, ".concat(_colors.R400, ")"), "var(--ds-text-inverse, ".concat(_colors.N0, ")"));
23
+ return (0, _react.css)({
24
+ color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
25
+ backgroundColor: "var(--ds-background-danger-bold, ".concat(_colors.R400, ")"),
26
+ textDecoration: 'wavy underline',
27
+ textDecorationThickness: '1px',
28
+ textDecorationSkipInk: 'none',
29
+ textDecorationColor: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
30
+ });
20
31
  } else {
21
- return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n background-color: ", ";\n box-shadow: 0 0 0 1px ", ";\n "])), "var(--ds-text, ".concat(_colors.N0, ")"), "var(--ds-background-selected, ".concat(_colors.N500, ")"), "var(--ds-border-selected, transparent)");
32
+ return (0, _react.css)({
33
+ color: "var(--ds-text, ".concat(_colors.N0, ")"),
34
+ backgroundColor: "var(--ds-background-selected, ".concat(_colors.N500, ")"),
35
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, transparent)")
36
+ });
22
37
  }
23
38
  } else {
24
39
  if (error) {
25
- return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n background-color: ", ";\n text-decoration: wavy underline;\n text-decoration-thickness: 1px;\n text-decoration-skip-ink: none;\n text-decoration-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n "])), "var(--ds-text-subtle, ".concat(_colors.N500, ")"), "var(--ds-background-neutral, ".concat(_colors.N40, ")"), "var(--ds-text-danger, ".concat(_colors.R400, ")"), "var(--ds-background-neutral-hovered, ".concat(_colors.N50, ")"));
40
+ return (0, _react.css)({
41
+ color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
42
+ backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N40, ")"),
43
+ textDecoration: 'wavy underline',
44
+ textDecorationThickness: '1px',
45
+ textDecorationSkipInk: 'none',
46
+ textDecorationColor: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
47
+ '&:hover': {
48
+ backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N50, ")")
49
+ }
50
+ });
26
51
  } else {
27
- return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n "])), "var(--ds-text-subtle, ".concat(_colors.N500, ")"), "var(--ds-background-neutral, ".concat(_colors.N40, ")"), "var(--ds-background-neutral-hovered, ".concat(_colors.N50, ")"));
52
+ return (0, _react.css)({
53
+ color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
54
+ backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N40, ")"),
55
+ '&:hover': {
56
+ backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N50, ")")
57
+ }
58
+ });
28
59
  }
29
60
  }
30
61
  });
31
- var NameContainer = exports.NameContainer = _styled.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: ", ";\n margin-right: ", ";\n"])), "var(--ds-space-075, 6px)", "var(--ds-space-100, 8px)");
62
+ var NameContainer = exports.NameContainer = _styled.default.span({
63
+ marginLeft: "var(--ds-space-075, 6px)",
64
+ marginRight: "var(--ds-space-100, 8px)",
65
+ lineHeight: "var(--ds-space-250, 20px)"
66
+ });
32
67
 
33
68
  /* Override Avatar styles to match design spec */
34
69
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
35
- var AvatarWrapper = exports.AvatarWrapper = _styled.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n > div {\n top: 3px;\n\n > span {\n margin: 0;\n }\n }\n"])));
70
+ var AvatarWrapper = exports.AvatarWrapper = _styled.default.div({
71
+ height: "var(--ds-space-200, 16px)",
72
+ width: "var(--ds-space-200, 16px)",
73
+ alignSelf: 'center',
74
+ '> div span': {
75
+ margin: "var(--ds-space-0, 0px)"
76
+ }
77
+ });
package/dist/cjs/state/index.js CHANGED
@@ -18,11 +18,10 @@ var _uuid = require("uuid");
18
18
  var _view = require("@atlaskit/editor-prosemirror/view");
19
19
  var _jqlAst = require("@atlaskit/jql-ast");
20
20
  var _jqlAutocomplete = require("@atlaskit/jql-autocomplete");
21
- var _constants = require("@atlaskit/theme/constants");
22
21
  var _analytics = require("../analytics");
23
22
  var _selectErrorCommand = require("../commands/select-error-command");
24
- var _constants2 = require("../common/constants");
25
- var _constants3 = require("../plugins/autocomplete/constants");
23
+ var _constants = require("../common/constants");
24
+ var _constants2 = require("../plugins/autocomplete/constants");
26
25
  var _jqlAst2 = require("../plugins/jql-ast");
27
26
  var _schema = require("../schema");
28
27
  var _documentText = require("../utils/document-text");
@@ -31,7 +30,7 @@ var _autocomplete = require("./autocomplete");
31
30
  var _hydration = require("./hydration");
32
31
  var _util = require("./util");
33
32
  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; }
34
- 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) { (0, _defineProperty2.default)(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; } // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
33
+ 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) { (0, _defineProperty2.default)(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; }
35
34
  var initialIntl = (0, _reactIntlNext.createIntl)({
36
35
  locale: 'en'
37
36
  });
@@ -52,7 +51,7 @@ var initialState = exports.initialState = {
52
51
  intlRef: {
53
52
  current: initialIntl
54
53
  },
55
- autocompleteProvider: _constants3.defaultAutocompleteProvider,
54
+ autocompleteProvider: _constants2.defaultAutocompleteProvider,
56
55
  idPrefix: '',
57
56
  editorViewHasFocus: false,
58
57
  editorViewBlurTimeout: null,
@@ -437,7 +436,7 @@ var actions = exports.actions = {
437
436
  dispatch(actions.onSearchCommand(pmState, pmDispatch, pmView, true))
438
437
  );
439
438
  };
440
- editorState = (0, _schema.configurePlugins)(editorState, onSearch ? onSearchCommand : undefined, intlRef, getScopedId(getState(), _constants2.JQL_EDITOR_MAIN_ID), portalActions, enableRichInlineNodes);
439
+ editorState = (0, _schema.configurePlugins)(editorState, onSearch ? onSearchCommand : undefined, intlRef, getScopedId(getState(), _constants.JQL_EDITOR_MAIN_ID), portalActions, enableRichInlineNodes);
441
440
  setState({
442
441
  editorState: editorState
443
442
  });
@@ -472,7 +471,7 @@ var actions = exports.actions = {
472
471
  if (enableRichInlineNodes && (transaction.getMeta('hydrate') || transaction.getMeta('paste'))) {
473
472
  void dispatch((0, _hydration.hydrateQuery)());
474
473
  }
475
- if (query !== updatedQuery && !transaction.getMeta(_constants3.JQLAutocompletePluginKey)) {
474
+ if (query !== updatedQuery && !transaction.getMeta(_constants2.JQLAutocompletePluginKey)) {
476
475
  // Open autocomplete on next update if query has changed and update wasn't triggered internally
477
476
  dispatch(actions.openAutocompleteOnNextUpdate());
478
477
  }
@@ -859,14 +858,13 @@ var useAutocompletePosition = exports.useAutocompletePosition = (0, _reactSweetS
859
858
  // situations where autocomplete dropdown greatly overflows editor view container, we clamp this position.
860
859
  // We also offset top position returned by ProseMirror to ensure autocomplete is positioned consistently at
861
860
  // a grid size distance from editor input bottom in all situations where autocomplete is outside of the editor.
862
- var autocompleteTop = docTop + (0, _constants.gridSize)();
861
+ var autocompleteTop = docTop;
863
862
  var viewportTop = editorViewContainerRect !== undefined ? (0, _clamp.default)(autocompleteTop, editorViewContainerRect.top, editorViewContainerRect.bottom) : autocompleteTop;
864
863
  var left = docLeft - ((_offsetParentRect$lef = offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.left) !== null && _offsetParentRect$lef !== void 0 ? _offsetParentRect$lef : 0);
865
864
  var top = viewportTop - ((_offsetParentRect$top = offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.top) !== null && _offsetParentRect$top !== void 0 ? _offsetParentRect$top : 0);
866
865
  return {
867
- // Left position from ProseMirror - autocomplete option padding so texts are vertically aligned
868
- left: left - 5 / 4 * (0, _constants.gridSize)(),
869
- top: top + (0, _constants.gridSize)()
866
+ left: left,
867
+ top: top
870
868
  };
871
869
  }
872
870
  });
package/dist/es2019/analytics/util.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import { ANALYTICS_CHANNEL, useJqlPackageAnalytics } from '@atlaskit/jql-editor-common';
2
2
  export const useJqlEditorAnalytics = analyticsSource => {
3
- return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.0.1", ANALYTICS_CHANNEL);
3
+ return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.0.2", ANALYTICS_CHANNEL);
4
4
  };
package/dist/es2019/plugins/autocomplete/components/autocomplete-dropdown/styled.js CHANGED
@@ -1,46 +1,49 @@
1
1
  import { css } from '@emotion/react';
2
2
  import styled from '@emotion/styled';
3
3
  import { N200, N40, N50A, N60A } from '@atlaskit/theme/colors';
4
- // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
5
- import { gridSize, layers } from '@atlaskit/theme/constants';
6
- export const AutocompleteContainer = styled.div`
7
- position: absolute;
8
- background-color: ${"var(--ds-surface-overlay, white)"};
9
- border-radius: ${"var(--ds-border-radius-100, 3px)"};
10
- will-change: top, left;
11
- visibility: ${props => props.isOpen ? 'visible' : 'hidden'};
12
- z-index: ${layers.dialog};
13
- box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`};
14
- padding: ${"var(--ds-space-075, 6px)"} 0;
15
- min-width: ${25 * gridSize()}px;
16
- max-width: ${50 * gridSize()}px;
17
-
18
- &:focus {
19
- outline: none;
20
- }
21
- `;
22
- export const AutocompleteOptionsContainer = styled.div`
23
- max-height: ${36 * gridSize()}px;
24
- overflow: auto;
25
- `;
26
- export const OptionList = styled.ul`
27
- list-style: none;
28
- margin: 0;
29
- padding: 0;
30
- `;
31
- export const AutocompleteLoadingFooter = styled.div`
32
- display: flex;
33
- justify-content: center;
34
- color: ${`var(--ds-text-subtlest, ${N200})`};
35
- font-style: italic;
36
- padding: ${"var(--ds-space-150, 12px)"};
37
- text-align: center;
38
- ${props => props.hasOptions ?
39
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
40
- css`
41
- border-top: solid 1px ${`var(--ds-border, ${N40})`};
42
- margin-top: ${"var(--ds-space-075, 6px)"};
43
- /* 3/2 + 3/4 */
44
- padding-top: ${9 / 4 * gridSize()}px;
45
- ` : ''};
46
- `;
4
+ import { layers } from '@atlaskit/theme/constants';
5
+ export const AutocompleteContainer = styled.div({
6
+ position: 'absolute',
7
+ backgroundColor: "var(--ds-surface-overlay, white)",
8
+ borderRadius: "var(--ds-border-radius-100, 3px)",
9
+ willChange: 'top, left',
10
+ zIndex: layers.dialog(),
11
+ boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
12
+ padding: `${"var(--ds-space-075, 6px)"} ${"var(--ds-space-0, 0)"}`,
13
+ minWidth: '200px',
14
+ maxWidth: '400px',
15
+ '&:focus': {
16
+ outline: 'none'
17
+ },
18
+ marginLeft: "var(--ds-space-negative-100, -8px)",
19
+ marginTop: "var(--ds-space-200, 16px)"
20
+ }, ({
21
+ isOpen
22
+ }) => isOpen ? css({
23
+ visibility: 'visible'
24
+ }) : css({
25
+ visibility: 'hidden'
26
+ }));
27
+ export const AutocompleteOptionsContainer = styled.div({
28
+ maxHeight: '288px',
29
+ overflow: 'auto'
30
+ });
31
+ export const OptionList = styled.ul({
32
+ listStyle: 'none',
33
+ margin: `${"var(--ds-space-0, 0)"}`,
34
+ padding: `${"var(--ds-space-0, 0)"}`
35
+ });
36
+ export const AutocompleteLoadingFooter = styled.div({
37
+ display: 'flex',
38
+ justifyContent: 'center',
39
+ color: `var(--ds-text-subtlest, ${N200})`,
40
+ fontStyle: 'italic',
41
+ padding: "var(--ds-space-150, 12px)",
42
+ textAlign: 'center'
43
+ }, ({
44
+ hasOptions
45
+ }) => hasOptions && {
46
+ borderTop: `solid 1px ${`var(--ds-border, ${N40})`}`,
47
+ marginTop: "var(--ds-space-075, 6px)",
48
+ paddingTop: "var(--ds-space-250, 20px)"
49
+ });
package/dist/es2019/plugins/autocomplete/components/autocomplete-option/styled.js CHANGED
@@ -1,51 +1,48 @@
1
- import { css } from '@emotion/react';
2
1
  import styled from '@emotion/styled';
3
2
  import { N100, N20, N50, N800 } from '@atlaskit/theme/colors';
4
- import { codeFontFamily, fontFamily,
5
- // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
6
- gridSize } from '@atlaskit/theme/constants';
7
- export const TooltipContent = styled.div`
8
- font-family: ${fontFamily};
9
- `;
10
-
11
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
12
- export const OptionListItem = styled.li`
13
- cursor: pointer;
14
- padding: ${"var(--ds-space-075, 6px)"} ${5 / 4 * gridSize()}px;
15
- font-family: ${codeFontFamily};
16
- line-height: 24px;
17
- ${props => props.isSelected ? css`
18
- background: ${`var(--ds-background-neutral-subtle-hovered, ${N20})`};
19
- ` : ''}
20
- ${props => props.isDeprecated ? css`
21
- cursor: default;
22
- color: ${`var(--ds-text-disabled, ${N50})`};
23
- ` : ''}
24
- `;
25
- export const OptionName = styled.div`
26
- color: ${`var(--ds-text, ${N800})`};
27
- overflow: hidden;
28
- white-space: nowrap;
29
- text-overflow: ellipsis;
3
+ import { codeFontFamily, fontFamily } from '@atlaskit/theme/constants';
4
+ export const TooltipContent = styled.div({
5
+ fontFamily: fontFamily()
6
+ });
7
+ export const OptionListItem = styled.li({
8
+ cursor: 'pointer',
9
+ padding: `${"var(--ds-space-075, 6px)"} ${"var(--ds-space-100, 8px)"}`,
10
+ fontFamily: codeFontFamily(),
11
+ lineHeight: '24px'
12
+ }, ({
13
+ isSelected
14
+ }) => isSelected && {
15
+ background: `var(--ds-background-neutral-subtle-hovered, ${N20})`
16
+ }, ({
17
+ isDeprecated
18
+ }) => isDeprecated && {
19
+ cursor: 'default',
20
+ color: `var(--ds-text-disabled, ${N50})`
21
+ });
22
+ export const OptionName = styled.div({
23
+ color: `var(--ds-text, ${N800})`,
24
+ overflow: 'hidden',
25
+ whiteSpace: 'nowrap',
26
+ textOverflow: 'ellipsis',
30
27
  // Added so that overflowed option names do not squish the deprecated info icon
31
- flex: 1;
32
- `;
33
- export const DeprecatedOptionContainer = styled.div`
34
- color: ${`var(--ds-text-disabled, ${N50})`};
35
- display: flex;
36
- justify-content: space-between;
37
- opacity: 0.6;
38
- `;
39
- export const OptionHighlight = styled.span`
40
- font-weight: bold;
41
- `;
42
- export const FieldType = styled.div`
43
- display: flex;
44
- align-items: center;
45
- margin-top: ${"var(--ds-space-negative-025, -2px)"};
46
- color: ${`var(--ds-text-subtlest, ${N100})`};
47
- `;
48
- export const FieldTypeIcon = styled.span`
49
- display: flex;
50
- margin-right: ${"var(--ds-space-050, 4px)"};
51
- `;
28
+ flex: 1
29
+ });
30
+ export const DeprecatedOptionContainer = styled.div({
31
+ color: `var(--ds-text-disabled, ${N50})`,
32
+ display: 'flex',
33
+ justifyContent: 'space-between',
34
+ opacity: 0.6
35
+ });
36
+ export const OptionHighlight = styled.span({
37
+ fontWeight: 'bold'
38
+ });
39
+ export const FieldType = styled.div({
40
+ display: 'flex',
41
+ alignItems: 'center',
42
+ marginTop: "var(--ds-space-negative-025, -2px)",
43
+ color: `var(--ds-text-subtlest, ${N100})`
44
+ });
45
+ export const FieldTypeIcon = styled.span({
46
+ display: 'flex',
47
+ marginRight: "var(--ds-space-050, 4px)"
48
+ });
package/dist/es2019/plugins/rich-inline-nodes/nodes/user/styled.js CHANGED
@@ -1,77 +1,71 @@
1
1
  import { css } from '@emotion/react';
2
2
  import styled from '@emotion/styled';
3
3
  import { N0, N40, N50, N500, R400 } from '@atlaskit/theme/colors';
4
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
5
- export const UserContainer = styled.span`
6
- display: inline-flex;
7
- align-items: center;
8
- height: ${"var(--ds-space-200, 16px)"};
9
- padding: 1px;
10
- border-radius: 10px;
11
- cursor: pointer;
12
- user-select: none;
13
-
14
- ${({
4
+ export const UserContainer = styled.span({
5
+ display: 'inline-flex',
6
+ alignItems: 'baseline',
7
+ paddingLeft: `${"var(--ds-space-025, 2px)"}`,
8
+ borderRadius: '10px',
9
+ cursor: 'pointer',
10
+ userSelect: 'none'
11
+ }, ({
15
12
  selected,
16
13
  error
17
14
  }) => {
18
15
  if (selected) {
19
16
  if (error) {
20
- return css`
21
- color: ${`var(--ds-text-inverse, ${N0})`};
22
- background-color: ${`var(--ds-background-danger-bold, ${R400})`};
23
- text-decoration: wavy underline;
24
- text-decoration-thickness: 1px;
25
- text-decoration-skip-ink: none;
26
- text-decoration-color: ${`var(--ds-text-inverse, ${N0})`};
27
- `;
17
+ return css({
18
+ color: `var(--ds-text-inverse, ${N0})`,
19
+ backgroundColor: `var(--ds-background-danger-bold, ${R400})`,
20
+ textDecoration: 'wavy underline',
21
+ textDecorationThickness: '1px',
22
+ textDecorationSkipInk: 'none',
23
+ textDecorationColor: `var(--ds-text-inverse, ${N0})`
24
+ });
28
25
  } else {
29
- return css`
30
- color: ${`var(--ds-text, ${N0})`};
31
- background-color: ${`var(--ds-background-selected, ${N500})`};
32
- box-shadow: 0 0 0 1px ${"var(--ds-border-selected, transparent)"};
33
- `;
26
+ return css({
27
+ color: `var(--ds-text, ${N0})`,
28
+ backgroundColor: `var(--ds-background-selected, ${N500})`,
29
+ boxShadow: `0 0 0 1px ${"var(--ds-border-selected, transparent)"}`
30
+ });
34
31
  }
35
32
  } else {
36
33
  if (error) {
37
- return css`
38
- color: ${`var(--ds-text-subtle, ${N500})`};
39
- background-color: ${`var(--ds-background-neutral, ${N40})`};
40
- text-decoration: wavy underline;
41
- text-decoration-thickness: 1px;
42
- text-decoration-skip-ink: none;
43
- text-decoration-color: ${`var(--ds-text-danger, ${R400})`};
44
-
45
- &:hover {
46
- background-color: ${`var(--ds-background-neutral-hovered, ${N50})`};
47
- }
48
- `;
34
+ return css({
35
+ color: `var(--ds-text-subtle, ${N500})`,
36
+ backgroundColor: `var(--ds-background-neutral, ${N40})`,
37
+ textDecoration: 'wavy underline',
38
+ textDecorationThickness: '1px',
39
+ textDecorationSkipInk: 'none',
40
+ textDecorationColor: `var(--ds-text-danger, ${R400})`,
41
+ '&:hover': {
42
+ backgroundColor: `var(--ds-background-neutral-hovered, ${N50})`
43
+ }
44
+ });
49
45
  } else {
50
- return css`
51
- color: ${`var(--ds-text-subtle, ${N500})`};
52
- background-color: ${`var(--ds-background-neutral, ${N40})`};
53
-
54
- &:hover {
55
- background-color: ${`var(--ds-background-neutral-hovered, ${N50})`};
56
- }
57
- `;
46
+ return css({
47
+ color: `var(--ds-text-subtle, ${N500})`,
48
+ backgroundColor: `var(--ds-background-neutral, ${N40})`,
49
+ '&:hover': {
50
+ backgroundColor: `var(--ds-background-neutral-hovered, ${N50})`
51
+ }
52
+ });
58
53
  }
59
54
  }
60
- }}
61
- `;
62
- export const NameContainer = styled.span`
63
- margin-left: ${"var(--ds-space-075, 6px)"};
64
- margin-right: ${"var(--ds-space-100, 8px)"};
65
- `;
55
+ });
56
+ export const NameContainer = styled.span({
57
+ marginLeft: "var(--ds-space-075, 6px)",
58
+ marginRight: "var(--ds-space-100, 8px)",
59
+ lineHeight: "var(--ds-space-250, 20px)"
60
+ });
66
61
 
67
62
  /* Override Avatar styles to match design spec */
68
63
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
69
- export const AvatarWrapper = styled.span`
70
- > div {
71
- top: 3px;
72
-
73
- > span {
74
- margin: 0;
75
- }
64
+ export const AvatarWrapper = styled.div({
65
+ height: "var(--ds-space-200, 16px)",
66
+ width: "var(--ds-space-200, 16px)",
67
+ alignSelf: 'center',
68
+ '> div span': {
69
+ margin: "var(--ds-space-0, 0px)"
76
70
  }
77
- `;
71
+ });
package/dist/es2019/state/index.js CHANGED
@@ -8,8 +8,6 @@ import { v4 as uuidv4 } from 'uuid';
8
8
  import { EditorView } from '@atlaskit/editor-prosemirror/view';
9
9
  import { computeJqlInsights, isListOperator } from '@atlaskit/jql-ast';
10
10
  import { JQLAutocomplete } from '@atlaskit/jql-autocomplete';
11
- // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
12
- import { gridSize } from '@atlaskit/theme/constants';
13
11
  import { ActionSubject, ActionSubjectId, Action as AnalyticsAction, EventType } from '../analytics';
14
12
  import { selectErrorCommand } from '../commands/select-error-command';
15
13
  import { JQL_EDITOR_MAIN_ID } from '../common/constants';
@@ -833,14 +831,13 @@ export const useAutocompletePosition = createHook(Store, {
833
831
  // situations where autocomplete dropdown greatly overflows editor view container, we clamp this position.
834
832
  // We also offset top position returned by ProseMirror to ensure autocomplete is positioned consistently at
835
833
  // a grid size distance from editor input bottom in all situations where autocomplete is outside of the editor.
836
- const autocompleteTop = docTop + gridSize();
834
+ const autocompleteTop = docTop;
837
835
  const viewportTop = editorViewContainerRect !== undefined ? clamp(autocompleteTop, editorViewContainerRect.top, editorViewContainerRect.bottom) : autocompleteTop;
838
836
  const left = docLeft - ((_offsetParentRect$lef = offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.left) !== null && _offsetParentRect$lef !== void 0 ? _offsetParentRect$lef : 0);
839
837
  const top = viewportTop - ((_offsetParentRect$top = offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.top) !== null && _offsetParentRect$top !== void 0 ? _offsetParentRect$top : 0);
840
838
  return {
841
- // Left position from ProseMirror - autocomplete option padding so texts are vertically aligned
842
- left: left - 5 / 4 * gridSize(),
843
- top: top + gridSize()
839
+ left,
840
+ top
844
841
  };
845
842
  }
846
843
  });
package/dist/esm/analytics/util.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import { ANALYTICS_CHANNEL, useJqlPackageAnalytics } from '@atlaskit/jql-editor-common';
2
2
  export var useJqlEditorAnalytics = function useJqlEditorAnalytics(analyticsSource) {
3
- return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.0.1", ANALYTICS_CHANNEL);
3
+ return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.0.2", ANALYTICS_CHANNEL);
4
4
  };
package/dist/esm/plugins/autocomplete/components/autocomplete-dropdown/styled.js CHANGED
@@ -1,16 +1,51 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
3
1
  import { css } from '@emotion/react';
4
2
  import styled from '@emotion/styled';
5
3
  import { N200, N40, N50A, N60A } from '@atlaskit/theme/colors';
6
- // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
7
- import { gridSize, layers } from '@atlaskit/theme/constants';
8
- export var AutocompleteContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n background-color: ", ";\n border-radius: ", ";\n will-change: top, left;\n visibility: ", ";\n z-index: ", ";\n box-shadow: ", ";\n padding: ", " 0;\n min-width: ", "px;\n max-width: ", "px;\n\n &:focus {\n outline: none;\n }\n"])), "var(--ds-surface-overlay, white)", "var(--ds-border-radius-100, 3px)", function (props) {
9
- return props.isOpen ? 'visible' : 'hidden';
10
- }, layers.dialog, "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"), "var(--ds-space-075, 6px)", 25 * gridSize(), 50 * gridSize());
11
- export var AutocompleteOptionsContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n max-height: ", "px;\n overflow: auto;\n"])), 36 * gridSize());
12
- export var OptionList = styled.ul(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n list-style: none;\n margin: 0;\n padding: 0;\n"])));
13
- export var AutocompleteLoadingFooter = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n color: ", ";\n font-style: italic;\n padding: ", ";\n text-align: center;\n ", ";\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-150, 12px)", function (props) {
14
- return props.hasOptions ? // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
15
- css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border-top: solid 1px ", ";\n margin-top: ", ";\n /* 3/2 + 3/4 */\n padding-top: ", "px;\n "])), "var(--ds-border, ".concat(N40, ")"), "var(--ds-space-075, 6px)", 9 / 4 * gridSize()) : '';
4
+ import { layers } from '@atlaskit/theme/constants';
5
+ export var AutocompleteContainer = styled.div({
6
+ position: 'absolute',
7
+ backgroundColor: "var(--ds-surface-overlay, white)",
8
+ borderRadius: "var(--ds-border-radius-100, 3px)",
9
+ willChange: 'top, left',
10
+ zIndex: layers.dialog(),
11
+ boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
12
+ padding: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-0, 0)"),
13
+ minWidth: '200px',
14
+ maxWidth: '400px',
15
+ '&:focus': {
16
+ outline: 'none'
17
+ },
18
+ marginLeft: "var(--ds-space-negative-100, -8px)",
19
+ marginTop: "var(--ds-space-200, 16px)"
20
+ }, function (_ref) {
21
+ var isOpen = _ref.isOpen;
22
+ return isOpen ? css({
23
+ visibility: 'visible'
24
+ }) : css({
25
+ visibility: 'hidden'
26
+ });
27
+ });
28
+ export var AutocompleteOptionsContainer = styled.div({
29
+ maxHeight: '288px',
30
+ overflow: 'auto'
31
+ });
32
+ export var OptionList = styled.ul({
33
+ listStyle: 'none',
34
+ margin: "var(--ds-space-0, 0)",
35
+ padding: "var(--ds-space-0, 0)"
36
+ });
37
+ export var AutocompleteLoadingFooter = styled.div({
38
+ display: 'flex',
39
+ justifyContent: 'center',
40
+ color: "var(--ds-text-subtlest, ".concat(N200, ")"),
41
+ fontStyle: 'italic',
42
+ padding: "var(--ds-space-150, 12px)",
43
+ textAlign: 'center'
44
+ }, function (_ref2) {
45
+ var hasOptions = _ref2.hasOptions;
46
+ return hasOptions && {
47
+ borderTop: "solid 1px ".concat("var(--ds-border, ".concat(N40, ")")),
48
+ marginTop: "var(--ds-space-075, 6px)",
49
+ paddingTop: "var(--ds-space-250, 20px)"
50
+ };
16
51
  });
package/dist/esm/plugins/autocomplete/components/autocomplete-option/styled.js CHANGED
@@ -1,21 +1,50 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
3
- import { css } from '@emotion/react';
4
1
  import styled from '@emotion/styled';
5
2
  import { N100, N20, N50, N800 } from '@atlaskit/theme/colors';
6
- import { codeFontFamily, fontFamily,
7
- // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
8
- gridSize } from '@atlaskit/theme/constants';
9
- export var TooltipContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-family: ", ";\n"])), fontFamily);
10
-
11
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
12
- export var OptionListItem = styled.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n cursor: pointer;\n padding: ", " ", "px;\n font-family: ", ";\n line-height: 24px;\n ", "\n ", "\n"])), "var(--ds-space-075, 6px)", 5 / 4 * gridSize(), codeFontFamily, function (props) {
13
- return props.isSelected ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background: ", ";\n "])), "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")")) : '';
14
- }, function (props) {
15
- return props.isDeprecated ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n cursor: default;\n color: ", ";\n "])), "var(--ds-text-disabled, ".concat(N50, ")")) : '';
3
+ import { codeFontFamily, fontFamily } from '@atlaskit/theme/constants';
4
+ export var TooltipContent = styled.div({
5
+ fontFamily: fontFamily()
16
6
  });
17
- export var OptionName = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n color: ", ";\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n // Added so that overflowed option names do not squish the deprecated info icon\n flex: 1;\n"])), "var(--ds-text, ".concat(N800, ")"));
18
- export var DeprecatedOptionContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: ", ";\n display: flex;\n justify-content: space-between;\n opacity: 0.6;\n"])), "var(--ds-text-disabled, ".concat(N50, ")"));
19
- export var OptionHighlight = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n font-weight: bold;\n"])));
20
- export var FieldType = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n margin-top: ", ";\n color: ", ";\n"])), "var(--ds-space-negative-025, -2px)", "var(--ds-text-subtlest, ".concat(N100, ")"));
21
- export var FieldTypeIcon = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n display: flex;\n margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
7
+ export var OptionListItem = styled.li({
8
+ cursor: 'pointer',
9
+ padding: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-100, 8px)"),
10
+ fontFamily: codeFontFamily(),
11
+ lineHeight: '24px'
12
+ }, function (_ref) {
13
+ var isSelected = _ref.isSelected;
14
+ return isSelected && {
15
+ background: "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")")
16
+ };
17
+ }, function (_ref2) {
18
+ var isDeprecated = _ref2.isDeprecated;
19
+ return isDeprecated && {
20
+ cursor: 'default',
21
+ color: "var(--ds-text-disabled, ".concat(N50, ")")
22
+ };
23
+ });
24
+ export var OptionName = styled.div({
25
+ color: "var(--ds-text, ".concat(N800, ")"),
26
+ overflow: 'hidden',
27
+ whiteSpace: 'nowrap',
28
+ textOverflow: 'ellipsis',
29
+ // Added so that overflowed option names do not squish the deprecated info icon
30
+ flex: 1
31
+ });
32
+ export var DeprecatedOptionContainer = styled.div({
33
+ color: "var(--ds-text-disabled, ".concat(N50, ")"),
34
+ display: 'flex',
35
+ justifyContent: 'space-between',
36
+ opacity: 0.6
37
+ });
38
+ export var OptionHighlight = styled.span({
39
+ fontWeight: 'bold'
40
+ });
41
+ export var FieldType = styled.div({
42
+ display: 'flex',
43
+ alignItems: 'center',
44
+ marginTop: "var(--ds-space-negative-025, -2px)",
45
+ color: "var(--ds-text-subtlest, ".concat(N100, ")")
46
+ });
47
+ export var FieldTypeIcon = styled.span({
48
+ display: 'flex',
49
+ marginRight: "var(--ds-space-050, 4px)"
50
+ });
package/dist/esm/plugins/rich-inline-nodes/nodes/user/styled.js CHANGED
@@ -1,28 +1,70 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
3
1
  import { css } from '@emotion/react';
4
2
  import styled from '@emotion/styled';
5
3
  import { N0, N40, N50, N500, R400 } from '@atlaskit/theme/colors';
6
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
7
- export var UserContainer = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: inline-flex;\n align-items: center;\n height: ", ";\n padding: 1px;\n border-radius: 10px;\n cursor: pointer;\n user-select: none;\n\n ", "\n"])), "var(--ds-space-200, 16px)", function (_ref) {
4
+ export var UserContainer = styled.span({
5
+ display: 'inline-flex',
6
+ alignItems: 'baseline',
7
+ paddingLeft: "var(--ds-space-025, 2px)",
8
+ borderRadius: '10px',
9
+ cursor: 'pointer',
10
+ userSelect: 'none'
11
+ }, function (_ref) {
8
12
  var selected = _ref.selected,
9
13
  error = _ref.error;
10
14
  if (selected) {
11
15
  if (error) {
12
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n text-decoration: wavy underline;\n text-decoration-thickness: 1px;\n text-decoration-skip-ink: none;\n text-decoration-color: ", ";\n "])), "var(--ds-text-inverse, ".concat(N0, ")"), "var(--ds-background-danger-bold, ".concat(R400, ")"), "var(--ds-text-inverse, ".concat(N0, ")"));
16
+ return css({
17
+ color: "var(--ds-text-inverse, ".concat(N0, ")"),
18
+ backgroundColor: "var(--ds-background-danger-bold, ".concat(R400, ")"),
19
+ textDecoration: 'wavy underline',
20
+ textDecorationThickness: '1px',
21
+ textDecorationSkipInk: 'none',
22
+ textDecorationColor: "var(--ds-text-inverse, ".concat(N0, ")")
23
+ });
13
24
  } else {
14
- return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n box-shadow: 0 0 0 1px ", ";\n "])), "var(--ds-text, ".concat(N0, ")"), "var(--ds-background-selected, ".concat(N500, ")"), "var(--ds-border-selected, transparent)");
25
+ return css({
26
+ color: "var(--ds-text, ".concat(N0, ")"),
27
+ backgroundColor: "var(--ds-background-selected, ".concat(N500, ")"),
28
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, transparent)")
29
+ });
15
30
  }
16
31
  } else {
17
32
  if (error) {
18
- return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n text-decoration: wavy underline;\n text-decoration-thickness: 1px;\n text-decoration-skip-ink: none;\n text-decoration-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n "])), "var(--ds-text-subtle, ".concat(N500, ")"), "var(--ds-background-neutral, ".concat(N40, ")"), "var(--ds-text-danger, ".concat(R400, ")"), "var(--ds-background-neutral-hovered, ".concat(N50, ")"));
33
+ return css({
34
+ color: "var(--ds-text-subtle, ".concat(N500, ")"),
35
+ backgroundColor: "var(--ds-background-neutral, ".concat(N40, ")"),
36
+ textDecoration: 'wavy underline',
37
+ textDecorationThickness: '1px',
38
+ textDecorationSkipInk: 'none',
39
+ textDecorationColor: "var(--ds-text-danger, ".concat(R400, ")"),
40
+ '&:hover': {
41
+ backgroundColor: "var(--ds-background-neutral-hovered, ".concat(N50, ")")
42
+ }
43
+ });
19
44
  } else {
20
- return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n "])), "var(--ds-text-subtle, ".concat(N500, ")"), "var(--ds-background-neutral, ".concat(N40, ")"), "var(--ds-background-neutral-hovered, ".concat(N50, ")"));
45
+ return css({
46
+ color: "var(--ds-text-subtle, ".concat(N500, ")"),
47
+ backgroundColor: "var(--ds-background-neutral, ".concat(N40, ")"),
48
+ '&:hover': {
49
+ backgroundColor: "var(--ds-background-neutral-hovered, ".concat(N50, ")")
50
+ }
51
+ });
21
52
  }
22
53
  }
23
54
  });
24
- export var NameContainer = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n margin-left: ", ";\n margin-right: ", ";\n"])), "var(--ds-space-075, 6px)", "var(--ds-space-100, 8px)");
55
+ export var NameContainer = styled.span({
56
+ marginLeft: "var(--ds-space-075, 6px)",
57
+ marginRight: "var(--ds-space-100, 8px)",
58
+ lineHeight: "var(--ds-space-250, 20px)"
59
+ });
25
60
 
26
61
  /* Override Avatar styles to match design spec */
27
62
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
28
- export var AvatarWrapper = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n > div {\n top: 3px;\n\n > span {\n margin: 0;\n }\n }\n"])));
63
+ export var AvatarWrapper = styled.div({
64
+ height: "var(--ds-space-200, 16px)",
65
+ width: "var(--ds-space-200, 16px)",
66
+ alignSelf: 'center',
67
+ '> div span': {
68
+ margin: "var(--ds-space-0, 0px)"
69
+ }
70
+ });
package/dist/esm/state/index.js CHANGED
@@ -13,8 +13,6 @@ import { v4 as uuidv4 } from 'uuid';
13
13
  import { EditorView } from '@atlaskit/editor-prosemirror/view';
14
14
  import { computeJqlInsights, isListOperator } from '@atlaskit/jql-ast';
15
15
  import { JQLAutocomplete } from '@atlaskit/jql-autocomplete';
16
- // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
17
- import { gridSize } from '@atlaskit/theme/constants';
18
16
  import { ActionSubject, ActionSubjectId, Action as AnalyticsAction, EventType } from '../analytics';
19
17
  import { selectErrorCommand } from '../commands/select-error-command';
20
18
  import { JQL_EDITOR_MAIN_ID } from '../common/constants';
@@ -853,14 +851,13 @@ export var useAutocompletePosition = createHook(Store, {
853
851
  // situations where autocomplete dropdown greatly overflows editor view container, we clamp this position.
854
852
  // We also offset top position returned by ProseMirror to ensure autocomplete is positioned consistently at
855
853
  // a grid size distance from editor input bottom in all situations where autocomplete is outside of the editor.
856
- var autocompleteTop = docTop + gridSize();
854
+ var autocompleteTop = docTop;
857
855
  var viewportTop = editorViewContainerRect !== undefined ? clamp(autocompleteTop, editorViewContainerRect.top, editorViewContainerRect.bottom) : autocompleteTop;
858
856
  var left = docLeft - ((_offsetParentRect$lef = offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.left) !== null && _offsetParentRect$lef !== void 0 ? _offsetParentRect$lef : 0);
859
857
  var top = viewportTop - ((_offsetParentRect$top = offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.top) !== null && _offsetParentRect$top !== void 0 ? _offsetParentRect$top : 0);
860
858
  return {
861
- // Left position from ProseMirror - autocomplete option padding so texts are vertically aligned
862
- left: left - 5 / 4 * gridSize(),
863
- top: top + gridSize()
859
+ left: left,
860
+ top: top
864
861
  };
865
862
  }
866
863
  });
package/dist/types/plugins/rich-inline-nodes/nodes/user/styled.d.ts CHANGED
@@ -4,4 +4,4 @@ export declare const UserContainer: import("@emotion/styled-base").StyledCompone
4
4
  error: boolean;
5
5
  }, object>;
6
6
  export declare const NameContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;
7
- export declare const AvatarWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;
7
+ export declare const AvatarWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
package/dist/types-ts4.5/plugins/rich-inline-nodes/nodes/user/styled.d.ts CHANGED
@@ -4,4 +4,4 @@ export declare const UserContainer: import("@emotion/styled-base").StyledCompone
4
4
  error: boolean;
5
5
  }, object>;
6
6
  export declare const NameContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;
7
- export declare const AvatarWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;
7
+ export declare const AvatarWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/jql-editor",
3
- "version": "4.0.1",
3
+ "version": "4.0.2",
4
4
  "description": "This package allows consumers to render an advanced JQL editor component to enable autocomplete-assisted authoring and validation of JQL queries.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -38,18 +38,18 @@
38
38
  "dependencies": {
39
39
  "@atlaskit/analytics-gas-types": "^5.1.0",
40
40
  "@atlaskit/analytics-next": "^9.2.0",
41
- "@atlaskit/avatar": "^21.4.0",
42
- "@atlaskit/button": "^17.3.0",
41
+ "@atlaskit/avatar": "^21.5.0",
42
+ "@atlaskit/button": "^17.6.0",
43
43
  "@atlaskit/editor-prosemirror": "3.0.0",
44
44
  "@atlaskit/form": "^9.0.3",
45
- "@atlaskit/icon": "^22.0.0",
45
+ "@atlaskit/icon": "^22.1.0",
46
46
  "@atlaskit/jql-ast": "^3.1.0",
47
47
  "@atlaskit/jql-autocomplete": "^2.0.0",
48
48
  "@atlaskit/jql-editor-common": "^2.0.0",
49
49
  "@atlaskit/jql-parser": "^2.0.0",
50
50
  "@atlaskit/spinner": "^16.0.0",
51
51
  "@atlaskit/theme": "^12.6.0",
52
- "@atlaskit/tokens": "^1.35.0",
52
+ "@atlaskit/tokens": "^1.39.0",
53
53
  "@atlaskit/tooltip": "^18.1.0",
54
54
  "@babel/runtime": "^7.0.0",
55
55
  "@emotion/react": "^11.7.1",