@jetbrains/ring-ui-built 8.0.0-beta.2 → 8.0.0-beta.3
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/components/_helpers/anchor.js +1 -1
- package/components/_helpers/avatar-info.js +1 -1
- package/components/_helpers/icon-svg.js +1 -1
- package/components/_helpers/legacy-table.js +3 -0
- package/components/_helpers/tab-link.js +1 -1
- package/components/_helpers/theme.js +49 -37
- package/components/alert/alert.js +1 -1
- package/components/alert-service/alert-service.js +1 -1
- package/components/auth/auth-core.js +1 -1
- package/components/auth/auth.js +1 -1
- package/components/auth/down-notification.js +1 -1
- package/components/auth/iframe-flow.js +1 -1
- package/components/auth/storage.js +1 -1
- package/components/auth-dialog/auth-dialog.js +1 -1
- package/components/auth-dialog-service/auth-dialog-service.js +2 -2
- package/components/avatar/avatar-info.js +1 -1
- package/components/avatar/avatar.js +1 -1
- package/components/avatar/fallback-avatar.js +1 -1
- package/components/avatar-stack/avatar-stack.js +1 -1
- package/components/banner/banner.js +1 -1
- package/components/button/button.js +1 -1
- package/components/button-group/button-group.js +1 -1
- package/components/checkbox/checkbox.js +1 -1
- package/components/clipboard/clipboard.js +1 -1
- package/components/collapse/collapse-content.js +5 -5
- package/components/collapse/collapse-control.js +5 -5
- package/components/collapse/collapse.js +4 -4
- package/components/confirm/confirm.js +1 -1
- package/components/confirm-service/confirm-service.js +2 -2
- package/components/contenteditable/contenteditable.js +1 -1
- package/components/control-help/control-help.js +1 -1
- package/components/control-label/control-label.js +1 -1
- package/components/data-list/data-list.d.ts +1 -1
- package/components/data-list/data-list.js +1 -1
- package/components/data-list/data-list.mock.d.ts +1 -1
- package/components/data-list/data-list.mock.js +1 -1
- package/components/data-list/item.d.ts +1 -1
- package/components/data-list/item.js +1 -1
- package/components/data-list/selection.d.ts +1 -1
- package/components/data-list/selection.js +2 -2
- package/components/data-list/title.js +1 -1
- package/components/date-picker/date-input.js +1 -1
- package/components/date-picker/date-picker.js +1 -2
- package/components/date-picker/date-popup.js +1 -2
- package/components/date-picker/month-names.js +1 -1
- package/components/date-picker/month-slider.js +1 -1
- package/components/date-picker/month.js +1 -1
- package/components/date-picker/months.js +4 -5
- package/components/date-picker/use-intersection-observer.js +1 -1
- package/components/date-picker/use-scroll-behavior.js +45 -44
- package/components/date-picker/weekdays.js +1 -1
- package/components/date-picker/years.js +6 -7
- package/components/dialog/dialog.d.ts +2 -2
- package/components/dialog/dialog.js +3 -3
- package/components/dropdown/anchor.js +1 -1
- package/components/dropdown/dropdown.js +1 -1
- package/components/dropdown-menu/dropdown-menu.d.ts +4 -4
- package/components/dropdown-menu/dropdown-menu.js +62 -57
- package/components/editable-heading/editable-heading.d.ts +1 -2
- package/components/editable-heading/editable-heading.js +13 -12
- package/components/error-bubble/error-bubble.js +1 -1
- package/components/error-message/error-message.js +1 -1
- package/components/expand/collapsible-group.d.ts +5 -1
- package/components/expand/collapsible-group.js +15 -14
- package/components/footer/footer.js +1 -1
- package/components/global/create-stateful-context.js +11 -11
- package/components/global/intersection-observer-context.d.ts +2 -2
- package/components/global/intersection-observer-context.js +12 -12
- package/components/global/rerender-hoc.d.ts +4 -2
- package/components/global/rerender-hoc.js +10 -24
- package/components/{legacy-table/selection.d.ts → global/table-selection.d.ts} +14 -14
- package/components/{legacy-table/selection.js → global/table-selection.js} +3 -3
- package/components/global/theme.d.ts +4 -3
- package/components/global/theme.js +1 -1
- package/components/header/header-icon.js +1 -1
- package/components/header/header.js +1 -1
- package/components/header/links.js +1 -1
- package/components/header/logo.js +1 -1
- package/components/header/profile.js +1 -1
- package/components/header/services.js +1 -1
- package/components/header/smart-profile.js +1 -1
- package/components/header/smart-services.js +1 -1
- package/components/heading/heading.js +1 -1
- package/components/i18n/i18n-context.js +4 -4
- package/components/icon/icon-svg.js +1 -1
- package/components/icon/icon.js +1 -1
- package/components/icon/index.js +1 -1
- package/components/input/input.js +1 -1
- package/components/island/adaptive-island-hoc.js +3 -3
- package/components/island/content.d.ts +7 -2
- package/components/island/content.js +27 -18
- package/components/island/header.js +1 -1
- package/components/island/island.js +1 -1
- package/components/legacy-table/cell.js +1 -1
- package/components/legacy-table/header-cell.js +2 -2
- package/components/legacy-table/header.js +2 -2
- package/components/legacy-table/multitable.d.ts +1 -1
- package/components/legacy-table/row-with-focus-sensor.js +2 -2
- package/components/legacy-table/row.js +4 -4
- package/components/legacy-table/selection-adapter.d.ts +3 -3
- package/components/legacy-table/selection-shortcuts-hoc.d.ts +5 -5
- package/components/legacy-table/simple-table.d.ts +2 -2
- package/components/legacy-table/simple-table.js +4 -4
- package/components/legacy-table/smart-table.d.ts +5 -5
- package/components/legacy-table/smart-table.js +5 -5
- package/components/legacy-table/table.js +2 -2
- package/components/list/list-item.js +1 -1
- package/components/list/list-users-groups-source.js +1 -1
- package/components/list/list.js +1 -1
- package/components/login-dialog/login-dialog.js +1 -1
- package/components/login-dialog/service.js +2 -2
- package/components/message/message.js +1 -1
- package/components/pager/pager.js +1 -1
- package/components/popup/popup.js +1 -1
- package/components/popup/popup.target.d.ts +3 -2
- package/components/popup/popup.target.js +32 -28
- package/components/popup-menu/popup-menu.js +1 -1
- package/components/query-assist/query-assist-suggestions.js +1 -1
- package/components/query-assist/query-assist.d.ts +3 -1
- package/components/query-assist/query-assist.js +2 -2
- package/components/radio/radio-item.d.ts +3 -3
- package/components/radio/radio-item.js +32 -18
- package/components/radio/radio.d.ts +2 -2
- package/components/radio/radio.js +2 -2
- package/components/scrollable-section/scrollable-section.js +1 -1
- package/components/select/chevron-button.js +1 -1
- package/components/select/select-filter.js +1 -1
- package/components/select/select-popup.js +1 -1
- package/components/select/select.d.ts +3 -1
- package/components/select/select.js +1 -1
- package/components/slider/slider.js +100 -96
- package/components/storage/storage-local.js +1 -1
- package/components/storage/storage.js +1 -1
- package/components/style.css +1 -1
- package/components/tab-trap/tab-trap.d.ts +3 -3
- package/components/tab-trap/tab-trap.js +83 -80
- package/components/table/default-item-renderer.d.ts +20 -9
- package/components/table/default-item-renderer.js +83 -142
- package/components/table/table-component.d.ts +43 -16
- package/components/table/table-component.js +162 -188
- package/components/table/table-primitives.d.ts +28 -0
- package/components/table/{table-base.js → table-primitives.js} +110 -98
- package/components/table/table-row-focus.d.ts +4 -0
- package/components/table/table-row-focus.js +41 -0
- package/components/table/table-virtualize.d.ts +3 -3
- package/components/table/table-virtualize.js +111 -112
- package/components/table/table.d.ts +9 -24
- package/components/table/table.js +4 -3
- package/components/tabs/collapsible-more.js +1 -1
- package/components/tabs/collapsible-tab.js +1 -1
- package/components/tabs/collapsible-tabs.js +1 -1
- package/components/tabs/dumb-tabs.js +1 -1
- package/components/tabs/smart-tabs.js +1 -1
- package/components/tabs/tab-link.js +1 -1
- package/components/tabs/tabs.js +1 -1
- package/components/tag/tag.js +1 -1
- package/components/tags-input/tags-input.d.ts +3 -1
- package/components/tags-input/tags-input.js +1 -1
- package/components/tags-list/tags-list.js +1 -1
- package/components/toggle/toggle.js +1 -1
- package/components/tooltip/tooltip.js +2 -2
- package/components/upload/upload.d.ts +4 -3
- package/components/upload/upload.js +7 -29
- package/components/user-agreement/service.js +2 -2
- package/components/user-agreement/user-agreement.js +1 -1
- package/components/user-card/card.js +1 -1
- package/components/user-card/smart-user-card-tooltip.js +1 -1
- package/components/user-card/tooltip.js +1 -1
- package/components/user-card/user-card.js +1 -1
- package/package.json +6 -6
- package/components/_helpers/table2.js +0 -3
- package/components/global/use-event-callback.d.ts +0 -1
- package/components/global/use-event-callback.js +0 -44
- package/components/table/table-base.d.ts +0 -24
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { c } from 'react
|
|
2
|
-
import {
|
|
1
|
+
import { c } from 'react/compiler-runtime';
|
|
2
|
+
import { useRef, useState, useImperativeHandle } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import attachmentIcon from '@jetbrains/icons/attachment';
|
|
5
5
|
import Icon from '../icon/icon.js';
|
|
@@ -17,11 +17,11 @@ const defaultRenderIcon = () => /*#__PURE__*/jsx(Icon, {
|
|
|
17
17
|
});
|
|
18
18
|
function UploadInner(t0) {
|
|
19
19
|
const $ = c(29);
|
|
20
|
-
if ($[0] !== "
|
|
20
|
+
if ($[0] !== "d58de564c5913f5a17e892bfa80bc62db12ed2c472d455b1315750c6d5bfd08f") {
|
|
21
21
|
for (let $i = 0; $i < 29; $i += 1) {
|
|
22
22
|
$[$i] = Symbol.for("react.memo_cache_sentinel");
|
|
23
23
|
}
|
|
24
|
-
$[0] = "
|
|
24
|
+
$[0] = "d58de564c5913f5a17e892bfa80bc62db12ed2c472d455b1315750c6d5bfd08f";
|
|
25
25
|
}
|
|
26
26
|
const {
|
|
27
27
|
children,
|
|
@@ -34,7 +34,7 @@ function UploadInner(t0) {
|
|
|
34
34
|
renderIcon: t3,
|
|
35
35
|
accept,
|
|
36
36
|
disabled,
|
|
37
|
-
|
|
37
|
+
ref
|
|
38
38
|
} = t0;
|
|
39
39
|
const validate = t1 === undefined ? _temp : t1;
|
|
40
40
|
const variant = t2 === undefined ? "empty" : t2;
|
|
@@ -54,7 +54,7 @@ function UploadInner(t0) {
|
|
|
54
54
|
t4 = $[1];
|
|
55
55
|
t5 = $[2];
|
|
56
56
|
}
|
|
57
|
-
useImperativeHandle(
|
|
57
|
+
useImperativeHandle(ref, t4, t5);
|
|
58
58
|
let t6;
|
|
59
59
|
if ($[3] !== onFilesRejected || $[4] !== onFilesSelected || $[5] !== validate) {
|
|
60
60
|
t6 = files => {
|
|
@@ -182,27 +182,5 @@ function _temp2(e) {
|
|
|
182
182
|
function _temp() {
|
|
183
183
|
return true;
|
|
184
184
|
}
|
|
185
|
-
const Upload = /*#__PURE__*/forwardRef(function Upload(props, ref) {
|
|
186
|
-
const $ = c(4);
|
|
187
|
-
if ($[0] !== "7d5a4ecc65f01d46fa3e08e16dbed39a1cd6f740a025c62cc404b96900b00084") {
|
|
188
|
-
for (let $i = 0; $i < 4; $i += 1) {
|
|
189
|
-
$[$i] = Symbol.for("react.memo_cache_sentinel");
|
|
190
|
-
}
|
|
191
|
-
$[0] = "7d5a4ecc65f01d46fa3e08e16dbed39a1cd6f740a025c62cc404b96900b00084";
|
|
192
|
-
}
|
|
193
|
-
let t0;
|
|
194
|
-
if ($[1] !== props || $[2] !== ref) {
|
|
195
|
-
t0 = /*#__PURE__*/jsx(UploadInner, {
|
|
196
|
-
...props,
|
|
197
|
-
forwardedRef: ref
|
|
198
|
-
});
|
|
199
|
-
$[1] = props;
|
|
200
|
-
$[2] = ref;
|
|
201
|
-
$[3] = t0;
|
|
202
|
-
} else {
|
|
203
|
-
t0 = $[3];
|
|
204
|
-
}
|
|
205
|
-
return t0;
|
|
206
|
-
});
|
|
207
185
|
|
|
208
|
-
export {
|
|
186
|
+
export { UploadInner as default };
|
|
@@ -23,7 +23,7 @@ import '../icon/icon.js';
|
|
|
23
23
|
import 'util-deprecate';
|
|
24
24
|
import '../icon/icon.constants.js';
|
|
25
25
|
import '../_helpers/icon-svg.js';
|
|
26
|
-
import 'react
|
|
26
|
+
import 'react/compiler-runtime';
|
|
27
27
|
import '../global/memoize.js';
|
|
28
28
|
import '../loader-inline/loader-inline.js';
|
|
29
29
|
import '../global/dom.js';
|
|
@@ -277,7 +277,7 @@ class UserAgreementService {
|
|
|
277
277
|
preview,
|
|
278
278
|
...restOptions
|
|
279
279
|
};
|
|
280
|
-
this.reactRoot.render(/*#__PURE__*/jsx(ControlsHeightContext
|
|
280
|
+
this.reactRoot.render(/*#__PURE__*/jsx(ControlsHeightContext, {
|
|
281
281
|
value: getGlobalControlsHeight(),
|
|
282
282
|
children: /*#__PURE__*/jsx(UserAgreement, {
|
|
283
283
|
...props
|
|
@@ -14,7 +14,7 @@ import '../island/island.js';
|
|
|
14
14
|
import '../global/data-tests.js';
|
|
15
15
|
import '../island/adaptive-island-hoc.js';
|
|
16
16
|
import '../global/linear-function.js';
|
|
17
|
-
import 'react
|
|
17
|
+
import 'react/compiler-runtime';
|
|
18
18
|
import 'element-resize-detector';
|
|
19
19
|
import '../global/schedule-raf.js';
|
|
20
20
|
import '../global/get-uid.js';
|
|
@@ -18,7 +18,7 @@ import '../global/url.js';
|
|
|
18
18
|
import '../global/dom.js';
|
|
19
19
|
import '../global/memoize.js';
|
|
20
20
|
import '../avatar/fallback-avatar.js';
|
|
21
|
-
import 'react
|
|
21
|
+
import 'react/compiler-runtime';
|
|
22
22
|
import '../global/get-uid.js';
|
|
23
23
|
import '../_helpers/avatar-info.js';
|
|
24
24
|
import '../global/data-tests.js';
|
|
@@ -8,7 +8,7 @@ import '../global/data-tests.js';
|
|
|
8
8
|
import '../dropdown/dropdown.js';
|
|
9
9
|
import '../global/typescript-utils.js';
|
|
10
10
|
import '../_helpers/anchor.js';
|
|
11
|
-
import 'react
|
|
11
|
+
import 'react/compiler-runtime';
|
|
12
12
|
import '../button/button.js';
|
|
13
13
|
import '@jetbrains/icons/chevron-down';
|
|
14
14
|
import '@jetbrains/icons/chevron-12px-down';
|
|
@@ -7,7 +7,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
7
7
|
import '../global/data-tests.js';
|
|
8
8
|
import '../global/typescript-utils.js';
|
|
9
9
|
import '../_helpers/anchor.js';
|
|
10
|
-
import 'react
|
|
10
|
+
import 'react/compiler-runtime';
|
|
11
11
|
import '../button/button.js';
|
|
12
12
|
import '@jetbrains/icons/chevron-down';
|
|
13
13
|
import '@jetbrains/icons/chevron-12px-down';
|
|
@@ -11,7 +11,7 @@ import '../global/url.js';
|
|
|
11
11
|
import '../global/dom.js';
|
|
12
12
|
import '../global/memoize.js';
|
|
13
13
|
import '../avatar/fallback-avatar.js';
|
|
14
|
-
import 'react
|
|
14
|
+
import 'react/compiler-runtime';
|
|
15
15
|
import '../global/get-uid.js';
|
|
16
16
|
import '../avatar/avatar-size.js';
|
|
17
17
|
import 'react/jsx-runtime';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jetbrains/ring-ui-built",
|
|
3
|
-
"version": "8.0.0-beta.
|
|
3
|
+
"version": "8.0.0-beta.3",
|
|
4
4
|
"description": "JetBrains UI library",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "JetBrains"
|
|
@@ -97,11 +97,11 @@
|
|
|
97
97
|
"readmeFilename": "README.md",
|
|
98
98
|
"devDependencies": {},
|
|
99
99
|
"peerDependencies": {
|
|
100
|
-
"@types/react": ">=
|
|
101
|
-
"@types/react-dom": ">=
|
|
100
|
+
"@types/react": ">=19.2.0",
|
|
101
|
+
"@types/react-dom": ">=19.2.0",
|
|
102
102
|
"core-js": ">=3.0.0",
|
|
103
|
-
"react": ">=
|
|
104
|
-
"react-dom": ">=
|
|
103
|
+
"react": ">=19.2.0",
|
|
104
|
+
"react-dom": ">=19.2.0"
|
|
105
105
|
},
|
|
106
106
|
"peerDependenciesMeta": {
|
|
107
107
|
"@types/react": {
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
"change-case": "^4.1.1",
|
|
117
117
|
"classnames": "^2.5.1",
|
|
118
118
|
"combokeys": "^3.0.1",
|
|
119
|
-
"date-fns": "^4.
|
|
119
|
+
"date-fns": "^4.4.0",
|
|
120
120
|
"dequal": "^2.0.3",
|
|
121
121
|
"element-resize-detector": "^1.2.4",
|
|
122
122
|
"fastdom": "^1.0.12",
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
var style = {"row":"ring-table-row","dragHandle":"ring-table-dragHandle","tableWrapper":"ring-table-tableWrapper","table":"ring-table-table","userSelectNone":"ring-table-userSelectNone","headerCell":"ring-table-headerCell ring-global-font-smaller-lower ring-global-font-smaller ring-global-font-lower ring-global-font","headerCellSorted":"ring-table-headerCellSorted","headerCellSortable":"ring-table-headerCellSortable","sorter":"ring-table-sorter","sortedUp":"ring-table-sortedUp","icon":"ring-table-icon","caption":"ring-table-caption","tableHead":"ring-table-tableHead","subHeaderSticky":"ring-table-subHeaderSticky","disabledHover":"ring-table-disabledHover","rowSelected":"ring-table-rowSelected","rowFocused":"ring-table-rowFocused","cell":"ring-table-cell ring-global-ellipsis","loadingOverlay":"ring-table-loadingOverlay","wideFirstColumn":"ring-table-wideFirstColumn","cellUnlimited":"ring-table-cellUnlimited","cellRight":"ring-table-cellRight","metaColumn":"ring-table-metaColumn","headerMetaColumn":"ring-table-headerMetaColumn","visibleDragHandle":"ring-table-visibleDragHandle","rowCollapseExpandButton":"ring-table-rowCollapseExpandButton","draggingRow":"ring-table-draggingRow","draggingTable":"ring-table-draggingTable","tableMessage":"ring-table-tableMessage"};
|
|
2
|
-
|
|
3
|
-
export { style as s };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export default function useEventCallback<I extends unknown[], O>(fn: (...args: I) => O): (...args: I) => O;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { c } from 'react-compiler-runtime';
|
|
2
|
-
import { useRef, useLayoutEffect } from 'react';
|
|
3
|
-
|
|
4
|
-
// TODO deprecate in favor of useEffectEvent after dropping support for React < 19.2
|
|
5
|
-
function useEventCallback(fn) {
|
|
6
|
-
const $ = c(4);
|
|
7
|
-
if ($[0] !== "889dd896626d55d7ee8b6d837575138afdbc32f6790b79c2a3b63812dc174b4f") {
|
|
8
|
-
for (let $i = 0; $i < 4; $i += 1) {
|
|
9
|
-
$[$i] = Symbol.for("react.memo_cache_sentinel");
|
|
10
|
-
}
|
|
11
|
-
$[0] = "889dd896626d55d7ee8b6d837575138afdbc32f6790b79c2a3b63812dc174b4f";
|
|
12
|
-
}
|
|
13
|
-
const ref = useRef(null);
|
|
14
|
-
let t0;
|
|
15
|
-
if ($[1] !== fn) {
|
|
16
|
-
t0 = () => {
|
|
17
|
-
ref.current = fn;
|
|
18
|
-
};
|
|
19
|
-
$[1] = fn;
|
|
20
|
-
$[2] = t0;
|
|
21
|
-
} else {
|
|
22
|
-
t0 = $[2];
|
|
23
|
-
}
|
|
24
|
-
useLayoutEffect(t0);
|
|
25
|
-
let t1;
|
|
26
|
-
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
|
|
27
|
-
t1 = (...t2) => {
|
|
28
|
-
const args = t2;
|
|
29
|
-
const {
|
|
30
|
-
current
|
|
31
|
-
} = ref;
|
|
32
|
-
if (current === null || current === undefined) {
|
|
33
|
-
throw new Error("callback created in useEventCallback can only be called from event handlers");
|
|
34
|
-
}
|
|
35
|
-
return current(...args);
|
|
36
|
-
};
|
|
37
|
-
$[3] = t1;
|
|
38
|
-
} else {
|
|
39
|
-
t1 = $[3];
|
|
40
|
-
}
|
|
41
|
-
return t1;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
export { useEventCallback as default };
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { type ComponentPropsWithoutRef } from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* Include it in a column header to make the column sortable.
|
|
4
|
-
* Handle clicks with {@link TableProps.onSort}.
|
|
5
|
-
*/
|
|
6
|
-
export declare function SortButton<T>(props: ComponentPropsWithoutRef<'button'>): import("react").JSX.Element | null;
|
|
7
|
-
/**
|
|
8
|
-
* Include it in a column header to make the column deletable.
|
|
9
|
-
* Beware that `column.name ?? String(column.key)` is used in the aria-label.
|
|
10
|
-
* Handle clicks with {@link TableProps.onColumnDelete}.
|
|
11
|
-
*/
|
|
12
|
-
export declare function DeleteColumnButton<T>(props: ComponentPropsWithoutRef<'button'>): import("react").JSX.Element | null;
|
|
13
|
-
/**
|
|
14
|
-
* A helper `<tr>` component for a custom {@link TableProps.renderItem} implementations.
|
|
15
|
-
* Applies the standard row classnames.
|
|
16
|
-
*/
|
|
17
|
-
export declare function TableRow(props: {
|
|
18
|
-
ref?: React.Ref<HTMLTableRowElement>;
|
|
19
|
-
} & ComponentPropsWithoutRef<'tr'>): import("react").JSX.Element;
|
|
20
|
-
/**
|
|
21
|
-
* A helper `<td>` component for a custom {@link TableProps.renderItem} implementations.
|
|
22
|
-
* Applies the standard cell classnames, but not data-dependent `tdClassName`.
|
|
23
|
-
*/
|
|
24
|
-
export declare function TableCell(props: ComponentPropsWithoutRef<'td'>): import("react").JSX.Element;
|