@atlaskit/inline-edit 13.7.2 → 13.7.4
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 +15 -0
- package/dist/cjs/inline-edit.js +6 -4
- package/dist/cjs/internal/buttons.js +22 -13
- package/dist/cjs/internal/read-view.js +1 -1
- package/dist/es2019/inline-edit.js +5 -3
- package/dist/es2019/internal/buttons.js +22 -13
- package/dist/esm/inline-edit.js +5 -3
- package/dist/esm/internal/buttons.js +22 -13
- package/dist/types/internal/buttons.d.ts +9 -0
- package/dist/types-ts4.5/internal/buttons.d.ts +9 -0
- package/package.json +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/inline-edit
|
|
2
2
|
|
|
3
|
+
## 13.7.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 13.7.3
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#143699](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/143699)
|
|
14
|
+
[`95773a1f97047`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/95773a1f97047) -
|
|
15
|
+
Safari: prevent blur actions when Cancel control is clicked
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
3
18
|
## 13.7.2
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
package/dist/cjs/inline-edit.js
CHANGED
|
@@ -21,7 +21,7 @@ var _buttons = _interopRequireDefault(require("./internal/buttons"));
|
|
|
21
21
|
var _useButtonFocusHook2 = _interopRequireDefault(require("./internal/hooks/use-button-focus-hook"));
|
|
22
22
|
var _readView = _interopRequireDefault(require("./internal/read-view"));
|
|
23
23
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
24
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u &&
|
|
24
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
25
25
|
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; }
|
|
26
26
|
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; } /**
|
|
27
27
|
* @jsxRuntime classic
|
|
@@ -34,7 +34,7 @@ var fieldStyles = (0, _react2.css)({
|
|
|
34
34
|
var analyticsAttributes = {
|
|
35
35
|
componentName: 'inlineEdit',
|
|
36
36
|
packageName: "@atlaskit/inline-edit",
|
|
37
|
-
packageVersion: "13.7.
|
|
37
|
+
packageVersion: "13.7.4"
|
|
38
38
|
};
|
|
39
39
|
var InnerInlineEdit = function InnerInlineEdit(props) {
|
|
40
40
|
var _props$startWithEditV = props.startWithEditViewOpen,
|
|
@@ -212,8 +212,10 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
|
|
|
212
212
|
error = _ref2.error;
|
|
213
213
|
return (0, _react2.jsx)("div", {
|
|
214
214
|
css: fieldStyles,
|
|
215
|
-
onBlur: function onBlur() {
|
|
216
|
-
|
|
215
|
+
onBlur: function onBlur(e) {
|
|
216
|
+
if (!e.currentTarget.contains(e.relatedTarget)) {
|
|
217
|
+
onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
|
|
218
|
+
}
|
|
217
219
|
},
|
|
218
220
|
onFocus: onEditViewWrapperFocus
|
|
219
221
|
}, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
|
|
@@ -12,6 +12,8 @@ var _check = _interopRequireDefault(require("@atlaskit/icon/glyph/check"));
|
|
|
12
12
|
var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
|
|
13
13
|
var _colors = require("@atlaskit/theme/colors");
|
|
14
14
|
var _constants = require("./constants");
|
|
15
|
+
/* eslint-disable @atlaskit/design-system/no-nested-styles */
|
|
16
|
+
/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
|
|
15
17
|
/**
|
|
16
18
|
* @jsxRuntime classic
|
|
17
19
|
* @jsx jsx
|
|
@@ -21,13 +23,11 @@ var _constants = require("./constants");
|
|
|
21
23
|
|
|
22
24
|
var buttonsContainerStyles = (0, _react.css)({
|
|
23
25
|
display: 'flex',
|
|
24
|
-
marginBlockStart: "var(--ds-space-075, 6px)",
|
|
25
26
|
position: 'absolute',
|
|
26
|
-
|
|
27
|
+
flexShrink: 0,
|
|
27
28
|
insetBlockStart: '100%',
|
|
28
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
29
29
|
insetInlineEnd: 0,
|
|
30
|
-
|
|
30
|
+
marginBlockStart: "var(--ds-space-075, 6px)"
|
|
31
31
|
});
|
|
32
32
|
var buttonWrapperBaseStyles = (0, _react.css)({
|
|
33
33
|
boxSizing: 'border-box',
|
|
@@ -35,28 +35,35 @@ var buttonWrapperBaseStyles = (0, _react.css)({
|
|
|
35
35
|
zIndex: 200,
|
|
36
36
|
backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
|
|
37
37
|
borderRadius: "var(--ds-border-radius, 3px)",
|
|
38
|
-
|
|
38
|
+
boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
39
40
|
fontSize: _constants.fontSize,
|
|
40
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
41
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
41
42
|
'&:last-child': {
|
|
42
43
|
marginInlineStart: "var(--ds-space-050, 4px)"
|
|
43
44
|
},
|
|
44
|
-
boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
|
|
45
|
-
// These buttons are floating, so they need an override to overlay interaction states
|
|
46
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
47
45
|
'& > button': {
|
|
48
46
|
backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N20A, ")")
|
|
49
47
|
},
|
|
50
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
51
48
|
'& > button:hover': {
|
|
52
49
|
backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(_colors.N30A, ")")
|
|
53
50
|
},
|
|
54
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
55
51
|
'& > button:active': {
|
|
56
52
|
backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
|
|
57
53
|
color: "var(--ds-text, ".concat(_colors.B400, ")")
|
|
58
54
|
}
|
|
59
55
|
});
|
|
56
|
+
// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
|
|
57
|
+
// Remove links that the component does not have (such as usage). If there are no links remove them all.
|
|
58
|
+
/**
|
|
59
|
+
* __Buttons__
|
|
60
|
+
*
|
|
61
|
+
* A buttons {description}.
|
|
62
|
+
*
|
|
63
|
+
* - [Examples](https://atlassian.design/components/{packageName}/examples)
|
|
64
|
+
* - [Code](https://atlassian.design/components/{packageName}/code)
|
|
65
|
+
* - [Usage](https://atlassian.design/components/{packageName}/usage)
|
|
66
|
+
*/
|
|
60
67
|
var Buttons = function Buttons(_ref) {
|
|
61
68
|
var confirmButtonLabel = _ref.confirmButtonLabel,
|
|
62
69
|
cancelButtonLabel = _ref.cancelButtonLabel,
|
|
@@ -66,7 +73,8 @@ var Buttons = function Buttons(_ref) {
|
|
|
66
73
|
return (0, _react.jsx)("div", {
|
|
67
74
|
css: buttonsContainerStyles
|
|
68
75
|
}, (0, _react.jsx)("div", {
|
|
69
|
-
css: buttonWrapperBaseStyles
|
|
76
|
+
css: buttonWrapperBaseStyles,
|
|
77
|
+
tabIndex: -1
|
|
70
78
|
}, (0, _react.jsx)(_new.IconButton, {
|
|
71
79
|
type: "submit",
|
|
72
80
|
icon: function icon(iconProps) {
|
|
@@ -78,7 +86,8 @@ var Buttons = function Buttons(_ref) {
|
|
|
78
86
|
label: confirmButtonLabel,
|
|
79
87
|
testId: testId && "".concat(testId, "--confirm")
|
|
80
88
|
})), (0, _react.jsx)("div", {
|
|
81
|
-
css: buttonWrapperBaseStyles
|
|
89
|
+
css: buttonWrapperBaseStyles,
|
|
90
|
+
tabIndex: -1
|
|
82
91
|
}, (0, _react.jsx)(_new.IconButton, {
|
|
83
92
|
icon: function icon(iconProps) {
|
|
84
93
|
return (0, _react.jsx)(_cross.default, (0, _extends2.default)({}, iconProps, {
|
|
@@ -11,7 +11,7 @@ var _primitives = require("@atlaskit/primitives");
|
|
|
11
11
|
var _colors = require("@atlaskit/theme/colors");
|
|
12
12
|
var _constants = require("./constants");
|
|
13
13
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
14
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u &&
|
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
15
|
/**
|
|
16
16
|
* @jsxRuntime classic
|
|
17
17
|
* @jsx jsx
|
|
@@ -23,7 +23,7 @@ const fieldStyles = css({
|
|
|
23
23
|
const analyticsAttributes = {
|
|
24
24
|
componentName: 'inlineEdit',
|
|
25
25
|
packageName: "@atlaskit/inline-edit",
|
|
26
|
-
packageVersion: "13.7.
|
|
26
|
+
packageVersion: "13.7.4"
|
|
27
27
|
};
|
|
28
28
|
const InnerInlineEdit = props => {
|
|
29
29
|
const {
|
|
@@ -188,8 +188,10 @@ const InnerInlineEdit = props => {
|
|
|
188
188
|
error
|
|
189
189
|
}) => jsx("div", {
|
|
190
190
|
css: fieldStyles,
|
|
191
|
-
onBlur:
|
|
192
|
-
|
|
191
|
+
onBlur: e => {
|
|
192
|
+
if (!e.currentTarget.contains(e.relatedTarget)) {
|
|
193
|
+
onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
|
|
194
|
+
}
|
|
193
195
|
},
|
|
194
196
|
onFocus: onEditViewWrapperFocus
|
|
195
197
|
}, editView({
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
/* eslint-disable @atlaskit/design-system/no-nested-styles */
|
|
3
|
+
/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
|
|
2
4
|
/**
|
|
3
5
|
* @jsxRuntime classic
|
|
4
6
|
* @jsx jsx
|
|
@@ -13,13 +15,11 @@ import { B400, N0, N20A, N30A, N50A, N60A } from '@atlaskit/theme/colors';
|
|
|
13
15
|
import { fontSize } from './constants';
|
|
14
16
|
const buttonsContainerStyles = css({
|
|
15
17
|
display: 'flex',
|
|
16
|
-
marginBlockStart: "var(--ds-space-075, 6px)",
|
|
17
18
|
position: 'absolute',
|
|
18
|
-
|
|
19
|
+
flexShrink: 0,
|
|
19
20
|
insetBlockStart: '100%',
|
|
20
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
21
21
|
insetInlineEnd: 0,
|
|
22
|
-
|
|
22
|
+
marginBlockStart: "var(--ds-space-075, 6px)"
|
|
23
23
|
});
|
|
24
24
|
const buttonWrapperBaseStyles = css({
|
|
25
25
|
boxSizing: 'border-box',
|
|
@@ -27,28 +27,35 @@ const buttonWrapperBaseStyles = css({
|
|
|
27
27
|
zIndex: 200,
|
|
28
28
|
backgroundColor: `var(--ds-surface-overlay, ${N0})`,
|
|
29
29
|
borderRadius: "var(--ds-border-radius, 3px)",
|
|
30
|
-
|
|
30
|
+
boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
|
|
31
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
31
32
|
fontSize: fontSize,
|
|
32
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
33
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
33
34
|
'&:last-child': {
|
|
34
35
|
marginInlineStart: "var(--ds-space-050, 4px)"
|
|
35
36
|
},
|
|
36
|
-
boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
|
|
37
|
-
// These buttons are floating, so they need an override to overlay interaction states
|
|
38
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
39
37
|
'& > button': {
|
|
40
38
|
backgroundColor: `var(--ds-surface-overlay, ${N20A})`
|
|
41
39
|
},
|
|
42
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
43
40
|
'& > button:hover': {
|
|
44
41
|
backgroundColor: `var(--ds-surface-overlay-hovered, ${N30A})`
|
|
45
42
|
},
|
|
46
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
47
43
|
'& > button:active': {
|
|
48
44
|
backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
|
|
49
45
|
color: `var(--ds-text, ${B400})`
|
|
50
46
|
}
|
|
51
47
|
});
|
|
48
|
+
// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
|
|
49
|
+
// Remove links that the component does not have (such as usage). If there are no links remove them all.
|
|
50
|
+
/**
|
|
51
|
+
* __Buttons__
|
|
52
|
+
*
|
|
53
|
+
* A buttons {description}.
|
|
54
|
+
*
|
|
55
|
+
* - [Examples](https://atlassian.design/components/{packageName}/examples)
|
|
56
|
+
* - [Code](https://atlassian.design/components/{packageName}/code)
|
|
57
|
+
* - [Usage](https://atlassian.design/components/{packageName}/usage)
|
|
58
|
+
*/
|
|
52
59
|
const Buttons = ({
|
|
53
60
|
confirmButtonLabel,
|
|
54
61
|
cancelButtonLabel,
|
|
@@ -59,7 +66,8 @@ const Buttons = ({
|
|
|
59
66
|
return jsx("div", {
|
|
60
67
|
css: buttonsContainerStyles
|
|
61
68
|
}, jsx("div", {
|
|
62
|
-
css: buttonWrapperBaseStyles
|
|
69
|
+
css: buttonWrapperBaseStyles,
|
|
70
|
+
tabIndex: -1
|
|
63
71
|
}, jsx(IconButton, {
|
|
64
72
|
type: "submit",
|
|
65
73
|
icon: iconProps => jsx(ConfirmIcon, _extends({}, iconProps, {
|
|
@@ -69,7 +77,8 @@ const Buttons = ({
|
|
|
69
77
|
label: confirmButtonLabel,
|
|
70
78
|
testId: testId && `${testId}--confirm`
|
|
71
79
|
})), jsx("div", {
|
|
72
|
-
css: buttonWrapperBaseStyles
|
|
80
|
+
css: buttonWrapperBaseStyles,
|
|
81
|
+
tabIndex: -1
|
|
73
82
|
}, jsx(IconButton, {
|
|
74
83
|
icon: iconProps => jsx(CancelIcon, _extends({}, iconProps, {
|
|
75
84
|
size: "small"
|
package/dist/esm/inline-edit.js
CHANGED
|
@@ -27,7 +27,7 @@ var fieldStyles = css({
|
|
|
27
27
|
var analyticsAttributes = {
|
|
28
28
|
componentName: 'inlineEdit',
|
|
29
29
|
packageName: "@atlaskit/inline-edit",
|
|
30
|
-
packageVersion: "13.7.
|
|
30
|
+
packageVersion: "13.7.4"
|
|
31
31
|
};
|
|
32
32
|
var InnerInlineEdit = function InnerInlineEdit(props) {
|
|
33
33
|
var _props$startWithEditV = props.startWithEditViewOpen,
|
|
@@ -205,8 +205,10 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
|
|
|
205
205
|
error = _ref2.error;
|
|
206
206
|
return jsx("div", {
|
|
207
207
|
css: fieldStyles,
|
|
208
|
-
onBlur: function onBlur() {
|
|
209
|
-
|
|
208
|
+
onBlur: function onBlur(e) {
|
|
209
|
+
if (!e.currentTarget.contains(e.relatedTarget)) {
|
|
210
|
+
onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
|
|
211
|
+
}
|
|
210
212
|
},
|
|
211
213
|
onFocus: onEditViewWrapperFocus
|
|
212
214
|
}, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
/* eslint-disable @atlaskit/design-system/no-nested-styles */
|
|
3
|
+
/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
|
|
2
4
|
/**
|
|
3
5
|
* @jsxRuntime classic
|
|
4
6
|
* @jsx jsx
|
|
@@ -13,13 +15,11 @@ import { B400, N0, N20A, N30A, N50A, N60A } from '@atlaskit/theme/colors';
|
|
|
13
15
|
import { fontSize } from './constants';
|
|
14
16
|
var buttonsContainerStyles = css({
|
|
15
17
|
display: 'flex',
|
|
16
|
-
marginBlockStart: "var(--ds-space-075, 6px)",
|
|
17
18
|
position: 'absolute',
|
|
18
|
-
|
|
19
|
+
flexShrink: 0,
|
|
19
20
|
insetBlockStart: '100%',
|
|
20
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
21
21
|
insetInlineEnd: 0,
|
|
22
|
-
|
|
22
|
+
marginBlockStart: "var(--ds-space-075, 6px)"
|
|
23
23
|
});
|
|
24
24
|
var buttonWrapperBaseStyles = css({
|
|
25
25
|
boxSizing: 'border-box',
|
|
@@ -27,28 +27,35 @@ var buttonWrapperBaseStyles = css({
|
|
|
27
27
|
zIndex: 200,
|
|
28
28
|
backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
|
|
29
29
|
borderRadius: "var(--ds-border-radius, 3px)",
|
|
30
|
-
|
|
30
|
+
boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
|
|
31
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
31
32
|
fontSize: fontSize,
|
|
32
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
33
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
33
34
|
'&:last-child': {
|
|
34
35
|
marginInlineStart: "var(--ds-space-050, 4px)"
|
|
35
36
|
},
|
|
36
|
-
boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
|
|
37
|
-
// These buttons are floating, so they need an override to overlay interaction states
|
|
38
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
39
37
|
'& > button': {
|
|
40
38
|
backgroundColor: "var(--ds-surface-overlay, ".concat(N20A, ")")
|
|
41
39
|
},
|
|
42
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
43
40
|
'& > button:hover': {
|
|
44
41
|
backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(N30A, ")")
|
|
45
42
|
},
|
|
46
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
47
43
|
'& > button:active': {
|
|
48
44
|
backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
|
|
49
45
|
color: "var(--ds-text, ".concat(B400, ")")
|
|
50
46
|
}
|
|
51
47
|
});
|
|
48
|
+
// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
|
|
49
|
+
// Remove links that the component does not have (such as usage). If there are no links remove them all.
|
|
50
|
+
/**
|
|
51
|
+
* __Buttons__
|
|
52
|
+
*
|
|
53
|
+
* A buttons {description}.
|
|
54
|
+
*
|
|
55
|
+
* - [Examples](https://atlassian.design/components/{packageName}/examples)
|
|
56
|
+
* - [Code](https://atlassian.design/components/{packageName}/code)
|
|
57
|
+
* - [Usage](https://atlassian.design/components/{packageName}/usage)
|
|
58
|
+
*/
|
|
52
59
|
var Buttons = function Buttons(_ref) {
|
|
53
60
|
var confirmButtonLabel = _ref.confirmButtonLabel,
|
|
54
61
|
cancelButtonLabel = _ref.cancelButtonLabel,
|
|
@@ -58,7 +65,8 @@ var Buttons = function Buttons(_ref) {
|
|
|
58
65
|
return jsx("div", {
|
|
59
66
|
css: buttonsContainerStyles
|
|
60
67
|
}, jsx("div", {
|
|
61
|
-
css: buttonWrapperBaseStyles
|
|
68
|
+
css: buttonWrapperBaseStyles,
|
|
69
|
+
tabIndex: -1
|
|
62
70
|
}, jsx(IconButton, {
|
|
63
71
|
type: "submit",
|
|
64
72
|
icon: function icon(iconProps) {
|
|
@@ -70,7 +78,8 @@ var Buttons = function Buttons(_ref) {
|
|
|
70
78
|
label: confirmButtonLabel,
|
|
71
79
|
testId: testId && "".concat(testId, "--confirm")
|
|
72
80
|
})), jsx("div", {
|
|
73
|
-
css: buttonWrapperBaseStyles
|
|
81
|
+
css: buttonWrapperBaseStyles,
|
|
82
|
+
tabIndex: -1
|
|
74
83
|
}, jsx(IconButton, {
|
|
75
84
|
icon: function icon(iconProps) {
|
|
76
85
|
return jsx(CancelIcon, _extends({}, iconProps, {
|
|
@@ -11,5 +11,14 @@ interface ButtonsProp {
|
|
|
11
11
|
onCancelClick: (event: React.MouseEvent<HTMLElement>) => void;
|
|
12
12
|
testId?: string;
|
|
13
13
|
}
|
|
14
|
+
/**
|
|
15
|
+
* __Buttons__
|
|
16
|
+
*
|
|
17
|
+
* A buttons {description}.
|
|
18
|
+
*
|
|
19
|
+
* - [Examples](https://atlassian.design/components/{packageName}/examples)
|
|
20
|
+
* - [Code](https://atlassian.design/components/{packageName}/code)
|
|
21
|
+
* - [Usage](https://atlassian.design/components/{packageName}/usage)
|
|
22
|
+
*/
|
|
14
23
|
declare const Buttons: ({ confirmButtonLabel, cancelButtonLabel, onMouseDown, onCancelClick, testId, }: ButtonsProp) => jsx.JSX.Element;
|
|
15
24
|
export default Buttons;
|
|
@@ -11,5 +11,14 @@ interface ButtonsProp {
|
|
|
11
11
|
onCancelClick: (event: React.MouseEvent<HTMLElement>) => void;
|
|
12
12
|
testId?: string;
|
|
13
13
|
}
|
|
14
|
+
/**
|
|
15
|
+
* __Buttons__
|
|
16
|
+
*
|
|
17
|
+
* A buttons {description}.
|
|
18
|
+
*
|
|
19
|
+
* - [Examples](https://atlassian.design/components/{packageName}/examples)
|
|
20
|
+
* - [Code](https://atlassian.design/components/{packageName}/code)
|
|
21
|
+
* - [Usage](https://atlassian.design/components/{packageName}/usage)
|
|
22
|
+
*/
|
|
14
23
|
declare const Buttons: ({ confirmButtonLabel, cancelButtonLabel, onMouseDown, onCancelClick, testId, }: ButtonsProp) => jsx.JSX.Element;
|
|
15
24
|
export default Buttons;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/inline-edit",
|
|
3
|
-
"version": "13.7.
|
|
3
|
+
"version": "13.7.4",
|
|
4
4
|
"description": "An inline edit displays a custom input component that switches between reading and editing on the same page.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -33,16 +33,16 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@atlaskit/analytics-next": "^10.1.0",
|
|
36
|
-
"@atlaskit/button": "^20.
|
|
36
|
+
"@atlaskit/button": "^20.2.0",
|
|
37
37
|
"@atlaskit/codemod-utils": "^4.2.0",
|
|
38
38
|
"@atlaskit/form": "^10.5.0",
|
|
39
|
-
"@atlaskit/icon": "^22.
|
|
39
|
+
"@atlaskit/icon": "^22.18.0",
|
|
40
40
|
"@atlaskit/inline-dialog": "^15.0.0",
|
|
41
41
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
42
|
-
"@atlaskit/primitives": "^12.
|
|
42
|
+
"@atlaskit/primitives": "^12.2.0",
|
|
43
43
|
"@atlaskit/textfield": "^6.5.0",
|
|
44
44
|
"@atlaskit/theme": "^13.0.0",
|
|
45
|
-
"@atlaskit/tokens": "^
|
|
45
|
+
"@atlaskit/tokens": "^2.0.0",
|
|
46
46
|
"@atlaskit/visually-hidden": "^1.5.0",
|
|
47
47
|
"@babel/runtime": "^7.0.0",
|
|
48
48
|
"@emotion/react": "^11.7.1"
|
|
@@ -53,14 +53,14 @@
|
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@af/accessibility-testing": "*",
|
|
55
55
|
"@af/integration-testing": "*",
|
|
56
|
-
"@atlaskit/datetime-picker": "^
|
|
56
|
+
"@atlaskit/datetime-picker": "^15.0.0",
|
|
57
57
|
"@atlaskit/docs": "*",
|
|
58
|
-
"@atlaskit/ds-lib": "^2.
|
|
58
|
+
"@atlaskit/ds-lib": "^2.6.0",
|
|
59
59
|
"@atlaskit/section-message": "^6.6.0",
|
|
60
|
-
"@atlaskit/select": "^17.
|
|
60
|
+
"@atlaskit/select": "^17.19.0",
|
|
61
61
|
"@atlaskit/ssr": "*",
|
|
62
62
|
"@atlaskit/tag": "^12.6.0",
|
|
63
|
-
"@atlaskit/tag-group": "^10.
|
|
63
|
+
"@atlaskit/tag-group": "^10.6.0",
|
|
64
64
|
"@atlaskit/textarea": "^5.6.0",
|
|
65
65
|
"@atlaskit/visual-regression": "*",
|
|
66
66
|
"@atlassian/feature-flags-test-utils": "*",
|