@altinn/altinn-components 0.41.7 → 0.42.1

package/dist/assets/FloatingDropdown.css

@@ -0,0 +1 @@
+._container_1t2id_1{position:fixed;bottom:0;right:0;margin:1rem;z-index:1000;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}._button_1t2id_13{--dsc-button-size: var(--ds-size-14);width:var(--ds-button-size);height:var(--ds-button-size);border-radius:50%;flex-shrink:0}._dropdown_1t2id_21{display:flex;flex-direction:column;gap:0;border-radius:.5rem;padding:.5rem;box-shadow:var(--ds-shadow-md);min-width:16rem;overflow:hidden;color:#fff}._dropdown_1t2id_21[data-color=company]{background-color:var(--ds-color-company-base-default)}._dropdown_1t2id_21[data-color=person]{background-color:var(--ds-color-person-base-default)}._dropdown_1t2id_21[data-color=neutral]{background-color:var(--ds-color-neutral-base-default)}._dropdownItem_1t2id_45{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:transparent;border:none;cursor:pointer;text-align:left;color:inherit;border-radius:.25rem;transition:background-color .2s ease;font-size:1rem;font-weight:400;line-height:1.5}._dropdownItem_1t2id_45:hover{background-color:#ffffff1a}._dropdownItem_1t2id_45:focus-visible{outline:2px solid currentColor;outline-offset:-2px}._itemTitle_1t2id_71{flex:1;white-space:nowrap}

package/dist/components/Dropdown/FloatingDropdown.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { useState as k, useRef as N } from "react";
+import { useClickOutside as T } from "../../hooks/useClickOutside.js";
+import { useEscapeKey as g } from "../../hooks/useEscapeKey.js";
+import { ButtonBase as x } from "../Button/ButtonBase.js";
+import "../../index-L8X2o7IH.js";
+import { ButtonIcon as y } from "../Button/ButtonIcon.js";
+import { Icon as v } from "../Icon/Icon.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/FloatingDropdown.css';const B = "_container_1t2id_1", j = "_button_1t2id_13", z = "_dropdown_1t2id_21", E = "_dropdownItem_1t2id_45", O = "_itemTitle_1t2id_71", n = {
+  container: B,
+  button: j,
+  dropdown: z,
+  dropdownItem: E,
+  itemTitle: O
+}, L = ({
+  variant: p = "solid",
+  size: u,
+  icon: _,
+  iconOpen: s,
+  iconSize: f,
+  iconAltText: w,
+  color: d = "company",
+  items: h,
+  dataTestId: I
+}) => {
+  const [e, c] = k(!1), l = N(null), b = () => {
+    c((t) => !t);
+  }, i = () => {
+    c(!1);
+  }, C = (t) => (r) => {
+    t(r), i();
+  };
+  T(l, i), g(i);
+  const a = e && s ? s : _;
+  return /* @__PURE__ */ m("div", { className: n.container, ref: l, children: [
+    e && /* @__PURE__ */ o("div", { className: n.dropdown, "data-color": d, children: h.map((t, r) => /* @__PURE__ */ m("button", { className: n.dropdownItem, onClick: C(t.onClick), type: "button", children: [
+      /* @__PURE__ */ o(v, { svgElement: t.icon, size: "md", color: "inherit" }),
+      /* @__PURE__ */ o("span", { className: n.itemTitle, children: t.title })
+    ] }, r)) }),
+    /* @__PURE__ */ o(
+      x,
+      {
+        className: n.button,
+        variant: p,
+        color: d,
+        size: u,
+        onClick: b,
+        "data-testid": I,
+        "aria-label": w,
+        "aria-expanded": e,
+        children: a && /* @__PURE__ */ o(y, { icon: a, size: f })
+      }
+    )
+  ] });
+};
+export {
+  L as FloatingDropdown
+};

package/dist/components/Dropdown/index.js

@@ -3,16 +3,18 @@ import { Backdrop as t } from "./Backdrop.js";
 import { DrawerBase as f } from "./DrawerBase.js";
 import { DrawerHeader as w } from "./DrawerHeader.js";
 import { DrawerFooter as D } from "./DrawerFooter.js";
-import { DrawerButton as B } from "./DrawerButton.js";
+import { DrawerButton as n } from "./DrawerButton.js";
 import { DrawerBody as s } from "./DrawerBody.js";
-import { DrawerOrDropdown as k } from "./DrawerOrDropdown.js";
+import { DrawerOrDropdown as c } from "./DrawerOrDropdown.js";
+import { FloatingDropdown as i } from "./FloatingDropdown.js";
 export {
   t as Backdrop,
   f as DrawerBase,
   s as DrawerBody,
-  B as DrawerButton,
+  n as DrawerButton,
   D as DrawerFooter,
   w as DrawerHeader,
-  k as DrawerOrDropdown,
-  e as DropdownBase
+  c as DrawerOrDropdown,
+  e as DropdownBase,
+  i as FloatingDropdown
 };

package/dist/components/Settings/UsedByLog.js

@@ -1,35 +1,44 @@
 "use client";
-import { jsx as o, jsxs as e } from "react/jsx-runtime";
-import { useState as B, createElement as L, Fragment as S } from "react";
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import { useState as B, createElement as L, useMemo as S, Fragment as j } from "react";
 import "../../index-L8X2o7IH.js";
 import "../RootProvider/RootProvider.js";
-import { SeenByLogButton as i } from "../Dialog/SeenByLogButton.js";
-import { Divider as u } from "../Divider/Divider.js";
-import { List as a } from "../List/List.js";
+import { SeenByLogButton as g } from "../Dialog/SeenByLogButton.js";
+import { Divider as i } from "../Divider/Divider.js";
+import { List as m } from "../List/List.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as j } from "../Page/Flex.js";
+import { Flex as k } from "../Page/Flex.js";
 import { Section as f } from "../Page/Section.js";
 import { UsedByLogItem as h } from "./UsedByLogItem.js";
-const w = ({
-  collapsible: d = !0,
+const q = ({
+  collapsible: a = !0,
   expanded: l,
   title: c,
   items: r,
   size: p = "sm",
   endUserLabel: t
 }) => {
-  const [g, m] = B(l || !d && !0), x = () => {
-    m((n) => !n);
+  const [d, v] = B(l || !a && !0), x = () => {
+    v((o) => !o);
   };
-  return (r == null ? void 0 : r.length) === 1 ? /* @__PURE__ */ o(f, { spacing: 1, children: /* @__PURE__ */ o(a, { size: p, spacing: 1, children: r == null ? void 0 : r.map((n) => /* @__PURE__ */ L(h, { ...n, key: n.id, size: p, endUserLabel: t })) }) }) : /* @__PURE__ */ e(f, { spacing: 1, children: [
-    c && /* @__PURE__ */ o(j, { children: d ? /* @__PURE__ */ o(i, { icon: { items: r }, as: "button", onClick: x, children: c }) : /* @__PURE__ */ o(i, { icon: { items: r }, as: "div", children: c }) }),
-    c && g && /* @__PURE__ */ o(u, {}),
-    g && /* @__PURE__ */ o(a, { size: p, spacing: 1, children: r == null ? void 0 : r.map((n, y) => /* @__PURE__ */ e(S, { children: [
-      y > 0 && /* @__PURE__ */ o(u, {}),
-      /* @__PURE__ */ o(h, { ...n, size: p, endUserLabel: t })
-    ] }, n.id)) })
+  if ((r == null ? void 0 : r.length) === 1)
+    return /* @__PURE__ */ n(f, { spacing: 1, children: /* @__PURE__ */ n(m, { size: p, spacing: 1, children: r == null ? void 0 : r.map((o) => /* @__PURE__ */ L(h, { ...o, key: o.id, size: p, endUserLabel: t })) }) });
+  const e = S(
+    () => r.map((o) => ({
+      ...o,
+      ...o.avatar
+    })),
+    [r]
+  );
+  return /* @__PURE__ */ u(f, { spacing: 1, children: [
+    c && /* @__PURE__ */ n(k, { children: a ? /* @__PURE__ */ n(g, { icon: { items: e }, as: "button", onClick: x, children: c }) : /* @__PURE__ */ n(g, { icon: { items: e }, as: "div", children: c }) }),
+    c && d && /* @__PURE__ */ n(i, {}),
+    d && /* @__PURE__ */ n(m, { size: p, spacing: 1, children: r == null ? void 0 : r.map((o, y) => /* @__PURE__ */ u(j, { children: [
+      y > 0 && /* @__PURE__ */ n(i, {}),
+      /* @__PURE__ */ n(h, { ...o, size: p, endUserLabel: t })
+    ] }, o.id)) })
   ] });
 };
 export {
-  w as UsedByLog
+  q as UsedByLog
 };

package/dist/components/Settings/UsedByLogItem.js

@@ -1,22 +1,23 @@
-import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { jsxs as r, jsx as s } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { Badge as s } from "../Badge/Badge.js";
-import { Byline as p } from "../Byline/Byline.js";
+import { Badge as p } from "../Badge/Badge.js";
+import { Byline as c } from "../Byline/Byline.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as c } from "../Page/Flex.js";
-const u = ({
+import { Flex as g } from "../Page/Flex.js";
+const v = ({
   type: e,
   name: t,
   description: o,
   isEndUser: m,
   endUserLabel: a,
-  size: l = "sm"
+  avatar: l,
+  size: n = "sm"
 }) => {
   const i = m && { label: a };
-  return /* @__PURE__ */ r(c, { align: "center", spacing: 2, as: "li", children: [
-    /* @__PURE__ */ r(p, { size: l, avatar: { name: t, type: e }, children: [
+  return /* @__PURE__ */ r(g, { align: "center", spacing: 2, as: "li", children: [
+    /* @__PURE__ */ r(c, { size: n, avatar: { name: t, type: e, ...l }, children: [
       /* @__PURE__ */ r("strong", { children: [
         t,
         o && NaN
@@ -24,9 +25,9 @@ const u = ({
       " ",
       o
     ] }),
-    i && /* @__PURE__ */ n(s, { variant: "subtle", ...i })
+    i && /* @__PURE__ */ s(p, { variant: "subtle", ...i })
   ] });
 };
 export {
-  u as UsedByLogItem
+  v as UsedByLogItem
 };