@atlaskit/jql-editor 4.0.4 → 4.0.6
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.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/accessibility/styled.js +1 -3
- package/dist/cjs/analytics/util.js +1 -1
- package/dist/cjs/common/styled.js +14 -4
- package/dist/cjs/ui/jql-editor-controls-content/base-expand-toggle/styled.js +14 -3
- package/dist/cjs/ui/jql-editor-controls-content/base-syntax-help/styled.js +19 -3
- package/dist/cjs/ui/jql-editor-footer-content/jql-editor-help/styled.js +17 -4
- package/dist/cjs/ui/jql-editor-footer-content/jql-messages/format/styled.js +8 -5
- package/dist/cjs/ui/jql-editor-layout/styled.js +86 -20
- package/dist/cjs/ui/tooltip-tag/styled.js +3 -3
- package/dist/es2019/accessibility/styled.js +1 -3
- package/dist/es2019/analytics/util.js +1 -1
- package/dist/es2019/common/styled.js +14 -14
- package/dist/es2019/ui/jql-editor-controls-content/base-expand-toggle/styled.js +10 -14
- package/dist/es2019/ui/jql-editor-controls-content/base-syntax-help/styled.js +17 -25
- package/dist/es2019/ui/jql-editor-footer-content/jql-editor-help/styled.js +15 -19
- package/dist/es2019/ui/jql-editor-footer-content/jql-messages/format/styled.js +7 -7
- package/dist/es2019/ui/jql-editor-layout/styled.js +76 -77
- package/dist/es2019/ui/tooltip-tag/styled.js +3 -3
- package/dist/esm/accessibility/styled.js +1 -3
- package/dist/esm/analytics/util.js +1 -1
- package/dist/esm/common/styled.js +14 -4
- package/dist/esm/ui/jql-editor-controls-content/base-expand-toggle/styled.js +14 -3
- package/dist/esm/ui/jql-editor-controls-content/base-syntax-help/styled.js +19 -3
- package/dist/esm/ui/jql-editor-footer-content/jql-editor-help/styled.js +17 -4
- package/dist/esm/ui/jql-editor-footer-content/jql-messages/format/styled.js +8 -5
- package/dist/esm/ui/jql-editor-layout/styled.js +86 -20
- package/dist/esm/ui/tooltip-tag/styled.js +3 -3
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/jql-editor
|
|
2
2
|
|
|
3
|
+
## 4.0.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#91203](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91203) [`3c8348468618`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3c8348468618) - Minor Typescript changes to improve compatibility with React 18
|
|
8
|
+
|
|
9
|
+
## 4.0.5
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#90546](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90546) [`e3e2542b4963`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e3e2542b4963) - Update TypeScript type parameters when using `FormattedMessage` from `react-intl` to improve compatibility with React 18
|
|
14
|
+
|
|
3
15
|
## 4.0.4
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.ScreenReaderText = void 0;
|
|
8
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
8
|
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
10
9
|
var _styled2 = require("../common/styled");
|
|
11
|
-
var
|
|
12
|
-
var ScreenReaderText = exports.ScreenReaderText = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n ", "\n"])), _styled2.hiddenMixin);
|
|
10
|
+
var ScreenReaderText = exports.ScreenReaderText = _styled.default.div(_styled2.hiddenMixin);
|
|
@@ -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.
|
|
9
|
+
return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "4.0.6", _jqlEditorCommon.ANALYTICS_CHANNEL);
|
|
10
10
|
};
|
|
@@ -5,11 +5,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.hiddenMixin = exports.TooltipContent = 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 _constants = require("@atlaskit/theme/constants");
|
|
12
|
-
var _templateObject, _templateObject2;
|
|
13
11
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
14
|
-
var hiddenMixin = exports.hiddenMixin = (0, _react.css)(
|
|
15
|
-
|
|
12
|
+
var hiddenMixin = exports.hiddenMixin = (0, _react.css)({
|
|
13
|
+
clip: 'rect(1px, 1px, 1px, 1px)',
|
|
14
|
+
clipPath: 'inset(50%)',
|
|
15
|
+
height: '1px',
|
|
16
|
+
width: '1px',
|
|
17
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
|
|
18
|
+
margin: '-1px',
|
|
19
|
+
overflow: 'hidden',
|
|
20
|
+
padding: 0,
|
|
21
|
+
position: 'absolute'
|
|
22
|
+
});
|
|
23
|
+
var TooltipContent = exports.TooltipContent = _styled.default.div({
|
|
24
|
+
fontFamily: (0, _constants.fontFamily)()
|
|
25
|
+
});
|
|
@@ -5,8 +5,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.ExpandToggleContainer = void 0;
|
|
8
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
8
|
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
10
9
|
var _colors = require("@atlaskit/theme/colors");
|
|
11
|
-
var
|
|
12
|
-
|
|
10
|
+
var ExpandToggleContainer = exports.ExpandToggleContainer = _styled.default.div({
|
|
11
|
+
/* Override background styles for our button to match designs */
|
|
12
|
+
'> button': {
|
|
13
|
+
borderRadius: '100%',
|
|
14
|
+
/* Fill the remaining vertical space for a single line in our editor and space between buttons */
|
|
15
|
+
margin: "var(--ds-space-050, 4px)".concat(" 0"),
|
|
16
|
+
'&:hover': {
|
|
17
|
+
background: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N40, ")")
|
|
18
|
+
},
|
|
19
|
+
"&:active, &[data-firefox-is-active='true']": {
|
|
20
|
+
background: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.N50, ")")
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
});
|
|
@@ -5,8 +5,24 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.SyntaxHelpContainer = void 0;
|
|
8
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
8
|
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
10
9
|
var _colors = require("@atlaskit/theme/colors");
|
|
11
|
-
var
|
|
12
|
-
|
|
10
|
+
var SyntaxHelpContainer = exports.SyntaxHelpContainer = _styled.default.div({
|
|
11
|
+
'> a': {
|
|
12
|
+
background: "var(--ds-background-neutral-bold, ".concat(_colors.N70, ")"),
|
|
13
|
+
borderRadius: '100%',
|
|
14
|
+
margin: "var(--ds-space-050, 4px)",
|
|
15
|
+
'&:hover': {
|
|
16
|
+
background: "var(--ds-background-neutral-bold-hovered, ".concat(_colors.N500, ")")
|
|
17
|
+
},
|
|
18
|
+
'&:focus': {
|
|
19
|
+
background: "var(--ds-background-neutral-bold, ".concat(_colors.N70, ")")
|
|
20
|
+
},
|
|
21
|
+
"&:active, &[data-firefox-is-active='true']": {
|
|
22
|
+
background: "var(--ds-background-neutral-bold-pressed, ".concat(_colors.N600, ")")
|
|
23
|
+
},
|
|
24
|
+
'&[disabled]': {
|
|
25
|
+
background: "var(--ds-background-disabled, ".concat(_colors.N50, ")")
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
});
|
|
@@ -5,11 +5,24 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.HelpContainer = 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 _styled2 = require("../../../common/styled");
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
var HelpContainer = exports.HelpContainer = _styled.default.div({
|
|
12
|
+
display: 'flex',
|
|
13
|
+
marginLeft: 'auto',
|
|
14
|
+
marginRight: 0,
|
|
15
|
+
flexShrink: 0,
|
|
16
|
+
padding: "0 ".concat("var(--ds-space-100, 8px)"),
|
|
17
|
+
'> * + *': {
|
|
18
|
+
marginLeft: "var(--ds-space-200, 16px)"
|
|
19
|
+
}
|
|
20
|
+
}, function (props) {
|
|
21
|
+
return props.isVisible ? (0, _react.css)({
|
|
22
|
+
visibility: 'visible',
|
|
23
|
+
opacity: 1,
|
|
24
|
+
transition: 'opacity 250ms cubic-bezier(0.15, 1, 0.3, 1)'
|
|
25
|
+
}) : (0, _react.css)(_styled2.hiddenMixin, {
|
|
26
|
+
opacity: 0
|
|
27
|
+
});
|
|
15
28
|
});
|
|
@@ -5,10 +5,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.MessageList = exports.MessageContainer = void 0;
|
|
8
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
8
|
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
var MessageContainer = exports.MessageContainer = _styled.default.div(function (props) {
|
|
10
|
+
return {
|
|
11
|
+
paddingLeft: props.isSearch ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)"
|
|
12
|
+
};
|
|
13
13
|
});
|
|
14
|
-
var MessageList = exports.MessageList = _styled.default.ul(
|
|
14
|
+
var MessageList = exports.MessageList = _styled.default.ul({
|
|
15
|
+
margin: 0,
|
|
16
|
+
paddingLeft: "var(--ds-space-300, 24px)"
|
|
17
|
+
});
|
|
@@ -11,11 +11,32 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
|
11
11
|
var _colors = require("@atlaskit/theme/colors");
|
|
12
12
|
var _constants = require("@atlaskit/theme/constants");
|
|
13
13
|
var _constants2 = require("../../plugins/validation-tooltip/constants");
|
|
14
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4
|
|
15
|
-
var fadeIn = (0, _react.keyframes)(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
15
|
+
var fadeIn = (0, _react.keyframes)({
|
|
16
|
+
from: {
|
|
17
|
+
opacity: 0
|
|
18
|
+
},
|
|
19
|
+
to: {
|
|
20
|
+
opacity: 1
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
var fadeOut = (0, _react.keyframes)({
|
|
24
|
+
from: {
|
|
25
|
+
visibility: 'visible',
|
|
26
|
+
opacity: 1
|
|
27
|
+
},
|
|
28
|
+
to: {
|
|
29
|
+
opacity: 0
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation
|
|
34
|
+
var EditorMain = exports.EditorMain = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n /* CSS reset */\n font-family: ", ";\n font-size: ", "px;\n flex-grow: 1;\n\n /* These styles and animations are derived from @atlaskit/tooltip */\n\n .", " {\n background-color: ", ";\n color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n font-size: 12px;\n line-height: 1.3;\n max-width: 240px;\n padding: ", " ", ";\n word-wrap: break-word;\n overflow-wrap: break-word;\n z-index: ", ";\n pointer-events: none;\n position: absolute;\n visibility: hidden;\n\n /* Horizontally center and vertically position above the target element */\n transform: translate(-50%, calc(-100% - ", "));\n\n &.", " {\n animation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n visibility: visible;\n }\n\n &.", " {\n animation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n }\n }\n"])), _constants.fontFamily, _constants.fontSize, _constants2.TOOLTIP_CLASSNAME, "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"), "var(--ds-text-inverse, ".concat(_colors.N0, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)", _constants.layers.tooltip(), "var(--ds-space-200, 16px)", _constants2.TOOLTIP_ENTER_CLASSNAME, fadeIn, _constants2.TOOLTIP_EXIT_CLASSNAME, fadeOut);
|
|
35
|
+
var EditorFooter = exports.EditorFooter = _styled.default.div({
|
|
36
|
+
display: 'flex',
|
|
37
|
+
justifyContent: 'space-between',
|
|
38
|
+
minHeight: '20px'
|
|
39
|
+
});
|
|
19
40
|
|
|
20
41
|
// Height (in px) for a single row in the editor
|
|
21
42
|
var rowHeight = (0, _constants.gridSize)() * 2.75;
|
|
@@ -24,38 +45,83 @@ var getEditorInputVerticalPadding = function getEditorInputVerticalPadding(isCom
|
|
|
24
45
|
return isCompact ? 3 : 7;
|
|
25
46
|
};
|
|
26
47
|
var editorInputHorizontalPadding = 6;
|
|
27
|
-
var EditorViewContainer = exports.EditorViewContainer = _styled.default.div(
|
|
28
|
-
|
|
48
|
+
var EditorViewContainer = exports.EditorViewContainer = _styled.default.div({
|
|
49
|
+
backgroundColor: "var(--ds-background-input, ".concat(_colors.N10, ")"),
|
|
50
|
+
borderStyle: 'solid',
|
|
51
|
+
borderWidth: '2px',
|
|
52
|
+
borderColor: "var(--ds-border, ".concat(_colors.N40, ")"),
|
|
53
|
+
borderRadius: "var(--ds-border-radius-100, 3px)",
|
|
54
|
+
boxSizing: 'border-box',
|
|
55
|
+
color: "var(--ds-text, ".concat(_colors.N900, ")"),
|
|
56
|
+
display: 'flex',
|
|
57
|
+
overflow: 'auto',
|
|
58
|
+
transition: 'background-color 0.2s ease-in-out, border-color 0.2s ease-in-out'
|
|
59
|
+
}, function (props) {
|
|
60
|
+
return props.editorViewHasFocus ? (0, _react.css)({
|
|
61
|
+
backgroundColor: "var(--ds-surface, ".concat(_colors.N0, ")"),
|
|
62
|
+
borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")")
|
|
63
|
+
}) : (0, _react.css)({
|
|
64
|
+
':hover': {
|
|
65
|
+
backgroundColor: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")")
|
|
66
|
+
}
|
|
67
|
+
});
|
|
29
68
|
}, function (props) {
|
|
30
|
-
return props.editorViewIsInvalid && (0, _react.css)(
|
|
69
|
+
return props.editorViewIsInvalid && (0, _react.css)({
|
|
70
|
+
borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
|
|
71
|
+
});
|
|
31
72
|
});
|
|
32
|
-
var ReadOnlyEditorViewContainer = exports.ReadOnlyEditorViewContainer = (0, _styled.default)(EditorViewContainer)(
|
|
33
|
-
|
|
34
|
-
|
|
73
|
+
var ReadOnlyEditorViewContainer = exports.ReadOnlyEditorViewContainer = (0, _styled.default)(EditorViewContainer)({
|
|
74
|
+
backgroundColor: "var(--ds-background-disabled, ".concat(_colors.N30, ")"),
|
|
75
|
+
color: "var(--ds-text-disabled, ".concat(_colors.N100, ")"),
|
|
76
|
+
pointerEvents: 'none'
|
|
77
|
+
});
|
|
78
|
+
var LineNumberToolbar = exports.LineNumberToolbar = _styled.default.div({
|
|
79
|
+
backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N30, ")"),
|
|
80
|
+
flexShrink: 0,
|
|
81
|
+
width: '30px',
|
|
82
|
+
position: 'sticky',
|
|
83
|
+
top: 0
|
|
84
|
+
}, function (props) {
|
|
85
|
+
return !props.lineNumbersVisible && (0, _react.css)({
|
|
86
|
+
display: 'none'
|
|
87
|
+
});
|
|
35
88
|
});
|
|
36
89
|
|
|
37
90
|
/**
|
|
38
91
|
* The main div which the Prosemirror editor will be rendered into.
|
|
39
92
|
*/
|
|
40
|
-
|
|
93
|
+
// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation
|
|
94
|
+
var EditorView = exports.EditorView = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n counter-reset: lineNumber;\n flex-grow: 1;\n\n transition: height 250ms cubic-bezier(0.15, 1, 0.3, 1),\n max-height 250ms cubic-bezier(0.15, 1, 0.3, 1);\n max-height: ", "px;\n\n line-height: ", ";\n font-family: ", ";\n word-break: break-word;\n overflow-wrap: anywhere;\n white-space: pre-wrap;\n\n &[data-expanded] {\n height: ", "px;\n max-height: ", "px;\n }\n\n .ProseMirror {\n color: ", ";\n padding: ", "px\n ", "px;\n\n &:focus {\n outline: none;\n }\n\n .mark-token-keyword {\n color: ", ";\n }\n\n .mark-token-field {\n color: ", ";\n }\n\n .mark-token-operator {\n color: ", ";\n }\n\n .mark-token-error {\n color: ", ";\n text-decoration: wavy underline;\n text-decoration-thickness: 1px;\n text-decoration-skip-ink: none;\n }\n }\n\n p {\n margin: 0;\n counter-increment: lineNumber;\n position: relative;\n\n /* Show the current line number before each paragraph block. */\n\n &::before {\n content: counter(lineNumber);\n color: ", ";\n font-size: 10px;\n line-height: ", ";\n padding: 0 ", " 0 ", ";\n position: absolute;\n box-sizing: border-box;\n /* Shift the line number tag 100% (plus 8px padding) to the left to position it inside the LineNumberToolbar */\n transform: translateX(calc(-100% - ", "));\n\n /* We can fit 3 digits before ellipses. This is not very responsive but saves us having to add expensive width\n recalculation logic to the LineNumberToolbar for a scenario that *should* never happen. */\n max-width: 30px;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n\n ", "\n }\n }\n"])), function (props) {
|
|
41
95
|
return rowHeight * props.defaultMaxRows + getEditorInputVerticalPadding(props.isCompact) * 2;
|
|
42
|
-
}, rowHeight / (0, _constants.fontSize)(), _constants.codeFontFamily, function (props) {
|
|
96
|
+
}, rowHeight / (0, _constants.fontSize)(), (0, _constants.codeFontFamily)(), function (props) {
|
|
43
97
|
return rowHeight * props.expandedRows + getEditorInputVerticalPadding(props.isCompact) * 2;
|
|
44
98
|
}, function (props) {
|
|
45
99
|
return rowHeight * props.expandedRows + getEditorInputVerticalPadding(props.isCompact) * 2;
|
|
46
100
|
}, "var(--ds-text, ".concat(_colors.N700, ")"), function (props) {
|
|
47
101
|
return getEditorInputVerticalPadding(props.isCompact);
|
|
48
102
|
}, editorInputHorizontalPadding, "var(--ds-text-accent-purple, ".concat(_colors.P400, ")"), "var(--ds-text-accent-blue, ".concat(_colors.B300, ")"), "var(--ds-text-accent-green, ".concat(_colors.G300, ")"), "var(--ds-text-danger, ".concat(_colors.R400, ")"), "var(--ds-text-subtlest, ".concat(_colors.N100, ")"), rowHeight / 10, "var(--ds-space-100, 8px)", "var(--ds-space-025, 2px)", "var(--ds-space-100, 8px)", function (props) {
|
|
49
|
-
return !props.lineNumbersVisible &&
|
|
103
|
+
return !props.lineNumbersVisible && // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
104
|
+
(0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: none;\n "])));
|
|
50
105
|
});
|
|
51
|
-
|
|
106
|
+
|
|
107
|
+
// FIXME: convert-props-syntax rule doesn't catch this
|
|
108
|
+
// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression
|
|
109
|
+
var ReadOnlyEditorView = exports.ReadOnlyEditorView = (0, _styled.default)(EditorView)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n /* We need to replicate padding from the inner prosemirror element in our read only state. That means we also need\n recompute max height excluding the child padding. */\n padding: ", "px\n ", "px;\n max-height: ", "px;\n\n > p {\n /* Prevent collapsing empty paragraphs */\n min-height: ", "px;\n }\n"])), function (props) {
|
|
52
110
|
return getEditorInputVerticalPadding(props.isCompact);
|
|
53
111
|
}, editorInputHorizontalPadding, function (props) {
|
|
54
112
|
return rowHeight * props.defaultMaxRows;
|
|
55
113
|
}, rowHeight);
|
|
56
|
-
var EditorControls = exports.EditorControls = _styled.default.div(
|
|
57
|
-
return
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
114
|
+
var EditorControls = exports.EditorControls = _styled.default.div(function (props) {
|
|
115
|
+
return {
|
|
116
|
+
alignItems: 'center',
|
|
117
|
+
display: 'flex',
|
|
118
|
+
flexShrink: 0,
|
|
119
|
+
marginLeft: 'auto',
|
|
120
|
+
marginRight: "".concat(props.isSearch ? getEditorInputVerticalPadding(props.isCompact) - 1 // the search button needs the same vertical & horizontal spacing
|
|
121
|
+
: editorInputHorizontalPadding - 3, "px"),
|
|
122
|
+
lineHeight: 'normal',
|
|
123
|
+
position: 'sticky',
|
|
124
|
+
top: 0,
|
|
125
|
+
height: "".concat(rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact), "px")
|
|
126
|
+
};
|
|
61
127
|
});
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.StyledTooltipTag = void 0;
|
|
8
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
8
|
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
10
|
-
var
|
|
11
|
-
|
|
9
|
+
var StyledTooltipTag = exports.StyledTooltipTag = _styled.default.div({
|
|
10
|
+
display: 'flex'
|
|
11
|
+
});
|
|
@@ -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.
|
|
3
|
+
return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.0.6", ANALYTICS_CHANNEL);
|
|
4
4
|
};
|
|
@@ -3,17 +3,17 @@ import styled from '@emotion/styled';
|
|
|
3
3
|
import { fontFamily } from '@atlaskit/theme/constants';
|
|
4
4
|
|
|
5
5
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
6
|
-
export const hiddenMixin = css
|
|
7
|
-
clip: rect(1px, 1px, 1px, 1px)
|
|
8
|
-
|
|
9
|
-
height: 1px
|
|
10
|
-
width: 1px
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
6
|
+
export const hiddenMixin = css({
|
|
7
|
+
clip: 'rect(1px, 1px, 1px, 1px)',
|
|
8
|
+
clipPath: 'inset(50%)',
|
|
9
|
+
height: '1px',
|
|
10
|
+
width: '1px',
|
|
11
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
|
|
12
|
+
margin: '-1px',
|
|
13
|
+
overflow: 'hidden',
|
|
14
|
+
padding: 0,
|
|
15
|
+
position: 'absolute'
|
|
16
|
+
});
|
|
17
|
+
export const TooltipContent = styled.div({
|
|
18
|
+
fontFamily: fontFamily()
|
|
19
|
+
});
|
|
@@ -1,20 +1,16 @@
|
|
|
1
1
|
import styled from '@emotion/styled';
|
|
2
2
|
import { N40, N50 } from '@atlaskit/theme/colors';
|
|
3
|
-
export const ExpandToggleContainer = styled.div
|
|
3
|
+
export const ExpandToggleContainer = styled.div({
|
|
4
4
|
/* Override background styles for our button to match designs */
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
border-radius: 100%;
|
|
5
|
+
'> button': {
|
|
6
|
+
borderRadius: '100%',
|
|
8
7
|
/* Fill the remaining vertical space for a single line in our editor and space between buttons */
|
|
9
|
-
margin:
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
&:active,
|
|
16
|
-
&[data-firefox-is-active='true'] {
|
|
17
|
-
background: ${`var(--ds-background-neutral-subtle-pressed, ${N50})`};
|
|
8
|
+
margin: `${"var(--ds-space-050, 4px)"} 0`,
|
|
9
|
+
'&:hover': {
|
|
10
|
+
background: `var(--ds-background-neutral-subtle-hovered, ${N40})`
|
|
11
|
+
},
|
|
12
|
+
"&:active, &[data-firefox-is-active='true']": {
|
|
13
|
+
background: `var(--ds-background-neutral-subtle-pressed, ${N50})`
|
|
18
14
|
}
|
|
19
15
|
}
|
|
20
|
-
|
|
16
|
+
});
|
|
@@ -1,29 +1,21 @@
|
|
|
1
1
|
import styled from '@emotion/styled';
|
|
2
2
|
import { N50, N500, N600, N70 } from '@atlaskit/theme/colors';
|
|
3
|
-
export const SyntaxHelpContainer = styled.div
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
&:active,
|
|
21
|
-
&[data-firefox-is-active='true'] {
|
|
22
|
-
background: ${`var(--ds-background-neutral-bold-pressed, ${N600})`};
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
&[disabled] {
|
|
26
|
-
background: ${`var(--ds-background-disabled, ${N50})`};
|
|
3
|
+
export const SyntaxHelpContainer = styled.div({
|
|
4
|
+
'> a': {
|
|
5
|
+
background: `var(--ds-background-neutral-bold, ${N70})`,
|
|
6
|
+
borderRadius: '100%',
|
|
7
|
+
margin: "var(--ds-space-050, 4px)",
|
|
8
|
+
'&:hover': {
|
|
9
|
+
background: `var(--ds-background-neutral-bold-hovered, ${N500})`
|
|
10
|
+
},
|
|
11
|
+
'&:focus': {
|
|
12
|
+
background: `var(--ds-background-neutral-bold, ${N70})`
|
|
13
|
+
},
|
|
14
|
+
"&:active, &[data-firefox-is-active='true']": {
|
|
15
|
+
background: `var(--ds-background-neutral-bold-pressed, ${N600})`
|
|
16
|
+
},
|
|
17
|
+
'&[disabled]': {
|
|
18
|
+
background: `var(--ds-background-disabled, ${N50})`
|
|
27
19
|
}
|
|
28
20
|
}
|
|
29
|
-
|
|
21
|
+
});
|
|
@@ -1,23 +1,19 @@
|
|
|
1
1
|
import { css } from '@emotion/react';
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
3
|
import { hiddenMixin } from '../../../common/styled';
|
|
4
|
-
export const HelpContainer = styled.div
|
|
5
|
-
display: flex
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
padding: 0 ${"var(--ds-space-100, 8px)"}
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
margin-left: ${"var(--ds-space-200, 16px)"};
|
|
4
|
+
export const HelpContainer = styled.div({
|
|
5
|
+
display: 'flex',
|
|
6
|
+
marginLeft: 'auto',
|
|
7
|
+
marginRight: 0,
|
|
8
|
+
flexShrink: 0,
|
|
9
|
+
padding: `0 ${"var(--ds-space-100, 8px)"}`,
|
|
10
|
+
'> * + *': {
|
|
11
|
+
marginLeft: "var(--ds-space-200, 16px)"
|
|
13
12
|
}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
opacity: 0;
|
|
22
|
-
`}
|
|
23
|
-
`;
|
|
13
|
+
}, props => props.isVisible ? css({
|
|
14
|
+
visibility: 'visible',
|
|
15
|
+
opacity: 1,
|
|
16
|
+
transition: 'opacity 250ms cubic-bezier(0.15, 1, 0.3, 1)'
|
|
17
|
+
}) : css(hiddenMixin, {
|
|
18
|
+
opacity: 0
|
|
19
|
+
}));
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import styled from '@emotion/styled';
|
|
2
|
-
export const MessageContainer = styled.div
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export const MessageList = styled.ul
|
|
6
|
-
margin: 0
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
export const MessageContainer = styled.div(props => ({
|
|
3
|
+
paddingLeft: props.isSearch ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)"
|
|
4
|
+
}));
|
|
5
|
+
export const MessageList = styled.ul({
|
|
6
|
+
margin: 0,
|
|
7
|
+
paddingLeft: "var(--ds-space-300, 24px)"
|
|
8
|
+
});
|
|
@@ -5,25 +5,25 @@ import { codeFontFamily, fontFamily, fontSize,
|
|
|
5
5
|
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
6
6
|
gridSize, layers } from '@atlaskit/theme/constants';
|
|
7
7
|
import { TOOLTIP_CLASSNAME, TOOLTIP_ENTER_CLASSNAME, TOOLTIP_EXIT_CLASSNAME } from '../../plugins/validation-tooltip/constants';
|
|
8
|
-
const fadeIn = keyframes
|
|
9
|
-
from {
|
|
10
|
-
opacity: 0
|
|
8
|
+
const fadeIn = keyframes({
|
|
9
|
+
from: {
|
|
10
|
+
opacity: 0
|
|
11
|
+
},
|
|
12
|
+
to: {
|
|
13
|
+
opacity: 1
|
|
11
14
|
}
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
opacity: 1;
|
|
15
|
+
});
|
|
16
|
+
const fadeOut = keyframes({
|
|
17
|
+
from: {
|
|
18
|
+
visibility: 'visible',
|
|
19
|
+
opacity: 1
|
|
20
|
+
},
|
|
21
|
+
to: {
|
|
22
|
+
opacity: 0
|
|
21
23
|
}
|
|
24
|
+
});
|
|
22
25
|
|
|
23
|
-
|
|
24
|
-
opacity: 0;
|
|
25
|
-
}
|
|
26
|
-
`;
|
|
26
|
+
// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation
|
|
27
27
|
export const EditorMain = styled.div`
|
|
28
28
|
/* CSS reset */
|
|
29
29
|
font-family: ${fontFamily};
|
|
@@ -61,63 +61,57 @@ export const EditorMain = styled.div`
|
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
`;
|
|
64
|
-
export const EditorFooter = styled.div
|
|
65
|
-
display: flex
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
`;
|
|
64
|
+
export const EditorFooter = styled.div({
|
|
65
|
+
display: 'flex',
|
|
66
|
+
justifyContent: 'space-between',
|
|
67
|
+
minHeight: '20px'
|
|
68
|
+
});
|
|
70
69
|
|
|
71
70
|
// Height (in px) for a single row in the editor
|
|
72
71
|
const rowHeight = gridSize() * 2.75;
|
|
73
72
|
// Vertical padding for the editor input
|
|
74
73
|
const getEditorInputVerticalPadding = isCompact => isCompact ? 3 : 7;
|
|
75
74
|
const editorInputHorizontalPadding = 6;
|
|
76
|
-
export const EditorViewContainer = styled.div
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
color:
|
|
84
|
-
display: flex
|
|
85
|
-
overflow: auto
|
|
86
|
-
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out
|
|
87
|
-
|
|
88
|
-
${
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
top: 0;
|
|
112
|
-
|
|
113
|
-
${props => !props.lineNumbersVisible && css`
|
|
114
|
-
display: none;
|
|
115
|
-
`}
|
|
116
|
-
`;
|
|
75
|
+
export const EditorViewContainer = styled.div({
|
|
76
|
+
backgroundColor: `var(--ds-background-input, ${N10})`,
|
|
77
|
+
borderStyle: 'solid',
|
|
78
|
+
borderWidth: '2px',
|
|
79
|
+
borderColor: `var(--ds-border, ${N40})`,
|
|
80
|
+
borderRadius: "var(--ds-border-radius-100, 3px)",
|
|
81
|
+
boxSizing: 'border-box',
|
|
82
|
+
color: `var(--ds-text, ${N900})`,
|
|
83
|
+
display: 'flex',
|
|
84
|
+
overflow: 'auto',
|
|
85
|
+
transition: 'background-color 0.2s ease-in-out, border-color 0.2s ease-in-out'
|
|
86
|
+
}, props => props.editorViewHasFocus ? css({
|
|
87
|
+
backgroundColor: `var(--ds-surface, ${N0})`,
|
|
88
|
+
borderColor: `var(--ds-border-focused, ${B100})`
|
|
89
|
+
}) : css({
|
|
90
|
+
':hover': {
|
|
91
|
+
backgroundColor: `var(--ds-background-input-hovered, ${N30})`
|
|
92
|
+
}
|
|
93
|
+
}), props => props.editorViewIsInvalid && css({
|
|
94
|
+
borderColor: `var(--ds-border-danger, ${R400})`
|
|
95
|
+
}));
|
|
96
|
+
export const ReadOnlyEditorViewContainer = styled(EditorViewContainer)({
|
|
97
|
+
backgroundColor: `var(--ds-background-disabled, ${N30})`,
|
|
98
|
+
color: `var(--ds-text-disabled, ${N100})`,
|
|
99
|
+
pointerEvents: 'none'
|
|
100
|
+
});
|
|
101
|
+
export const LineNumberToolbar = styled.div({
|
|
102
|
+
backgroundColor: `var(--ds-background-neutral, ${N30})`,
|
|
103
|
+
flexShrink: 0,
|
|
104
|
+
width: '30px',
|
|
105
|
+
position: 'sticky',
|
|
106
|
+
top: 0
|
|
107
|
+
}, props => !props.lineNumbersVisible && css({
|
|
108
|
+
display: 'none'
|
|
109
|
+
}));
|
|
117
110
|
|
|
118
111
|
/**
|
|
119
112
|
* The main div which the Prosemirror editor will be rendered into.
|
|
120
113
|
*/
|
|
114
|
+
// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation
|
|
121
115
|
export const EditorView = styled.div`
|
|
122
116
|
counter-reset: lineNumber;
|
|
123
117
|
flex-grow: 1;
|
|
@@ -127,7 +121,7 @@ export const EditorView = styled.div`
|
|
|
127
121
|
max-height: ${props => rowHeight * props.defaultMaxRows + getEditorInputVerticalPadding(props.isCompact) * 2}px;
|
|
128
122
|
|
|
129
123
|
line-height: ${rowHeight / fontSize()};
|
|
130
|
-
font-family: ${codeFontFamily};
|
|
124
|
+
font-family: ${codeFontFamily()};
|
|
131
125
|
word-break: break-word;
|
|
132
126
|
overflow-wrap: anywhere;
|
|
133
127
|
white-space: pre-wrap;
|
|
@@ -191,12 +185,17 @@ export const EditorView = styled.div`
|
|
|
191
185
|
overflow: hidden;
|
|
192
186
|
white-space: nowrap;
|
|
193
187
|
|
|
194
|
-
${props => !props.lineNumbersVisible &&
|
|
188
|
+
${props => !props.lineNumbersVisible &&
|
|
189
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
190
|
+
css`
|
|
195
191
|
display: none;
|
|
196
192
|
`}
|
|
197
193
|
}
|
|
198
194
|
}
|
|
199
195
|
`;
|
|
196
|
+
|
|
197
|
+
// FIXME: convert-props-syntax rule doesn't catch this
|
|
198
|
+
// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression
|
|
200
199
|
export const ReadOnlyEditorView = styled(EditorView)`
|
|
201
200
|
/* We need to replicate padding from the inner prosemirror element in our read only state. That means we also need
|
|
202
201
|
recompute max height excluding the child padding. */
|
|
@@ -209,15 +208,15 @@ export const ReadOnlyEditorView = styled(EditorView)`
|
|
|
209
208
|
min-height: ${rowHeight}px;
|
|
210
209
|
}
|
|
211
210
|
`;
|
|
212
|
-
export const EditorControls = styled.div
|
|
213
|
-
|
|
214
|
-
display: flex
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
: editorInputHorizontalPadding - 3}px
|
|
219
|
-
|
|
220
|
-
position: sticky
|
|
221
|
-
top: 0
|
|
222
|
-
height:
|
|
223
|
-
|
|
211
|
+
export const EditorControls = styled.div(props => ({
|
|
212
|
+
alignItems: 'center',
|
|
213
|
+
display: 'flex',
|
|
214
|
+
flexShrink: 0,
|
|
215
|
+
marginLeft: 'auto',
|
|
216
|
+
marginRight: `${props.isSearch ? getEditorInputVerticalPadding(props.isCompact) - 1 // the search button needs the same vertical & horizontal spacing
|
|
217
|
+
: editorInputHorizontalPadding - 3}px`,
|
|
218
|
+
lineHeight: 'normal',
|
|
219
|
+
position: 'sticky',
|
|
220
|
+
top: 0,
|
|
221
|
+
height: `${rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact)}px`
|
|
222
|
+
}));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import styled from '@emotion/styled';
|
|
2
|
-
export const StyledTooltipTag = styled.div
|
|
3
|
-
display: flex
|
|
4
|
-
|
|
2
|
+
export const StyledTooltipTag = styled.div({
|
|
3
|
+
display: 'flex'
|
|
4
|
+
});
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject;
|
|
3
1
|
import styled from '@emotion/styled';
|
|
4
2
|
import { hiddenMixin } from '../common/styled';
|
|
5
|
-
export var ScreenReaderText = styled.div(
|
|
3
|
+
export var ScreenReaderText = styled.div(hiddenMixin);
|
|
@@ -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.
|
|
3
|
+
return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.0.6", ANALYTICS_CHANNEL);
|
|
4
4
|
};
|
|
@@ -1,9 +1,19 @@
|
|
|
1
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2;
|
|
3
1
|
import { css } from '@emotion/react';
|
|
4
2
|
import styled from '@emotion/styled';
|
|
5
3
|
import { fontFamily } from '@atlaskit/theme/constants';
|
|
6
4
|
|
|
7
5
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
8
|
-
export var hiddenMixin = css(
|
|
9
|
-
|
|
6
|
+
export var hiddenMixin = css({
|
|
7
|
+
clip: 'rect(1px, 1px, 1px, 1px)',
|
|
8
|
+
clipPath: 'inset(50%)',
|
|
9
|
+
height: '1px',
|
|
10
|
+
width: '1px',
|
|
11
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
|
|
12
|
+
margin: '-1px',
|
|
13
|
+
overflow: 'hidden',
|
|
14
|
+
padding: 0,
|
|
15
|
+
position: 'absolute'
|
|
16
|
+
});
|
|
17
|
+
export var TooltipContent = styled.div({
|
|
18
|
+
fontFamily: fontFamily()
|
|
19
|
+
});
|
|
@@ -1,5 +1,16 @@
|
|
|
1
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject;
|
|
3
1
|
import styled from '@emotion/styled';
|
|
4
2
|
import { N40, N50 } from '@atlaskit/theme/colors';
|
|
5
|
-
export var ExpandToggleContainer = styled.div(
|
|
3
|
+
export var ExpandToggleContainer = styled.div({
|
|
4
|
+
/* Override background styles for our button to match designs */
|
|
5
|
+
'> button': {
|
|
6
|
+
borderRadius: '100%',
|
|
7
|
+
/* Fill the remaining vertical space for a single line in our editor and space between buttons */
|
|
8
|
+
margin: "var(--ds-space-050, 4px)".concat(" 0"),
|
|
9
|
+
'&:hover': {
|
|
10
|
+
background: "var(--ds-background-neutral-subtle-hovered, ".concat(N40, ")")
|
|
11
|
+
},
|
|
12
|
+
"&:active, &[data-firefox-is-active='true']": {
|
|
13
|
+
background: "var(--ds-background-neutral-subtle-pressed, ".concat(N50, ")")
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
});
|
|
@@ -1,5 +1,21 @@
|
|
|
1
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject;
|
|
3
1
|
import styled from '@emotion/styled';
|
|
4
2
|
import { N50, N500, N600, N70 } from '@atlaskit/theme/colors';
|
|
5
|
-
export var SyntaxHelpContainer = styled.div(
|
|
3
|
+
export var SyntaxHelpContainer = styled.div({
|
|
4
|
+
'> a': {
|
|
5
|
+
background: "var(--ds-background-neutral-bold, ".concat(N70, ")"),
|
|
6
|
+
borderRadius: '100%',
|
|
7
|
+
margin: "var(--ds-space-050, 4px)",
|
|
8
|
+
'&:hover': {
|
|
9
|
+
background: "var(--ds-background-neutral-bold-hovered, ".concat(N500, ")")
|
|
10
|
+
},
|
|
11
|
+
'&:focus': {
|
|
12
|
+
background: "var(--ds-background-neutral-bold, ".concat(N70, ")")
|
|
13
|
+
},
|
|
14
|
+
"&:active, &[data-firefox-is-active='true']": {
|
|
15
|
+
background: "var(--ds-background-neutral-bold-pressed, ".concat(N600, ")")
|
|
16
|
+
},
|
|
17
|
+
'&[disabled]': {
|
|
18
|
+
background: "var(--ds-background-disabled, ".concat(N50, ")")
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
});
|
|
@@ -1,8 +1,21 @@
|
|
|
1
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3;
|
|
3
1
|
import { css } from '@emotion/react';
|
|
4
2
|
import styled from '@emotion/styled';
|
|
5
3
|
import { hiddenMixin } from '../../../common/styled';
|
|
6
|
-
export var HelpContainer = styled.div(
|
|
7
|
-
|
|
4
|
+
export var HelpContainer = styled.div({
|
|
5
|
+
display: 'flex',
|
|
6
|
+
marginLeft: 'auto',
|
|
7
|
+
marginRight: 0,
|
|
8
|
+
flexShrink: 0,
|
|
9
|
+
padding: "0 ".concat("var(--ds-space-100, 8px)"),
|
|
10
|
+
'> * + *': {
|
|
11
|
+
marginLeft: "var(--ds-space-200, 16px)"
|
|
12
|
+
}
|
|
13
|
+
}, function (props) {
|
|
14
|
+
return props.isVisible ? css({
|
|
15
|
+
visibility: 'visible',
|
|
16
|
+
opacity: 1,
|
|
17
|
+
transition: 'opacity 250ms cubic-bezier(0.15, 1, 0.3, 1)'
|
|
18
|
+
}) : css(hiddenMixin, {
|
|
19
|
+
opacity: 0
|
|
20
|
+
});
|
|
8
21
|
});
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2;
|
|
3
1
|
import styled from '@emotion/styled';
|
|
4
|
-
export var MessageContainer = styled.div(
|
|
5
|
-
return
|
|
2
|
+
export var MessageContainer = styled.div(function (props) {
|
|
3
|
+
return {
|
|
4
|
+
paddingLeft: props.isSearch ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)"
|
|
5
|
+
};
|
|
6
6
|
});
|
|
7
|
-
export var MessageList = styled.ul(
|
|
7
|
+
export var MessageList = styled.ul({
|
|
8
|
+
margin: 0,
|
|
9
|
+
paddingLeft: "var(--ds-space-300, 24px)"
|
|
10
|
+
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
3
3
|
import { css, keyframes } from '@emotion/react';
|
|
4
4
|
import styled from '@emotion/styled';
|
|
5
5
|
import { B100, B300, G300, N0, N10, N100, N30, N40, N700, N800, N900, P400, R400 } from '@atlaskit/theme/colors';
|
|
@@ -7,10 +7,31 @@ import { codeFontFamily, fontFamily, fontSize,
|
|
|
7
7
|
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
8
8
|
gridSize, layers } from '@atlaskit/theme/constants';
|
|
9
9
|
import { TOOLTIP_CLASSNAME, TOOLTIP_ENTER_CLASSNAME, TOOLTIP_EXIT_CLASSNAME } from '../../plugins/validation-tooltip/constants';
|
|
10
|
-
var fadeIn = keyframes(
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
var fadeIn = keyframes({
|
|
11
|
+
from: {
|
|
12
|
+
opacity: 0
|
|
13
|
+
},
|
|
14
|
+
to: {
|
|
15
|
+
opacity: 1
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
var fadeOut = keyframes({
|
|
19
|
+
from: {
|
|
20
|
+
visibility: 'visible',
|
|
21
|
+
opacity: 1
|
|
22
|
+
},
|
|
23
|
+
to: {
|
|
24
|
+
opacity: 0
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation
|
|
29
|
+
export var EditorMain = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n /* CSS reset */\n font-family: ", ";\n font-size: ", "px;\n flex-grow: 1;\n\n /* These styles and animations are derived from @atlaskit/tooltip */\n\n .", " {\n background-color: ", ";\n color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n font-size: 12px;\n line-height: 1.3;\n max-width: 240px;\n padding: ", " ", ";\n word-wrap: break-word;\n overflow-wrap: break-word;\n z-index: ", ";\n pointer-events: none;\n position: absolute;\n visibility: hidden;\n\n /* Horizontally center and vertically position above the target element */\n transform: translate(-50%, calc(-100% - ", "));\n\n &.", " {\n animation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n visibility: visible;\n }\n\n &.", " {\n animation: ", " 350ms cubic-bezier(0.15, 1, 0.3, 1);\n }\n }\n"])), fontFamily, fontSize, TOOLTIP_CLASSNAME, "var(--ds-background-neutral-bold, ".concat(N800, ")"), "var(--ds-text-inverse, ".concat(N0, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)", layers.tooltip(), "var(--ds-space-200, 16px)", TOOLTIP_ENTER_CLASSNAME, fadeIn, TOOLTIP_EXIT_CLASSNAME, fadeOut);
|
|
30
|
+
export var EditorFooter = styled.div({
|
|
31
|
+
display: 'flex',
|
|
32
|
+
justifyContent: 'space-between',
|
|
33
|
+
minHeight: '20px'
|
|
34
|
+
});
|
|
14
35
|
|
|
15
36
|
// Height (in px) for a single row in the editor
|
|
16
37
|
var rowHeight = gridSize() * 2.75;
|
|
@@ -19,38 +40,83 @@ var getEditorInputVerticalPadding = function getEditorInputVerticalPadding(isCom
|
|
|
19
40
|
return isCompact ? 3 : 7;
|
|
20
41
|
};
|
|
21
42
|
var editorInputHorizontalPadding = 6;
|
|
22
|
-
export var EditorViewContainer = styled.div(
|
|
23
|
-
|
|
43
|
+
export var EditorViewContainer = styled.div({
|
|
44
|
+
backgroundColor: "var(--ds-background-input, ".concat(N10, ")"),
|
|
45
|
+
borderStyle: 'solid',
|
|
46
|
+
borderWidth: '2px',
|
|
47
|
+
borderColor: "var(--ds-border, ".concat(N40, ")"),
|
|
48
|
+
borderRadius: "var(--ds-border-radius-100, 3px)",
|
|
49
|
+
boxSizing: 'border-box',
|
|
50
|
+
color: "var(--ds-text, ".concat(N900, ")"),
|
|
51
|
+
display: 'flex',
|
|
52
|
+
overflow: 'auto',
|
|
53
|
+
transition: 'background-color 0.2s ease-in-out, border-color 0.2s ease-in-out'
|
|
54
|
+
}, function (props) {
|
|
55
|
+
return props.editorViewHasFocus ? css({
|
|
56
|
+
backgroundColor: "var(--ds-surface, ".concat(N0, ")"),
|
|
57
|
+
borderColor: "var(--ds-border-focused, ".concat(B100, ")")
|
|
58
|
+
}) : css({
|
|
59
|
+
':hover': {
|
|
60
|
+
backgroundColor: "var(--ds-background-input-hovered, ".concat(N30, ")")
|
|
61
|
+
}
|
|
62
|
+
});
|
|
24
63
|
}, function (props) {
|
|
25
|
-
return props.editorViewIsInvalid && css(
|
|
64
|
+
return props.editorViewIsInvalid && css({
|
|
65
|
+
borderColor: "var(--ds-border-danger, ".concat(R400, ")")
|
|
66
|
+
});
|
|
26
67
|
});
|
|
27
|
-
export var ReadOnlyEditorViewContainer = styled(EditorViewContainer)(
|
|
28
|
-
|
|
29
|
-
|
|
68
|
+
export var ReadOnlyEditorViewContainer = styled(EditorViewContainer)({
|
|
69
|
+
backgroundColor: "var(--ds-background-disabled, ".concat(N30, ")"),
|
|
70
|
+
color: "var(--ds-text-disabled, ".concat(N100, ")"),
|
|
71
|
+
pointerEvents: 'none'
|
|
72
|
+
});
|
|
73
|
+
export var LineNumberToolbar = styled.div({
|
|
74
|
+
backgroundColor: "var(--ds-background-neutral, ".concat(N30, ")"),
|
|
75
|
+
flexShrink: 0,
|
|
76
|
+
width: '30px',
|
|
77
|
+
position: 'sticky',
|
|
78
|
+
top: 0
|
|
79
|
+
}, function (props) {
|
|
80
|
+
return !props.lineNumbersVisible && css({
|
|
81
|
+
display: 'none'
|
|
82
|
+
});
|
|
30
83
|
});
|
|
31
84
|
|
|
32
85
|
/**
|
|
33
86
|
* The main div which the Prosemirror editor will be rendered into.
|
|
34
87
|
*/
|
|
35
|
-
|
|
88
|
+
// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation
|
|
89
|
+
export var EditorView = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n counter-reset: lineNumber;\n flex-grow: 1;\n\n transition: height 250ms cubic-bezier(0.15, 1, 0.3, 1),\n max-height 250ms cubic-bezier(0.15, 1, 0.3, 1);\n max-height: ", "px;\n\n line-height: ", ";\n font-family: ", ";\n word-break: break-word;\n overflow-wrap: anywhere;\n white-space: pre-wrap;\n\n &[data-expanded] {\n height: ", "px;\n max-height: ", "px;\n }\n\n .ProseMirror {\n color: ", ";\n padding: ", "px\n ", "px;\n\n &:focus {\n outline: none;\n }\n\n .mark-token-keyword {\n color: ", ";\n }\n\n .mark-token-field {\n color: ", ";\n }\n\n .mark-token-operator {\n color: ", ";\n }\n\n .mark-token-error {\n color: ", ";\n text-decoration: wavy underline;\n text-decoration-thickness: 1px;\n text-decoration-skip-ink: none;\n }\n }\n\n p {\n margin: 0;\n counter-increment: lineNumber;\n position: relative;\n\n /* Show the current line number before each paragraph block. */\n\n &::before {\n content: counter(lineNumber);\n color: ", ";\n font-size: 10px;\n line-height: ", ";\n padding: 0 ", " 0 ", ";\n position: absolute;\n box-sizing: border-box;\n /* Shift the line number tag 100% (plus 8px padding) to the left to position it inside the LineNumberToolbar */\n transform: translateX(calc(-100% - ", "));\n\n /* We can fit 3 digits before ellipses. This is not very responsive but saves us having to add expensive width\n recalculation logic to the LineNumberToolbar for a scenario that *should* never happen. */\n max-width: 30px;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n\n ", "\n }\n }\n"])), function (props) {
|
|
36
90
|
return rowHeight * props.defaultMaxRows + getEditorInputVerticalPadding(props.isCompact) * 2;
|
|
37
|
-
}, rowHeight / fontSize(), codeFontFamily, function (props) {
|
|
91
|
+
}, rowHeight / fontSize(), codeFontFamily(), function (props) {
|
|
38
92
|
return rowHeight * props.expandedRows + getEditorInputVerticalPadding(props.isCompact) * 2;
|
|
39
93
|
}, function (props) {
|
|
40
94
|
return rowHeight * props.expandedRows + getEditorInputVerticalPadding(props.isCompact) * 2;
|
|
41
95
|
}, "var(--ds-text, ".concat(N700, ")"), function (props) {
|
|
42
96
|
return getEditorInputVerticalPadding(props.isCompact);
|
|
43
97
|
}, editorInputHorizontalPadding, "var(--ds-text-accent-purple, ".concat(P400, ")"), "var(--ds-text-accent-blue, ".concat(B300, ")"), "var(--ds-text-accent-green, ".concat(G300, ")"), "var(--ds-text-danger, ".concat(R400, ")"), "var(--ds-text-subtlest, ".concat(N100, ")"), rowHeight / 10, "var(--ds-space-100, 8px)", "var(--ds-space-025, 2px)", "var(--ds-space-100, 8px)", function (props) {
|
|
44
|
-
return !props.lineNumbersVisible &&
|
|
98
|
+
return !props.lineNumbersVisible && // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
99
|
+
css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: none;\n "])));
|
|
45
100
|
});
|
|
46
|
-
|
|
101
|
+
|
|
102
|
+
// FIXME: convert-props-syntax rule doesn't catch this
|
|
103
|
+
// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression
|
|
104
|
+
export var ReadOnlyEditorView = styled(EditorView)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n /* We need to replicate padding from the inner prosemirror element in our read only state. That means we also need\n recompute max height excluding the child padding. */\n padding: ", "px\n ", "px;\n max-height: ", "px;\n\n > p {\n /* Prevent collapsing empty paragraphs */\n min-height: ", "px;\n }\n"])), function (props) {
|
|
47
105
|
return getEditorInputVerticalPadding(props.isCompact);
|
|
48
106
|
}, editorInputHorizontalPadding, function (props) {
|
|
49
107
|
return rowHeight * props.defaultMaxRows;
|
|
50
108
|
}, rowHeight);
|
|
51
|
-
export var EditorControls = styled.div(
|
|
52
|
-
return
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
109
|
+
export var EditorControls = styled.div(function (props) {
|
|
110
|
+
return {
|
|
111
|
+
alignItems: 'center',
|
|
112
|
+
display: 'flex',
|
|
113
|
+
flexShrink: 0,
|
|
114
|
+
marginLeft: 'auto',
|
|
115
|
+
marginRight: "".concat(props.isSearch ? getEditorInputVerticalPadding(props.isCompact) - 1 // the search button needs the same vertical & horizontal spacing
|
|
116
|
+
: editorInputHorizontalPadding - 3, "px"),
|
|
117
|
+
lineHeight: 'normal',
|
|
118
|
+
position: 'sticky',
|
|
119
|
+
top: 0,
|
|
120
|
+
height: "".concat(rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact), "px")
|
|
121
|
+
};
|
|
56
122
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject;
|
|
3
1
|
import styled from '@emotion/styled';
|
|
4
|
-
export var StyledTooltipTag = styled.div(
|
|
2
|
+
export var StyledTooltipTag = styled.div({
|
|
3
|
+
display: 'flex'
|
|
4
|
+
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/jql-editor",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.6",
|
|
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",
|
|
@@ -39,18 +39,18 @@
|
|
|
39
39
|
"@atlaskit/analytics-gas-types": "^5.1.0",
|
|
40
40
|
"@atlaskit/analytics-next": "^9.2.0",
|
|
41
41
|
"@atlaskit/avatar": "^21.5.0",
|
|
42
|
-
"@atlaskit/button": "^17.
|
|
42
|
+
"@atlaskit/button": "^17.12.0",
|
|
43
43
|
"@atlaskit/editor-prosemirror": "3.0.0",
|
|
44
|
-
"@atlaskit/form": "^9.0
|
|
44
|
+
"@atlaskit/form": "^9.2.0",
|
|
45
45
|
"@atlaskit/icon": "^22.1.0",
|
|
46
|
-
"@atlaskit/jql-ast": "^3.
|
|
46
|
+
"@atlaskit/jql-ast": "^3.2.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
|
-
"@atlaskit/theme": "^12.
|
|
52
|
-
"@atlaskit/tokens": "^1.
|
|
53
|
-
"@atlaskit/tooltip": "^18.
|
|
51
|
+
"@atlaskit/theme": "^12.7.0",
|
|
52
|
+
"@atlaskit/tokens": "^1.43.0",
|
|
53
|
+
"@atlaskit/tooltip": "^18.2.0",
|
|
54
54
|
"@babel/runtime": "^7.0.0",
|
|
55
55
|
"@emotion/react": "^11.7.1",
|
|
56
56
|
"@emotion/styled": "^11.0.0",
|