@mui/x-date-pickers 5.0.7 → 5.0.8
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 +29 -0
- package/DatePicker/DatePickerToolbar.js +1 -8
- package/DateTimePicker/DateTimePickerToolbar.js +12 -6
- package/index.js +1 -1
- package/internals/components/PickersToolbar.js +6 -2
- package/legacy/DatePicker/DatePickerToolbar.js +1 -7
- package/legacy/DateTimePicker/DateTimePickerToolbar.js +17 -10
- package/legacy/index.js +1 -1
- package/legacy/internals/components/PickersToolbar.js +7 -2
- package/modern/DatePicker/DatePickerToolbar.js +1 -8
- package/modern/DateTimePicker/DateTimePickerToolbar.js +12 -6
- package/modern/index.js +1 -1
- package/modern/internals/components/PickersToolbar.js +6 -2
- package/node/DatePicker/DatePickerToolbar.js +1 -9
- package/node/DateTimePicker/DateTimePickerToolbar.js +13 -7
- package/node/index.js +1 -1
- package/node/internals/components/PickersToolbar.js +6 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,35 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 5.17.11
|
|
7
|
+
|
|
8
|
+
_Nov 10, 2022_
|
|
9
|
+
|
|
10
|
+
We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
|
|
11
|
+
|
|
12
|
+
- 🐞 Bugfixes
|
|
13
|
+
|
|
14
|
+
### `@mui/x-data-grid@v5.17.11` / `@mui/x-data-grid-pro@v5.17.11` / `@mui/x-data-grid-premium@v5.17.11`
|
|
15
|
+
|
|
16
|
+
#### Changes
|
|
17
|
+
|
|
18
|
+
- [DataGrid] Fix for cell focus preventing scroll when virtualization enabled (#6622) @yaredtsy
|
|
19
|
+
- [DataGridPro] Opt-out for column jump back on re-order (#6697) @gavbrennan
|
|
20
|
+
|
|
21
|
+
### `@mui/x-date-pickers@v5.0.8` / `@mui/x-date-pickers-pro@v5.0.8`
|
|
22
|
+
|
|
23
|
+
#### Changes
|
|
24
|
+
|
|
25
|
+
- [pickers] Fix pickers toolbar styling (#6793) @LukasTy
|
|
26
|
+
|
|
27
|
+
### Docs
|
|
28
|
+
|
|
29
|
+
- [docs] Fix link to localization page (#6766) @alexfauquette
|
|
30
|
+
|
|
31
|
+
### Core
|
|
32
|
+
|
|
33
|
+
- [license] Add new license status 'Out of scope' (#6774) @oliviertassinari
|
|
34
|
+
|
|
6
35
|
## 5.17.10
|
|
7
36
|
|
|
8
37
|
_Nov 4, 2022_
|
|
@@ -6,7 +6,6 @@ import Typography from '@mui/material/Typography';
|
|
|
6
6
|
import { styled, useThemeProps } from '@mui/material/styles';
|
|
7
7
|
import { unstable_composeClasses as composeClasses } from '@mui/material';
|
|
8
8
|
import { PickersToolbar } from '../internals/components/PickersToolbar';
|
|
9
|
-
import { pickersToolbarClasses } from '../internals/components/pickersToolbarClasses';
|
|
10
9
|
import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
|
|
11
10
|
import { isYearAndMonthViews, isYearOnlyView } from './shared';
|
|
12
11
|
import { getDatePickerToolbarUtilityClass } from './datePickerToolbarClasses';
|
|
@@ -27,12 +26,7 @@ const DatePickerToolbarRoot = styled(PickersToolbar, {
|
|
|
27
26
|
name: 'MuiDatePickerToolbar',
|
|
28
27
|
slot: 'Root',
|
|
29
28
|
overridesResolver: (_, styles) => styles.root
|
|
30
|
-
})({
|
|
31
|
-
[`& .${pickersToolbarClasses.penIconButton}`]: {
|
|
32
|
-
position: 'relative',
|
|
33
|
-
top: 4
|
|
34
|
-
}
|
|
35
|
-
});
|
|
29
|
+
})({});
|
|
36
30
|
const DatePickerToolbarTitle = styled(Typography, {
|
|
37
31
|
name: 'MuiDatePickerToolbar',
|
|
38
32
|
slot: 'Title',
|
|
@@ -97,7 +91,6 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
|
|
|
97
91
|
isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
|
|
98
92
|
toggleMobileKeyboardView: toggleMobileKeyboardView,
|
|
99
93
|
isLandscape: isLandscape,
|
|
100
|
-
ownerState: ownerState,
|
|
101
94
|
className: classes.root
|
|
102
95
|
}, other, {
|
|
103
96
|
children: /*#__PURE__*/_jsx(DatePickerToolbarTitle, {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
1
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
2
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
3
|
const _excluded = ["ampm", "parsedValue", "isMobileKeyboardViewOpen", "onChange", "openView", "setOpenView", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { styled, useThemeProps } from '@mui/material/styles';
|
|
@@ -30,16 +30,22 @@ const DateTimePickerToolbarRoot = styled(PickersToolbar, {
|
|
|
30
30
|
name: 'MuiDateTimePickerToolbar',
|
|
31
31
|
slot: 'Root',
|
|
32
32
|
overridesResolver: (props, styles) => styles.root
|
|
33
|
-
})({
|
|
33
|
+
})(({
|
|
34
|
+
theme
|
|
35
|
+
}) => ({
|
|
34
36
|
paddingLeft: 16,
|
|
35
37
|
paddingRight: 16,
|
|
36
38
|
justifyContent: 'space-around',
|
|
37
|
-
|
|
39
|
+
position: 'relative',
|
|
40
|
+
[`& .${pickersToolbarClasses.penIconButton}`]: _extends({
|
|
38
41
|
position: 'absolute',
|
|
39
|
-
top: 8
|
|
42
|
+
top: 8
|
|
43
|
+
}, theme.direction === 'rtl' ? {
|
|
44
|
+
left: 8
|
|
45
|
+
} : {
|
|
40
46
|
right: 8
|
|
41
|
-
}
|
|
42
|
-
});
|
|
47
|
+
})
|
|
48
|
+
}));
|
|
43
49
|
const DateTimePickerToolbarDateContainer = styled('div', {
|
|
44
50
|
name: 'MuiDateTimePickerToolbar',
|
|
45
51
|
slot: 'DateContainer',
|
package/index.js
CHANGED
|
@@ -49,9 +49,13 @@ const PickersToolbarContent = styled(Grid, {
|
|
|
49
49
|
name: 'MuiPickersToolbar',
|
|
50
50
|
slot: 'Content',
|
|
51
51
|
overridesResolver: (props, styles) => styles.content
|
|
52
|
-
})({
|
|
52
|
+
})(({
|
|
53
|
+
ownerState
|
|
54
|
+
}) => _extends({
|
|
53
55
|
flex: 1
|
|
54
|
-
}
|
|
56
|
+
}, !ownerState.isLandscape && {
|
|
57
|
+
alignItems: 'center'
|
|
58
|
+
}));
|
|
55
59
|
const PickersToolbarPenIconButton = styled(IconButton, {
|
|
56
60
|
name: 'MuiPickersToolbar',
|
|
57
61
|
slot: 'PenIconButton',
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
2
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
-
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
4
3
|
var _excluded = ["parsedValue", "isLandscape", "isMobileKeyboardViewOpen", "onChange", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
|
|
5
4
|
import * as React from 'react';
|
|
6
5
|
import Typography from '@mui/material/Typography';
|
|
7
6
|
import { styled, useThemeProps } from '@mui/material/styles';
|
|
8
7
|
import { unstable_composeClasses as composeClasses } from '@mui/material';
|
|
9
8
|
import { PickersToolbar } from '../internals/components/PickersToolbar';
|
|
10
|
-
import { pickersToolbarClasses } from '../internals/components/pickersToolbarClasses';
|
|
11
9
|
import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
|
|
12
10
|
import { isYearAndMonthViews, isYearOnlyView } from './shared';
|
|
13
11
|
import { getDatePickerToolbarUtilityClass } from './datePickerToolbarClasses';
|
|
@@ -28,10 +26,7 @@ var DatePickerToolbarRoot = styled(PickersToolbar, {
|
|
|
28
26
|
overridesResolver: function overridesResolver(_, styles) {
|
|
29
27
|
return styles.root;
|
|
30
28
|
}
|
|
31
|
-
})(
|
|
32
|
-
position: 'relative',
|
|
33
|
-
top: 4
|
|
34
|
-
}));
|
|
29
|
+
})({});
|
|
35
30
|
var DatePickerToolbarTitle = styled(Typography, {
|
|
36
31
|
name: 'MuiDatePickerToolbar',
|
|
37
32
|
slot: 'Title',
|
|
@@ -99,7 +94,6 @@ export var DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePicker
|
|
|
99
94
|
isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
|
|
100
95
|
toggleMobileKeyboardView: toggleMobileKeyboardView,
|
|
101
96
|
isLandscape: isLandscape,
|
|
102
|
-
ownerState: ownerState,
|
|
103
97
|
className: classes.root
|
|
104
98
|
}, other, {
|
|
105
99
|
children: /*#__PURE__*/_jsx(DatePickerToolbarTitle, {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
2
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
3
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
4
|
var _excluded = ["ampm", "parsedValue", "isMobileKeyboardViewOpen", "onChange", "openView", "setOpenView", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import { styled, useThemeProps } from '@mui/material/styles';
|
|
@@ -31,15 +31,22 @@ var DateTimePickerToolbarRoot = styled(PickersToolbar, {
|
|
|
31
31
|
overridesResolver: function overridesResolver(props, styles) {
|
|
32
32
|
return styles.root;
|
|
33
33
|
}
|
|
34
|
-
})(
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
34
|
+
})(function (_ref) {
|
|
35
|
+
var theme = _ref.theme;
|
|
36
|
+
return _defineProperty({
|
|
37
|
+
paddingLeft: 16,
|
|
38
|
+
paddingRight: 16,
|
|
39
|
+
justifyContent: 'space-around',
|
|
40
|
+
position: 'relative'
|
|
41
|
+
}, "& .".concat(pickersToolbarClasses.penIconButton), _extends({
|
|
42
|
+
position: 'absolute',
|
|
43
|
+
top: 8
|
|
44
|
+
}, theme.direction === 'rtl' ? {
|
|
45
|
+
left: 8
|
|
46
|
+
} : {
|
|
47
|
+
right: 8
|
|
48
|
+
}));
|
|
49
|
+
});
|
|
43
50
|
var DateTimePickerToolbarDateContainer = styled('div', {
|
|
44
51
|
name: 'MuiDateTimePickerToolbar',
|
|
45
52
|
slot: 'DateContainer',
|
package/legacy/index.js
CHANGED
|
@@ -53,8 +53,13 @@ var PickersToolbarContent = styled(Grid, {
|
|
|
53
53
|
overridesResolver: function overridesResolver(props, styles) {
|
|
54
54
|
return styles.content;
|
|
55
55
|
}
|
|
56
|
-
})({
|
|
57
|
-
|
|
56
|
+
})(function (_ref2) {
|
|
57
|
+
var ownerState = _ref2.ownerState;
|
|
58
|
+
return _extends({
|
|
59
|
+
flex: 1
|
|
60
|
+
}, !ownerState.isLandscape && {
|
|
61
|
+
alignItems: 'center'
|
|
62
|
+
});
|
|
58
63
|
});
|
|
59
64
|
var PickersToolbarPenIconButton = styled(IconButton, {
|
|
60
65
|
name: 'MuiPickersToolbar',
|
|
@@ -6,7 +6,6 @@ import Typography from '@mui/material/Typography';
|
|
|
6
6
|
import { styled, useThemeProps } from '@mui/material/styles';
|
|
7
7
|
import { unstable_composeClasses as composeClasses } from '@mui/material';
|
|
8
8
|
import { PickersToolbar } from '../internals/components/PickersToolbar';
|
|
9
|
-
import { pickersToolbarClasses } from '../internals/components/pickersToolbarClasses';
|
|
10
9
|
import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
|
|
11
10
|
import { isYearAndMonthViews, isYearOnlyView } from './shared';
|
|
12
11
|
import { getDatePickerToolbarUtilityClass } from './datePickerToolbarClasses';
|
|
@@ -27,12 +26,7 @@ const DatePickerToolbarRoot = styled(PickersToolbar, {
|
|
|
27
26
|
name: 'MuiDatePickerToolbar',
|
|
28
27
|
slot: 'Root',
|
|
29
28
|
overridesResolver: (_, styles) => styles.root
|
|
30
|
-
})({
|
|
31
|
-
[`& .${pickersToolbarClasses.penIconButton}`]: {
|
|
32
|
-
position: 'relative',
|
|
33
|
-
top: 4
|
|
34
|
-
}
|
|
35
|
-
});
|
|
29
|
+
})({});
|
|
36
30
|
const DatePickerToolbarTitle = styled(Typography, {
|
|
37
31
|
name: 'MuiDatePickerToolbar',
|
|
38
32
|
slot: 'Title',
|
|
@@ -97,7 +91,6 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
|
|
|
97
91
|
isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
|
|
98
92
|
toggleMobileKeyboardView: toggleMobileKeyboardView,
|
|
99
93
|
isLandscape: isLandscape,
|
|
100
|
-
ownerState: ownerState,
|
|
101
94
|
className: classes.root
|
|
102
95
|
}, other, {
|
|
103
96
|
children: /*#__PURE__*/_jsx(DatePickerToolbarTitle, {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
1
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
2
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
3
|
const _excluded = ["ampm", "parsedValue", "isMobileKeyboardViewOpen", "onChange", "openView", "setOpenView", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { styled, useThemeProps } from '@mui/material/styles';
|
|
@@ -30,16 +30,22 @@ const DateTimePickerToolbarRoot = styled(PickersToolbar, {
|
|
|
30
30
|
name: 'MuiDateTimePickerToolbar',
|
|
31
31
|
slot: 'Root',
|
|
32
32
|
overridesResolver: (props, styles) => styles.root
|
|
33
|
-
})({
|
|
33
|
+
})(({
|
|
34
|
+
theme
|
|
35
|
+
}) => ({
|
|
34
36
|
paddingLeft: 16,
|
|
35
37
|
paddingRight: 16,
|
|
36
38
|
justifyContent: 'space-around',
|
|
37
|
-
|
|
39
|
+
position: 'relative',
|
|
40
|
+
[`& .${pickersToolbarClasses.penIconButton}`]: _extends({
|
|
38
41
|
position: 'absolute',
|
|
39
|
-
top: 8
|
|
42
|
+
top: 8
|
|
43
|
+
}, theme.direction === 'rtl' ? {
|
|
44
|
+
left: 8
|
|
45
|
+
} : {
|
|
40
46
|
right: 8
|
|
41
|
-
}
|
|
42
|
-
});
|
|
47
|
+
})
|
|
48
|
+
}));
|
|
43
49
|
const DateTimePickerToolbarDateContainer = styled('div', {
|
|
44
50
|
name: 'MuiDateTimePickerToolbar',
|
|
45
51
|
slot: 'DateContainer',
|
package/modern/index.js
CHANGED
|
@@ -49,9 +49,13 @@ const PickersToolbarContent = styled(Grid, {
|
|
|
49
49
|
name: 'MuiPickersToolbar',
|
|
50
50
|
slot: 'Content',
|
|
51
51
|
overridesResolver: (props, styles) => styles.content
|
|
52
|
-
})({
|
|
52
|
+
})(({
|
|
53
|
+
ownerState
|
|
54
|
+
}) => _extends({
|
|
53
55
|
flex: 1
|
|
54
|
-
}
|
|
56
|
+
}, !ownerState.isLandscape && {
|
|
57
|
+
alignItems: 'center'
|
|
58
|
+
}));
|
|
55
59
|
const PickersToolbarPenIconButton = styled(IconButton, {
|
|
56
60
|
name: 'MuiPickersToolbar',
|
|
57
61
|
slot: 'PenIconButton',
|
|
@@ -21,8 +21,6 @@ var _material = require("@mui/material");
|
|
|
21
21
|
|
|
22
22
|
var _PickersToolbar = require("../internals/components/PickersToolbar");
|
|
23
23
|
|
|
24
|
-
var _pickersToolbarClasses = require("../internals/components/pickersToolbarClasses");
|
|
25
|
-
|
|
26
24
|
var _useUtils = require("../internals/hooks/useUtils");
|
|
27
25
|
|
|
28
26
|
var _shared = require("./shared");
|
|
@@ -52,12 +50,7 @@ const DatePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToolbar
|
|
|
52
50
|
name: 'MuiDatePickerToolbar',
|
|
53
51
|
slot: 'Root',
|
|
54
52
|
overridesResolver: (_, styles) => styles.root
|
|
55
|
-
})({
|
|
56
|
-
[`& .${_pickersToolbarClasses.pickersToolbarClasses.penIconButton}`]: {
|
|
57
|
-
position: 'relative',
|
|
58
|
-
top: 4
|
|
59
|
-
}
|
|
60
|
-
});
|
|
53
|
+
})({});
|
|
61
54
|
const DatePickerToolbarTitle = (0, _styles.styled)(_Typography.default, {
|
|
62
55
|
name: 'MuiDatePickerToolbar',
|
|
63
56
|
slot: 'Title',
|
|
@@ -120,7 +113,6 @@ const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolb
|
|
|
120
113
|
isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
|
|
121
114
|
toggleMobileKeyboardView: toggleMobileKeyboardView,
|
|
122
115
|
isLandscape: isLandscape,
|
|
123
|
-
ownerState: ownerState,
|
|
124
116
|
className: classes.root
|
|
125
117
|
}, other, {
|
|
126
118
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DatePickerToolbarTitle, {
|
|
@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.DateTimePickerToolbar = DateTimePickerToolbar;
|
|
9
9
|
|
|
10
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
-
|
|
12
10
|
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
13
11
|
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
14
|
var React = _interopRequireWildcard(require("react"));
|
|
15
15
|
|
|
16
16
|
var _styles = require("@mui/material/styles");
|
|
@@ -54,16 +54,22 @@ const DateTimePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToo
|
|
|
54
54
|
name: 'MuiDateTimePickerToolbar',
|
|
55
55
|
slot: 'Root',
|
|
56
56
|
overridesResolver: (props, styles) => styles.root
|
|
57
|
-
})({
|
|
57
|
+
})(({
|
|
58
|
+
theme
|
|
59
|
+
}) => ({
|
|
58
60
|
paddingLeft: 16,
|
|
59
61
|
paddingRight: 16,
|
|
60
62
|
justifyContent: 'space-around',
|
|
61
|
-
|
|
63
|
+
position: 'relative',
|
|
64
|
+
[`& .${_pickersToolbarClasses.pickersToolbarClasses.penIconButton}`]: (0, _extends2.default)({
|
|
62
65
|
position: 'absolute',
|
|
63
|
-
top: 8
|
|
66
|
+
top: 8
|
|
67
|
+
}, theme.direction === 'rtl' ? {
|
|
68
|
+
left: 8
|
|
69
|
+
} : {
|
|
64
70
|
right: 8
|
|
65
|
-
}
|
|
66
|
-
});
|
|
71
|
+
})
|
|
72
|
+
}));
|
|
67
73
|
const DateTimePickerToolbarDateContainer = (0, _styles.styled)('div', {
|
|
68
74
|
name: 'MuiDateTimePickerToolbar',
|
|
69
75
|
slot: 'DateContainer',
|
package/node/index.js
CHANGED
|
@@ -72,9 +72,13 @@ const PickersToolbarContent = (0, _styles.styled)(_Grid.default, {
|
|
|
72
72
|
name: 'MuiPickersToolbar',
|
|
73
73
|
slot: 'Content',
|
|
74
74
|
overridesResolver: (props, styles) => styles.content
|
|
75
|
-
})({
|
|
75
|
+
})(({
|
|
76
|
+
ownerState
|
|
77
|
+
}) => (0, _extends2.default)({
|
|
76
78
|
flex: 1
|
|
77
|
-
}
|
|
79
|
+
}, !ownerState.isLandscape && {
|
|
80
|
+
alignItems: 'center'
|
|
81
|
+
}));
|
|
78
82
|
const PickersToolbarPenIconButton = (0, _styles.styled)(_IconButton.default, {
|
|
79
83
|
name: 'MuiPickersToolbar',
|
|
80
84
|
slot: 'PenIconButton',
|