@altinn/altinn-components 0.36.2 → 0.36.4
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/ListItemHeader.css +1 -1
- package/dist/assets/MenuItemsVirtual.css +1 -1
- package/dist/components/List/ListItemHeader.js +28 -28
- package/dist/components/Menu/MenuItemsVirtual.js +15 -15
- package/dist/types/lib/components/Account/AccountMenu.stories.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._header_1v4fh_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_1v4fh_1[data-interactive=true]{cursor:pointer}._header_1v4fh_1[data-interactive=true]:hover{background:var(--dsc-item-background--hover)}._header_1v4fh_1[data-interactive=true]:hover ._label_1v4fh_27 h2{text-decoration:underline}._header_1v4fh_1[data-has-active-child=true]{background-color:var(--ds-color-background-tinted)}._label_1v4fh_27{flex-grow:1}._link_1v4fh_39{outline:none}._badge_1v4fh_43{pointer-events:none}._linkIcon_1v4fh_47{flex-shrink:0;min-width:2em;min-height:2em;display:flex;align-items:center;justify-content:center;pointer-events:none}._linkFocus_1v4fh_57{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}._link_1v4fh_39:focus-visible ._linkFocus_1v4fh_57{box-shadow:var(--_ds--focus, var(--dsc-focus-boxShadow));outline:var(--_ds--focus, var(--dsc-focus-outline))}._link_1v4fh_39:focus-visible ._linkFocus_1v4fh_57 *{--_ds--focus: }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._virtualScrollRef_15wg7_1{max-height:400px;overflow-y:auto}._virtualMenuListItem_15wg7_6{position:absolute;top:0;left:0;width:100%}._virtualMenuListItem_15wg7_6>*{margin:0}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as i, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { c as
|
|
3
|
-
import { useId as
|
|
4
|
-
import { Icon as
|
|
2
|
+
import { c as B } from "../../index-L8X2o7IH.js";
|
|
3
|
+
import { useId as E, isValidElement as w } from "react";
|
|
4
|
+
import { Icon as z } from "../Icon/Icon.js";
|
|
5
5
|
import { Badge as A } from "../Badge/Badge.js";
|
|
6
6
|
import "../RootProvider/RootProvider.js";
|
|
7
7
|
import { ListItemLink as D } from "./ListItemLink.js";
|
|
@@ -12,7 +12,7 @@ import { ListItemSelect as V } from "./ListItemSelect.js";
|
|
|
12
12
|
import "../Snackbar/useSnackbar.js";
|
|
13
13
|
import { S as q, a as G } from "../../ChevronUp-DR4Lz2Jb.js";
|
|
14
14
|
import { S as J } from "../../ChevronRight-BbelnTke.js";
|
|
15
|
-
import '../../assets/ListItemHeader.css';const K = "
|
|
15
|
+
import '../../assets/ListItemHeader.css';const K = "_header_1v4fh_1", M = "_label_1v4fh_27", O = "_link_1v4fh_39", P = "_badge_1v4fh_43", Q = "_linkIcon_1v4fh_47", T = "_linkFocus_1v4fh_57", t = {
|
|
16
16
|
header: K,
|
|
17
17
|
label: M,
|
|
18
18
|
link: O,
|
|
@@ -20,14 +20,14 @@ import '../../assets/ListItemHeader.css';const K = "_header_1689z_1", M = "_labe
|
|
|
20
20
|
linkIcon: Q,
|
|
21
21
|
linkFocus: T
|
|
22
22
|
}, ce = ({
|
|
23
|
-
as:
|
|
24
|
-
interactive:
|
|
25
|
-
color:
|
|
23
|
+
as: f,
|
|
24
|
+
interactive: h = !0,
|
|
25
|
+
color: p,
|
|
26
26
|
loading: o,
|
|
27
|
-
disabled:
|
|
28
|
-
collapsible:
|
|
29
|
-
linkIcon:
|
|
30
|
-
expanded:
|
|
27
|
+
disabled: v,
|
|
28
|
+
collapsible: _,
|
|
29
|
+
linkIcon: I,
|
|
30
|
+
expanded: k,
|
|
31
31
|
select: n,
|
|
32
32
|
href: u,
|
|
33
33
|
onClick: b,
|
|
@@ -35,52 +35,52 @@ import '../../assets/ListItemHeader.css';const K = "_header_1689z_1", M = "_labe
|
|
|
35
35
|
tabIndex: N,
|
|
36
36
|
size: a,
|
|
37
37
|
title: s,
|
|
38
|
-
description:
|
|
39
|
-
icon:
|
|
38
|
+
description: S,
|
|
39
|
+
icon: x,
|
|
40
40
|
active: l,
|
|
41
41
|
badge: r,
|
|
42
42
|
controls: c,
|
|
43
|
-
className:
|
|
44
|
-
children:
|
|
43
|
+
className: y,
|
|
44
|
+
children: C,
|
|
45
45
|
ariaLabel: m
|
|
46
46
|
}) => {
|
|
47
|
-
const d =
|
|
47
|
+
const d = _ ? k ? q : G : I ? J : void 0, F = () => r && !o && typeof r == "object" && "label" in r ? /* @__PURE__ */ e(A, { ...r, className: t.badge }) : w(r) ? r : null, j = m !== void 0 ? m : typeof s == "string" ? s : void 0, g = E();
|
|
48
48
|
return /* @__PURE__ */ i(
|
|
49
49
|
"div",
|
|
50
50
|
{
|
|
51
|
-
className:
|
|
52
|
-
"data-color":
|
|
53
|
-
"data-interactive":
|
|
51
|
+
className: B(t.header, y),
|
|
52
|
+
"data-color": p,
|
|
53
|
+
"data-interactive": h,
|
|
54
54
|
"data-size": a,
|
|
55
55
|
"data-has-active-child": l,
|
|
56
56
|
children: [
|
|
57
57
|
/* @__PURE__ */ i(
|
|
58
58
|
D,
|
|
59
59
|
{
|
|
60
|
-
as:
|
|
60
|
+
as: f,
|
|
61
61
|
href: u,
|
|
62
62
|
onClick: b,
|
|
63
63
|
onKeyPress: L,
|
|
64
64
|
tabIndex: N,
|
|
65
65
|
loading: o,
|
|
66
|
-
disabled:
|
|
66
|
+
disabled: v || o,
|
|
67
67
|
active: l,
|
|
68
|
-
ariaLabel:
|
|
68
|
+
ariaLabel: j,
|
|
69
69
|
className: t.link,
|
|
70
70
|
children: [
|
|
71
71
|
/* @__PURE__ */ e("div", { className: t.linkFocus, "aria-hidden": "true" }),
|
|
72
72
|
n && /* @__PURE__ */ e(V, { ...n, className: t.select }),
|
|
73
|
-
/* @__PURE__ */ e(R, { loading: o, icon:
|
|
73
|
+
/* @__PURE__ */ e(R, { loading: o, icon: x }),
|
|
74
74
|
/* @__PURE__ */ e(
|
|
75
75
|
H,
|
|
76
76
|
{
|
|
77
77
|
size: a,
|
|
78
78
|
loading: o,
|
|
79
79
|
title: s,
|
|
80
|
-
description:
|
|
81
|
-
id:
|
|
80
|
+
description: S,
|
|
81
|
+
id: g,
|
|
82
82
|
className: t.label,
|
|
83
|
-
children:
|
|
83
|
+
children: C
|
|
84
84
|
}
|
|
85
85
|
)
|
|
86
86
|
]
|
|
@@ -88,9 +88,9 @@ import '../../assets/ListItemHeader.css';const K = "_header_1689z_1", M = "_labe
|
|
|
88
88
|
),
|
|
89
89
|
/* @__PURE__ */ i(U, { className: t.controls, children: [
|
|
90
90
|
c && !o && /* @__PURE__ */ e("span", { children: c }),
|
|
91
|
-
|
|
91
|
+
F(),
|
|
92
92
|
d && /* @__PURE__ */ e("span", { className: t.linkIcon, children: /* @__PURE__ */ e(
|
|
93
|
-
|
|
93
|
+
z,
|
|
94
94
|
{
|
|
95
95
|
svgElement: d,
|
|
96
96
|
style: {
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs as v, jsx as i } from "react/jsx-runtime";
|
|
3
3
|
import { u as b } from "../../index-D-VWMqlv.js";
|
|
4
|
-
import { useRef as
|
|
4
|
+
import { useRef as g, useEffect as R } from "react";
|
|
5
5
|
import "../../index-L8X2o7IH.js";
|
|
6
|
-
import { useMenu as
|
|
6
|
+
import { useMenu as T } from "../../hooks/useMenu.js";
|
|
7
7
|
import "../RootProvider/RootProvider.js";
|
|
8
|
-
import { MenuItem as
|
|
9
|
-
import { MenuSearch as
|
|
10
|
-
import { MenuHeader as
|
|
11
|
-
import { MenuList as
|
|
8
|
+
import { MenuItem as V } from "./MenuItem.js";
|
|
9
|
+
import { MenuSearch as $ } from "./MenuSearch.js";
|
|
10
|
+
import { MenuHeader as j } from "./MenuHeader.js";
|
|
11
|
+
import { MenuList as k, MenuListItem as N } from "./MenuBase.js";
|
|
12
12
|
import "../Snackbar/useSnackbar.js";
|
|
13
|
-
import '../../assets/MenuItemsVirtual.css';const q = "
|
|
13
|
+
import '../../assets/MenuItemsVirtual.css';const q = "_virtualScrollRef_15wg7_1", B = "_virtualMenuListItem_15wg7_6", y = {
|
|
14
14
|
virtualScrollRef: q,
|
|
15
15
|
virtualMenuListItem: B
|
|
16
16
|
}, U = ({
|
|
@@ -24,12 +24,12 @@ import '../../assets/MenuItemsVirtual.css';const q = "_virtualScrollRef_14d4s_1"
|
|
|
24
24
|
defaultIconTheme: L,
|
|
25
25
|
scrollRefStyles: z
|
|
26
26
|
}) => {
|
|
27
|
-
const { menu: _ } =
|
|
27
|
+
const { menu: _ } = T({
|
|
28
28
|
items: I,
|
|
29
29
|
groups: M,
|
|
30
30
|
groupByKey: "groupId",
|
|
31
31
|
keyboardEvents: !1
|
|
32
|
-
}), m =
|
|
32
|
+
}), m = g(null), a = _.flatMap((t, e) => {
|
|
33
33
|
var u;
|
|
34
34
|
const E = (t == null ? void 0 : t.props) || {}, { title: c } = E, p = ((u = t == null ? void 0 : t.items) == null ? void 0 : u.filter((r) => {
|
|
35
35
|
var s;
|
|
@@ -55,26 +55,26 @@ import '../../assets/MenuItemsVirtual.css';const q = "_virtualScrollRef_14d4s_1"
|
|
|
55
55
|
estimateSize: () => 44,
|
|
56
56
|
getScrollElement: () => m.current
|
|
57
57
|
}), n = o.getVirtualItems();
|
|
58
|
-
return
|
|
58
|
+
return R(() => {
|
|
59
59
|
for (const t of n) {
|
|
60
60
|
const e = document.querySelector(`[data-index="${t.index}"]`);
|
|
61
61
|
e && o.measureElement(e);
|
|
62
62
|
}
|
|
63
|
-
}, [n]), /* @__PURE__ */ v(
|
|
64
|
-
l && /* @__PURE__ */ i(
|
|
63
|
+
}, [n]), /* @__PURE__ */ v(k, { children: [
|
|
64
|
+
l && /* @__PURE__ */ i($, { ...l }),
|
|
65
65
|
/* @__PURE__ */ i("div", { ref: m, className: y.virtualScrollRef, style: z, children: /* @__PURE__ */ i("div", { style: { position: "relative", height: `${o.getTotalSize()}px` }, children: n.map((t) => {
|
|
66
66
|
const e = a[t.index];
|
|
67
67
|
return e ? /* @__PURE__ */ v(
|
|
68
|
-
|
|
68
|
+
N,
|
|
69
69
|
{
|
|
70
70
|
dataIndex: t.index,
|
|
71
71
|
className: y.virtualMenuListItem,
|
|
72
72
|
style: { transform: `translateY(${t.start}px)` },
|
|
73
73
|
role: e.type === "separator" ? "separator" : void 0,
|
|
74
74
|
children: [
|
|
75
|
-
e.type === "title" && /* @__PURE__ */ i(
|
|
75
|
+
e.type === "title" && /* @__PURE__ */ i(j, { title: e.title }),
|
|
76
76
|
e.type === "item" && /* @__PURE__ */ i(
|
|
77
|
-
|
|
77
|
+
V,
|
|
78
78
|
{
|
|
79
79
|
...e.itemProps,
|
|
80
80
|
size: e.itemProps.size || x,
|
|
@@ -13,5 +13,5 @@ export declare const Default: Story;
|
|
|
13
13
|
export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;
|
|
14
14
|
export declare const WithoutSubunits: Story;
|
|
15
15
|
export declare const WithGroups: Story;
|
|
16
|
-
export declare const VirtualizedMenu:
|
|
16
|
+
export declare const VirtualizedMenu: () => import("react/jsx-runtime").JSX.Element;
|
|
17
17
|
export declare const WithToolbar: () => import("react/jsx-runtime").JSX.Element;
|