@altinn/altinn-components 0.6.1 → 0.6.3

package/dist/components/Menu/index.js

@@ -0,0 +1,26 @@
+import { MenuItemBase as o } from "./MenuItemBase.js";
+import { MenuItemLabel as m } from "./MenuItemLabel.js";
+import { MenuItemMedia as u } from "./MenuItemMedia.js";
+import { MenuItem as p } from "./MenuItem.js";
+import { MenuInputField as x } from "./MenuInputField.js";
+import { MenuOption as a } from "./MenuOption.js";
+import { MenuSearch as s } from "./MenuSearch.js";
+import { MenuHeader as L } from "./MenuHeader.js";
+import { MenuItems as B } from "./MenuItems.js";
+import { MenuBase as c, MenuList as h, MenuListItem as F } from "./MenuBase.js";
+import { Menu as O } from "./Menu.js";
+export {
+  O as Menu,
+  c as MenuBase,
+  L as MenuHeader,
+  x as MenuInputField,
+  p as MenuItem,
+  o as MenuItemBase,
+  m as MenuItemLabel,
+  u as MenuItemMedia,
+  B as MenuItems,
+  h as MenuList,
+  F as MenuListItem,
+  a as MenuOption,
+  s as MenuSearch
+};

package/dist/components/Meta/MetaBase.js

@@ -0,0 +1,7 @@
+import { jsx as s } from "react/jsx-runtime";
+import '../../assets/MetaBase.css';const a = "_meta_17kd2_1", m = {
+  meta: a
+}, r = ({ size: t = "xs", children: e }) => /* @__PURE__ */ s("div", { className: m.meta, "data-size": t, children: e });
+export {
+  r as MetaBase
+};

package/dist/components/Meta/MetaItem.js

@@ -0,0 +1,11 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { MetaItemBase as x } from "./MetaItemBase.js";
+import { MetaItemLabel as M } from "./MetaItemLabel.js";
+import { MetaItemMedia as f } from "./MetaItemMedia.js";
+const j = ({ size: t = "xs", variant: e = "text", icon: m, children: o, ...a }) => /* @__PURE__ */ p(x, { variant: e, size: t, ...a, children: [
+  m && /* @__PURE__ */ r(f, { icon: m, size: t }),
+  /* @__PURE__ */ r(M, { variant: e, size: t, children: o })
+] });
+export {
+  j as MetaItem
+};

package/dist/components/Meta/MetaItem.stories.js

@@ -0,0 +1,21 @@
+import { MetaItem as t } from "./MetaItem.js";
+const a = {
+  title: "Meta/MetaItem",
+  component: t,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered"
+  },
+  args: {
+    children: "Label"
+  }
+}, o = {
+  args: {}
+}, c = {
+  args: { icon: "clock-dashed" }
+};
+export {
+  o as Default,
+  c as Icon,
+  a as default
+};

package/dist/components/Meta/MetaItemBase.js

@@ -0,0 +1,29 @@
+import { jsx as i } from "react/jsx-runtime";
+import { c } from "../../index-L8X2o7IH.js";
+import { s as d } from "../../metaItem.module-CfNiX769.js";
+const g = ({
+  as: t,
+  variant: a = "text",
+  size: o,
+  color: e,
+  progress: s,
+  datetime: r,
+  className: m,
+  children: n,
+  ...p
+}) => /* @__PURE__ */ i(
+  t || "span",
+  {
+    "data-size": o,
+    "data-color": e,
+    "data-variant": a,
+    "data-progress": s,
+    dateTime: r,
+    className: c(d.item, m),
+    ...p,
+    children: n
+  }
+);
+export {
+  g as MetaItemBase
+};

package/dist/components/Meta/MetaItemLabel.js

@@ -0,0 +1,6 @@
+import { jsx as e } from "react/jsx-runtime";
+import { s as r } from "../../metaItem.module-CfNiX769.js";
+const l = ({ size: a = "xs", variant: t = "text", children: s }) => /* @__PURE__ */ e("span", { className: r.label, "data-variant": t, "data-size": a, children: s });
+export {
+  l as MetaItemLabel
+};

package/dist/components/Meta/MetaItemMedia.js

@@ -0,0 +1,12 @@
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import { Icon as o } from "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import { ProgressIcon as i } from "../Icon/ProgressIcon.js";
+import { s as m } from "../../metaItem.module-CfNiX769.js";
+const d = ({ size: r = "xs", icon: e, progress: a }) => !e && typeof a != "number" ? !1 : /* @__PURE__ */ t("span", { className: m.media, "data-size": r, children: [
+  e && /* @__PURE__ */ s(o, { name: e, className: m.icon }),
+  a && /* @__PURE__ */ s(i, { value: a, className: m.icon })
+] });
+export {
+  d as MetaItemMedia
+};

package/dist/components/Meta/MetaList.js

@@ -0,0 +1,22 @@
+import { jsx as t } from "react/jsx-runtime";
+import { MetaBase as o } from "./MetaBase.js";
+import { MetaItem as a } from "./MetaItem.js";
+import { MetaProgress as c } from "./MetaProgress.js";
+import { MetaTimestamp as n } from "./MetaTimestamp.js";
+import '../../assets/MetaList.css';const l = "_list_m42t7_1", p = "_item_m42t7_13", m = {
+  list: l,
+  item: p
+}, d = ({ type: s = "default", label: e, ...r }) => {
+  switch (s) {
+    case "progress":
+      return /* @__PURE__ */ t(c, { ...r, children: e });
+    case "timestamp":
+      return /* @__PURE__ */ t(n, { ...r, children: e });
+    default:
+      return /* @__PURE__ */ t(a, { ...r, children: e });
+  }
+}, x = ({ size: s = "xs", items: e = [] }) => /* @__PURE__ */ t(o, { size: s, children: /* @__PURE__ */ t("ul", { className: m.list, children: e.map((r, i) => /* @__PURE__ */ t("li", { className: m.item, children: /* @__PURE__ */ t(d, { ...r }) }, "meta-" + i)) }) });
+export {
+  x as MetaList,
+  d as MetaListItem
+};

package/dist/components/Meta/MetaList.stories.js

@@ -0,0 +1,26 @@
+import { MetaList as t } from "./MetaList.js";
+const e = {
+  title: "Meta/MetaList",
+  component: t,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    items: [
+      {
+        label: "Meta 1"
+      },
+      {
+        label: "Meta 2"
+      },
+      {
+        label: "Meta 3"
+      }
+    ]
+  }
+}, s = {
+  args: {}
+};
+export {
+  s as Default,
+  e as default
+};

package/dist/components/Meta/MetaProgress.js

@@ -0,0 +1,11 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { MetaItemBase as a } from "./MetaItemBase.js";
+import { MetaItemLabel as p } from "./MetaItemLabel.js";
+import { MetaItemMedia as x } from "./MetaItemMedia.js";
+const c = ({ size: t = "xs", variant: e = "text", progress: m = 0, children: o }) => /* @__PURE__ */ s(a, { variant: e, size: t, children: [
+  /* @__PURE__ */ r(x, { size: t, progress: m }),
+  /* @__PURE__ */ r(p, { variant: e, size: t, children: o })
+] });
+export {
+  c as MetaProgress
+};

package/dist/components/Meta/MetaProgress.stories.js

@@ -0,0 +1,25 @@
+import { MetaProgress as e } from "./MetaProgress.js";
+const s = {
+  title: "Meta/MetaProgress",
+  component: e,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered"
+  },
+  args: {}
+}, t = {
+  args: {
+    progress: 75,
+    children: "Under arbeid"
+  }
+}, o = {
+  args: {
+    progress: 100,
+    children: "Avsluttet"
+  }
+};
+export {
+  t as InProgress,
+  o as ProgressComplete,
+  s as default
+};

package/dist/components/Meta/MetaTimestamp.js

@@ -0,0 +1,11 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { MetaItemBase as s } from "./MetaItemBase.js";
+import { MetaItemLabel as x } from "./MetaItemLabel.js";
+import { MetaItemMedia as M } from "./MetaItemMedia.js";
+const j = ({ size: t = "xs", variant: e = "text", datetime: o, icon: m, children: a }) => /* @__PURE__ */ p(s, { as: "time", variant: e, datetime: o, size: t, children: [
+  m && /* @__PURE__ */ r(M, { size: t, icon: m }),
+  /* @__PURE__ */ r(x, { variant: e, size: t, children: a })
+] });
+export {
+  j as MetaTimestamp
+};

package/dist/components/Meta/MetaTimestamp.stories.js

@@ -0,0 +1,29 @@
+import { MetaTimestamp as t } from "./MetaTimestamp.js";
+const e = {
+  title: "Meta/MetaTimestamp",
+  component: t,
+  tags: ["autodocs"],
+  parameters: {
+    //    layout: "fullscreen",
+  },
+  args: {
+    children: "26. mai 1999",
+    datetime: "1999-05-26"
+  }
+}, i = {
+  args: {
+    children: "26. mai 1999",
+    datetime: "1999-05-26"
+  }
+}, m = {
+  args: {
+    icon: "clock",
+    children: "Frist: 26. mai 1999",
+    datetime: "1999-05-26"
+  }
+};
+export {
+  i as Default,
+  m as Icon,
+  e as default
+};

package/dist/components/Meta/index.js

@@ -0,0 +1,19 @@
+import { MetaBase as r } from "./MetaBase.js";
+import { MetaList as m, MetaListItem as a } from "./MetaList.js";
+import { MetaItemBase as p } from "./MetaItemBase.js";
+import { MetaItemMedia as x } from "./MetaItemMedia.js";
+import { MetaItemLabel as I } from "./MetaItemLabel.js";
+import { MetaItem as L } from "./MetaItem.js";
+import { MetaProgress as b } from "./MetaProgress.js";
+import { MetaTimestamp as g } from "./MetaTimestamp.js";
+export {
+  r as MetaBase,
+  L as MetaItem,
+  p as MetaItemBase,
+  I as MetaItemLabel,
+  x as MetaItemMedia,
+  m as MetaList,
+  a as MetaListItem,
+  b as MetaProgress,
+  g as MetaTimestamp
+};

package/dist/components/Page/PageBase.js

@@ -0,0 +1,6 @@
+import { jsx as e } from "react/jsx-runtime";
+import { SectionBase as t } from "./SectionBase.js";
+const s = ({ children: o, ...r }) => /* @__PURE__ */ e(t, { as: "main", ...r, children: o });
+export {
+  s as PageBase
+};

package/dist/components/Page/PageHeader.js

@@ -0,0 +1,22 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "react";
+import "../RootProvider/RootProvider.js";
+import { Heading as c } from "../Typography/Heading.js";
+import { SectionBase as n } from "./SectionBase.js";
+import { P as l, s as i } from "../../PageHeaderMedia-DpZ09tLD.js";
+import { PageNav as p } from "./PageNav.js";
+const y = ({ title: a, description: s, icon: o, avatar: m, avatarGroup: t, children: h, ...d }) => /* @__PURE__ */ r(n, { as: "header", ...d, children: [
+  /* @__PURE__ */ e(p, {}),
+  /* @__PURE__ */ r("section", { className: i.header, children: [
+    /* @__PURE__ */ e(l, { icon: o, avatar: m, avatarGroup: t }),
+    /* @__PURE__ */ r("div", { className: i.title, children: [
+      /* @__PURE__ */ e(c, { size: "md", children: a }),
+      /* @__PURE__ */ e("div", { className: "description", children: s })
+    ] })
+  ] })
+] });
+export {
+  y as PageHeader
+};

package/dist/components/Page/PageHeaderMedia.js

@@ -0,0 +1,10 @@
+import "react/jsx-runtime";
+import "../Avatar/Avatar.js";
+import "../Avatar/AvatarGroup.js";
+import "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import "../../index-L8X2o7IH.js";
+import { P as d } from "../../PageHeaderMedia-DpZ09tLD.js";
+export {
+  d as PageHeaderMedia
+};

package/dist/components/Page/PageNav.js

@@ -0,0 +1,20 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { Button as n } from "../Button/Button.js";
+import '../../assets/DialogNav.css';const i = "_nav_678a5_1", c = "_action_678a5_8", e = {
+  nav: i,
+  action: c
+}, _ = ({
+  backButton: a = {
+    as: "a",
+    label: "Back"
+  },
+  children: o
+}) => /* @__PURE__ */ s("nav", { className: e.nav, children: [
+  /* @__PURE__ */ r(n, { ...a, variant: "text", color: "secondary", icon: "arrow-left", reverse: !0, children: (a == null ? void 0 : a.label) || "Back" }),
+  /* @__PURE__ */ r("div", { className: e.action, children: o })
+] });
+export {
+  _ as PageNav
+};

package/dist/components/Page/SectionBase.js

@@ -0,0 +1,32 @@
+import { jsx as m } from "react/jsx-runtime";
+import { c as p } from "../../index-L8X2o7IH.js";
+import '../../assets/SectionBase.css';const l = "_section_1kbyo_1", f = {
+  section: l
+}, y = ({
+  as: n = "section",
+  color: o = "transparent",
+  padding: t = !1,
+  spacing: a = "none",
+  margin: s = "none",
+  shadow: e = "none",
+  inset: c = !1,
+  className: i,
+  style: r,
+  children: d
+}) => /* @__PURE__ */ m(
+  n,
+  {
+    className: p(f.section, i),
+    style: r,
+    "data-color": o,
+    "data-inset": c,
+    "data-padding": t,
+    "data-spacing": a,
+    "data-margin": s,
+    "data-shadow": e,
+    children: d
+  }
+);
+export {
+  y as SectionBase
+};

package/dist/components/Page/SectionFooter.js

@@ -0,0 +1,8 @@
+import { jsx as t } from "react/jsx-runtime";
+import '../../assets/SectionFooter.css';const r = "_footer_7dw8g_1", s = "_header_7dw8g_6", a = {
+  footer: r,
+  header: s
+}, n = ({ margin: o = !1, children: e }) => /* @__PURE__ */ t("footer", { "data-margin": o, className: a.footer, children: e });
+export {
+  n as SectionFooter
+};

package/dist/components/Page/SectionHeader.js

@@ -0,0 +1,7 @@
+import { jsx as r } from "react/jsx-runtime";
+import '../../assets/SectionHeader.css';const s = "_header_77w1b_1", t = {
+  header: s
+}, o = ({ margin: e = !1, children: a }) => /* @__PURE__ */ r("header", { "data-margin": e, className: t.header, children: a });
+export {
+  o as SectionHeader
+};

package/dist/components/Page/index.js

@@ -0,0 +1,12 @@
+import { PageBase as r } from "./PageBase.js";
+import { PageHeader as a } from "./PageHeader.js";
+import { SectionBase as m } from "./SectionBase.js";
+import { SectionHeader as x } from "./SectionHeader.js";
+import { SectionFooter as i } from "./SectionFooter.js";
+export {
+  r as PageBase,
+  a as PageHeader,
+  m as SectionBase,
+  i as SectionFooter,
+  x as SectionHeader
+};

package/dist/components/RootProvider/RootProvider.js

@@ -0,0 +1,31 @@
+import { jsx as c } from "react/jsx-runtime";
+import { createContext as d, useContext as u, useState as I } from "react";
+const x = {
+  currentId: ""
+}, s = d(x), l = ({ children: o, initialValue: t }) => {
+  const [e, n] = I((t == null ? void 0 : t.currentId) || "");
+  return /* @__PURE__ */ c(
+    s.Provider,
+    {
+      value: {
+        currentId: e,
+        setCurrentId: n
+      },
+      children: o
+    }
+  );
+}, m = () => {
+  const { currentId: o, setCurrentId: t } = u(s);
+  return {
+    currentId: o,
+    toggleId: (r) => t(o === r ? "" : r),
+    closeAll: () => {
+      t("");
+    },
+    openId: (r) => t(r)
+  };
+};
+export {
+  l as RootProvider,
+  m as useRootContext
+};

package/dist/components/RootProvider/index.js

@@ -0,0 +1,5 @@
+import { RootProvider as e, useRootContext as r } from "./RootProvider.js";
+export {
+  e as RootProvider,
+  r as useRootContext
+};

package/dist/components/Searchbar/Autocomplete.js

@@ -0,0 +1,25 @@
+import { jsx as e } from "react/jsx-runtime";
+import { createElement as f } from "react";
+import { useMenu as I } from "../../hooks/useMenu.js";
+import { AutocompleteBase as x } from "./AutocompleteBase.js";
+import { AutocompleteGroup as A } from "./AutocompleteGroup.js";
+import { AutocompleteItem as y } from "./AutocompleteItem.js";
+const M = ({ className: t, items: r, groups: m = {}, expanded: p }) => {
+  const { menu: n, setActiveIndex: u } = I({
+    items: r,
+    groups: m,
+    groupByKey: "groupId",
+    keyboardEvents: !0
+  });
+  return /* @__PURE__ */ e(x, { className: t, expanded: p, children: n.map((o, i) => /* @__PURE__ */ f(A, { ...o.props, key: i }, /* @__PURE__ */ e("ul", { children: o.items.map((c, s) => {
+    const {
+      active: l,
+      menuIndex: d,
+      props: { groupId: h, ...a }
+    } = c;
+    return /* @__PURE__ */ e("li", { tabIndex: -1, onMouseEnter: () => u(d), children: /* @__PURE__ */ e(y, { ...a, active: l }) }, s);
+  }) }))) });
+};
+export {
+  M as Autocomplete
+};

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

@@ -0,0 +1,72 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { Autocomplete as r } from "./Autocomplete.js";
+const l = {
+  title: "Header/Autocomplete",
+  component: r,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {}
+}, a = {
+  args: {
+    groups: {},
+    items: [
+      {
+        id: "1a",
+        groupId: "1",
+        href: "#",
+        label: "Alt i innboks"
+      },
+      {
+        id: "1b",
+        groupId: "1",
+        href: "#",
+        label: "Alt i hele Altinn"
+      }
+    ]
+  }
+}, n = {
+  args: {
+    groups: {
+      2: {
+        title: "2 treff i innboksen"
+      }
+    },
+    items: [
+      {
+        id: "1a",
+        groupId: "1",
+        href: "#",
+        label: () => /* @__PURE__ */ e("span", { children: [
+          /* @__PURE__ */ t("mark", { children: "skatt" }),
+          " i innboks"
+        ] })
+      },
+      {
+        id: "1b",
+        groupId: "1",
+        href: "#",
+        label: () => /* @__PURE__ */ e("span", { children: [
+          /* @__PURE__ */ t("mark", { children: "skatt" }),
+          " i hele Altinn"
+        ] })
+      },
+      {
+        id: "2a",
+        groupId: "2",
+        href: "#",
+        label: "Skattemeldingen 2023"
+      },
+      {
+        id: "2b",
+        groupId: "2",
+        href: "#",
+        label: "Skattemeldingen 2022"
+      }
+    ]
+  }
+};
+export {
+  a as Scopes,
+  n as ScopesAndSuggestions,
+  l as default
+};

package/dist/components/Searchbar/AutocompleteBase.js

@@ -0,0 +1,8 @@
+import { jsx as c } from "react/jsx-runtime";
+import { c as a } from "../../index-L8X2o7IH.js";
+import '../../assets/AutocompleteBase.css';const s = "_autocomplete_1ccsg_1", m = {
+  autocomplete: s
+}, l = ({ expanded: o, children: t, className: e }) => /* @__PURE__ */ c("nav", { className: a(m.autocomplete, e), "aria-expanded": o, children: t });
+export {
+  l as AutocompleteBase
+};

package/dist/components/Searchbar/AutocompleteGroup.js

@@ -0,0 +1,15 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "react";
+import { MenuHeader as m } from "../Menu/MenuHeader.js";
+import "../RootProvider/RootProvider.js";
+import '../../assets/AutocompleteGroup.css';const s = "_group_da4mp_1", e = {
+  group: s
+}, d = ({ title: o, children: r }) => /* @__PURE__ */ p("section", { className: e.group, children: [
+  o && /* @__PURE__ */ t(m, { title: o }),
+  r
+] });
+export {
+  d as AutocompleteGroup
+};

package/dist/components/Searchbar/AutocompleteItem.js

@@ -0,0 +1,12 @@
+import { jsx as m } from "react/jsx-runtime";
+import { ListItemBase as r } from "../List/ListItemBase.js";
+import { ListItemLabel as s } from "../List/ListItemLabel.js";
+import "../../index-L8X2o7IH.js";
+import "react";
+import "../Icon/SvgIcon.js";
+import '../../assets/AutocompleteItem.css';const c = "_item_1a3bc_1", n = {
+  item: c
+}, u = ({ as: e = "a", label: t, active: i, ...o }) => /* @__PURE__ */ m(r, { className: n.item, as: e, size: "sm", active: i, linkIcon: "chevron-right", ...o, children: /* @__PURE__ */ m(s, { size: "sm", children: typeof t == "function" ? t() : t }) });
+export {
+  u as AutocompleteItem
+};

package/dist/components/Searchbar/SearchField.js

@@ -0,0 +1,68 @@
+import { jsxs as k, jsx as i } from "react/jsx-runtime";
+import { c as q } from "../../index-L8X2o7IH.js";
+import { useRef as h } from "react";
+import { Icon as w } from "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import { IconButton as n } from "../Button/IconButton.js";
+import '../../assets/SearchField.css';const N = "_field_1wjpq_1", g = "_icon_1wjpq_10", C = "_input_1wjpq_17", I = "_dismiss_1wjpq_41", b = "_clear_1wjpq_47", s = {
+  field: N,
+  icon: g,
+  input: C,
+  dismiss: I,
+  clear: b
+}, F = ({
+  className: l,
+  expanded: a,
+  name: m = "q",
+  value: c,
+  placeholder: p = "Søk",
+  onFocus: f,
+  onBlur: d,
+  onChange: u,
+  onClear: _,
+  onClose: x,
+  onEnter: o,
+  tabIndex: y
+}) => {
+  const e = h(null), j = (t) => {
+    var r;
+    t.key === "Escape" && ((r = e.current) == null || r.blur()), t.key === "Enter" && (o == null || o());
+  };
+  return /* @__PURE__ */ k("div", { className: q(s.field, l), "aria-expanded": a, children: [
+    /* @__PURE__ */ i(
+      "input",
+      {
+        ref: e,
+        onFocus: f,
+        onBlur: d,
+        name: m,
+        value: c,
+        onChange: u,
+        placeholder: p,
+        className: s.input,
+        onKeyUp: j,
+        type: "search",
+        "aria-haspopup": !0,
+        autoComplete: "off",
+        "aria-autocomplete": "list",
+        "aria-expanded": a,
+        tabIndex: y ?? 0
+      }
+    ),
+    /* @__PURE__ */ i(w, { name: "magnifying-glass", className: s.icon }),
+    c && /* @__PURE__ */ i(
+      n,
+      {
+        icon: "x-mark",
+        color: "secondary",
+        variant: "solid",
+        size: "custom",
+        className: s.clear,
+        onClick: _
+      }
+    ) || a && /* @__PURE__ */ i(n, { icon: "x-mark", variant: "text", className: s.dismiss, onClick: x })
+  ] });
+};
+export {
+  F as SearchField
+};