@altinn/altinn-components 0.6.2 → 0.6.3

package/dist/components/Menu/MenuItem.stories.js

@@ -0,0 +1,135 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { LayoutBase as i } from "../Layout/LayoutBase.js";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "react";
+import { MenuItem as o } from "./MenuItem.js";
+import "../RootProvider/RootProvider.js";
+import { MetaItem as l } from "../Meta/MetaItem.js";
+import { MenuBase as p } from "./MenuBase.js";
+const h = {
+  title: "Menu/MenuItem",
+  component: o,
+  tags: ["autodocs"],
+  parameters: {},
+  args: {
+    id: "inbox"
+  }
+}, B = {
+  args: {
+    icon: "inbox",
+    title: "Innboks"
+  }
+}, v = {
+  args: {
+    icon: "inbox",
+    title: "Innboks",
+    badge: {
+      label: "4"
+    }
+  }
+}, I = {
+  args: {
+    size: "lg",
+    icon: "inbox",
+    title: "Innboks",
+    color: "strong"
+  }
+}, A = {
+  args: {
+    size: "lg",
+    icon: "inbox",
+    title: "Innboks",
+    color: "strong",
+    badge: {
+      color: "alert",
+      label: "4"
+    }
+  }
+}, m = {
+  args: {
+    avatar: {
+      type: "person",
+      name: "Eirik Horneland"
+    },
+    title: "Eirik Horneland"
+  }
+}, G = {
+  args: {
+    avatarGroup: {
+      items: [
+        {
+          type: "person",
+          name: "Eirik Horneland"
+        },
+        {
+          type: "person",
+          name: "Japhet Sery Larsen"
+        },
+        {
+          type: "person",
+          name: "Aune Heggebø"
+        }
+      ]
+    },
+    title: "3 personer"
+  }
+}, c = {
+  args: {
+    avatar: {
+      type: "company",
+      name: "Sportsklubben Brann"
+    },
+    title: "Sportsklubben Brann"
+  }
+}, M = {
+  args: {
+    avatarGroup: {
+      defaultType: "company",
+      items: [
+        {
+          name: "Sportsklubben Brann"
+        },
+        {
+          name: "Bergen Næringsråd"
+        },
+        {
+          name: "Bergen bar"
+        }
+      ]
+    },
+    title: "3 virksomheter"
+  }
+}, z = {
+  args: {
+    ...m.args,
+    size: "lg",
+    description: "Født: XX.XX.XXXX"
+  }
+}, C = {
+  args: {
+    ...c.args,
+    size: "lg",
+    description: "Org nr.: XX.XX.XXXX"
+  }
+}, H = () => {
+  const t = ["global", "neutral", "company", "person", "global-dark"], a = ["neutral", "subtle", "strong", "company", "person"];
+  return /* @__PURE__ */ e("div", { style: { display: "flex", width: "100%" }, children: t.map((n) => /* @__PURE__ */ e("div", { style: { flexGrow: 1 }, children: /* @__PURE__ */ e(i, { theme: n, children: /* @__PURE__ */ e(p, { children: a.map((r) => /* @__PURE__ */ s("div", { children: [
+    /* @__PURE__ */ e(o, { icon: "inbox", title: "Title", color: r, id: "inbox" }),
+    /* @__PURE__ */ e(l, { children: n + "/" + r })
+  ] }, r)) }) }) }, n)) });
+};
+export {
+  A as AlertBadge,
+  c as Company,
+  C as CompanyAccount,
+  M as CompanyGroup,
+  B as Default,
+  v as DefaultBadge,
+  I as Large,
+  m as Person,
+  z as PersonAccount,
+  G as PersonGroup,
+  H as ThemesAndColors,
+  h as default
+};

package/dist/components/Menu/MenuItemBase.d.ts

@@ -0,0 +1,23 @@
+import { ElementType, MouseEventHandler, ReactNode } from 'react';
+import { BadgeProps } from '../Badge';
+import { IconName } from '../Icon';
+export type MenuItemColor = 'neutral' | 'subtle' | 'strong' | 'company' | 'person';
+export type MenuItemSize = 'sm' | 'md' | 'lg';
+export interface MenuItemBaseProps {
+    as?: ElementType;
+    onClick?: MouseEventHandler;
+    color?: MenuItemColor;
+    children?: ReactNode;
+    tabIndex?: number;
+    size?: MenuItemSize;
+    linkIcon?: IconName;
+    linkText?: string;
+    badge?: BadgeProps;
+    collapsible?: boolean;
+    active?: boolean;
+    expanded?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+export declare const MenuItemBase: ({ as, onClick, size, color, linkIcon, linkText, badge, tabIndex, active, collapsible, expanded, selected, disabled, className, children, ...rest }: MenuItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuItemBase.js

@@ -0,0 +1,61 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { c as N } from "../../index-L8X2o7IH.js";
+import { Badge as u } from "../Badge/Badge.js";
+import { Icon as T } from "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import '../../assets/MenuItemBase.css';const j = "_item_1qa8m_1", B = "_content_1qa8m_31", g = "_action_1qa8m_39", w = "_linkText_1qa8m_46", y = "_linkIcon_1qa8m_51", z = "_media_1qa8m_71", n = {
+  item: j,
+  content: B,
+  action: g,
+  linkText: w,
+  linkIcon: y,
+  media: z
+}, E = ({
+  as: r,
+  onClick: l,
+  size: _,
+  color: d,
+  linkIcon: o,
+  linkText: p,
+  badge: c,
+  tabIndex: f = 0,
+  active: x = !1,
+  collapsible: i = !1,
+  expanded: s = !1,
+  selected: h = !1,
+  disabled: m = !1,
+  className: k,
+  children: I,
+  ...q
+}) => {
+  const v = r || "a", e = i && s ? "chevron-up" : i ? "chevron-down" : o && "chevron-right";
+  return /* @__PURE__ */ a(
+    v,
+    {
+      role: "menuitem",
+      tabIndex: m ? "-1" : f ?? 0,
+      "data-size": _,
+      "data-color": d,
+      "data-active": x,
+      "aria-expanded": s,
+      "aria-disabled": m,
+      "aria-selected": h,
+      onClick: l,
+      className: N(n.item, k),
+      ...q,
+      children: [
+        /* @__PURE__ */ a("div", { className: n.content, children: [
+          I,
+          c && /* @__PURE__ */ t(u, { ...c })
+        ] }),
+        e && /* @__PURE__ */ a("div", { className: n.action, children: [
+          /* @__PURE__ */ t("span", { className: n.linkText, children: p }),
+          e && /* @__PURE__ */ t(T, { name: e, className: n.linkIcon })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  E as MenuItemBase
+};

package/dist/components/Menu/MenuItemLabel.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { MenuItemSize } from './MenuItemBase';
+export interface MenuItemLabelProps {
+    size?: MenuItemSize;
+    label?: string;
+    title?: string;
+    description?: string;
+    children?: ReactNode;
+}
+export declare const MenuItemLabel: ({ size, label, title, description, children }: MenuItemLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuItemLabel.js

@@ -0,0 +1,12 @@
+import { jsx as t, jsxs as r, Fragment as c } from "react/jsx-runtime";
+import '../../assets/MenuItemLabel.css';const o = "_label_1rsak_1", d = "_title_1rsak_7", _ = "_description_1rsak_29", e = {
+  label: o,
+  title: d,
+  description: _
+}, p = ({ size: s = "sm", label: l, title: n, description: i, children: a }) => /* @__PURE__ */ t("span", { className: e.label, "data-size": s, children: a || /* @__PURE__ */ r(c, { children: [
+  /* @__PURE__ */ t("strong", { className: e.title, "data-size": s, children: n || l }),
+  /* @__PURE__ */ t("span", { className: e.description, "data-size": s, children: i })
+] }) });
+export {
+  p as MenuItemLabel
+};

package/dist/components/Menu/MenuItemMedia.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { AvatarGroupProps, AvatarProps } from '../Avatar';
+import { IconName } from '../Icon';
+import { MenuItemColor, MenuItemSize } from './MenuItemBase';
+interface MenuItemMediaProps {
+    color?: MenuItemColor;
+    size?: MenuItemSize;
+    icon?: IconName;
+    avatar?: AvatarProps;
+    avatarGroup?: AvatarGroupProps;
+    children?: ReactNode;
+}
+export declare const MenuItemMedia: ({ size, color, icon, avatar, avatarGroup, children }: MenuItemMediaProps) => false | import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Menu/MenuItemMedia.js

@@ -0,0 +1,29 @@
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { Avatar as l } from "../Avatar/Avatar.js";
+import { AvatarGroup as c } from "../Avatar/AvatarGroup.js";
+import { Icon as u } from "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import "../../index-L8X2o7IH.js";
+import '../../assets/MenuItemMedia.css';const f = "_media_7n7uy_1", _ = "_icon_7n7uy_16", e = {
+  media: f,
+  icon: _
+}, m = {
+  avatar: {
+    sm: "sm",
+    md: "md",
+    lg: "lg"
+  },
+  avatarGroup: {
+    sm: "xs",
+    md: "sm",
+    lg: "md"
+  }
+}, A = ({ size: o = "sm", color: n, icon: t, avatar: s, avatarGroup: r, children: i }) => !t && !s && !r && !i ? !1 : /* @__PURE__ */ d("div", { className: e.media, "data-size": o, "data-color": t ? n : null, children: [
+  t && /* @__PURE__ */ a(u, { name: t, variant: n === "strong" ? "solid" : "outline", className: e.icon }),
+  s && /* @__PURE__ */ a(l, { ...s, size: m == null ? void 0 : m.avatar[o] }),
+  r && /* @__PURE__ */ a(c, { ...r, size: m == null ? void 0 : m.avatarGroup[o] }),
+  i
+] });
+export {
+  A as MenuItemMedia
+};

package/dist/components/Menu/MenuItems.d.ts

@@ -0,0 +1,17 @@
+import { MenuItemColor, MenuItemProps, MenuItemSize } from '../';
+export interface MenuGroupProps {
+    title?: string;
+    divider?: boolean;
+    defaultItemColor?: MenuItemColor;
+    defaultItemSize?: MenuItemSize;
+}
+export type MenuItemGroups = Record<string, MenuGroupProps>;
+export interface MenuItemsProps {
+    level?: number;
+    expanded?: boolean;
+    items: MenuItemProps[];
+    groups?: MenuItemGroups;
+    defaultItemColor?: MenuItemColor;
+    defaultItemSize?: MenuItemSize;
+}
+export declare const MenuItems: ({ level, expanded, items, groups, defaultItemColor, defaultItemSize, }: MenuItemsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuItems.js

@@ -0,0 +1,63 @@
+import { jsx as a, jsxs as i, Fragment as z } from "react/jsx-runtime";
+import { Fragment as L } from "react";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "../RootProvider/RootProvider.js";
+import { MenuItem as k } from "./MenuItem.js";
+import { MenuHeader as B } from "./MenuHeader.js";
+import { MenuList as E, MenuListItem as m } from "./MenuBase.js";
+import { useMenu as G } from "../../hooks/useMenu.js";
+const H = ({
+  level: r = 0,
+  expanded: I,
+  items: b,
+  groups: c = {},
+  defaultItemColor: l,
+  defaultItemSize: o
+}) => {
+  const { menu: f } = G({
+    items: b,
+    groups: c,
+    groupByKey: "groupId",
+    keyboardEvents: !1
+  });
+  return /* @__PURE__ */ a(E, { expanded: I, children: f.map((t, d) => {
+    const n = (t == null ? void 0 : t.props) || {}, { title: x, divider: v = !0 } = n, y = f[d + 1];
+    return /* @__PURE__ */ i(L, { children: [
+      (r > 0 || d) && v ? /* @__PURE__ */ a(m, { role: "separator" }) : "",
+      x && /* @__PURE__ */ a(m, { children: /* @__PURE__ */ a(B, { title: x }) }),
+      t == null ? void 0 : t.items.map((M, h) => {
+        const { active: F } = M, { groupId: K, ...e } = M.props || {}, { expanded: s } = e, j = t == null ? void 0 : t.items[h + 1];
+        return /* @__PURE__ */ i(m, { role: "presentation", expanded: s, children: [
+          /* @__PURE__ */ a(
+            k,
+            {
+              ...e,
+              color: (e == null ? void 0 : e.color) || (n == null ? void 0 : n.defaultItemColor) || l,
+              size: (e == null ? void 0 : e.size) || (n == null ? void 0 : n.defaultItemSize) || o,
+              active: F,
+              tabIndex: e != null && e.disabled ? -1 : 0
+            }
+          ),
+          s && (e == null ? void 0 : e.items) && /* @__PURE__ */ i(z, { children: [
+            /* @__PURE__ */ a(
+              H,
+              {
+                expanded: s,
+                level: r + 1,
+                items: e == null ? void 0 : e.items,
+                groups: c,
+                defaultItemColor: l,
+                defaultItemSize: o
+              }
+            ),
+            (y || j) && /* @__PURE__ */ a(m, { role: "separator" })
+          ] })
+        ] }, h);
+      })
+    ] }, d);
+  }) });
+};
+export {
+  H as MenuItems
+};