@atlaskit/inline-edit 13.0.8 → 13.1.0
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/entry-points/types.js +1 -5
- package/dist/cjs/inline-edit.js +6 -4
- package/dist/cjs/internal/buttons.js +6 -3
- package/dist/cjs/internal/read-view.js +2 -2
- package/dist/es2019/entry-points/types.js +0 -1
- package/dist/es2019/inline-edit.js +4 -2
- package/dist/es2019/internal/buttons.js +6 -3
- package/dist/esm/entry-points/types.js +0 -1
- package/dist/esm/inline-edit.js +4 -2
- package/dist/esm/internal/buttons.js +6 -3
- package/dist/types/internal/buttons.d.ts +2 -1
- package/dist/types/types.d.ts +4 -0
- package/dist/types-ts4.5/internal/buttons.d.ts +2 -1
- package/dist/types-ts4.5/types.d.ts +4 -0
- package/inline-edit/package.json +1 -1
- package/inline-editable-textfield/package.json +1 -1
- package/package.json +10 -9
- package/types/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/inline-edit
|
|
2
2
|
|
|
3
|
+
## 13.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#83505](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83505) [`36b4633e8ee5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/36b4633e8ee5) - Adds a testId prop to allow for easier testing
|
|
8
|
+
|
|
9
|
+
## 13.0.9
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
|
|
14
|
+
|
|
3
15
|
## 13.0.8
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/dist/cjs/inline-edit.js
CHANGED
|
@@ -16,8 +16,8 @@ var _Form = _interopRequireDefault(require("@atlaskit/form/Form"));
|
|
|
16
16
|
var _buttons = _interopRequireDefault(require("./internal/buttons"));
|
|
17
17
|
var _useButtonFocusHook2 = _interopRequireDefault(require("./internal/hooks/use-button-focus-hook"));
|
|
18
18
|
var _readView = _interopRequireDefault(require("./internal/read-view"));
|
|
19
|
-
function _getRequireWildcardCache(
|
|
20
|
-
function _interopRequireWildcard(
|
|
19
|
+
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); }
|
|
20
|
+
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 && Object.prototype.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; }
|
|
21
21
|
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; }
|
|
22
22
|
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; } /** @jsx jsx */
|
|
23
23
|
var fieldStyles = (0, _react2.css)({
|
|
@@ -27,7 +27,7 @@ var fieldStyles = (0, _react2.css)({
|
|
|
27
27
|
var analyticsAttributes = {
|
|
28
28
|
componentName: 'inlineEdit',
|
|
29
29
|
packageName: "@atlaskit/inline-edit",
|
|
30
|
-
packageVersion: "13.0
|
|
30
|
+
packageVersion: "13.1.0"
|
|
31
31
|
};
|
|
32
32
|
var noop = function noop() {};
|
|
33
33
|
var InnerInlineEdit = function InnerInlineEdit(props) {
|
|
@@ -58,7 +58,8 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
|
|
|
58
58
|
_props$onCancel = props.onCancel,
|
|
59
59
|
providedOnCancel = _props$onCancel === void 0 ? noop : _props$onCancel,
|
|
60
60
|
_props$onEdit = props.onEdit,
|
|
61
|
-
providedOnEdit = _props$onEdit === void 0 ? noop : _props$onEdit
|
|
61
|
+
providedOnEdit = _props$onEdit === void 0 ? noop : _props$onEdit,
|
|
62
|
+
testId = props.testId;
|
|
62
63
|
var wasFocusReceivedSinceLastBlurRef = (0, _react.useRef)(false);
|
|
63
64
|
var isControlled = typeof isEditing === 'undefined';
|
|
64
65
|
var _useState = (0, _react.useState)(startWithEditViewOpen),
|
|
@@ -198,6 +199,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
|
|
|
198
199
|
}, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
|
|
199
200
|
errorMessage: error
|
|
200
201
|
}), editViewRef), !hideActionButtons ? (0, _react2.jsx)(_buttons.default, {
|
|
202
|
+
testId: testId,
|
|
201
203
|
cancelButtonLabel: cancelButtonLabel,
|
|
202
204
|
confirmButtonLabel: confirmButtonLabel,
|
|
203
205
|
onMouseDown: function onMouseDown() {
|
|
@@ -53,7 +53,8 @@ var Buttons = function Buttons(_ref) {
|
|
|
53
53
|
var confirmButtonLabel = _ref.confirmButtonLabel,
|
|
54
54
|
cancelButtonLabel = _ref.cancelButtonLabel,
|
|
55
55
|
onMouseDown = _ref.onMouseDown,
|
|
56
|
-
onCancelClick = _ref.onCancelClick
|
|
56
|
+
onCancelClick = _ref.onCancelClick,
|
|
57
|
+
testId = _ref.testId;
|
|
57
58
|
return (0, _react.jsx)("div", {
|
|
58
59
|
css: buttonsContainerStyles
|
|
59
60
|
}, (0, _react.jsx)("div", {
|
|
@@ -63,7 +64,8 @@ var Buttons = function Buttons(_ref) {
|
|
|
63
64
|
icon: _check.default,
|
|
64
65
|
UNSAFE_size: "small",
|
|
65
66
|
onMouseDown: onMouseDown,
|
|
66
|
-
label: confirmButtonLabel
|
|
67
|
+
label: confirmButtonLabel,
|
|
68
|
+
testId: testId && "".concat(testId, "--confirm")
|
|
67
69
|
})), (0, _react.jsx)("div", {
|
|
68
70
|
css: buttonWrapperBaseStyles
|
|
69
71
|
}, (0, _react.jsx)(_new.IconButton, {
|
|
@@ -71,7 +73,8 @@ var Buttons = function Buttons(_ref) {
|
|
|
71
73
|
UNSAFE_size: "small",
|
|
72
74
|
label: cancelButtonLabel,
|
|
73
75
|
onClick: onCancelClick,
|
|
74
|
-
onMouseDown: onMouseDown
|
|
76
|
+
onMouseDown: onMouseDown,
|
|
77
|
+
testId: testId && "".concat(testId, "--cancel")
|
|
75
78
|
})));
|
|
76
79
|
};
|
|
77
80
|
var _default = exports.default = Buttons;
|
|
@@ -9,8 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
var _react2 = require("@emotion/react");
|
|
10
10
|
var _colors = require("@atlaskit/theme/colors");
|
|
11
11
|
var _constants = require("./constants");
|
|
12
|
-
function _getRequireWildcardCache(
|
|
13
|
-
function _interopRequireWildcard(
|
|
12
|
+
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); }
|
|
13
|
+
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 && Object.prototype.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; }
|
|
14
14
|
/** @jsx jsx */
|
|
15
15
|
|
|
16
16
|
var readViewContainerStyles = (0, _react2.css)({
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -14,7 +14,7 @@ const fieldStyles = css({
|
|
|
14
14
|
const analyticsAttributes = {
|
|
15
15
|
componentName: 'inlineEdit',
|
|
16
16
|
packageName: "@atlaskit/inline-edit",
|
|
17
|
-
packageVersion: "13.0
|
|
17
|
+
packageVersion: "13.1.0"
|
|
18
18
|
};
|
|
19
19
|
const noop = () => {};
|
|
20
20
|
const InnerInlineEdit = props => {
|
|
@@ -36,7 +36,8 @@ const InnerInlineEdit = props => {
|
|
|
36
36
|
analyticsContext,
|
|
37
37
|
onConfirm: providedOnConfirm,
|
|
38
38
|
onCancel: providedOnCancel = noop,
|
|
39
|
-
onEdit: providedOnEdit = noop
|
|
39
|
+
onEdit: providedOnEdit = noop,
|
|
40
|
+
testId
|
|
40
41
|
} = props;
|
|
41
42
|
const wasFocusReceivedSinceLastBlurRef = useRef(false);
|
|
42
43
|
const isControlled = typeof isEditing === 'undefined';
|
|
@@ -174,6 +175,7 @@ const InnerInlineEdit = props => {
|
|
|
174
175
|
...fieldProps,
|
|
175
176
|
errorMessage: error
|
|
176
177
|
}, editViewRef), !hideActionButtons ? jsx(Buttons, {
|
|
178
|
+
testId: testId,
|
|
177
179
|
cancelButtonLabel: cancelButtonLabel,
|
|
178
180
|
confirmButtonLabel: confirmButtonLabel,
|
|
179
181
|
onMouseDown: () => {
|
|
@@ -46,7 +46,8 @@ const Buttons = ({
|
|
|
46
46
|
confirmButtonLabel,
|
|
47
47
|
cancelButtonLabel,
|
|
48
48
|
onMouseDown,
|
|
49
|
-
onCancelClick
|
|
49
|
+
onCancelClick,
|
|
50
|
+
testId
|
|
50
51
|
}) => {
|
|
51
52
|
return jsx("div", {
|
|
52
53
|
css: buttonsContainerStyles
|
|
@@ -57,7 +58,8 @@ const Buttons = ({
|
|
|
57
58
|
icon: ConfirmIcon,
|
|
58
59
|
UNSAFE_size: "small",
|
|
59
60
|
onMouseDown: onMouseDown,
|
|
60
|
-
label: confirmButtonLabel
|
|
61
|
+
label: confirmButtonLabel,
|
|
62
|
+
testId: testId && `${testId}--confirm`
|
|
61
63
|
})), jsx("div", {
|
|
62
64
|
css: buttonWrapperBaseStyles
|
|
63
65
|
}, jsx(IconButton, {
|
|
@@ -65,7 +67,8 @@ const Buttons = ({
|
|
|
65
67
|
UNSAFE_size: "small",
|
|
66
68
|
label: cancelButtonLabel,
|
|
67
69
|
onClick: onCancelClick,
|
|
68
|
-
onMouseDown: onMouseDown
|
|
70
|
+
onMouseDown: onMouseDown,
|
|
71
|
+
testId: testId && `${testId}--cancel`
|
|
69
72
|
})));
|
|
70
73
|
};
|
|
71
74
|
export default Buttons;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/dist/esm/inline-edit.js
CHANGED
|
@@ -18,7 +18,7 @@ var fieldStyles = css({
|
|
|
18
18
|
var analyticsAttributes = {
|
|
19
19
|
componentName: 'inlineEdit',
|
|
20
20
|
packageName: "@atlaskit/inline-edit",
|
|
21
|
-
packageVersion: "13.0
|
|
21
|
+
packageVersion: "13.1.0"
|
|
22
22
|
};
|
|
23
23
|
var noop = function noop() {};
|
|
24
24
|
var InnerInlineEdit = function InnerInlineEdit(props) {
|
|
@@ -49,7 +49,8 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
|
|
|
49
49
|
_props$onCancel = props.onCancel,
|
|
50
50
|
providedOnCancel = _props$onCancel === void 0 ? noop : _props$onCancel,
|
|
51
51
|
_props$onEdit = props.onEdit,
|
|
52
|
-
providedOnEdit = _props$onEdit === void 0 ? noop : _props$onEdit
|
|
52
|
+
providedOnEdit = _props$onEdit === void 0 ? noop : _props$onEdit,
|
|
53
|
+
testId = props.testId;
|
|
53
54
|
var wasFocusReceivedSinceLastBlurRef = useRef(false);
|
|
54
55
|
var isControlled = typeof isEditing === 'undefined';
|
|
55
56
|
var _useState = useState(startWithEditViewOpen),
|
|
@@ -189,6 +190,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
|
|
|
189
190
|
}, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
|
|
190
191
|
errorMessage: error
|
|
191
192
|
}), editViewRef), !hideActionButtons ? jsx(Buttons, {
|
|
193
|
+
testId: testId,
|
|
192
194
|
cancelButtonLabel: cancelButtonLabel,
|
|
193
195
|
confirmButtonLabel: confirmButtonLabel,
|
|
194
196
|
onMouseDown: function onMouseDown() {
|
|
@@ -46,7 +46,8 @@ var Buttons = function Buttons(_ref) {
|
|
|
46
46
|
var confirmButtonLabel = _ref.confirmButtonLabel,
|
|
47
47
|
cancelButtonLabel = _ref.cancelButtonLabel,
|
|
48
48
|
onMouseDown = _ref.onMouseDown,
|
|
49
|
-
onCancelClick = _ref.onCancelClick
|
|
49
|
+
onCancelClick = _ref.onCancelClick,
|
|
50
|
+
testId = _ref.testId;
|
|
50
51
|
return jsx("div", {
|
|
51
52
|
css: buttonsContainerStyles
|
|
52
53
|
}, jsx("div", {
|
|
@@ -56,7 +57,8 @@ var Buttons = function Buttons(_ref) {
|
|
|
56
57
|
icon: ConfirmIcon,
|
|
57
58
|
UNSAFE_size: "small",
|
|
58
59
|
onMouseDown: onMouseDown,
|
|
59
|
-
label: confirmButtonLabel
|
|
60
|
+
label: confirmButtonLabel,
|
|
61
|
+
testId: testId && "".concat(testId, "--confirm")
|
|
60
62
|
})), jsx("div", {
|
|
61
63
|
css: buttonWrapperBaseStyles
|
|
62
64
|
}, jsx(IconButton, {
|
|
@@ -64,7 +66,8 @@ var Buttons = function Buttons(_ref) {
|
|
|
64
66
|
UNSAFE_size: "small",
|
|
65
67
|
label: cancelButtonLabel,
|
|
66
68
|
onClick: onCancelClick,
|
|
67
|
-
onMouseDown: onMouseDown
|
|
69
|
+
onMouseDown: onMouseDown,
|
|
70
|
+
testId: testId && "".concat(testId, "--cancel")
|
|
68
71
|
})));
|
|
69
72
|
};
|
|
70
73
|
export default Buttons;
|
|
@@ -6,6 +6,7 @@ interface ButtonsProp {
|
|
|
6
6
|
cancelButtonLabel: string;
|
|
7
7
|
onMouseDown: () => void;
|
|
8
8
|
onCancelClick: (event: React.MouseEvent<HTMLElement>) => void;
|
|
9
|
+
testId?: string;
|
|
9
10
|
}
|
|
10
|
-
declare const Buttons: ({ confirmButtonLabel, cancelButtonLabel, onMouseDown, onCancelClick, }: ButtonsProp) => jsx.JSX.Element;
|
|
11
|
+
declare const Buttons: ({ confirmButtonLabel, cancelButtonLabel, onMouseDown, onCancelClick, testId, }: ButtonsProp) => jsx.JSX.Element;
|
|
11
12
|
export default Buttons;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -33,6 +33,10 @@ interface CommonProps {
|
|
|
33
33
|
* starts in `editView`.
|
|
34
34
|
*/
|
|
35
35
|
startWithEditViewOpen?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
|
|
38
|
+
*/
|
|
39
|
+
testId?: string;
|
|
36
40
|
}
|
|
37
41
|
export interface ExtendedFieldProps<FieldValue> extends FieldProps<FieldValue> {
|
|
38
42
|
errorMessage?: string | undefined;
|
|
@@ -6,6 +6,7 @@ interface ButtonsProp {
|
|
|
6
6
|
cancelButtonLabel: string;
|
|
7
7
|
onMouseDown: () => void;
|
|
8
8
|
onCancelClick: (event: React.MouseEvent<HTMLElement>) => void;
|
|
9
|
+
testId?: string;
|
|
9
10
|
}
|
|
10
|
-
declare const Buttons: ({ confirmButtonLabel, cancelButtonLabel, onMouseDown, onCancelClick, }: ButtonsProp) => jsx.JSX.Element;
|
|
11
|
+
declare const Buttons: ({ confirmButtonLabel, cancelButtonLabel, onMouseDown, onCancelClick, testId, }: ButtonsProp) => jsx.JSX.Element;
|
|
11
12
|
export default Buttons;
|
|
@@ -33,6 +33,10 @@ interface CommonProps {
|
|
|
33
33
|
* starts in `editView`.
|
|
34
34
|
*/
|
|
35
35
|
startWithEditViewOpen?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
|
|
38
|
+
*/
|
|
39
|
+
testId?: string;
|
|
36
40
|
}
|
|
37
41
|
export interface ExtendedFieldProps<FieldValue> extends FieldProps<FieldValue> {
|
|
38
42
|
errorMessage?: string | undefined;
|
package/inline-edit/package.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/inline-edit",
|
|
3
|
-
"version": "13.0
|
|
3
|
+
"version": "13.1.0",
|
|
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/"
|
|
@@ -36,14 +36,14 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@atlaskit/analytics-next": "^9.2.0",
|
|
39
|
-
"@atlaskit/button": "^17.
|
|
39
|
+
"@atlaskit/button": "^17.7.0",
|
|
40
40
|
"@atlaskit/codemod-utils": "^4.2.0",
|
|
41
41
|
"@atlaskit/form": "^9.0.3",
|
|
42
42
|
"@atlaskit/icon": "^22.1.0",
|
|
43
43
|
"@atlaskit/inline-dialog": "^14.0.0",
|
|
44
|
-
"@atlaskit/textfield": "^6.
|
|
44
|
+
"@atlaskit/textfield": "^6.1.0",
|
|
45
45
|
"@atlaskit/theme": "^12.6.0",
|
|
46
|
-
"@atlaskit/tokens": "^1.
|
|
46
|
+
"@atlaskit/tokens": "^1.42.0",
|
|
47
47
|
"@babel/runtime": "^7.0.0",
|
|
48
48
|
"@emotion/react": "^11.7.1"
|
|
49
49
|
},
|
|
@@ -53,14 +53,15 @@
|
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@af/accessibility-testing": "*",
|
|
55
55
|
"@af/integration-testing": "*",
|
|
56
|
-
"@atlaskit/datetime-picker": "^13.0
|
|
56
|
+
"@atlaskit/datetime-picker": "^13.2.0",
|
|
57
57
|
"@atlaskit/docs": "*",
|
|
58
|
+
"@atlaskit/ds-lib": "^2.2.0",
|
|
58
59
|
"@atlaskit/section-message": "^6.4.0",
|
|
59
|
-
"@atlaskit/select": "^17.
|
|
60
|
+
"@atlaskit/select": "^17.3.0",
|
|
60
61
|
"@atlaskit/ssr": "*",
|
|
61
62
|
"@atlaskit/tag": "^12.0.0",
|
|
62
63
|
"@atlaskit/tag-group": "^10.2.0",
|
|
63
|
-
"@atlaskit/textarea": "^5.
|
|
64
|
+
"@atlaskit/textarea": "^5.2.0",
|
|
64
65
|
"@atlaskit/visual-regression": "*",
|
|
65
66
|
"@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
|
|
66
67
|
"@emotion/styled": "^11.0.0",
|
|
@@ -70,7 +71,7 @@
|
|
|
70
71
|
"jscodeshift": "^0.13.0",
|
|
71
72
|
"react-dom": "^16.8.0",
|
|
72
73
|
"storybook-addon-performance": "^0.16.0",
|
|
73
|
-
"typescript": "~4.
|
|
74
|
+
"typescript": "~5.4.2",
|
|
74
75
|
"wait-for-expect": "^1.2.0"
|
|
75
76
|
},
|
|
76
77
|
"keywords": [
|
|
@@ -104,4 +105,4 @@
|
|
|
104
105
|
".": "./src/index.ts"
|
|
105
106
|
},
|
|
106
107
|
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
|
|
107
|
-
}
|
|
108
|
+
}
|