@altinn/altinn-components 0.42.2 → 0.42.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/dist/assets/ListItemBase.css +1 -1
- package/dist/assets/ListItemHeader.css +1 -1
- package/dist/components/Account/AccountListItem.js +42 -40
- package/dist/components/Account/AccountListItemControls.js +23 -24
- package/dist/components/List/ListItem.js +59 -56
- package/dist/components/List/ListItemBase.js +29 -27
- package/dist/components/List/ListItemHeader.js +37 -36
- package/dist/types/lib/components/Account/AccountListItem.d.ts +1 -1
- package/dist/types/lib/components/Account/AccountListItem.stories.d.ts +1 -1
- package/dist/types/lib/components/Account/AccountListItemControls.d.ts +1 -1
- package/dist/types/lib/components/List/ListItem.d.ts +1 -1
- package/dist/types/lib/components/List/ListItemBase.d.ts +1 -1
- package/dist/types/lib/components/List/ListItemHeader.d.ts +2 -0
- package/dist/types/lib/components/List/Specimens.stories.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._base_1n6rf_1{--dsc-item-background: transparent;--dsc-item-color: var(--ds-color-text-default);--dsc-item-border-style: solid;--dsc-item-border-color: transparent;--dsc-item-border-width: var(--ds-border-width-default);--dsc-item-border-radius: var(--ds-border-radius-xs);--dsc-item-outline-style: solid;--dsc-item-outline-color: var(--ds-color-base-default);padding:0;border:0;background:var(--dsc-item-background);color:var(--dsc-item-color);font:inherit;text-align:inherit;text-decoration:none;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;list-style:none;box-shadow:var(--dsc-item-shadow);position:relative;width:100%;display:flex;flex-direction:column;border-width:var(--dsc-item-border-width);border-color:var(--dsc-item-border-color);border-style:var(--dsc-item-border-style);border-radius:var(--dsc-item-border-radius)}._base_1n6rf_1[data-shadow=none]{--dsc-item-shadow: none}._base_1n6rf_1[data-border=none]{border-color:transparent}._base_1n6rf_1[data-border=solid]{border-color:var(--dsc-item-border-color);--dsc-item-border-style: solid}._base_1n6rf_1[data-border=dotted]{border-color:var(--dsc-item-border-color);--dsc-item-border-style: dotted}._base_1n6rf_1[data-interactive=true]:hover{--dsc-item-border-color: transparent;outline-color:var(--dsc-item-outline-color);outline-style:var(--dsc-item-outline-style)}._base_1n6rf_1[data-active=true]{background-color:var(--dsc-item-background--active)}._base_1n6rf_1[aria-expanded=true],._base_1n6rf_1[data-selected=true]{outline:2px solid;outline-color:var(--dsc-item-outline-color);outline-style:var(--dsc-item-outline-style)}._base_1n6rf_1[aria-disabled=true]{pointer-events:none}._base_1n6rf_1[aria-disabled=true]:hover{outline:none}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._header_29hv7_1{--dsc-item-spacing: .5em;position:relative;width:100%;min-height:var(--dsc-item-height);display:flex;align-items:center;justify-content:start;background:var(--dsc-item-background);column-gap:var(--dsc-item-spacing);padding-right:var(--dsc-item-px);padding-left:var(--dsc-item-px)}._header_29hv7_1[data-interactive=true]{cursor:pointer}._header_29hv7_1[data-interactive=true]:hover{background:var(--dsc-item-background--hover)}._header_29hv7_1[data-interactive=true]:hover ._label_29hv7_27 h2{text-decoration:underline}._header_29hv7_1[data-has-active-child=true]{background-color:var(--ds-color-background-tinted)}._header_29hv7_1[aria-disabled=true]{opacity:.5}._label_29hv7_27{flex-grow:1}._link_29hv7_43{outline:none}._badge_29hv7_47{pointer-events:none}._linkIcon_29hv7_51{flex-shrink:0;min-width:2em;min-height:2em;display:flex;align-items:center;justify-content:center;pointer-events:none}._linkFocus_29hv7_61{position:absolute;top:0;left:0;right:0;bottom:0}._controls_29hv7_69 a,._controls_29hv7_69 button{position:relative}._link_29hv7_43:focus-visible ._linkFocus_29hv7_61{box-shadow:var(--_ds--focus, var(--dsc-focus-boxShadow));outline:var(--_ds--focus, var(--dsc-focus-outline))}._link_29hv7_43:focus-visible ._linkFocus_29hv7_61 *{--_ds--focus: }
|
|
@@ -1,60 +1,62 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
2
2
|
import "../../index-L8X2o7IH.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import "../RootProvider/RootProvider.js";
|
|
5
|
-
import { ListItem as
|
|
5
|
+
import { ListItem as h } from "../List/ListItem.js";
|
|
6
6
|
import "../Snackbar/useSnackbar.js";
|
|
7
|
-
import { AccountListItemControls as
|
|
8
|
-
const
|
|
9
|
-
id:
|
|
10
|
-
type:
|
|
11
|
-
size:
|
|
7
|
+
import { AccountListItemControls as q } from "./AccountListItemControls.js";
|
|
8
|
+
const F = ({
|
|
9
|
+
id: m,
|
|
10
|
+
type: c,
|
|
11
|
+
size: s,
|
|
12
12
|
expanded: t,
|
|
13
|
-
icon:
|
|
14
|
-
name:
|
|
15
|
-
title:
|
|
16
|
-
description:
|
|
17
|
-
isCurrentEndUser:
|
|
18
|
-
isDeleted:
|
|
13
|
+
icon: e,
|
|
14
|
+
name: n,
|
|
15
|
+
title: p,
|
|
16
|
+
description: u,
|
|
17
|
+
isCurrentEndUser: f,
|
|
18
|
+
isDeleted: I,
|
|
19
19
|
badge: l,
|
|
20
|
-
favourite:
|
|
21
|
-
favouriteLabel:
|
|
22
|
-
onToggleFavourite:
|
|
23
|
-
contextMenu:
|
|
24
|
-
children:
|
|
25
|
-
interactive:
|
|
20
|
+
favourite: L = !1,
|
|
21
|
+
favouriteLabel: v,
|
|
22
|
+
onToggleFavourite: A,
|
|
23
|
+
contextMenu: j,
|
|
24
|
+
children: k,
|
|
25
|
+
interactive: C,
|
|
26
|
+
disabled: r,
|
|
26
27
|
loading: o,
|
|
27
|
-
...
|
|
28
|
-
}) => /* @__PURE__ */
|
|
29
|
-
|
|
28
|
+
...M
|
|
29
|
+
}) => /* @__PURE__ */ i(
|
|
30
|
+
h,
|
|
30
31
|
{
|
|
31
|
-
...
|
|
32
|
+
...M,
|
|
32
33
|
loading: o,
|
|
33
|
-
size:
|
|
34
|
-
icon:
|
|
35
|
-
title:
|
|
36
|
-
description: t ? void 0 :
|
|
34
|
+
size: s,
|
|
35
|
+
icon: e,
|
|
36
|
+
title: p || n,
|
|
37
|
+
description: t ? void 0 : u,
|
|
37
38
|
expanded: t,
|
|
38
39
|
selected: t,
|
|
39
|
-
|
|
40
|
-
|
|
40
|
+
disabled: r,
|
|
41
|
+
controls: !o && !r && /* @__PURE__ */ i(
|
|
42
|
+
q,
|
|
41
43
|
{
|
|
42
|
-
id:
|
|
43
|
-
type:
|
|
44
|
-
favourite:
|
|
45
|
-
favouriteLabel:
|
|
44
|
+
id: m,
|
|
45
|
+
type: c,
|
|
46
|
+
favourite: L,
|
|
47
|
+
favouriteLabel: v,
|
|
46
48
|
badge: l,
|
|
47
|
-
isCurrentEndUser:
|
|
48
|
-
isDeleted:
|
|
49
|
-
onToggleFavourite:
|
|
50
|
-
contextMenu: t ? void 0 :
|
|
49
|
+
isCurrentEndUser: f,
|
|
50
|
+
isDeleted: I,
|
|
51
|
+
onToggleFavourite: A,
|
|
52
|
+
contextMenu: t ? void 0 : j
|
|
51
53
|
}
|
|
52
54
|
),
|
|
53
55
|
linkIcon: !o && !0,
|
|
54
|
-
interactive:
|
|
55
|
-
children:
|
|
56
|
+
interactive: C,
|
|
57
|
+
children: k
|
|
56
58
|
}
|
|
57
59
|
);
|
|
58
60
|
export {
|
|
59
|
-
|
|
61
|
+
F as AccountListItem
|
|
60
62
|
};
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs as u, jsx as c } from "react/jsx-runtime";
|
|
3
3
|
import "../../index-L8X2o7IH.js";
|
|
4
|
-
import i, { forwardRef as d, isValidElement as
|
|
5
|
-
import { Badge as
|
|
6
|
-
import { IconButton as
|
|
7
|
-
import { ContextMenu as
|
|
4
|
+
import i, { forwardRef as d, isValidElement as s } from "react";
|
|
5
|
+
import { Badge as y } from "../Badge/Badge.js";
|
|
6
|
+
import { IconButton as O } from "../Button/IconButton.js";
|
|
7
|
+
import { ContextMenu as w } from "../ContextMenu/ContextMenu.js";
|
|
8
8
|
import "../RootProvider/RootProvider.js";
|
|
9
|
-
import { ListItemControls as
|
|
9
|
+
import { ListItemControls as b } from "../List/ListItemControls.js";
|
|
10
10
|
import "../Snackbar/useSnackbar.js";
|
|
11
11
|
import { u as m } from "../../useId-BVFxCjkq.js";
|
|
12
|
-
var
|
|
12
|
+
var v = function(t, n) {
|
|
13
13
|
var r = {};
|
|
14
14
|
for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (r[e] = t[e]);
|
|
15
15
|
if (t != null && typeof Object.getOwnPropertySymbols == "function")
|
|
@@ -17,8 +17,8 @@ var h = function(t, n) {
|
|
|
17
17
|
n.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
|
|
18
18
|
return r;
|
|
19
19
|
};
|
|
20
|
-
const
|
|
21
|
-
var { title: r, titleId: e } = t, l =
|
|
20
|
+
const h = d((t, n) => {
|
|
21
|
+
var { title: r, titleId: e } = t, l = v(t, ["title", "titleId"]);
|
|
22
22
|
let o = m();
|
|
23
23
|
return o = r ? e || "title-" + o : void 0, i.createElement(
|
|
24
24
|
"svg",
|
|
@@ -27,7 +27,7 @@ const x = d((t, n) => {
|
|
|
27
27
|
i.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M12 4.969c1.399-1.242 2.776-1.844 4.125-1.844 1.519 0 2.823.763 3.905 1.845 2.373 2.372 2.207 6.354-1 9.56l-6.5 6.5-.53-.53-.53.53-6.5-6.5c-3.207-3.206-3.373-7.188-1-9.56C5.05 3.888 6.356 3.125 7.875 3.125c1.349 0 2.726.602 4.125 1.844M12 20.5l-.53.53a.75.75 0 0 0 1.06 0zm0-1.06 5.97-5.97c2.793-2.794 2.627-5.812 1-7.44-.919-.918-1.864-1.405-2.845-1.405s-2.177.487-3.595 1.905a.75.75 0 0 1-1.06 0C10.05 5.112 8.856 4.625 7.874 4.625S5.948 5.112 5.03 6.03c-1.627 1.628-1.793 4.646 1 7.44z", clipRule: "evenodd" })
|
|
28
28
|
);
|
|
29
29
|
});
|
|
30
|
-
var
|
|
30
|
+
var x = function(t, n) {
|
|
31
31
|
var r = {};
|
|
32
32
|
for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (r[e] = t[e]);
|
|
33
33
|
if (t != null && typeof Object.getOwnPropertySymbols == "function")
|
|
@@ -35,8 +35,8 @@ var I = function(t, n) {
|
|
|
35
35
|
n.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
|
|
36
36
|
return r;
|
|
37
37
|
};
|
|
38
|
-
const
|
|
39
|
-
var { title: r, titleId: e } = t, l =
|
|
38
|
+
const I = d((t, n) => {
|
|
39
|
+
var { title: r, titleId: e } = t, l = x(t, ["title", "titleId"]);
|
|
40
40
|
let o = m();
|
|
41
41
|
return o = r ? e || "title-" + o : void 0, i.createElement(
|
|
42
42
|
"svg",
|
|
@@ -44,32 +44,31 @@ const j = d((t, n) => {
|
|
|
44
44
|
r ? i.createElement("title", { id: o }, r) : null,
|
|
45
45
|
i.createElement("path", { fill: "currentColor", d: "M12 4.969c1.399-1.242 2.776-1.844 4.125-1.844 1.519 0 2.823.763 3.905 1.845 2.373 2.372 2.206 6.354-1 9.56l-6.5 6.5a.75.75 0 0 1-1.06 0l-6.5-6.5c-3.207-3.206-3.373-7.188-1-9.56C5.05 3.888 6.355 3.125 7.874 3.125c1.349 0 2.726.602 4.125 1.844" })
|
|
46
46
|
);
|
|
47
|
-
}),
|
|
47
|
+
}), A = ({
|
|
48
48
|
id: t,
|
|
49
49
|
type: n,
|
|
50
50
|
badge: r,
|
|
51
51
|
isCurrentEndUser: e = !1,
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
favouriteLabel: p,
|
|
52
|
+
favourite: l = !1,
|
|
53
|
+
favouriteLabel: o,
|
|
55
54
|
onToggleFavourite: f,
|
|
56
55
|
contextMenu: a,
|
|
57
|
-
loading:
|
|
58
|
-
}) => /* @__PURE__ */ u(
|
|
59
|
-
r && (r && !
|
|
60
|
-
!e &&
|
|
61
|
-
|
|
56
|
+
loading: p
|
|
57
|
+
}) => /* @__PURE__ */ u(b, { children: [
|
|
58
|
+
r && (r && !p && typeof r == "object" && "label" in r ? /* @__PURE__ */ c(y, { ...r }) : s(r) ? r : null),
|
|
59
|
+
!e && n !== "group" && /* @__PURE__ */ c(
|
|
60
|
+
O,
|
|
62
61
|
{
|
|
63
62
|
rounded: !0,
|
|
64
63
|
variant: "text",
|
|
65
|
-
icon:
|
|
66
|
-
iconAltText:
|
|
64
|
+
icon: l ? I : h,
|
|
65
|
+
iconAltText: o || "Toggle favourite",
|
|
67
66
|
onClick: () => f == null ? void 0 : f(t),
|
|
68
67
|
size: "xs"
|
|
69
68
|
}
|
|
70
69
|
),
|
|
71
|
-
a && /* @__PURE__ */ c(
|
|
70
|
+
a && /* @__PURE__ */ c(w, { ...a })
|
|
72
71
|
] });
|
|
73
72
|
export {
|
|
74
|
-
|
|
73
|
+
A as AccountListItemControls
|
|
75
74
|
};
|
|
@@ -1,74 +1,77 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { c as
|
|
3
|
-
import { ListItemBase as
|
|
4
|
-
import { ListItemHeader as
|
|
5
|
-
import '../../assets/ListItem.css';const
|
|
6
|
-
item:
|
|
7
|
-
},
|
|
8
|
-
className:
|
|
9
|
-
color:
|
|
10
|
-
variant:
|
|
11
|
-
shadow:
|
|
12
|
-
border:
|
|
1
|
+
import { jsxs as N, jsx as k } from "react/jsx-runtime";
|
|
2
|
+
import { c as q } from "../../index-L8X2o7IH.js";
|
|
3
|
+
import { ListItemBase as A } from "./ListItemBase.js";
|
|
4
|
+
import { ListItemHeader as C } from "./ListItemHeader.js";
|
|
5
|
+
import '../../assets/ListItem.css';const D = "_item_1nwey_3", E = {
|
|
6
|
+
item: D
|
|
7
|
+
}, M = ({
|
|
8
|
+
className: c,
|
|
9
|
+
color: s,
|
|
10
|
+
variant: n = "default",
|
|
11
|
+
shadow: f = "xs",
|
|
12
|
+
border: p = "none",
|
|
13
13
|
loading: e,
|
|
14
|
-
|
|
14
|
+
disabled: o,
|
|
15
|
+
collapsible: l,
|
|
15
16
|
expanded: t,
|
|
16
|
-
size:
|
|
17
|
-
icon:
|
|
18
|
-
label:
|
|
19
|
-
title:
|
|
20
|
-
description:
|
|
21
|
-
badge:
|
|
22
|
-
linkIcon:
|
|
23
|
-
select:
|
|
24
|
-
selected:
|
|
25
|
-
controls:
|
|
26
|
-
children:
|
|
27
|
-
interactive:
|
|
28
|
-
id:
|
|
29
|
-
...
|
|
17
|
+
size: r,
|
|
18
|
+
icon: u,
|
|
19
|
+
label: m,
|
|
20
|
+
title: L,
|
|
21
|
+
description: a,
|
|
22
|
+
badge: x,
|
|
23
|
+
linkIcon: y = !1,
|
|
24
|
+
select: I,
|
|
25
|
+
selected: _,
|
|
26
|
+
controls: h,
|
|
27
|
+
children: j,
|
|
28
|
+
interactive: i,
|
|
29
|
+
id: w,
|
|
30
|
+
...B
|
|
30
31
|
}) => {
|
|
31
|
-
const
|
|
32
|
-
return /* @__PURE__ */
|
|
33
|
-
|
|
32
|
+
const H = typeof m == "function" ? m() : m;
|
|
33
|
+
return /* @__PURE__ */ N(
|
|
34
|
+
A,
|
|
34
35
|
{
|
|
35
|
-
className:
|
|
36
|
-
size:
|
|
37
|
-
color:
|
|
38
|
-
variant:
|
|
39
|
-
shadow:
|
|
40
|
-
border:
|
|
41
|
-
|
|
36
|
+
className: q(E.item, c),
|
|
37
|
+
size: r,
|
|
38
|
+
color: s,
|
|
39
|
+
variant: n,
|
|
40
|
+
shadow: f,
|
|
41
|
+
border: p,
|
|
42
|
+
disabled: o,
|
|
43
|
+
selected: _,
|
|
42
44
|
expanded: t,
|
|
43
45
|
loading: e,
|
|
44
|
-
interactive:
|
|
45
|
-
id:
|
|
46
|
+
interactive: i,
|
|
47
|
+
id: w,
|
|
46
48
|
children: [
|
|
47
|
-
/* @__PURE__ */
|
|
48
|
-
|
|
49
|
+
/* @__PURE__ */ k(
|
|
50
|
+
C,
|
|
49
51
|
{
|
|
50
|
-
color:
|
|
52
|
+
color: s,
|
|
51
53
|
loading: e,
|
|
52
|
-
linkIcon:
|
|
53
|
-
|
|
54
|
+
linkIcon: y,
|
|
55
|
+
disabled: o,
|
|
56
|
+
collapsible: l,
|
|
54
57
|
expanded: t,
|
|
55
|
-
select:
|
|
56
|
-
title:
|
|
57
|
-
size:
|
|
58
|
-
description:
|
|
59
|
-
icon:
|
|
60
|
-
badge:
|
|
61
|
-
controls:
|
|
62
|
-
interactive:
|
|
63
|
-
...
|
|
64
|
-
children:
|
|
58
|
+
select: I,
|
|
59
|
+
title: L,
|
|
60
|
+
size: r,
|
|
61
|
+
description: a,
|
|
62
|
+
icon: u,
|
|
63
|
+
badge: x,
|
|
64
|
+
controls: h,
|
|
65
|
+
interactive: i,
|
|
66
|
+
...B,
|
|
67
|
+
children: H
|
|
65
68
|
}
|
|
66
69
|
),
|
|
67
|
-
t ?
|
|
70
|
+
t ? j : null
|
|
68
71
|
]
|
|
69
72
|
}
|
|
70
73
|
);
|
|
71
74
|
};
|
|
72
75
|
export {
|
|
73
|
-
|
|
76
|
+
M as ListItem
|
|
74
77
|
};
|
|
@@ -1,40 +1,42 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as u } from "react/jsx-runtime";
|
|
2
2
|
import { c as x } from "../../index-L8X2o7IH.js";
|
|
3
|
-
import '../../assets/ListItemBase.css';const
|
|
4
|
-
base:
|
|
5
|
-
},
|
|
6
|
-
ref:
|
|
7
|
-
as:
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
3
|
+
import '../../assets/ListItemBase.css';const _ = "_base_1n6rf_1", h = {
|
|
4
|
+
base: _
|
|
5
|
+
}, w = ({
|
|
6
|
+
ref: e,
|
|
7
|
+
as: t,
|
|
8
|
+
disabled: a,
|
|
9
|
+
interactive: s = !0,
|
|
10
|
+
size: o,
|
|
11
|
+
color: n,
|
|
12
|
+
variant: r = "default",
|
|
13
|
+
shadow: d = "none",
|
|
14
|
+
border: i = "none",
|
|
14
15
|
hidden: c = !1,
|
|
15
|
-
selected:
|
|
16
|
+
selected: l,
|
|
16
17
|
className: m,
|
|
17
|
-
onMouseEnter:
|
|
18
|
+
onMouseEnter: f,
|
|
18
19
|
id: b,
|
|
19
20
|
children: p
|
|
20
|
-
}) => /* @__PURE__ */
|
|
21
|
-
|
|
21
|
+
}) => /* @__PURE__ */ u(
|
|
22
|
+
t || "li",
|
|
22
23
|
{
|
|
23
|
-
className: x(
|
|
24
|
-
"data-interactive":
|
|
25
|
-
"data-selected":
|
|
26
|
-
"data-variant":
|
|
27
|
-
"data-color":
|
|
28
|
-
"data-border":
|
|
29
|
-
"data-shadow":
|
|
30
|
-
"data-size":
|
|
24
|
+
className: x(h.base, m),
|
|
25
|
+
"data-interactive": a ? !1 : s,
|
|
26
|
+
"data-selected": l,
|
|
27
|
+
"data-variant": r,
|
|
28
|
+
"data-color": n,
|
|
29
|
+
"data-border": i,
|
|
30
|
+
"data-shadow": d,
|
|
31
|
+
"data-size": o,
|
|
32
|
+
"aria-disabled": a,
|
|
31
33
|
"aria-hidden": c,
|
|
32
|
-
onMouseEnter:
|
|
34
|
+
onMouseEnter: f,
|
|
33
35
|
id: b,
|
|
34
|
-
ref:
|
|
36
|
+
ref: e,
|
|
35
37
|
children: p
|
|
36
38
|
}
|
|
37
39
|
);
|
|
38
40
|
export {
|
|
39
|
-
|
|
41
|
+
w as ListItemBase
|
|
40
42
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as i, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { c as E } from "../../index-L8X2o7IH.js";
|
|
3
3
|
import { useId as w, isValidElement as z } from "react";
|
|
4
4
|
import { Icon as A } from "../Icon/Icon.js";
|
|
@@ -12,7 +12,7 @@ import { ListItemSelect as q } from "./ListItemSelect.js";
|
|
|
12
12
|
import "../Snackbar/useSnackbar.js";
|
|
13
13
|
import { S as G, a as J } from "../../ChevronUp-_BBfEirx.js";
|
|
14
14
|
import { S as K } from "../../ChevronRight-ANFWmIs1.js";
|
|
15
|
-
import '../../assets/ListItemHeader.css';const M = "
|
|
15
|
+
import '../../assets/ListItemHeader.css';const M = "_header_29hv7_1", O = "_label_29hv7_27", P = "_link_29hv7_43", Q = "_badge_29hv7_47", T = "_linkIcon_29hv7_51", W = "_linkFocus_29hv7_61", X = "_controls_29hv7_69", o = {
|
|
16
16
|
header: M,
|
|
17
17
|
label: O,
|
|
18
18
|
link: P,
|
|
@@ -20,66 +20,67 @@ import '../../assets/ListItemHeader.css';const M = "_header_1v1u9_1", O = "_labe
|
|
|
20
20
|
linkIcon: T,
|
|
21
21
|
linkFocus: W,
|
|
22
22
|
controls: X
|
|
23
|
-
},
|
|
23
|
+
}, ho = ({
|
|
24
24
|
as: _,
|
|
25
|
-
highlightWords:
|
|
26
|
-
interactive:
|
|
27
|
-
color:
|
|
25
|
+
highlightWords: v,
|
|
26
|
+
interactive: a = !0,
|
|
27
|
+
color: f,
|
|
28
28
|
loading: s,
|
|
29
|
-
disabled:
|
|
30
|
-
collapsible:
|
|
31
|
-
linkIcon:
|
|
32
|
-
expanded:
|
|
29
|
+
disabled: r,
|
|
30
|
+
collapsible: I,
|
|
31
|
+
linkIcon: k,
|
|
32
|
+
expanded: u,
|
|
33
33
|
select: l,
|
|
34
|
-
href:
|
|
35
|
-
onClick:
|
|
34
|
+
href: L,
|
|
35
|
+
onClick: b,
|
|
36
36
|
onKeyPress: N,
|
|
37
37
|
tabIndex: S,
|
|
38
|
-
size:
|
|
39
|
-
title:
|
|
38
|
+
size: c,
|
|
39
|
+
title: n,
|
|
40
40
|
description: C,
|
|
41
41
|
icon: x,
|
|
42
|
-
active:
|
|
42
|
+
active: m,
|
|
43
43
|
badge: t,
|
|
44
|
-
controls:
|
|
44
|
+
controls: d,
|
|
45
45
|
className: y,
|
|
46
46
|
children: F,
|
|
47
|
-
ariaLabel:
|
|
47
|
+
ariaLabel: h
|
|
48
48
|
}) => {
|
|
49
|
-
const p =
|
|
50
|
-
return /* @__PURE__ */
|
|
49
|
+
const p = I ? u ? G : J : k ? K : void 0, j = () => t && !s && typeof t == "object" && "label" in t ? /* @__PURE__ */ e(D, { ...t, className: o.badge }) : z(t) ? t : null, g = h !== void 0 ? h : typeof n == "string" ? n : void 0, B = w();
|
|
50
|
+
return /* @__PURE__ */ i(
|
|
51
51
|
"div",
|
|
52
52
|
{
|
|
53
53
|
className: E(o.header, y),
|
|
54
|
-
"data-color":
|
|
55
|
-
"data-interactive":
|
|
56
|
-
"data-size":
|
|
57
|
-
"data-has-active-child":
|
|
54
|
+
"data-color": f,
|
|
55
|
+
"data-interactive": a,
|
|
56
|
+
"data-size": c,
|
|
57
|
+
"data-has-active-child": m,
|
|
58
|
+
"aria-disabled": r,
|
|
58
59
|
children: [
|
|
59
|
-
/* @__PURE__ */
|
|
60
|
+
/* @__PURE__ */ i(
|
|
60
61
|
H,
|
|
61
62
|
{
|
|
62
63
|
as: _,
|
|
63
|
-
href:
|
|
64
|
-
onClick:
|
|
64
|
+
href: L,
|
|
65
|
+
onClick: b,
|
|
65
66
|
onKeyPress: N,
|
|
66
67
|
tabIndex: S,
|
|
67
68
|
loading: s,
|
|
68
|
-
disabled:
|
|
69
|
-
active:
|
|
69
|
+
disabled: r || s,
|
|
70
|
+
active: m,
|
|
70
71
|
ariaLabel: g,
|
|
71
72
|
className: o.link,
|
|
72
73
|
children: [
|
|
73
|
-
|
|
74
|
+
a && /* @__PURE__ */ e("div", { className: o.linkFocus, "aria-hidden": "true" }),
|
|
74
75
|
l && /* @__PURE__ */ e(q, { ...l, className: o.select }),
|
|
75
76
|
/* @__PURE__ */ e(U, { loading: s, icon: x }),
|
|
76
77
|
/* @__PURE__ */ e(
|
|
77
78
|
R,
|
|
78
79
|
{
|
|
79
|
-
size:
|
|
80
|
+
size: c,
|
|
80
81
|
loading: s,
|
|
81
|
-
highlightWords:
|
|
82
|
-
title:
|
|
82
|
+
highlightWords: v,
|
|
83
|
+
title: n,
|
|
83
84
|
description: C,
|
|
84
85
|
id: B,
|
|
85
86
|
className: o.label,
|
|
@@ -89,10 +90,10 @@ import '../../assets/ListItemHeader.css';const M = "_header_1v1u9_1", O = "_labe
|
|
|
89
90
|
]
|
|
90
91
|
}
|
|
91
92
|
),
|
|
92
|
-
/* @__PURE__ */
|
|
93
|
-
|
|
93
|
+
/* @__PURE__ */ i(V, { className: o.controls, children: [
|
|
94
|
+
d && !s && /* @__PURE__ */ e("span", { className: o.customControls, children: d }),
|
|
94
95
|
j(),
|
|
95
|
-
p && /* @__PURE__ */ e("span", { className: o.linkIcon, children: /* @__PURE__ */ e(
|
|
96
|
+
p && !r && /* @__PURE__ */ e("span", { className: o.linkIcon, children: /* @__PURE__ */ e(
|
|
96
97
|
A,
|
|
97
98
|
{
|
|
98
99
|
svgElement: p,
|
|
@@ -107,5 +108,5 @@ import '../../assets/ListItemHeader.css';const M = "_header_1v1u9_1", O = "_labe
|
|
|
107
108
|
);
|
|
108
109
|
};
|
|
109
110
|
export {
|
|
110
|
-
|
|
111
|
+
ho as ListItemHeader
|
|
111
112
|
};
|
|
@@ -16,4 +16,4 @@ export interface AccountListItemProps extends ListItemProps, AccountListItemCont
|
|
|
16
16
|
contextMenu?: ContextMenuProps;
|
|
17
17
|
label?: string;
|
|
18
18
|
}
|
|
19
|
-
export declare const AccountListItem: ({ id, type, size, expanded, icon, name, title, description, isCurrentEndUser, isDeleted, badge, favourite, favouriteLabel, onToggleFavourite, contextMenu, children, interactive, loading, ...item }: AccountListItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare const AccountListItem: ({ id, type, size, expanded, icon, name, title, description, isCurrentEndUser, isDeleted, badge, favourite, favouriteLabel, onToggleFavourite, contextMenu, children, interactive, disabled, loading, ...item }: AccountListItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
|
|
|
2
2
|
import { AccountListItemProps } from '..';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: ({ id, type, size, expanded, icon, name, title, description, isCurrentEndUser, isDeleted, badge, favourite, favouriteLabel, onToggleFavourite, contextMenu, children, interactive, loading, ...item }: AccountListItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
component: ({ id, type, size, expanded, icon, name, title, description, isCurrentEndUser, isDeleted, badge, favourite, favouriteLabel, onToggleFavourite, contextMenu, children, interactive, disabled, loading, ...item }: AccountListItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
tags: string[];
|
|
7
7
|
parameters: {};
|
|
8
8
|
args: {
|
|
@@ -14,4 +14,4 @@ export interface AccountListItemControlsProps {
|
|
|
14
14
|
loading?: boolean;
|
|
15
15
|
badge?: BadgeProps | ReactNode;
|
|
16
16
|
}
|
|
17
|
-
export declare const AccountListItemControls: ({ id, type, badge, isCurrentEndUser,
|
|
17
|
+
export declare const AccountListItemControls: ({ id, type, badge, isCurrentEndUser, favourite, favouriteLabel, onToggleFavourite, contextMenu, loading, }: AccountListItemControlsProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -54,4 +54,4 @@ export interface ListItemInputProps extends ListItemProps {
|
|
|
54
54
|
*
|
|
55
55
|
* @returns {ReactElement} Rendered ListItem component.
|
|
56
56
|
*/
|
|
57
|
-
export declare const ListItem: ({ className, color, variant, shadow, border, loading, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, ...rest }: ListItemProps) => ReactElement;
|
|
57
|
+
export declare const ListItem: ({ className, color, variant, shadow, border, loading, disabled, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, ...rest }: ListItemProps) => ReactElement;
|
|
@@ -42,4 +42,4 @@ export interface ListItemBaseProps {
|
|
|
42
42
|
/** Id of list item. */
|
|
43
43
|
id?: string;
|
|
44
44
|
}
|
|
45
|
-
export declare const ListItemBase: ({ ref, as, interactive, size, color, variant, shadow, border, hidden, selected, className, onMouseEnter, id, children, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
export declare const ListItemBase: ({ ref, as, disabled, interactive, size, color, variant, shadow, border, hidden, selected, className, onMouseEnter, id, children, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -15,6 +15,8 @@ export interface ListItemHeaderProps extends ListItemLinkProps {
|
|
|
15
15
|
className?: string;
|
|
16
16
|
/** Select controls */
|
|
17
17
|
select?: ListItemSelectProps;
|
|
18
|
+
/** Item is disabled */
|
|
19
|
+
disabled?: boolean;
|
|
18
20
|
/** Collapsible item */
|
|
19
21
|
collapsible?: boolean;
|
|
20
22
|
/** Item is expanded */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ListItemProps } from '../';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ className, color, variant, shadow, border, loading, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, ...rest }: ListItemProps) => React.ReactElement;
|
|
4
|
+
component: ({ className, color, variant, shadow, border, loading, disabled, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, ...rest }: ListItemProps) => React.ReactElement;
|
|
5
5
|
parameters: {};
|
|
6
6
|
args: {
|
|
7
7
|
id: string;
|