@altinn/altinn-components 0.47.1 → 0.47.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.
@@ -1,27 +1,28 @@
1
1
  "use client";
2
2
  import { jsx as l } from "react/jsx-runtime";
3
3
  import { c } from "../../index-L8X2o7IH.js";
4
- import { useMemo as f } from "react";
5
- import { Avatar as h } from "./Avatar.js";
6
- import '../../assets/AvatarGroup.css';const A = "_group_1ts6c_1", _ = "_item_1ts6c_10", t = {
7
- group: A,
8
- item: _
9
- }, L = (o) => typeof o == "object" && o !== null && "items" in o, N = ({
4
+ import { useMemo as h } from "react";
5
+ import { Avatar as A } from "./Avatar.js";
6
+ import '../../assets/AvatarGroup.css';const _ = "_group_1ts6c_1", y = "_item_1ts6c_10", t = {
7
+ group: _,
8
+ item: y
9
+ }, N = (o) => typeof o == "object" && o !== null && "items" in o, P = ({
10
10
  items: o = [],
11
11
  maxItemsCount: i = 4,
12
12
  defaultType: r,
13
13
  size: u,
14
14
  className: m,
15
- style: p
15
+ style: p,
16
+ maxItemsCountReachedLabel: g
16
17
  }) => {
17
- const s = f(() => o.slice(0, i).reverse(), [o, i]);
18
+ const s = h(() => o.slice(0, i).reverse(), [o, i]);
18
19
  return o.length === 0 ? /* @__PURE__ */ l("div", { className: t.avatarGroup }) : /* @__PURE__ */ l("ul", { className: c(t.group, m), "data-size": u, "data-count": s == null ? void 0 : s.length, style: p, children: s.map((e, n) => {
19
- const g = n === i - 1, d = e.customLabel || g ? o.length.toString() : void 0;
20
+ const d = n === i - 1, f = e.customLabel || d ? g || o.length.toString() : void 0;
20
21
  return /* @__PURE__ */ l("li", { className: c(t.item), children: /* @__PURE__ */ l(
21
- h,
22
+ A,
22
23
  {
23
24
  name: e.name,
24
- customLabel: d,
25
+ customLabel: f,
25
26
  imageUrl: e.imageUrl,
26
27
  imageUrlAlt: e.imageUrlAlt,
27
28
  type: (e == null ? void 0 : e.type) || r,
@@ -34,6 +35,6 @@ import '../../assets/AvatarGroup.css';const A = "_group_1ts6c_1", _ = "_item_1ts
34
35
  }) });
35
36
  };
36
37
  export {
37
- N as AvatarGroup,
38
- L as isAvatarGroupProps
38
+ P as AvatarGroup,
39
+ N as isAvatarGroupProps
39
40
  };
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import { jsx as a, jsxs as O } from "react/jsx-runtime";
2
+ import { jsx as o, jsxs as O } from "react/jsx-runtime";
3
3
  import { c as g } from "../../index-L8X2o7IH.js";
4
4
  import s, { forwardRef as v, useState as z, useEffect as j } from "react";
5
5
  import { AccountMenu as C } from "../Account/AccountMenu.js";
@@ -10,42 +10,42 @@ import { SearchField as F } from "../Forms/SearchField.js";
10
10
  import { S as N } from "../../Spinner-BDXfwXIh.js";
11
11
  import { H as R } from "../../Heading-By5DKz2H.js";
12
12
  import { u as _ } from "../../useId-BVFxCjkq.js";
13
- import '../../assets/AccountSelector.css';var M = function(e, i) {
13
+ import '../../assets/AccountSelector.css';var M = function(e, l) {
14
14
  var r = {};
15
- for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && i.indexOf(t) < 0 && (r[t] = e[t]);
15
+ for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && l.indexOf(t) < 0 && (r[t] = e[t]);
16
16
  if (e != null && typeof Object.getOwnPropertySymbols == "function")
17
17
  for (var n = 0, t = Object.getOwnPropertySymbols(e); n < t.length; n++)
18
- i.indexOf(t[n]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[n]) && (r[t[n]] = e[t[n]]);
18
+ l.indexOf(t[n]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[n]) && (r[t[n]] = e[t[n]]);
19
19
  return r;
20
20
  };
21
- const P = v((e, i) => {
21
+ const P = v((e, l) => {
22
22
  var { title: r, titleId: t } = e, n = M(e, ["title", "titleId"]);
23
- let l = _();
24
- return l = r ? t || "title-" + l : void 0, s.createElement(
23
+ let i = _();
24
+ return i = r ? t || "title-" + i : void 0, s.createElement(
25
25
  "svg",
26
- Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: i, "aria-labelledby": l }, n),
27
- r ? s.createElement("title", { id: l }, r) : null,
26
+ Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: l, "aria-labelledby": i }, n),
27
+ r ? s.createElement("title", { id: i }, r) : null,
28
28
  s.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M3.75 12a8.25 8.25 0 1 1 16.5 0 8.25 8.25 0 0 1-16.5 0M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25m4.03 9.28-3.5 3.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 0 1 .53-1.28h7a.75.75 0 0 1 .53 1.28m-2.34.22h-3.38L12 13.44z", clipRule: "evenodd" })
29
29
  );
30
30
  });
31
- var A = function(e, i) {
31
+ var A = function(e, l) {
32
32
  var r = {};
33
- for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && i.indexOf(t) < 0 && (r[t] = e[t]);
33
+ for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && l.indexOf(t) < 0 && (r[t] = e[t]);
34
34
  if (e != null && typeof Object.getOwnPropertySymbols == "function")
35
35
  for (var n = 0, t = Object.getOwnPropertySymbols(e); n < t.length; n++)
36
- i.indexOf(t[n]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[n]) && (r[t[n]] = e[t[n]]);
36
+ l.indexOf(t[n]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[n]) && (r[t[n]] = e[t[n]]);
37
37
  return r;
38
38
  };
39
- const T = v((e, i) => {
39
+ const T = v((e, l) => {
40
40
  var { title: r, titleId: t } = e, n = A(e, ["title", "titleId"]);
41
- let l = _();
42
- return l = r ? t || "title-" + l : void 0, s.createElement(
41
+ let i = _();
42
+ return i = r ? t || "title-" + i : void 0, s.createElement(
43
43
  "svg",
44
- Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: i, "aria-labelledby": l }, n),
45
- r ? s.createElement("title", { id: l }, r) : null,
44
+ Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: l, "aria-labelledby": i }, n),
45
+ r ? s.createElement("title", { id: i }, r) : null,
46
46
  s.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M3.75 12a8.25 8.25 0 1 1 16.5 0 8.25 8.25 0 0 1-16.5 0M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25m.53 6.72a.75.75 0 0 0-1.06 0l-3.5 3.5a.75.75 0 0 0 .53 1.28h7a.75.75 0 0 0 .53-1.28zM12 10.56l1.69 1.69h-3.38z", clipRule: "evenodd" })
47
47
  );
48
- }), H = "_accountSelector_1f74n_1", V = "_heading_1f74n_11", B = "_searchSection_1f74n_17", D = "_searchField_1f74n_22", K = "_accountMenu_1f74n_26", L = "_fullScreen_1f74n_34", U = "_virtualized_1f74n_38", W = "_btnIcon_1f74n_42", $ = "_spinner_1f74n_46", c = {
48
+ }), H = "_accountSelector_1f74n_1", V = "_heading_1f74n_11", B = "_searchSection_1f74n_17", D = "_searchField_1f74n_22", K = "_accountMenu_1f74n_26", L = "_fullScreen_1f74n_34", U = "_virtualized_1f74n_38", W = "_btnIcon_1f74n_42", $ = "_spinner_1f74n_46", a = {
49
49
  accountSelector: H,
50
50
  heading: V,
51
51
  searchSection: B,
@@ -55,57 +55,57 @@ const T = v((e, i) => {
55
55
  virtualized: U,
56
56
  btnIcon: W,
57
57
  spinner: $
58
- }, ie = ({ accountMenu: e, forceOpenFullScreen: i, className: r, loading: t }) => {
59
- const { currentId: n, openId: l, toggleId: u, languageCode: S } = k(), o = n === "accountFullscreen", [f, m] = z(""), { minimize: b, fullscreen: y, searchText: h, heading: w } = q(S);
58
+ }, ie = ({ accountMenu: e, forceOpenFullScreen: l, className: r, loading: t }) => {
59
+ const { currentId: n, openId: i, toggleId: d, languageCode: S } = k(), c = n === "accountFullscreen", [f, m] = z(""), { minimize: b, fullscreen: y, searchText: h, heading: w } = q(S);
60
60
  j(() => {
61
- i === !0 && !o && l("accountFullscreen");
62
- }, [i, o, l]);
61
+ l === !0 && !c ? i("accountFullscreen") : l === !1 && c && d("accountFullscreen");
62
+ }, [l, c, i, d]);
63
63
  const x = () => {
64
- l(o ? "account" : "accountFullscreen");
65
- }, I = (d) => {
64
+ i(c ? "account" : "accountFullscreen");
65
+ }, I = (u) => {
66
66
  var p;
67
- (p = e.onSelectAccount) == null || p.call(e, d), u(o ? "accountFullscreen" : "account");
67
+ (p = e.onSelectAccount) == null || p.call(e, u), d(c ? "accountFullscreen" : "account");
68
68
  };
69
- return t ? /* @__PURE__ */ a(N, { "aria-hidden": !0, "data-color": "neutral", className: c.spinner }) : /* @__PURE__ */ O("div", { className: g(r, c.accountSelector), children: [
70
- o && /* @__PURE__ */ a(R, { "data-size": "md", level: 2, className: c.heading, children: w }),
71
- /* @__PURE__ */ a("div", { className: c.searchSection, children: /* @__PURE__ */ a(
69
+ return t ? /* @__PURE__ */ o(N, { "aria-hidden": !0, "data-color": "neutral", className: a.spinner }) : /* @__PURE__ */ O("div", { className: g(r, a.accountSelector), children: [
70
+ c && /* @__PURE__ */ o(R, { "data-size": "md", level: 2, className: a.heading, children: w }),
71
+ /* @__PURE__ */ o("div", { className: a.searchSection, children: /* @__PURE__ */ o(
72
72
  F,
73
73
  {
74
74
  name: h,
75
75
  placeholder: h,
76
76
  value: f,
77
- onChange: (d) => m(d.target.value),
77
+ onChange: (u) => m(u.target.value),
78
78
  onClear: () => m(""),
79
- className: c.searchField
79
+ className: a.searchField
80
80
  }
81
81
  ) }),
82
- /* @__PURE__ */ a(
82
+ /* @__PURE__ */ o(
83
83
  "div",
84
84
  {
85
85
  className: g(
86
- c.accountMenu,
87
- o && c.fullScreen,
88
- e.isVirtualized && c.virtualized
86
+ a.accountMenu,
87
+ c && a.fullScreen,
88
+ e.isVirtualized && a.virtualized
89
89
  ),
90
- children: /* @__PURE__ */ a(
90
+ children: /* @__PURE__ */ o(
91
91
  C,
92
92
  {
93
93
  ...e,
94
94
  onSelectAccount: I,
95
95
  keyboardEvents: !1,
96
96
  search: { hidden: !0, name: "", value: f },
97
- scrollRefStyles: !o && e.isVirtualized ? { maxHeight: "calc(40vh)" } : void 0
97
+ scrollRefStyles: !c && e.isVirtualized ? { maxHeight: "calc(40vh)" } : void 0
98
98
  }
99
99
  )
100
100
  }
101
101
  ),
102
- i !== !0 && /* @__PURE__ */ a(
102
+ l !== !0 && /* @__PURE__ */ o(
103
103
  E,
104
104
  {
105
- icon: o ? /* @__PURE__ */ a(T, { className: c.btnIcon, "aria-hidden": "true" }) : /* @__PURE__ */ a(P, { className: c.btnIcon, "aria-hidden": "true" }),
105
+ icon: c ? /* @__PURE__ */ o(T, { className: a.btnIcon, "aria-hidden": "true" }) : /* @__PURE__ */ o(P, { className: a.btnIcon, "aria-hidden": "true" }),
106
106
  variant: "text",
107
107
  onClick: x,
108
- children: o ? b : y
108
+ children: c ? b : y
109
109
  }
110
110
  )
111
111
  ] });
@@ -16,9 +16,11 @@ export interface AvatarGroupProps {
16
16
  className?: string;
17
17
  /** Custom styles. */
18
18
  style?: CSSProperties;
19
+ /** Custom Label for items counts reached **/
20
+ maxItemsCountReachedLabel?: string;
19
21
  }
20
22
  export declare const isAvatarGroupProps: (icon: unknown) => icon is AvatarGroupProps;
21
23
  /**
22
24
  * Avatar group component for displaying multiple avatars as a group.
23
25
  */
24
- export declare const AvatarGroup: ({ items, maxItemsCount, defaultType, size, className, style, }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
26
+ export declare const AvatarGroup: ({ items, maxItemsCount, defaultType, size, className, style, maxItemsCountReachedLabel, }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
2
2
  import { AvatarGroupProps } from '..';
3
3
  declare const meta: {
4
4
  title: string;
5
- component: ({ items, maxItemsCount, defaultType, size, className, style, }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
5
+ component: ({ items, maxItemsCount, defaultType, size, className, style, maxItemsCountReachedLabel, }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
6
6
  tags: string[];
7
7
  parameters: {
8
8
  layout: string;
@@ -18,4 +18,5 @@ type Story = StoryObj<typeof meta>;
18
18
  export declare const People: Story;
19
19
  export declare const Companies: Story;
20
20
  export declare const CompanyAndPerson: Story;
21
+ export declare const CustomLabel: (args: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
21
22
  export declare const MaxItemsCount: (args: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@altinn/altinn-components",
3
- "version": "0.47.1",
3
+ "version": "0.47.3",
4
4
  "main": "dist/index.js",
5
5
  "files": [
6
6
  "dist/",