@altinn/altinn-components 0.45.1 → 0.45.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/ButtonBase.css +1 -1
- package/dist/components/Button/ButtonBase.js +9 -9
- package/dist/components/Button/ComboButton.js +33 -31
- package/dist/components/Dialog/DialogActions.js +33 -29
- package/dist/types/lib/components/Button/ComboButton.d.ts +1 -1
- package/dist/types/lib/components/Dialog/DialogActions.stories.d.ts +1 -0
- package/dist/types/lib/components/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._button_12ruc_1{--dsc-button-background--active: transparent;--dsc-button-background--hover: transparent;--dsc-button-background: transparent;--dsc-button-color: inherit;--dsc-button-color--hover: inherit;--dsc-button-border-width: var(--ds-border-width-default);--dsc-button-border-style: solid;--dsc-button-border-color: transparent;--dsc-button-border-radius: 2px;--dsc-button-gap: var(--ds-size-2);--dsc-button-padding: var(--ds-size-2) var(--ds-size-4);--dsc-button-size: var(--ds-size-12);border-style:var(--dsc-button-border-style);border-width:var(--dsc-button-border-width);border-color:var(--dsc-button-border-color);border-radius:var(--dsc-button-border-radius);background:var(--dsc-button-background);color:var(--dsc-button-color);margin:0;padding:0;min-width:var(--dsc-button-size);min-height:var(--dsc-button-size);height:fit-content;align-items:center;justify-content:center;overflow:visible;text-decoration:none;text-align:inherit;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;cursor:pointer;display:inline-flex}._button_12ruc_1:not([data-size]){font-size:inherit}._button_12ruc_1:is(:disabled,[aria-disabled=true]){cursor:not-allowed;opacity:.75;pointer-events:none}._button_12ruc_1:is(:disabled,[aria-disabled=true])[aria-busy=true]{opacity:1;cursor:progress}@media (hover: hover) and (pointer: fine){._button_12ruc_1:where(:not(:disabled,[aria-disabled=true],[aria-busy=true])):hover{background:var(--dsc-button-background--hover);color:var(--dsc-button-color--hover)}}._button_12ruc_1:where(:not(:disabled,[aria-disabled=true],[aria-busy=true])):active{background:var(--dsc-button-background--active)}._button_12ruc_1[data-variant=solid]{--dsc-button-background--active: var(--ds-color-base-active);--dsc-button-background--hover: var(--ds-color-base-hover);--dsc-button-background: var(--ds-color-base-default);--dsc-button-color: var(--ds-color-base-contrast-default);--dsc-button-color--hover: var(--ds-color-base-contrast-default);--dsc-button-border-color: var(--ds-color-base-default)}._button_12ruc_1[data-variant=outline],._button_12ruc_1[data-variant=dotted],._button_12ruc_1[data-variant=text]{--dsc-button-background: transparent;--dsc-button-background--active: var(--ds-color-surface-active);--dsc-button-background--hover: var(--ds-color-surface-hover);--dsc-button-color: var(--ds-color-text-subtle);--dsc-button-color--hover: var(--ds-color-text-default)}._button_12ruc_1[data-variant=outline],._button_12ruc_1[data-variant=dotted]{--dsc-button-border-color: var(--ds-color-border-strong)}._button_12ruc_1[data-variant=dotted]{--dsc-button-border-style: dotted}._button_12ruc_1[data-variant=tinted]{background-color:var(--ds-color-surface-tinted);border-color:var(--ds-color-surface-tinted);border-color:var(--ds-color-base-default);color:var(--ds-color-base-surface-tinted)}._button_12ruc_1[data-variant=tinted]:hover{background-color:var(--ds-color-surface-hover)}._button_12ruc_1[data-variant=tinted]:active{background-color:var(--ds-color-surface-active)}._button_12ruc_1[data-rounded=true]{border-radius:50%}._button_12ruc_1:focus-visible{box-shadow:var(--_ds--focus, var(--dsc-focus-boxShadow));outline:var(--_ds--focus, var(--dsc-focus-outline));outline-offset:var(--_ds--focus, var(--ds-border-width-focus))}._button_12ruc_1:focus-visible *{--_ds--focus: }
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as f } from "react/jsx-runtime";
|
|
2
2
|
import { c as p } from "../../index-L8X2o7IH.js";
|
|
3
|
-
import '../../assets/ButtonBase.css';const x = "
|
|
3
|
+
import '../../assets/ButtonBase.css';const x = "_button_12ruc_1", _ = {
|
|
4
4
|
button: x
|
|
5
|
-
},
|
|
5
|
+
}, j = ({
|
|
6
6
|
as: a,
|
|
7
7
|
color: o,
|
|
8
8
|
className: e,
|
|
@@ -13,29 +13,29 @@ import '../../assets/ButtonBase.css';const x = "_button_1q3ym_1", _ = {
|
|
|
13
13
|
selected: d,
|
|
14
14
|
variant: c,
|
|
15
15
|
reverse: l = !1,
|
|
16
|
-
rounded:
|
|
17
|
-
tabIndex:
|
|
18
|
-
dataTestId:
|
|
16
|
+
rounded: u = !1,
|
|
17
|
+
tabIndex: i = 0,
|
|
18
|
+
dataTestId: m,
|
|
19
19
|
...b
|
|
20
20
|
}) => /* @__PURE__ */ f(
|
|
21
21
|
a || "button",
|
|
22
22
|
{
|
|
23
|
-
tabIndex:
|
|
23
|
+
tabIndex: i,
|
|
24
24
|
"data-size": r,
|
|
25
25
|
"data-color": o,
|
|
26
26
|
"data-variant": c,
|
|
27
27
|
"data-reverse": l,
|
|
28
|
-
"data-rounded":
|
|
28
|
+
"data-rounded": u,
|
|
29
29
|
"data-selected": d,
|
|
30
30
|
"aria-disabled": t,
|
|
31
31
|
disabled: t,
|
|
32
32
|
className: p(_.button, e),
|
|
33
33
|
"aria-label": n,
|
|
34
|
-
"data-testid":
|
|
34
|
+
"data-testid": m,
|
|
35
35
|
...b,
|
|
36
36
|
children: s
|
|
37
37
|
}
|
|
38
38
|
);
|
|
39
39
|
export {
|
|
40
|
-
|
|
40
|
+
j as ButtonBase
|
|
41
41
|
};
|
|
@@ -1,71 +1,73 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { c as
|
|
1
|
+
import { jsxs as B, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { c as h } from "../../index-L8X2o7IH.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import { ButtonBase as s } from "./ButtonBase.js";
|
|
5
|
-
import { ButtonLabel as
|
|
6
|
-
import { ButtonIcon as
|
|
5
|
+
import { ButtonLabel as x } from "./ButtonLabel.js";
|
|
6
|
+
import { ButtonIcon as N } from "./ButtonIcon.js";
|
|
7
7
|
import "../RootProvider/RootProvider.js";
|
|
8
8
|
import "../Snackbar/useSnackbar.js";
|
|
9
|
-
import '../../assets/ComboButton.css';const
|
|
10
|
-
button:
|
|
11
|
-
divider:
|
|
12
|
-
primary:
|
|
13
|
-
secondary:
|
|
14
|
-
},
|
|
9
|
+
import '../../assets/ComboButton.css';const C = "_button_kd2d3_1", j = "_divider_kd2d3_7", L = "_primary_kd2d3_14", I = "_secondary_kd2d3_15", r = {
|
|
10
|
+
button: C,
|
|
11
|
+
divider: j,
|
|
12
|
+
primary: L,
|
|
13
|
+
secondary: I
|
|
14
|
+
}, G = ({
|
|
15
15
|
variant: n = "solid",
|
|
16
|
-
color:
|
|
16
|
+
color: e,
|
|
17
17
|
size: t,
|
|
18
|
-
selected:
|
|
18
|
+
selected: c = !1,
|
|
19
19
|
icon: i,
|
|
20
20
|
iconSize: m,
|
|
21
|
-
iconAltText:
|
|
22
|
-
label:
|
|
23
|
-
labelSize:
|
|
21
|
+
iconAltText: l,
|
|
22
|
+
label: p,
|
|
23
|
+
labelSize: a,
|
|
24
24
|
children: _,
|
|
25
25
|
className: u,
|
|
26
26
|
ariaLabel: y,
|
|
27
|
-
onLabelClick:
|
|
28
|
-
onIconClick:
|
|
27
|
+
onLabelClick: f,
|
|
28
|
+
onIconClick: b,
|
|
29
29
|
dataTestId: k,
|
|
30
|
-
tabIndex:
|
|
31
|
-
|
|
30
|
+
tabIndex: d = 0,
|
|
31
|
+
disabled: v = !1
|
|
32
|
+
}) => /* @__PURE__ */ B(
|
|
32
33
|
s,
|
|
33
34
|
{
|
|
34
35
|
as: "div",
|
|
35
36
|
size: t,
|
|
36
37
|
variant: n,
|
|
37
|
-
color:
|
|
38
|
-
selected:
|
|
39
|
-
className:
|
|
38
|
+
color: e,
|
|
39
|
+
selected: c,
|
|
40
|
+
className: h(r.button, u),
|
|
40
41
|
tabIndex: -1,
|
|
42
|
+
disabled: v,
|
|
41
43
|
children: [
|
|
42
44
|
/* @__PURE__ */ o(
|
|
43
45
|
s,
|
|
44
46
|
{
|
|
45
47
|
ariaLabel: y,
|
|
46
48
|
size: t,
|
|
47
|
-
onClick:
|
|
49
|
+
onClick: f,
|
|
48
50
|
className: r.primary,
|
|
49
51
|
dataTestId: k,
|
|
50
|
-
tabIndex:
|
|
51
|
-
children: /* @__PURE__ */ o(
|
|
52
|
+
tabIndex: d,
|
|
53
|
+
children: /* @__PURE__ */ o(x, { size: a, children: _ || p })
|
|
52
54
|
}
|
|
53
55
|
),
|
|
54
56
|
/* @__PURE__ */ o("span", { "data-size": t, className: r.divider }),
|
|
55
57
|
/* @__PURE__ */ o(
|
|
56
58
|
s,
|
|
57
59
|
{
|
|
58
|
-
onClick:
|
|
60
|
+
onClick: b,
|
|
59
61
|
className: r.secondary,
|
|
60
|
-
ariaLabel:
|
|
61
|
-
size: m ||
|
|
62
|
-
tabIndex:
|
|
63
|
-
children: i && /* @__PURE__ */ o(
|
|
62
|
+
ariaLabel: l,
|
|
63
|
+
size: m || a,
|
|
64
|
+
tabIndex: d,
|
|
65
|
+
children: i && /* @__PURE__ */ o(N, { icon: i })
|
|
64
66
|
}
|
|
65
67
|
)
|
|
66
68
|
]
|
|
67
69
|
}
|
|
68
70
|
);
|
|
69
71
|
export {
|
|
70
|
-
|
|
72
|
+
G as ComboButton
|
|
71
73
|
};
|
|
@@ -1,54 +1,58 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import { useMemo as
|
|
2
|
+
import { jsxs as b, jsx as t } from "react/jsx-runtime";
|
|
3
|
+
import { useMemo as d } from "react";
|
|
4
4
|
import "../../index-L8X2o7IH.js";
|
|
5
|
-
import { Button as
|
|
5
|
+
import { Button as g } from "../Button/Button.js";
|
|
6
6
|
import { ComboButton as C } from "../Button/ComboButton.js";
|
|
7
7
|
import { useRootContext as v } from "../RootProvider/RootProvider.js";
|
|
8
|
-
import { DropdownBase as
|
|
9
|
-
import { Menu as
|
|
8
|
+
import { DropdownBase as x } from "../Dropdown/DropdownBase.js";
|
|
9
|
+
import { Menu as B } from "../Menu/Menu.js";
|
|
10
10
|
import "../Snackbar/useSnackbar.js";
|
|
11
|
-
import { S as
|
|
12
|
-
import '../../assets/DialogActions.css';const
|
|
13
|
-
action:
|
|
11
|
+
import { S as _, a as k } from "../../ChevronUp-_BBfEirx.js";
|
|
12
|
+
import '../../assets/DialogActions.css';const D = "_action_1n930_1", I = "_comboButton_1n930_8", a = {
|
|
13
|
+
action: D,
|
|
14
14
|
comboButton: I
|
|
15
|
-
},
|
|
16
|
-
const { currentId: m, closeAll:
|
|
17
|
-
const
|
|
18
|
-
return
|
|
19
|
-
}), [
|
|
15
|
+
}, U = ({ items: i, maxItems: s = 2, id: l = "dialog-actions", expandAltLabel: p }) => {
|
|
16
|
+
const { currentId: m, closeAll: u, toggleId: f } = v(), e = m === l, r = d(() => (i || []).filter((o) => !o.hidden).sort((o, n) => {
|
|
17
|
+
const c = ["primary", "secondary", "tertiary"];
|
|
18
|
+
return c.indexOf(o == null ? void 0 : o.priority) - c.indexOf(n == null ? void 0 : n.priority);
|
|
19
|
+
}), [i]), h = d(() => {
|
|
20
|
+
var o;
|
|
21
|
+
return (o = i.find((n) => n.priority === "primary")) == null ? void 0 : o.disabled;
|
|
22
|
+
}, [i]);
|
|
20
23
|
if (!r.length || s <= 0)
|
|
21
24
|
return null;
|
|
22
25
|
if (r.length > s) {
|
|
23
|
-
const
|
|
24
|
-
id:
|
|
25
|
-
title:
|
|
26
|
-
onClick:
|
|
27
|
-
group:
|
|
28
|
-
hidden:
|
|
26
|
+
const o = r.slice(1).map((n) => ({
|
|
27
|
+
id: n.id,
|
|
28
|
+
title: n.label,
|
|
29
|
+
onClick: n.onClick,
|
|
30
|
+
group: n.priority,
|
|
31
|
+
hidden: n.hidden
|
|
29
32
|
}));
|
|
30
|
-
return /* @__PURE__ */
|
|
33
|
+
return /* @__PURE__ */ b("section", { className: a.comboButton, children: [
|
|
31
34
|
/* @__PURE__ */ t(
|
|
32
35
|
C,
|
|
33
36
|
{
|
|
34
37
|
variant: "solid",
|
|
35
|
-
icon:
|
|
38
|
+
icon: e ? _ : k,
|
|
36
39
|
size: "md",
|
|
37
|
-
onIconClick: () =>
|
|
40
|
+
onIconClick: () => f(l),
|
|
38
41
|
onLabelClick: r[0].onClick,
|
|
39
|
-
ariaLabel:
|
|
40
|
-
iconAltText:
|
|
42
|
+
ariaLabel: e ? "chevron up icon" : "chevron down icon",
|
|
43
|
+
iconAltText: p,
|
|
44
|
+
disabled: h,
|
|
41
45
|
children: r[0].label
|
|
42
46
|
}
|
|
43
47
|
),
|
|
44
|
-
|
|
48
|
+
e && /* @__PURE__ */ t(x, { open: e, onClose: u, children: /* @__PURE__ */ t(B, { items: o }) })
|
|
45
49
|
] });
|
|
46
50
|
}
|
|
47
|
-
return /* @__PURE__ */ t("section", { className: a.action, children: r.map((
|
|
48
|
-
const { priority:
|
|
49
|
-
return /* @__PURE__ */ t(
|
|
51
|
+
return /* @__PURE__ */ t("section", { className: a.action, children: r.map((o, n) => {
|
|
52
|
+
const { priority: c, id: w, ...y } = o;
|
|
53
|
+
return /* @__PURE__ */ t(g, { variant: c === "primary" ? "solid" : "outline", size: "md", ...y, children: o.label }, "button-" + n);
|
|
50
54
|
}) });
|
|
51
55
|
};
|
|
52
56
|
export {
|
|
53
|
-
|
|
57
|
+
U as DialogActions
|
|
54
58
|
};
|
|
@@ -13,4 +13,4 @@ export interface ComboButtonProps extends Omit<ButtonBaseProps, 'onClick'> {
|
|
|
13
13
|
dataTestId?: string;
|
|
14
14
|
tabIndex?: number;
|
|
15
15
|
}
|
|
16
|
-
export declare const ComboButton: ({ variant, color, size, selected, icon, iconSize, iconAltText, label, labelSize, children, className, ariaLabel, onLabelClick, onIconClick, dataTestId, tabIndex, }: ComboButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare const ComboButton: ({ variant, color, size, selected, icon, iconSize, iconAltText, label, labelSize, children, className, ariaLabel, onLabelClick, onIconClick, dataTestId, tabIndex, disabled, }: ComboButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -15,6 +15,7 @@ export * from './Dropdown';
|
|
|
15
15
|
export * from './Footer';
|
|
16
16
|
export * from './GlobalMenu_old';
|
|
17
17
|
export * from './Header';
|
|
18
|
+
export type { GlobalHeaderProps } from './GlobalHeader';
|
|
18
19
|
export * from './Icon';
|
|
19
20
|
export * from './Layout';
|
|
20
21
|
export * from './LayoutAction';
|