@midas-ds/components 1.0.3 → 1.1.0

package/index76.js

@@ -1,82 +1,275 @@
-import { jsxs as t, jsx as c, Fragment as i } from "react/jsx-runtime";
-import { $ as d, a, b as l, c as f } from "./Dialog-Cb6toyXO.js";
-import { Button as u } from "./index69.js";
-import { c as p } from "./createLucideIcon-DeWljiyi.js";
-import './Dropdown.css';/**
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { LinkButton as f } from "./index75.js";
+import { Button as k } from "./index66.js";
+import { c as h } from "./clsx-OuTLNxxd.js";
+import { FlexItem as N } from "./index44.js";
+import { Logo as g } from "./index70.js";
+import b from "react";
+import './global.css';import './Layout.css';/* empty css                */
+import { m as v } from "./tokens-CjXmpXTi.js";
+import { Dropdown as x, DropdownItem as C } from "./index73.js";
+import { $ as L } from "./useFocusRing-9PXyKy2A.js";
+import { c as y } from "./createLucideIcon-DeWljiyi.js";
+import { X as T } from "./x-JK7i-TQC.js";
+/**
  * @license lucide-react v0.453.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const x = p("EllipsisVertical", [
-  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
-  ["circle", { cx: "12", cy: "5", r: "1", key: "gxeob9" }],
-  ["circle", { cx: "12", cy: "19", r: "1", key: "lyex9k" }]
-]), $ = '"../theme/tokens.css"', b = '"Inter", sans-serif', m = "0 0 0 2px #ffffff, 0 0 0 4px #000000", h = "#f2f2f2", y = "_dropDownMenu_1f4ap_4", w = "_dropdownMenu_1f4ap_15", s = {
-  tokens: $,
-  display: b,
-  focus: m,
-  gray10: h,
-  dropDownMenu: y,
-  dropdownMenu: w
-};
-function _({
-  label: e,
+const I = y("Menu", [
+  ["line", { x1: "4", x2: "20", y1: "12", y2: "12", key: "1e0a9i" }],
+  ["line", { x1: "4", x2: "20", y1: "6", y2: "6", key: "1owob3" }],
+  ["line", { x1: "4", x2: "20", y1: "18", y2: "18", key: "yk5zj1" }]
+]);
+/**
+ * @license lucide-react v0.453.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const B = y("PanelLeftClose", [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M9 3v18", key: "fh3hqa" }],
+  ["path", { d: "m16 15-3-3 3-3", key: "14y99z" }]
+]);
+/**
+ * @license lucide-react v0.453.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const M = y("PanelRightClose", [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M15 3v18", key: "14nvp0" }],
+  ["path", { d: "m8 9 3 3-3 3", key: "12hl5m" }]
+]), P = '"../theme/tokens.css"', $ = '"Inter", sans-serif', H = "#143c50", O = "#f2f2f2", z = "#d9d9d9", E = "#b3b3b3", F = "#a6a6a6", S = "#5d5d5d", G = "(min-width: 768px)", j = "#b90835", D = "_baseLayout_1w6p5_4", R = "_mainContent_1w6p5_13", q = "_header_1w6p5_18", X = "_headerContent_1w6p5_35", A = "_headerItems_1w6p5_52", J = "_logo_1w6p5_53", K = "_headerMenu_1w6p5_61", Q = "_toggleButton_1w6p5_69", U = "_sidebar_1w6p5_77", V = "_main_1w6p5_13", W = "_app_1w6p5_112", Y = "_sidebarOpened_1w6p5_121", Z = "_sidebarHeader_1w6p5_125", ee = "_sidebarFooter_1w6p5_134", ae = "_sidebarCollapsed_1w6p5_148", te = "_userName_1w6p5_165", se = "_abbr_1w6p5_177", ne = "_userTitle_1w6p5_183", ie = "_title_1w6p5_194", re = "_sidebarNav_1w6p5_205", oe = "_list_1w6p5_211", le = "_listGroupTitle_1w6p5_218", de = "_listItem_1w6p5_227", ce = "_listItemCollapsed_1w6p5_231", me = "_listLink_1w6p5_235", pe = "_linkText_1w6p5_242", _e = "_linkTextCollapsed_1w6p5_252", he = "_listLinkCollapsed_1w6p5_263", be = "_collapseButton_1w6p5_267", ye = "_backdrop_1w6p5_272", ue = "_backdropOpened_1w6p5_281", a = {
+  tokens: P,
+  display: $,
+  primaryBackground: H,
+  gray10: O,
+  gray30: z,
+  gray60: E,
+  gray70: F,
+  gray130: S,
+  mdBreakpoint: G,
+  logoPrimary: j,
+  baseLayout: D,
+  mainContent: R,
+  header: q,
+  headerContent: X,
+  headerItems: A,
+  logo: J,
+  headerMenu: K,
+  toggleButton: Q,
+  sidebar: U,
+  main: V,
+  app: W,
+  sidebarOpened: Y,
+  sidebarHeader: Z,
+  sidebarFooter: ee,
+  sidebarCollapsed: ae,
+  userName: te,
+  abbr: se,
+  userTitle: ne,
+  title: ie,
+  sidebarNav: re,
+  list: oe,
+  listGroupTitle: le,
+  listItem: de,
+  listItemCollapsed: ce,
+  listLink: me,
+  linkText: pe,
+  linkTextCollapsed: _e,
+  listLinkCollapsed: he,
+  collapseButton: be,
+  backdrop: ye,
+  backdropOpened: ue
+}, He = ({
+  items: p,
   title: r,
-  children: n,
-  ...o
-}) {
-  return /* @__PURE__ */ t(d, { ...o, children: [
-    /* @__PURE__ */ t(
-      u,
+  user: d,
+  app: t,
+  children: i,
+  headerChildren: o,
+  clientSideRouter: c
+}) => {
+  const [m, s] = b.useState(!1), [n, _] = b.useState(!1);
+  return b.useEffect(() => {
+    const u = (w) => {
+      w.key === "Escape" && _(!1);
+    };
+    return window.addEventListener("keydown", u), () => {
+      window.removeEventListener("keydown", u);
+    };
+  }, []), /* @__PURE__ */ l("div", { className: a.baseLayout, children: [
+    /* @__PURE__ */ e(
+      we,
       {
-        "aria-label": e,
-        variant: "icon",
-        children: [
-          r,
-          /* @__PURE__ */ c(
-            x,
-            {
-              size: 20,
-              "aria-hidden": !0
-            }
-          )
-        ]
+        title: r,
+        headerChildren: o,
+        user: d,
+        app: t,
+        isOpened: n,
+        setIsOpened: _,
+        setIsCollapsed: s
       }
     ),
-    /* @__PURE__ */ c(a, { children: /* @__PURE__ */ c(
-      l,
-      {
-        ...o,
-        className: s.dropDownMenu,
-        children: n
-      }
-    ) })
+    /* @__PURE__ */ l("div", { className: a.mainContent, children: [
+      /* @__PURE__ */ e(
+        ke,
+        {
+          items: p,
+          app: t,
+          isOpened: n,
+          isCollapsed: m,
+          setIsCollapsed: s,
+          clientSideRouter: c
+        }
+      ),
+      /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e("main", { className: a.main, children: /* @__PURE__ */ e("div", { className: a.app, children: i }) }) }),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: h(a.backdrop, n && a.backdropOpened),
+          onClick: () => _(!1),
+          "aria-hidden": !0
+        }
+      )
+    ] })
   ] });
-}
-function v(e) {
-  const r = e.textValue || (typeof e.children == "string" ? e.children : void 0);
-  return /* @__PURE__ */ c(
-    f,
+}, ke = ({
+  items: p,
+  app: r,
+  isOpened: d,
+  isCollapsed: t,
+  setIsCollapsed: i,
+  clientSideRouter: o
+}) => {
+  const c = () => /* @__PURE__ */ e("div", { className: a.sidebarHeader, children: t ? /* @__PURE__ */ e("p", { className: a.name, children: r.shortName }) : /* @__PURE__ */ e("p", { className: a.abbr, children: r.name }) }), m = ({ group: s }) => /* @__PURE__ */ e("ul", { className: a.list, children: s.items.map((n, _) => /* @__PURE__ */ e(
+    "li",
+    {
+      className: h(
+        a.listItem,
+        t && a.listItemCollapsed
+      ),
+      children: /* @__PURE__ */ e(
+        f,
+        {
+          iconPlacement: "left",
+          href: n.href,
+          icon: n.icon,
+          className: h(
+            a.listLink,
+            t && a.listLinkCollapsed
+          ),
+          variant: "tertiary",
+          children: /* @__PURE__ */ e(
+            "span",
+            {
+              className: h(
+                a.linkText,
+                t && a.linkTextCollapsed
+              ),
+              children: n.title
+            }
+          )
+        }
+      )
+    },
+    "link_" + _
+  )) });
+  return /* @__PURE__ */ l(
+    "aside",
     {
-      ...e,
-      textValue: r,
-      className: ({ isFocused: n, isOpen: o }) => `${s.dropdownMenu} ${n ? "focused" : ""} ${o ? "open" : ""}`,
-      children: ({ hasSubmenu: n }) => /* @__PURE__ */ t(i, { children: [
-        e.children,
-        n && /* @__PURE__ */ c(
-          "svg",
+      id: "midasMainMenu",
+      className: h(
+        a.sidebar,
+        t && a.sidebarCollapsed,
+        d && a.sidebarOpened
+      ),
+      children: [
+        /* @__PURE__ */ e(c, {}),
+        /* @__PURE__ */ e("nav", { className: a.sidebarNav, children: /* @__PURE__ */ e("ul", { className: a.list, children: p.map((s, n) => /* @__PURE__ */ l("li", { children: [
+          s.title && !t && /* @__PURE__ */ e("p", { className: a.listGroupTitle, children: s.title }),
+          o ? /* @__PURE__ */ e(L, { navigate: o, children: /* @__PURE__ */ e(m, { group: s }) }) : /* @__PURE__ */ e(m, { group: s })
+        ] }, "list_" + n)) }) }),
+        /* @__PURE__ */ e("div", { className: a.sidebarFooter, children: /* @__PURE__ */ e(
+          k,
           {
-            className: "chevron",
-            viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ c("path", { d: "m9 18 6-6-6-6" })
+            variant: "tertiary",
+            "aria-label": t ? "Maximera sidomenyn" : "Minimera sidomenyn",
+            onPress: () => i(!t),
+            className: a.collapseButton,
+            children: t ? /* @__PURE__ */ e(M, {}) : /* @__PURE__ */ e(B, {})
           }
-        )
-      ] })
+        ) })
+      ]
     }
   );
-}
+}, we = ({
+  title: p,
+  user: r,
+  app: d,
+  headerChildren: t,
+  isOpened: i,
+  setIsOpened: o,
+  setIsCollapsed: c
+}) => /* @__PURE__ */ l(
+  "header",
+  {
+    className: a.header,
+    style: {
+      borderTop: `solid 4px ${d.color ? d.color : v.logoPrimary}`
+    },
+    children: [
+      /* @__PURE__ */ l("div", { className: a.headerContent, children: [
+        /* @__PURE__ */ e(
+          g,
+          {
+            padding: !1,
+            size: "small",
+            className: a.logo
+          }
+        ),
+        i !== void 0 && c && o && /* @__PURE__ */ e(
+          k,
+          {
+            variant: "icon",
+            className: a.toggleButton,
+            "aria-label": i ? "Stäng meny" : "Öppna meny",
+            "aria-controls": "midasMainMenu",
+            onPress: () => {
+              c(!1), o(!i);
+            },
+            children: i ? /* @__PURE__ */ e(
+              T,
+              {
+                size: 20,
+                "aria-hidden": !0
+              }
+            ) : /* @__PURE__ */ e(
+              I,
+              {
+                size: 20,
+                "aria-hidden": !0
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ l("div", { children: [
+          /* @__PURE__ */ e("p", { className: a.userName, children: r.name }),
+          /* @__PURE__ */ e("p", { className: a.userTitle, children: r.title }),
+          /* @__PURE__ */ e("p", { className: a.title, children: p })
+        ] })
+      ] }),
+      /* @__PURE__ */ e("div", { className: a.headerItems, children: t }),
+      /* @__PURE__ */ e("div", { className: a.headerMenu, children: /* @__PURE__ */ e(x, { children: b.Children.map(t, (m) => /* @__PURE__ */ e(C, { children: m })) }) })
+    ]
+  }
+);
 export {
-  _ as Dropdown,
-  v as DropdownItem
+  we as Header,
+  He as Layout,
+  ke as Sidebar
 };