@altinn/altinn-components 0.6.1 → 0.6.3

package/dist/components/Searchbar/Searchbar.js

@@ -0,0 +1,18 @@
+import { jsxs as e, jsx as m } from "react/jsx-runtime";
+import { Autocomplete as f } from "./Autocomplete.js";
+import { SearchField as a } from "./SearchField.js";
+import { SearchbarBase as h } from "./SearchbarBase.js";
+const j = ({
+  className: t,
+  autocomplete: r,
+  expanded: o = !1,
+  onClose: i,
+  tabIndex: s,
+  ...c
+}) => /* @__PURE__ */ e(h, { className: t, expanded: o, autocomplete: !!r, children: [
+  /* @__PURE__ */ m(a, { ...c, expanded: o, onClose: i, tabIndex: s }),
+  r && /* @__PURE__ */ m(f, { ...r, expanded: o })
+] });
+export {
+  j as Searchbar
+};

package/dist/components/Searchbar/Searchbar.stories.js

@@ -0,0 +1,124 @@
+import { jsx as n, jsxs as l } from "react/jsx-runtime";
+import { useState as a } from "react";
+import { Searchbar as o } from "./Searchbar.js";
+const k = {
+  title: "Header/Searchbar",
+  component: o,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    placeholder: "Search",
+    name: "search",
+    expanded: !1
+  }
+}, S = {
+  args: {}
+}, x = {
+  args: {
+    value: "query"
+  }
+}, I = {
+  args: {
+    placeholder: "Søk i innboks",
+    expanded: !0,
+    autocomplete: {
+      groups: {
+        2: {
+          title: "2 treff i innboks"
+        }
+      },
+      items: [
+        {
+          id: "1a",
+          groupId: "1",
+          href: "#",
+          label: "Alt i innboks"
+        },
+        {
+          id: "1b",
+          groupId: "1",
+          href: "#",
+          label: "Alt i hele Altinn"
+        },
+        {
+          id: "2a",
+          groupId: "2",
+          href: "#",
+          label: "Skattemelding 2024"
+        },
+        {
+          id: "2b",
+          groupId: "2",
+          href: "#",
+          label: "Skattemelding 2025"
+        }
+      ]
+    }
+  }
+}, A = (s) => {
+  const [i, d] = a(!1), [e, c] = a(""), p = (t) => {
+    c(t.target.value);
+  }, u = () => {
+    d(!0);
+  }, g = [
+    {
+      groupId: "1",
+      id: "inbox",
+      href: "#",
+      label: e ? () => /* @__PURE__ */ l("span", { children: [
+        /* @__PURE__ */ n("mark", { children: e }),
+        " i innboksen"
+      ] }) : "Alt i innboksen"
+    },
+    {
+      groupId: "1",
+      id: "global",
+      href: "#",
+      label: e ? () => /* @__PURE__ */ l("span", { children: [
+        /* @__PURE__ */ n("mark", { children: e }),
+        " i hele Altinn"
+      ] }) : "Alt i hele Altinn"
+    }
+  ], r = e ? [
+    {
+      groupId: "2",
+      href: "http://www.altinn.no",
+      label: "Skattemelding 2024"
+    },
+    {
+      groupId: "2",
+      onClick: () => {
+        alert("Skattemelding 2025 ble trykket på");
+      },
+      label: "Skattemelding 2025"
+    }
+  ].filter((t) => t.label.toLowerCase().includes((e ?? "").toLowerCase())) : [], h = {
+    groups: {
+      2: {
+        title: `${r.length} treff i innboksen`
+      }
+    },
+    items: [...g, ...r]
+  };
+  return /* @__PURE__ */ n(
+    o,
+    {
+      ...s,
+      autocomplete: h,
+      expanded: i,
+      value: e,
+      onChange: p,
+      onFocus: u,
+      onEnter: () => {
+        alert(`Søk etter ${e}`);
+      }
+    }
+  );
+};
+export {
+  A as ControlledState,
+  S as Default,
+  I as Expanded,
+  x as Query,
+  k as default
+};

package/dist/components/Searchbar/SearchbarBase.js

@@ -0,0 +1,17 @@
+import { jsx as t } from "react/jsx-runtime";
+import { c } from "../../index-L8X2o7IH.js";
+import '../../assets/SearchbarBase.css';const o = "_searchbar_1jrvc_1", m = {
+  searchbar: o
+}, n = ({ className: a, children: r, expanded: e = !1, autocomplete: s = !1 }) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: c(m.searchbar, a),
+    "aria-expanded": e,
+    "data-autocomplete": s,
+    "data-theme": "neutral",
+    children: r
+  }
+);
+export {
+  n as SearchbarBase
+};

package/dist/components/Searchbar/index.js

@@ -0,0 +1,4 @@
+import { Searchbar as e } from "./Searchbar.js";
+export {
+  e as Searchbar
+};

package/dist/components/Snackbar/Snackbar.js

@@ -0,0 +1,11 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { SnackbarBase as i } from "./SnackbarBase.js";
+import { SnackbarLabel as t } from "./SnackbarLabel.js";
+import { SnackbarMedia as b } from "./SnackbarMedia.js";
+const S = ({ as: a = "a", color: o, message: m, icon: n, ...c }) => /* @__PURE__ */ e(i, { as: a, color: o, ...c, children: [
+  /* @__PURE__ */ r(b, { icon: n }),
+  /* @__PURE__ */ r(t, { children: m })
+] });
+export {
+  S as Snackbar
+};

package/dist/components/Snackbar/Snackbar.stories.js

@@ -0,0 +1,18 @@
+import { Snackbar as a } from "./Snackbar.js";
+const t = {
+  title: "Snackbar/Snackbar",
+  component: a,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    id: "id",
+    icon: "bell",
+    message: "Message"
+  }
+}, s = {
+  args: {}
+};
+export {
+  s as Default,
+  t as default
+};

package/dist/components/Snackbar/SnackbarBase.js

@@ -0,0 +1,23 @@
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { c as l } from "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { IconButton as d } from "../Button/IconButton.js";
+import '../../assets/SnackbarBase.css';const _ = "_item_1dlhj_1", p = "_content_1dlhj_26", x = "_action_1dlhj_34", t = {
+  item: _,
+  content: p,
+  action: x
+}, k = ({
+  as: n,
+  children: c,
+  className: s,
+  color: e,
+  dismissable: i = !0,
+  onDismiss: a,
+  ...m
+}) => /* @__PURE__ */ r(n || "div", { className: l(t.item, s), "data-color": e, ...m, children: [
+  /* @__PURE__ */ o("div", { className: t.content, children: c }),
+  i && /* @__PURE__ */ o("div", { className: t.action, children: /* @__PURE__ */ o(d, { icon: "x-mark", variant: "text", onClick: a, className: t.dismiss }) })
+] });
+export {
+  k as SnackbarBase
+};

package/dist/components/Snackbar/SnackbarLabel.js

@@ -0,0 +1,7 @@
+import { jsx as a } from "react/jsx-runtime";
+import '../../assets/SnackbarLabel.css';const e = "_label_1n332_3", s = {
+  label: e
+}, t = ({ children: l }) => /* @__PURE__ */ a("span", { className: s.label, children: l });
+export {
+  t as SnackbarLabel
+};

package/dist/components/Snackbar/SnackbarMedia.js

@@ -0,0 +1,11 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Icon as n } from "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import "../../index-L8X2o7IH.js";
+import '../../assets/SnackbarMedia.css';const t = "_media_td38q_1", c = "_icon_td38q_7", o = {
+  media: t,
+  icon: c
+}, d = ({ icon: a = "bell" }) => /* @__PURE__ */ i("div", { className: o.media, children: /* @__PURE__ */ i(n, { name: a, variant: "solid", className: o.icon }) });
+export {
+  d as SnackbarMedia
+};

package/dist/components/Snackbar/index.js

@@ -0,0 +1,10 @@
+import { Snackbar as o } from "./Snackbar.js";
+import { SnackbarBase as b } from "./SnackbarBase.js";
+import { SnackbarMedia as f } from "./SnackbarMedia.js";
+import { SnackbarLabel as m } from "./SnackbarLabel.js";
+export {
+  o as Snackbar,
+  b as SnackbarBase,
+  m as SnackbarLabel,
+  f as SnackbarMedia
+};

package/dist/components/Toolbar/Toolbar.js

@@ -0,0 +1,92 @@
+import { jsxs as V, jsx as c } from "react/jsx-runtime";
+import { useState as d, useMemo as C } from "react";
+import { useRootContext as q } from "../RootProvider/RootProvider.js";
+import { ToolbarAdd as w } from "./ToolbarAdd.js";
+import { ToolbarBase as z } from "./ToolbarBase.js";
+import { ToolbarFilter as D } from "./ToolbarFilter.js";
+import { ToolbarMenu as G } from "./ToolbarMenu.js";
+import { ToolbarSearch as H } from "./ToolbarSearch.js";
+const Y = ({
+  filters: l = [],
+  filterState: g,
+  onFilterStateChange: u,
+  search: T,
+  menu: F,
+  getFilterLabel: A,
+  children: N
+}) => {
+  const { currentId: i, openId: R, closeAll: y } = q(), [e, s] = d(null), [j, v] = d(
+    g ?? {}
+  ), p = typeof u == "function" ? u : v, r = g || j, [b, S] = d(
+    (l == null ? void 0 : l.filter((o) => !(o.removable && typeof r[o.name] > "u")).map((o) => o.name)) ?? []
+  ), h = l == null ? void 0 : l.filter((o) => !b.includes(o.name)), L = C(
+    () => b.map((o) => l.find((n) => n.name === o)).filter((o) => typeof o < "u"),
+    [l, b]
+  ), a = C(
+    () => l.filter((o) => h.includes(o)),
+    [l, h]
+  ), t = (o, n) => {
+    (e == null ? void 0 : e.name) === n && e.type === o ? (y(), s(null)) : (R("toolbar"), s({ name: n, type: o }));
+  }, M = () => {
+    s(null), y();
+  }, k = (o, n, m) => {
+    m === "radio" ? (p({
+      ...r,
+      [o]: n
+    }), t("filter", o)) : p({
+      ...r,
+      [o]: r[o] ? r[o].some((f) => n == null ? void 0 : n.includes(f)) ? r[o].filter((f) => !(n || []).includes(f)) : [...r[o], ...n || []] : n
+    });
+  }, B = (o) => {
+    S((n) => n.filter((m) => m !== o)), p({
+      ...r,
+      [o]: void 0
+    });
+  }, E = (o) => {
+    S((n) => [...n, o]), t("filter", o);
+  };
+  return /* @__PURE__ */ V(z, { open: i === "toolbar", onClose: M, children: [
+    F && /* @__PURE__ */ c(G, { onToggle: () => t("menu", ""), expanded: (e == null ? void 0 : e.type) === "menu", ...F }),
+    L.map((o) => /* @__PURE__ */ c(
+      D,
+      {
+        onToggle: () => t("filter", o.name),
+        expanded: i === "toolbar" && o.name === (e == null ? void 0 : e.name) && (e == null ? void 0 : e.type) === "filter",
+        onRemove: () => {
+          B(o.name);
+        },
+        onChange: (n) => {
+          k(o.name, [n.target.value], o.optionType);
+        },
+        name: o.name,
+        options: o.options,
+        label: o.label,
+        value: r[o.name],
+        optionType: o.optionType,
+        removable: o.removable,
+        getSelectedLabel: A
+      },
+      o.name
+    )),
+    (a == null ? void 0 : a.length) > 0 && /* @__PURE__ */ c(
+      w,
+      {
+        expanded: i === "toolbar" && (e == null ? void 0 : e.type) === "add-filter",
+        onToggle: () => t("add-filter", ""),
+        items: a.map((o) => ({
+          id: o.name,
+          label: o.label,
+          name: o.name,
+          onClick: () => {
+            E(o.name);
+          }
+        }))
+      }
+    ),
+    T && /* @__PURE__ */ c(H, { ...T }),
+    N
+  ] });
+};
+export {
+  Y as Toolbar
+};

package/dist/components/Toolbar/Toolbar.stories.js

@@ -0,0 +1,179 @@
+import { jsx as n } from "react/jsx-runtime";
+import s from "react";
+import { Toolbar as o } from "./Toolbar.js";
+const b = {
+  title: "Toolbar/Toolbar",
+  component: o,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, a = {
+  args: {
+    menu: {
+      label: "Ola Nordmann",
+      value: "ola",
+      items: [
+        {
+          avatar: {
+            name: "Ola Nordmann"
+          },
+          label: "Ola Nordmann"
+        },
+        {
+          avatar: {
+            name: "Kari Nordmann"
+          },
+          label: "Kari Nordmann"
+        }
+      ]
+    },
+    filters: [
+      {
+        removable: !0,
+        name: "from",
+        optionType: "checkbox",
+        label: "Velg avsender",
+        options: [
+          {
+            value: "skatt",
+            label: "Skatteetaten"
+          },
+          {
+            value: "brreg",
+            label: "Brønnøysund"
+          },
+          {
+            value: "nav",
+            label: "NAV"
+          },
+          {
+            value: "oslo",
+            label: "Oslo kommune"
+          }
+        ]
+      },
+      {
+        removable: !0,
+        name: "to",
+        optionType: "radio",
+        label: "Velg mottaker",
+        options: [
+          {
+            value: "ola",
+            label: "Ola Nordmann"
+          },
+          {
+            value: "kari",
+            label: "Kari Nordmann"
+          }
+        ]
+      },
+      {
+        removable: !0,
+        name: "status",
+        optionType: "radio",
+        label: "Velg status",
+        options: [
+          {
+            groupId: "1",
+            value: "draft",
+            label: "Utkast"
+          },
+          {
+            groupId: "1",
+            value: "sent",
+            label: "Sendt"
+          },
+          {
+            groupId: "2",
+            value: "in-progress",
+            label: "Under arbeid"
+          },
+          {
+            groupId: "2",
+            value: "requires-attention",
+            label: "Krever handling"
+          },
+          {
+            groupId: "2",
+            value: "completed",
+            label: "Avsluttet"
+          }
+        ]
+      }
+    ]
+  }
+}, m = {
+  args: {
+    ...a.args,
+    getFilterLabel: (t, e) => Array.isArray(e) && e.length > 1 ? `${e.length} selected` : e
+  }
+}, g = {
+  args: {
+    ...a.args,
+    filters: []
+  }
+};
+var l, r;
+const p = {
+  args: {
+    filters: (r = (l = a == null ? void 0 : a.args) == null ? void 0 : l.filters) == null ? void 0 : r.map((t) => ({
+      ...t,
+      removable: !1
+    }))
+  }
+}, v = () => {
+  const [t, e] = s.useState({
+    from: ["skatt", "brreg"]
+  });
+  return /* @__PURE__ */ n(o, { filters: a.args.filters, filterState: t, onFilterStateChange: e });
+}, c = {
+  args: {
+    search: {
+      placeholder: "Søk etter filter"
+    },
+    filters: [
+      {
+        name: "status",
+        optionType: "checkbox",
+        label: "Velg status",
+        options: [
+          {
+            groupId: "1",
+            value: "draft",
+            label: "Utkast"
+          },
+          {
+            groupId: "1",
+            value: "sent",
+            label: "Sendt"
+          },
+          {
+            groupId: "2",
+            value: "in-progress",
+            label: "Under arbeid"
+          },
+          {
+            groupId: "2",
+            value: "requires-attention",
+            label: "Krever handling"
+          },
+          {
+            groupId: "2",
+            value: "completed",
+            label: "Avsluttet"
+          }
+        ]
+      }
+    ]
+  }
+};
+export {
+  v as ControlledStateFilters,
+  m as CustomFilterLabel,
+  a as Default,
+  c as FilterAndSearch,
+  g as NoFilters,
+  p as StaticFilters,
+  b as default
+};

package/dist/components/Toolbar/ToolbarAdd.js

@@ -0,0 +1,16 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "react";
+import "../RootProvider/RootProvider.js";
+import { Menu as p } from "../Menu/Menu.js";
+import { DrawerOrDropdown as l } from "../Dropdown/DrawerOrDropdown.js";
+import { ToolbarButton as n } from "./ToolbarButton.js";
+import { ToolbarFilterBase as s } from "./ToolbarFilterBase.js";
+const x = ({ expanded: o = !1, onToggle: t, label: i = "Legg til", items: m }) => /* @__PURE__ */ e(s, { expanded: o, children: [
+  /* @__PURE__ */ r(n, { type: "add", onToggle: t, children: i }),
+  /* @__PURE__ */ r(l, { title: i, onClose: t, expanded: o, children: /* @__PURE__ */ r(p, { theme: "global", items: m }) })
+] });
+export {
+  x as ToolbarAdd
+};

package/dist/components/Toolbar/ToolbarAdd.stories.js

@@ -0,0 +1,20 @@
+import { ToolbarAdd as o } from "./ToolbarAdd.js";
+const t = {
+  title: "Toolbar/ToolbarAdd",
+  component: o,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, e = {
+  args: {
+    items: [
+      {
+        label: "Velg dato"
+      }
+    ]
+  }
+};
+export {
+  e as Default,
+  t as default
+};

package/dist/components/Toolbar/ToolbarBase.js

@@ -0,0 +1,7 @@
+import { jsx as r } from "react/jsx-runtime";
+import '../../assets/ToolbarBase.css';const t = "_toolbar_1krmm_1", s = {
+  toolbar: t
+}, l = ({ children: o }) => /* @__PURE__ */ r("div", { className: s.toolbar, children: o });
+export {
+  l as ToolbarBase
+};

package/dist/components/Toolbar/ToolbarButton.js

@@ -0,0 +1,43 @@
+import { jsx as i } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { Button as m } from "../Button/Button.js";
+import { ComboButton as u } from "../Button/ComboButton.js";
+import '../../assets/ToolbarButton.css';const c = "_removeButton_fxc8_1", l = {
+  removeButton: c
+}, C = ({
+  type: e = "select",
+  selected: o = !1,
+  removable: s = !1,
+  active: n,
+  children: r,
+  onToggle: t,
+  onRemove: a
+}) => s ? /* @__PURE__ */ i(
+  u,
+  {
+    className: l.removeButton,
+    variant: n ? "solid" : "outline",
+    color: "primary",
+    size: "sm",
+    icon: "x-mark",
+    selected: o,
+    onLabelClick: t,
+    onIconClick: a,
+    children: r
+  }
+) : e === "add" ? /* @__PURE__ */ i(m, { reverse: !0, variant: "dotted", color: "primary", size: "sm", icon: "plus", selected: o, onClick: t, children: r }) : /* @__PURE__ */ i(
+  m,
+  {
+    variant: n ? "solid" : "outline",
+    color: "primary",
+    size: "sm",
+    icon: "chevron-up-down",
+    selected: o,
+    onClick: t,
+    children: r
+  }
+);
+export {
+  C as ToolbarButton
+};

package/dist/components/Toolbar/ToolbarButton.stories.js

@@ -0,0 +1,26 @@
+import { ToolbarButton as o } from "./ToolbarButton.js";
+const a = {
+  title: "Toolbar/ToolbarButton",
+  component: o,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    children: "Label"
+  }
+}, e = {
+  args: {}
+}, r = {
+  args: {
+    type: "add"
+  }
+}, s = {
+  args: {
+    removable: !0
+  }
+};
+export {
+  r as Add,
+  e as Default,
+  s as Removable,
+  a as default
+};