@iress-oss/ids-components 6.0.0-alpha.14 → 6.0.0-alpha.15
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/components/Alert/Alert.js +55 -49
- package/dist/components/ButtonGroup/ButtonGroup.js +39 -33
- package/dist/components/Card/Card.d.ts +1 -1
- package/dist/components/Card/Card.js +66 -59
- package/dist/components/Expander/Expander.styles.d.ts +1 -1
- package/dist/components/Expander/Expander.styles.js +3 -3
- package/dist/patterns/Shadow/Shadow.js +4 -7
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -1,88 +1,94 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useMemo as
|
|
3
|
-
import { IressIcon as
|
|
1
|
+
import { jsx as t, jsxs as a } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo as B, createElement as E } from "react";
|
|
3
|
+
import { IressIcon as V } from "../Icon/Icon.js";
|
|
4
4
|
import "../Icon/Icon.styles.js";
|
|
5
5
|
import { IressText as u } from "../Text/Text.js";
|
|
6
6
|
import { propagateTestid as N } from "../../helpers/utility/propagateTestid.js";
|
|
7
|
-
import { alert as
|
|
8
|
-
import { c as
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
7
|
+
import { alert as h } from "./Alert.styles.js";
|
|
8
|
+
import { c as q } from "../../css-DNdLYQld.js";
|
|
9
|
+
import { c as I } from "../../cx-DN21T1EH.js";
|
|
10
|
+
import { GlobalCSSClass as F } from "../../enums.js";
|
|
11
|
+
import { I as G } from "../../Button-BTkololu.js";
|
|
12
|
+
import { IressCloseButton as L } from "../Button/CloseButton/CloseButton.js";
|
|
12
13
|
import "../Inline/Inline.styles.js";
|
|
13
|
-
import { IressInline as
|
|
14
|
-
import { useControlledState as
|
|
15
|
-
|
|
14
|
+
import { IressInline as M } from "../Inline/Inline.js";
|
|
15
|
+
import { useControlledState as O } from "../../hooks/useControlledState.js";
|
|
16
|
+
import { s as R } from "../../is-valid-prop-DweT-eOL.js";
|
|
17
|
+
const W = {
|
|
16
18
|
danger: "ban",
|
|
17
19
|
info: "info-square",
|
|
18
20
|
success: "check",
|
|
19
21
|
warning: "exclamation-triangle"
|
|
20
|
-
},
|
|
22
|
+
}, _ = ({
|
|
21
23
|
actions: n,
|
|
22
|
-
children:
|
|
23
|
-
className:
|
|
24
|
-
defaultDismissed:
|
|
24
|
+
children: g,
|
|
25
|
+
className: x,
|
|
26
|
+
defaultDismissed: C,
|
|
25
27
|
dismissed: b,
|
|
26
28
|
footer: c,
|
|
27
|
-
heading:
|
|
28
|
-
icon:
|
|
29
|
+
heading: o,
|
|
30
|
+
icon: m,
|
|
29
31
|
onDismiss: d,
|
|
30
|
-
status:
|
|
31
|
-
variant:
|
|
32
|
+
status: r = "info",
|
|
33
|
+
variant: i,
|
|
32
34
|
...l
|
|
33
35
|
}) => {
|
|
34
|
-
const
|
|
36
|
+
const y = !!d, e = h({ status: r, variant: i }), A = h.raw({ status: r, variant: i }), p = !!n?.length, S = !!c || p, [T, k] = R(l), { value: v, setValue: w } = O({
|
|
35
37
|
component: "IressAlert",
|
|
36
|
-
defaultValue:
|
|
38
|
+
defaultValue: C,
|
|
37
39
|
propName: "dismissed",
|
|
38
40
|
value: b
|
|
39
|
-
}), f =
|
|
40
|
-
if (
|
|
41
|
+
}), f = B(() => {
|
|
42
|
+
if (m === !1)
|
|
41
43
|
return null;
|
|
42
|
-
const s =
|
|
43
|
-
return /* @__PURE__ */
|
|
44
|
-
|
|
44
|
+
const s = m ?? W[r];
|
|
45
|
+
return /* @__PURE__ */ t(
|
|
46
|
+
V,
|
|
45
47
|
{
|
|
46
48
|
name: s,
|
|
47
|
-
screenreaderText: `${
|
|
49
|
+
screenreaderText: `${r}: `,
|
|
48
50
|
fixedWidth: !0,
|
|
49
51
|
className: e.icon
|
|
50
52
|
}
|
|
51
53
|
);
|
|
52
|
-
}, [e.icon,
|
|
53
|
-
return v ? null : /* @__PURE__ */
|
|
54
|
+
}, [e.icon, m, r]);
|
|
55
|
+
return v ? null : /* @__PURE__ */ a(
|
|
54
56
|
u,
|
|
55
57
|
{
|
|
56
|
-
className:
|
|
57
|
-
|
|
58
|
+
className: I(
|
|
59
|
+
x,
|
|
60
|
+
q(A.alert, T),
|
|
61
|
+
F.Alert
|
|
62
|
+
),
|
|
63
|
+
...k,
|
|
58
64
|
children: [
|
|
59
|
-
|
|
60
|
-
/* @__PURE__ */
|
|
61
|
-
|
|
65
|
+
i !== "sidebar" && f,
|
|
66
|
+
/* @__PURE__ */ a("div", { className: e.wrapper, children: [
|
|
67
|
+
o && /* @__PURE__ */ t(
|
|
62
68
|
"div",
|
|
63
69
|
{
|
|
64
70
|
className: e.heading,
|
|
65
71
|
"data-testid": N(l["data-testid"], "heading"),
|
|
66
|
-
children: typeof
|
|
67
|
-
|
|
72
|
+
children: typeof o == "string" ? /* @__PURE__ */ a(u, { element: "h2", className: e.heading, children: [
|
|
73
|
+
i === "sidebar" && f,
|
|
68
74
|
" ",
|
|
69
|
-
|
|
70
|
-
] }) :
|
|
75
|
+
o
|
|
76
|
+
] }) : o
|
|
71
77
|
}
|
|
72
78
|
),
|
|
73
|
-
/* @__PURE__ */
|
|
74
|
-
|
|
79
|
+
/* @__PURE__ */ t("div", { className: e.children, children: g }),
|
|
80
|
+
S && /* @__PURE__ */ a(
|
|
75
81
|
"div",
|
|
76
82
|
{
|
|
77
83
|
className: e.footer,
|
|
78
84
|
"data-testid": N(l["data-testid"], "footer"),
|
|
79
85
|
children: [
|
|
80
|
-
p && /* @__PURE__ */
|
|
81
|
-
|
|
86
|
+
p && /* @__PURE__ */ t(M, { gap: "sm", pb: "spacing.1", children: n?.map((s, j) => /* @__PURE__ */ E(
|
|
87
|
+
G,
|
|
82
88
|
{
|
|
83
89
|
...s,
|
|
84
|
-
className:
|
|
85
|
-
key:
|
|
90
|
+
className: I(s.className, e.action),
|
|
91
|
+
key: j
|
|
86
92
|
}
|
|
87
93
|
)) }),
|
|
88
94
|
c
|
|
@@ -90,12 +96,12 @@ const G = {
|
|
|
90
96
|
}
|
|
91
97
|
)
|
|
92
98
|
] }),
|
|
93
|
-
|
|
94
|
-
|
|
99
|
+
y && /* @__PURE__ */ t(
|
|
100
|
+
L,
|
|
95
101
|
{
|
|
96
102
|
className: e.dismiss,
|
|
97
103
|
onClick: (s) => {
|
|
98
|
-
d?.(s),
|
|
104
|
+
d?.(s), w(!0);
|
|
99
105
|
}
|
|
100
106
|
}
|
|
101
107
|
)
|
|
@@ -103,7 +109,7 @@ const G = {
|
|
|
103
109
|
}
|
|
104
110
|
);
|
|
105
111
|
};
|
|
106
|
-
|
|
112
|
+
_.displayName = "IressAlert";
|
|
107
113
|
export {
|
|
108
|
-
|
|
114
|
+
_ as IressAlert
|
|
109
115
|
};
|
|
@@ -1,50 +1,56 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as o, jsxs as v } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import { useIdIfNeeded as
|
|
4
|
-
import { propagateTestid as
|
|
5
|
-
import { buttonGroup as
|
|
6
|
-
import { c as
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
3
|
+
import { useIdIfNeeded as N } from "../../hooks/useIdIfNeeded.js";
|
|
4
|
+
import { propagateTestid as x } from "../../helpers/utility/propagateTestid.js";
|
|
5
|
+
import { buttonGroup as l } from "./ButtonGroup.styles.js";
|
|
6
|
+
import { c as B } from "../../css-DNdLYQld.js";
|
|
7
|
+
import { c as I } from "../../cx-DN21T1EH.js";
|
|
8
|
+
import { s as C } from "../../factory-CsinCTPr.js";
|
|
9
|
+
import { s as P } from "../../is-valid-prop-DweT-eOL.js";
|
|
10
|
+
import { ButtonGroupProvider as S } from "./ButtonGroupProvider.js";
|
|
11
|
+
import { GlobalCSSClass as g } from "../../enums.js";
|
|
10
12
|
const h = ({
|
|
11
|
-
children:
|
|
12
|
-
className:
|
|
13
|
-
"data-testid":
|
|
13
|
+
children: m,
|
|
14
|
+
className: p,
|
|
15
|
+
"data-testid": s,
|
|
14
16
|
defaultSelected: d,
|
|
15
|
-
hiddenLabel:
|
|
16
|
-
label:
|
|
17
|
-
multiple:
|
|
18
|
-
onChange:
|
|
19
|
-
selected:
|
|
20
|
-
...
|
|
17
|
+
hiddenLabel: r,
|
|
18
|
+
label: c,
|
|
19
|
+
multiple: n,
|
|
20
|
+
onChange: u,
|
|
21
|
+
selected: f,
|
|
22
|
+
...t
|
|
21
23
|
}) => {
|
|
22
|
-
const e =
|
|
23
|
-
return /* @__PURE__ */
|
|
24
|
-
|
|
24
|
+
const e = N({ id: t.id }), a = `${e}--label`, i = l({ hiddenLabel: r }), b = l.raw({ hiddenLabel: r }), [y, G] = P(t);
|
|
25
|
+
return /* @__PURE__ */ o(
|
|
26
|
+
S,
|
|
25
27
|
{
|
|
26
28
|
defaultSelected: d,
|
|
27
|
-
multiple:
|
|
28
|
-
onChange:
|
|
29
|
-
selected:
|
|
30
|
-
children: /* @__PURE__ */
|
|
31
|
-
|
|
29
|
+
multiple: n,
|
|
30
|
+
onChange: u,
|
|
31
|
+
selected: f,
|
|
32
|
+
children: /* @__PURE__ */ v(
|
|
33
|
+
C.div,
|
|
32
34
|
{
|
|
33
|
-
className:
|
|
35
|
+
className: I(
|
|
36
|
+
p,
|
|
37
|
+
B(b.root, y),
|
|
38
|
+
g.ButtonGroup
|
|
39
|
+
),
|
|
34
40
|
id: e,
|
|
35
|
-
"data-testid":
|
|
36
|
-
...
|
|
41
|
+
"data-testid": s,
|
|
42
|
+
...G,
|
|
37
43
|
children: [
|
|
38
|
-
/* @__PURE__ */
|
|
44
|
+
/* @__PURE__ */ o(
|
|
39
45
|
"div",
|
|
40
46
|
{
|
|
41
|
-
className:
|
|
42
|
-
"data-testid":
|
|
47
|
+
className: i.label,
|
|
48
|
+
"data-testid": x(s, "label"),
|
|
43
49
|
id: a,
|
|
44
|
-
children:
|
|
50
|
+
children: c
|
|
45
51
|
}
|
|
46
52
|
),
|
|
47
|
-
/* @__PURE__ */
|
|
53
|
+
/* @__PURE__ */ o("div", { role: "group", "aria-labelledby": a, className: i.values, children: m })
|
|
48
54
|
]
|
|
49
55
|
}
|
|
50
56
|
)
|
|
@@ -39,7 +39,7 @@ export type IressCardProps<E extends ElementType = 'div'> = ElementProps<E> & In
|
|
|
39
39
|
export type IressButtonCardProps = IressCardProps<'button'>;
|
|
40
40
|
export type IressLinkCardProps = IressCardProps<'a'>;
|
|
41
41
|
export declare const IressCard: {
|
|
42
|
-
<E extends ElementType = "div">({ element, className, selected,
|
|
42
|
+
<E extends ElementType = "div">({ element, className, selected, children, footer, heading, media, prepend, topRight, ...restProps }: IressCardProps<E>): import("react/jsx-runtime").JSX.Element;
|
|
43
43
|
displayName: string;
|
|
44
44
|
};
|
|
45
45
|
export declare const IressButtonCard: {
|
|
@@ -1,107 +1,114 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { s as
|
|
3
|
-
import { card as
|
|
1
|
+
import { jsx as t, jsxs as E, Fragment as j } from "react/jsx-runtime";
|
|
2
|
+
import { s as B } from "../../is-valid-prop-DweT-eOL.js";
|
|
3
|
+
import { card as L } from "./Card.styles.js";
|
|
4
4
|
import { c as e } from "../../css-DNdLYQld.js";
|
|
5
|
-
import { c as
|
|
5
|
+
import { c as M } from "../../cx-DN21T1EH.js";
|
|
6
6
|
import { propagateTestid as o } from "../../helpers/utility/propagateTestid.js";
|
|
7
|
-
import { useMemo as
|
|
8
|
-
import { GlobalCSSClass as
|
|
7
|
+
import { useMemo as w } from "react";
|
|
8
|
+
import { GlobalCSSClass as F } from "../../enums.js";
|
|
9
9
|
const N = ({
|
|
10
|
-
element:
|
|
11
|
-
className:
|
|
12
|
-
selected:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
...C
|
|
10
|
+
element: s,
|
|
11
|
+
className: l,
|
|
12
|
+
selected: m,
|
|
13
|
+
children: p,
|
|
14
|
+
footer: h,
|
|
15
|
+
heading: y,
|
|
16
|
+
media: i,
|
|
17
|
+
prepend: n,
|
|
18
|
+
topRight: C,
|
|
19
|
+
...f
|
|
21
20
|
}) => {
|
|
22
|
-
const
|
|
23
|
-
clickable:
|
|
21
|
+
const c = typeof y == "string" ? /* @__PURE__ */ t("h2", { children: y }) : y, I = !!n, u = !!(n ?? C ?? i ?? c ?? h), b = !!c, S = !!i, g = s == "button" || s == "a" || !!f.onClick, [P, v] = B(f), { stretch: k, ...d } = P, a = L.raw({
|
|
22
|
+
clickable: g,
|
|
24
23
|
// Convert the element to a string for compatibility with the card.raw function
|
|
25
|
-
element: String(
|
|
26
|
-
selected:
|
|
27
|
-
stretch:
|
|
28
|
-
hasSlots:
|
|
29
|
-
hasHeading:
|
|
30
|
-
hasMedia:
|
|
31
|
-
hasPrepend:
|
|
32
|
-
}), r =
|
|
33
|
-
return /* @__PURE__ */
|
|
24
|
+
element: String(s),
|
|
25
|
+
selected: m,
|
|
26
|
+
stretch: !!k,
|
|
27
|
+
hasSlots: u,
|
|
28
|
+
hasHeading: b,
|
|
29
|
+
hasMedia: S,
|
|
30
|
+
hasPrepend: I
|
|
31
|
+
}), r = v["data-testid"], x = w(() => s ?? "div", [s]);
|
|
32
|
+
return /* @__PURE__ */ t(
|
|
34
33
|
x,
|
|
35
34
|
{
|
|
36
|
-
...
|
|
37
|
-
className:
|
|
38
|
-
e(a.root,
|
|
39
|
-
|
|
40
|
-
|
|
35
|
+
...v,
|
|
36
|
+
className: M(
|
|
37
|
+
e(a.root, d),
|
|
38
|
+
l,
|
|
39
|
+
F.Card
|
|
41
40
|
),
|
|
42
|
-
children:
|
|
43
|
-
|
|
41
|
+
children: u ? /* @__PURE__ */ E(j, { children: [
|
|
42
|
+
n && /* @__PURE__ */ t(
|
|
44
43
|
"div",
|
|
45
44
|
{
|
|
46
|
-
className: e(a.prepend
|
|
45
|
+
className: e(a.prepend, {
|
|
46
|
+
p: d.p
|
|
47
|
+
}),
|
|
47
48
|
"data-testid": o(r, "prepend"),
|
|
48
|
-
children:
|
|
49
|
+
children: n
|
|
49
50
|
}
|
|
50
51
|
),
|
|
51
|
-
|
|
52
|
+
C && /* @__PURE__ */ t(
|
|
52
53
|
"div",
|
|
53
54
|
{
|
|
54
55
|
className: e(a.topRight),
|
|
55
56
|
"data-testid": o(r, "topRight"),
|
|
56
|
-
children:
|
|
57
|
+
children: C
|
|
57
58
|
}
|
|
58
59
|
),
|
|
59
|
-
|
|
60
|
+
i && /* @__PURE__ */ t(
|
|
60
61
|
"div",
|
|
61
62
|
{
|
|
62
63
|
className: e(a.media),
|
|
63
64
|
"data-testid": o(r, "media"),
|
|
64
|
-
children:
|
|
65
|
+
children: i
|
|
65
66
|
}
|
|
66
67
|
),
|
|
67
|
-
|
|
68
|
+
c && /* @__PURE__ */ t(
|
|
68
69
|
"div",
|
|
69
70
|
{
|
|
70
|
-
className: e(a.heading
|
|
71
|
+
className: e(a.heading, {
|
|
72
|
+
p: d.p
|
|
73
|
+
}),
|
|
71
74
|
"data-testid": o(r, "heading"),
|
|
72
|
-
children:
|
|
75
|
+
children: c
|
|
73
76
|
}
|
|
74
77
|
),
|
|
75
|
-
|
|
78
|
+
p && /* @__PURE__ */ t(
|
|
76
79
|
"div",
|
|
77
80
|
{
|
|
78
|
-
className: e(a.body
|
|
81
|
+
className: e(a.body, {
|
|
82
|
+
p: d.p
|
|
83
|
+
}),
|
|
79
84
|
"data-testid": o(r, "body"),
|
|
80
|
-
children:
|
|
85
|
+
children: p
|
|
81
86
|
}
|
|
82
87
|
),
|
|
83
|
-
|
|
88
|
+
h && /* @__PURE__ */ t(
|
|
84
89
|
"div",
|
|
85
90
|
{
|
|
86
|
-
className: e(a.footer
|
|
91
|
+
className: e(a.footer, {
|
|
92
|
+
p: d.p
|
|
93
|
+
}),
|
|
87
94
|
"data-testid": o(r, "footer"),
|
|
88
|
-
children:
|
|
95
|
+
children: h
|
|
89
96
|
}
|
|
90
97
|
)
|
|
91
|
-
] }) :
|
|
98
|
+
] }) : p
|
|
92
99
|
}
|
|
93
100
|
);
|
|
94
101
|
};
|
|
95
102
|
N.displayName = "IressCard";
|
|
96
|
-
const
|
|
97
|
-
const { type:
|
|
98
|
-
return /* @__PURE__ */
|
|
103
|
+
const G = (s) => {
|
|
104
|
+
const { type: l = "button", ...m } = s;
|
|
105
|
+
return /* @__PURE__ */ t(N, { element: "button", type: l, ...m });
|
|
99
106
|
};
|
|
100
|
-
|
|
101
|
-
const
|
|
102
|
-
|
|
107
|
+
G.displayName = "IressButtonCard";
|
|
108
|
+
const H = (s) => /* @__PURE__ */ t(N, { element: "a", ...s });
|
|
109
|
+
H.displayName = "IressLinkCard";
|
|
103
110
|
export {
|
|
104
|
-
|
|
111
|
+
G as IressButtonCard,
|
|
105
112
|
N as IressCard,
|
|
106
|
-
|
|
113
|
+
H as IressLinkCard
|
|
107
114
|
};
|
|
@@ -13,7 +13,7 @@ export declare const expander: import('../../styled-system/types').SlotRecipeRun
|
|
|
13
13
|
activator: {
|
|
14
14
|
display: "flex";
|
|
15
15
|
justifyContent: "space-between";
|
|
16
|
-
alignItems: "flex-
|
|
16
|
+
alignItems: "flex-start";
|
|
17
17
|
width: "[100%]";
|
|
18
18
|
textStyle: "typography.heading.3";
|
|
19
19
|
_hover: {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { s as
|
|
2
|
-
const r =
|
|
1
|
+
import { s as o } from "../../sva-B7kca5XO.js";
|
|
2
|
+
const r = o({
|
|
3
3
|
slots: [
|
|
4
4
|
"root",
|
|
5
5
|
"activator",
|
|
@@ -60,7 +60,7 @@ const r = e({
|
|
|
60
60
|
activator: {
|
|
61
61
|
display: "flex",
|
|
62
62
|
justifyContent: "space-between",
|
|
63
|
-
alignItems: "flex-
|
|
63
|
+
alignItems: "flex-start",
|
|
64
64
|
width: "[100%]",
|
|
65
65
|
textStyle: "typography.heading.3",
|
|
66
66
|
_hover: {
|
|
@@ -4154,10 +4154,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
|
|
|
4154
4154
|
justify-content: space-between;
|
|
4155
4155
|
}
|
|
4156
4156
|
|
|
4157
|
-
.ai_flex-end {
|
|
4158
|
-
align-items: flex-end;
|
|
4159
|
-
}
|
|
4160
|
-
|
|
4161
4157
|
.c_colour\\.neutral\\.90 {
|
|
4162
4158
|
color: var(--colors-colour\\.neutral\\.90);
|
|
4163
4159
|
}
|
|
@@ -4291,6 +4287,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
|
|
|
4291
4287
|
justify-content: flex-end;
|
|
4292
4288
|
}
|
|
4293
4289
|
|
|
4290
|
+
.ai_flex-end {
|
|
4291
|
+
align-items: flex-end;
|
|
4292
|
+
}
|
|
4293
|
+
|
|
4294
4294
|
.ai_stretch {
|
|
4295
4295
|
align-items: stretch;
|
|
4296
4296
|
}
|
|
@@ -4377,7 +4377,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
|
|
|
4377
4377
|
|
|
4378
4378
|
.scrollable_y {
|
|
4379
4379
|
overflow-y: auto;
|
|
4380
|
-
scrollbar-gutter: stable;
|
|
4381
4380
|
}
|
|
4382
4381
|
|
|
4383
4382
|
.scrollable_y::-webkit-scrollbar {
|
|
@@ -5262,7 +5261,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
|
|
|
5262
5261
|
|
|
5263
5262
|
.scrollable_x {
|
|
5264
5263
|
overflow-x: auto;
|
|
5265
|
-
scrollbar-gutter: stable;
|
|
5266
5264
|
}
|
|
5267
5265
|
|
|
5268
5266
|
.scrollable_x::-webkit-scrollbar {
|
|
@@ -5295,7 +5293,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
|
|
|
5295
5293
|
|
|
5296
5294
|
.scrollable_true {
|
|
5297
5295
|
overflow: auto;
|
|
5298
|
-
scrollbar-gutter: stable;
|
|
5299
5296
|
}
|
|
5300
5297
|
|
|
5301
5298
|
.scrollable_true::-webkit-scrollbar {
|