@react-spectrum/card 3.0.0-nightly.3074 → 3.0.0-nightly.3086
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/dist/main.css +1 -1
- package/dist/main.js +403 -458
- package/dist/main.js.map +1 -1
- package/dist/module.js +399 -454
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +1 -7
- package/dist/types.d.ts.map +1 -1
- package/package.json +22 -22
- package/src/CardBase.tsx +17 -59
- package/src/CardView.tsx +4 -0
- package/src/GalleryLayout.tsx +3 -3
- package/src/WaterfallLayout.tsx +5 -14
package/dist/types.d.ts
CHANGED
|
@@ -64,7 +64,7 @@ export interface GalleryLayoutOptions extends BaseLayoutOptions {
|
|
|
64
64
|
itemSpacing?: Size;
|
|
65
65
|
/**
|
|
66
66
|
* The vertical padding for an item.
|
|
67
|
-
* @default
|
|
67
|
+
* @default 78
|
|
68
68
|
*/
|
|
69
69
|
itemPadding?: number;
|
|
70
70
|
/**
|
|
@@ -168,18 +168,12 @@ export interface WaterfallLayoutOptions extends BaseLayoutOptions {
|
|
|
168
168
|
* @default Infinity
|
|
169
169
|
*/
|
|
170
170
|
maxColumns?: number;
|
|
171
|
-
/**
|
|
172
|
-
* The vertical padding for an item.
|
|
173
|
-
* @default 56
|
|
174
|
-
*/
|
|
175
|
-
itemPadding?: number;
|
|
176
171
|
}
|
|
177
172
|
export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegate {
|
|
178
173
|
protected minItemSize: Size;
|
|
179
174
|
protected maxItemSize: Size;
|
|
180
175
|
protected minSpace: Size;
|
|
181
176
|
protected maxColumns: number;
|
|
182
|
-
itemPadding: number;
|
|
183
177
|
protected numColumns: number;
|
|
184
178
|
protected itemWidth: number;
|
|
185
179
|
protected horizontalSpacing: number;
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/CardViewContext.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/CardBase.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/CardView.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/BaseLayout.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/GalleryLayout.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/GridLayout.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/WaterfallLayout.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/Card.tsx","packages/@react-spectrum/card/src/packages/@react-spectrum/card/src/index.ts","packages/@react-spectrum/card/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,"/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport * from './CardView';\nexport * from './GalleryLayout';\nexport * from './GridLayout';\nexport * from './WaterfallLayout';\nexport * from './Card';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/card",
|
|
3
|
-
"version": "3.0.0-nightly.
|
|
3
|
+
"version": "3.0.0-nightly.3086+b2abc5d94",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -32,28 +32,28 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@babel/runtime": "^7.6.2",
|
|
35
|
-
"@react-aria/focus": "3.0.0-nightly.
|
|
36
|
-
"@react-aria/grid": "3.2.1-nightly.
|
|
37
|
-
"@react-aria/i18n": "3.0.0-nightly.
|
|
38
|
-
"@react-aria/interactions": "3.0.0-nightly.
|
|
39
|
-
"@react-aria/utils": "3.0.0-nightly.
|
|
40
|
-
"@react-aria/virtualizer": "3.3.6-nightly.
|
|
41
|
-
"@react-spectrum/checkbox": "3.0.0-nightly.
|
|
42
|
-
"@react-spectrum/divider": "3.0.0-nightly.
|
|
43
|
-
"@react-spectrum/layout": "3.2.2-nightly.
|
|
44
|
-
"@react-spectrum/progress": "3.0.0-nightly.
|
|
45
|
-
"@react-spectrum/utils": "3.0.0-nightly.
|
|
46
|
-
"@react-stately/collections": "3.0.0-nightly.
|
|
47
|
-
"@react-stately/grid": "3.1.1-nightly.
|
|
48
|
-
"@react-stately/list": "3.4.2-nightly.
|
|
49
|
-
"@react-stately/utils": "3.0.0-nightly.
|
|
50
|
-
"@react-stately/virtualizer": "3.1.7-nightly.
|
|
51
|
-
"@react-types/card": "3.0.0-nightly.
|
|
52
|
-
"@react-types/provider": "3.3.3-nightly.
|
|
53
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
35
|
+
"@react-aria/focus": "3.0.0-nightly.1395+b2abc5d94",
|
|
36
|
+
"@react-aria/grid": "3.2.1-nightly.3086+b2abc5d94",
|
|
37
|
+
"@react-aria/i18n": "3.0.0-nightly.1395+b2abc5d94",
|
|
38
|
+
"@react-aria/interactions": "3.0.0-nightly.1395+b2abc5d94",
|
|
39
|
+
"@react-aria/utils": "3.0.0-nightly.1395+b2abc5d94",
|
|
40
|
+
"@react-aria/virtualizer": "3.3.6-nightly.3086+b2abc5d94",
|
|
41
|
+
"@react-spectrum/checkbox": "3.0.0-nightly.1395+b2abc5d94",
|
|
42
|
+
"@react-spectrum/divider": "3.0.0-nightly.1395+b2abc5d94",
|
|
43
|
+
"@react-spectrum/layout": "3.2.2-nightly.3086+b2abc5d94",
|
|
44
|
+
"@react-spectrum/progress": "3.0.0-nightly.1395+b2abc5d94",
|
|
45
|
+
"@react-spectrum/utils": "3.0.0-nightly.1395+b2abc5d94",
|
|
46
|
+
"@react-stately/collections": "3.0.0-nightly.1395+b2abc5d94",
|
|
47
|
+
"@react-stately/grid": "3.1.1-nightly.3086+b2abc5d94",
|
|
48
|
+
"@react-stately/list": "3.4.2-nightly.3086+b2abc5d94",
|
|
49
|
+
"@react-stately/utils": "3.0.0-nightly.1395+b2abc5d94",
|
|
50
|
+
"@react-stately/virtualizer": "3.1.7-nightly.3086+b2abc5d94",
|
|
51
|
+
"@react-types/card": "3.0.0-nightly.3086+b2abc5d94",
|
|
52
|
+
"@react-types/provider": "3.3.3-nightly.3086+b2abc5d94",
|
|
53
|
+
"@react-types/shared": "3.0.0-nightly.1395+b2abc5d94"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
|
-
"@adobe/spectrum-css-temp": "3.0.0-nightly.
|
|
56
|
+
"@adobe/spectrum-css-temp": "3.0.0-nightly.1395+b2abc5d94"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
59
|
"@react-spectrum/provider": "^3.0.0",
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"publishConfig": {
|
|
63
63
|
"access": "public"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "b2abc5d94162a7bd614fffcdf11e3d3754dc7d9f"
|
|
66
66
|
}
|
package/src/CardBase.tsx
CHANGED
|
@@ -13,10 +13,10 @@
|
|
|
13
13
|
import {AriaCardProps, SpectrumCardProps} from '@react-types/card';
|
|
14
14
|
import {Checkbox} from '@react-spectrum/checkbox';
|
|
15
15
|
import {classNames, SlotProvider, useDOMRef, useHasChild, useStyleProps} from '@react-spectrum/utils';
|
|
16
|
-
import {Divider} from '@react-spectrum/divider';
|
|
17
16
|
import {DOMRef, Node} from '@react-types/shared';
|
|
18
17
|
import {filterDOMProps, mergeProps, useLayoutEffect, useResizeObserver, useSlotId} from '@react-aria/utils';
|
|
19
18
|
import {FocusRing} from '@react-aria/focus';
|
|
19
|
+
import {getFocusableTreeWalker} from '@react-aria/focus';
|
|
20
20
|
import React, {HTMLAttributes, useCallback, useMemo, useRef, useState} from 'react';
|
|
21
21
|
import styles from '@adobe/spectrum-css-temp/components/card/vars.css';
|
|
22
22
|
import {useCardViewContext} from './CardViewContext';
|
|
@@ -38,7 +38,8 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
|
|
|
38
38
|
orientation = 'vertical',
|
|
39
39
|
articleProps = {},
|
|
40
40
|
item,
|
|
41
|
-
layout
|
|
41
|
+
layout,
|
|
42
|
+
children
|
|
42
43
|
} = props;
|
|
43
44
|
|
|
44
45
|
let key = item?.key;
|
|
@@ -50,6 +51,7 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
|
|
|
50
51
|
let {cardProps, titleProps, contentProps} = useCard(props);
|
|
51
52
|
let domRef = useDOMRef(ref);
|
|
52
53
|
let gridRef = useRef<HTMLDivElement>();
|
|
54
|
+
let checkboxRef = useRef(null);
|
|
53
55
|
|
|
54
56
|
// cards are only interactive if there is a selection manager and it allows selection
|
|
55
57
|
let {hoverProps, isHovered} = useHover({isDisabled: manager === undefined || manager?.selectionMode === 'none' || isDisabled});
|
|
@@ -59,8 +61,6 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
|
|
|
59
61
|
isDisabled
|
|
60
62
|
});
|
|
61
63
|
|
|
62
|
-
let hasFooter = useHasChild(`.${styles['spectrum-Card-footer']}`, gridRef);
|
|
63
|
-
|
|
64
64
|
// ToDo: see css for comment about avatar under selector .spectrum-Card--noLayout.spectrum-Card--default
|
|
65
65
|
let hasPreviewImage = useHasChild(`.${styles['spectrum-Card-image']}`, gridRef);
|
|
66
66
|
let hasPreviewIllustration = useHasChild(`.${styles['spectrum-Card-illustration']}`, gridRef);
|
|
@@ -92,63 +92,22 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
|
|
|
92
92
|
avatar: {UNSAFE_className: classNames(styles, 'spectrum-Card-avatar'), size: 'avatar-size-400'},
|
|
93
93
|
heading: {UNSAFE_className: classNames(styles, 'spectrum-Card-heading'), ...titleProps},
|
|
94
94
|
content: {UNSAFE_className: classNames(styles, 'spectrum-Card-content'), ...contentProps},
|
|
95
|
-
detail: {UNSAFE_className: classNames(styles, 'spectrum-Card-detail')}
|
|
96
|
-
actionmenu: {UNSAFE_className: classNames(styles, 'spectrum-Card-actions'), align: 'end', isQuiet: true},
|
|
97
|
-
footer: {UNSAFE_className: classNames(styles, 'spectrum-Card-footer'), isHidden: isQuiet},
|
|
98
|
-
divider: {UNSAFE_className: classNames(styles, 'spectrum-Card-divider'), size: 'S'}
|
|
95
|
+
detail: {UNSAFE_className: classNames(styles, 'spectrum-Card-detail')}
|
|
99
96
|
}), [titleProps, contentProps, height, isQuiet, orientation]);
|
|
100
97
|
|
|
101
|
-
// This is only for quiet grid cards
|
|
102
|
-
let [isCloseToSquare, setIsCloseToSquare] = useState(false);
|
|
103
98
|
useLayoutEffect(() => {
|
|
104
|
-
if (
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
let height = image.naturalHeight;
|
|
114
|
-
let width = image.naturalWidth;
|
|
115
|
-
/*
|
|
116
|
-
* ToDo: Choose between min-padding and plain ratio
|
|
117
|
-
* Do we want to just do a ratio measurement when it's close to being a square?
|
|
118
|
-
* or do we want to actually figure out min-padding?
|
|
119
|
-
* Min Padding would require us to check that the padding is not less than the min in both Vertical and Horizontal
|
|
120
|
-
* Unfortunately img contain doesn't actually create padding, which is what this math below can figure out
|
|
121
|
-
* Vs the commented out straight ratio check
|
|
122
|
-
* */
|
|
123
|
-
let imgTagHeight = image.clientHeight;
|
|
124
|
-
let imgTagWidth = image.clientWidth;
|
|
125
|
-
let ratio = Math.min(imgTagWidth / width, imgTagHeight / height);
|
|
126
|
-
let trueHeight = ratio * height;
|
|
127
|
-
let trueWidth = ratio * width;
|
|
128
|
-
let paddingVertical = imgTagHeight - trueHeight;
|
|
129
|
-
let paddingHorizontal = imgTagWidth - trueWidth;
|
|
130
|
-
if (paddingVertical < 16 && paddingHorizontal < 16) { // ToDo: does this need to be different per scale?
|
|
131
|
-
setIsCloseToSquare(true);
|
|
132
|
-
} else {
|
|
133
|
-
setIsCloseToSquare(false);
|
|
99
|
+
if (gridRef?.current) {
|
|
100
|
+
let walker = getFocusableTreeWalker(gridRef.current);
|
|
101
|
+
let nextNode = walker.nextNode();
|
|
102
|
+
while (nextNode != null) {
|
|
103
|
+
if (checkboxRef.current && !checkboxRef.current.UNSAFE_getDOMNode().contains(nextNode)) {
|
|
104
|
+
console.warn('Card does not support focusable elements, please contact the team regarding your use case.');
|
|
105
|
+
break;
|
|
106
|
+
}
|
|
107
|
+
nextNode = walker.nextNode();
|
|
134
108
|
}
|
|
135
|
-
|
|
136
|
-
// let ratio = height / width;
|
|
137
|
-
// if (ratio > 0.9 && ratio < 1.1) {
|
|
138
|
-
// setIsCloseToSquare(true);
|
|
139
|
-
// }
|
|
140
|
-
};
|
|
141
|
-
if (image.complete) {
|
|
142
|
-
measure();
|
|
143
|
-
} else {
|
|
144
|
-
image.addEventListener('load', measure);
|
|
145
|
-
return () => {
|
|
146
|
-
image.removeEventListener('load', measure);
|
|
147
|
-
};
|
|
148
109
|
}
|
|
149
|
-
|
|
150
|
-
}, [props.children, setIsCloseToSquare, isQuiet, layout]);
|
|
151
|
-
|
|
110
|
+
}, [children]);
|
|
152
111
|
|
|
153
112
|
return (
|
|
154
113
|
<FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
|
|
@@ -160,7 +119,6 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
|
|
|
160
119
|
'spectrum-Card--default': !isQuiet && orientation !== 'horizontal',
|
|
161
120
|
'spectrum-Card--isQuiet': isQuiet && orientation !== 'horizontal',
|
|
162
121
|
'spectrum-Card--horizontal': orientation === 'horizontal',
|
|
163
|
-
'spectrum-Card--closeToSquare': isCloseToSquare,
|
|
164
122
|
'spectrum-Card--noPreview': !hasPreview,
|
|
165
123
|
'is-hovered': isHovered,
|
|
166
124
|
'is-focused': isFocused,
|
|
@@ -174,6 +132,7 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
|
|
|
174
132
|
{manager && manager.selectionMode !== 'none' && (
|
|
175
133
|
<div className={classNames(styles, 'spectrum-Card-checkboxWrapper')}>
|
|
176
134
|
<Checkbox
|
|
135
|
+
ref={checkboxRef}
|
|
177
136
|
isDisabled={isDisabled}
|
|
178
137
|
excludeFromTabOrder
|
|
179
138
|
isSelected={isSelected}
|
|
@@ -184,8 +143,7 @@ function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDiv
|
|
|
184
143
|
</div>
|
|
185
144
|
)}
|
|
186
145
|
<SlotProvider slots={slots}>
|
|
187
|
-
{
|
|
188
|
-
{hasFooter && <Divider />}
|
|
146
|
+
{children}
|
|
189
147
|
</SlotProvider>
|
|
190
148
|
<div className={classNames(styles, 'spectrum-Card-decoration')} />
|
|
191
149
|
</div>
|
package/src/CardView.tsx
CHANGED
|
@@ -204,6 +204,10 @@ function InternalCard(props) {
|
|
|
204
204
|
cardOrientation = 'vertical';
|
|
205
205
|
}
|
|
206
206
|
|
|
207
|
+
// We don't want to focus the checkbox (or any other focusable elements) within the Card
|
|
208
|
+
// when pressing the arrow keys so we delete the key down handler here. Arrow key navigation between
|
|
209
|
+
// the cards in the CardView is handled by useGrid => useSelectableCollection instead.
|
|
210
|
+
delete gridCellProps.onKeyDownCapture;
|
|
207
211
|
return (
|
|
208
212
|
<div {...rowProps} ref={rowRef} className={classNames(styles, 'spectrum-CardView-row')}>
|
|
209
213
|
<CardBase
|
package/src/GalleryLayout.tsx
CHANGED
|
@@ -30,7 +30,7 @@ export interface GalleryLayoutOptions extends BaseLayoutOptions {
|
|
|
30
30
|
itemSpacing?: Size,
|
|
31
31
|
/**
|
|
32
32
|
* The vertical padding for an item.
|
|
33
|
-
* @default
|
|
33
|
+
* @default 78
|
|
34
34
|
*/
|
|
35
35
|
itemPadding?: number,
|
|
36
36
|
/**
|
|
@@ -60,8 +60,8 @@ const DEFAULT_OPTIONS = {
|
|
|
60
60
|
minItemSize: new Size(136, 136),
|
|
61
61
|
itemSpacing: new Size(18, 18),
|
|
62
62
|
itemPadding: {
|
|
63
|
-
'medium':
|
|
64
|
-
'large':
|
|
63
|
+
'medium': 78,
|
|
64
|
+
'large': 99
|
|
65
65
|
},
|
|
66
66
|
dropSpacing: 100,
|
|
67
67
|
margin: 24
|
package/src/WaterfallLayout.tsx
CHANGED
|
@@ -35,12 +35,7 @@ export interface WaterfallLayoutOptions extends BaseLayoutOptions {
|
|
|
35
35
|
* The maximum number of columns.
|
|
36
36
|
* @default Infinity
|
|
37
37
|
*/
|
|
38
|
-
maxColumns?: number
|
|
39
|
-
/**
|
|
40
|
-
* The vertical padding for an item.
|
|
41
|
-
* @default 56
|
|
42
|
-
*/
|
|
43
|
-
itemPadding?: number
|
|
38
|
+
maxColumns?: number
|
|
44
39
|
}
|
|
45
40
|
|
|
46
41
|
// TODO: this didn't have any options that varied with card size, should it have?
|
|
@@ -49,7 +44,6 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
|
|
|
49
44
|
protected maxItemSize: Size;
|
|
50
45
|
protected minSpace: Size;
|
|
51
46
|
protected maxColumns: number;
|
|
52
|
-
itemPadding: number;
|
|
53
47
|
protected numColumns: number;
|
|
54
48
|
protected itemWidth: number;
|
|
55
49
|
protected horizontalSpacing: number;
|
|
@@ -63,8 +57,6 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
|
|
|
63
57
|
this.margin = options.margin != null ? options.margin : 24;
|
|
64
58
|
this.minSpace = options.minSpace || new Size(18, 18);
|
|
65
59
|
this.maxColumns = options.maxColumns || Infinity;
|
|
66
|
-
// TODO: not entirely sure what this is for since the layout will automatically shift itself to the correct vertical space for the card
|
|
67
|
-
this.itemPadding = options.itemPadding != null ? options.itemPadding : 56;
|
|
68
60
|
|
|
69
61
|
this.itemWidth = 0;
|
|
70
62
|
this.numColumns = 0;
|
|
@@ -113,8 +105,8 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
|
|
|
113
105
|
} else if (node.props.width && node.props.height) {
|
|
114
106
|
let nodeWidth = node.props.width;
|
|
115
107
|
let nodeHeight = node.props.height;
|
|
116
|
-
let scaledHeight = Math.round(
|
|
117
|
-
height = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, scaledHeight))
|
|
108
|
+
let scaledHeight = Math.round(nodeHeight * ((itemWidth) / nodeWidth));
|
|
109
|
+
height = Math.max(this.minItemSize.height, Math.min(this.maxItemSize.height, scaledHeight));
|
|
118
110
|
} else {
|
|
119
111
|
height = itemWidth;
|
|
120
112
|
}
|
|
@@ -180,10 +172,9 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
|
|
|
180
172
|
// TODO: also not sure about copying layout info vs mutating it. Listlayout does the below
|
|
181
173
|
// but I feel that is because it actually maintained a layoutNode map cache which this doesn't have
|
|
182
174
|
let newLayoutInfo = layoutInfo.copy();
|
|
183
|
-
newLayoutInfo.rect.height = size.height;
|
|
175
|
+
newLayoutInfo.rect.height = size.height < 600 ? size.height : 600;
|
|
176
|
+
newLayoutInfo.estimatedSize = false;
|
|
184
177
|
this.layoutInfos.set(key, newLayoutInfo);
|
|
185
|
-
// TODO: v2 had layoutInfo.estimatedSize = view.estimatedSize || false; but we can't do the same here?
|
|
186
|
-
layoutInfo.estimatedSize = false;
|
|
187
178
|
return true;
|
|
188
179
|
}
|
|
189
180
|
|