@ikas/core 1.0.6 → 1.0.8

package/dist/index111.js

@@ -1,207 +1,225 @@
-import { jsxs as a, Fragment as C, jsx as e } from "react/jsx-runtime";
-import g from "react";
-import { useSidebar as A, SidebarMenu as S, SidebarMenuItem as j, SidebarMenuButton as O, SidebarFooter as I, Avatar as F, AvatarImage as P, AvatarFallback as R, Popover as x, PopoverTrigger as p, PopoverContent as N, Tooltip as W } from "@ikas/ui";
-import { cn as u } from "./index3.js";
-import { IconWrapper as k } from "./index109.js";
-import { getSidebarTooltipClass as y } from "./index110.js";
-import z from "./index126.js";
-import D from "./index127.js";
-function K({
-  footerMenu: t,
-  footerTopMenu: r,
-  showAvatarBorder: h,
-  setShowAvatarBorder: l,
-  selectedUUIDList: i,
-  onItemClick: b,
-  onLeafClick: n,
-  theme: d = "dark",
-  isExpandedFooterVisible: c,
-  clearExpandedMenu: s
+import { useState as f, useRef as q, useMemo as g, useCallback as l, useEffect as S } from "react";
+import { flushSync as z } from "react-dom";
+import { reaction as V } from "mobx";
+function Q({
+  sidebarViewModel: e,
+  onNavigate: x
 }) {
-  const { state: m } = A(), o = m === "collapsed";
-  return /* @__PURE__ */ a(C, { children: [
-    r && /* @__PURE__ */ e("div", { className: "flex h-[68px] shrink-0 items-center bg-sidebar px-4", children: /* @__PURE__ */ e(S, { className: "group-data-[collapsible=icon]:items-center", children: /* @__PURE__ */ e(j, { children: /* @__PURE__ */ a(
-      O,
-      {
-        isActive: i.includes(r.uuid),
-        tooltip: {
-          children: r.labelTitle,
-          className: y(d),
-          showArrow: !1
-        },
-        onClick: () => {
-          n(r), b(r);
-        },
-        children: [
-          r.icon && /* @__PURE__ */ e(k, { icon: r.icon, size: 16 }),
-          !o && /* @__PURE__ */ e("span", { className: "truncate", children: r.label ?? r.labelTitle })
-        ]
+  const [M, E] = f([]), [F, T] = f([]), [d, w] = f(null), [P, B] = f(!1), h = q(
+    null
+  ), [A, k] = f(!0), [O, m] = f(!0), i = g(() => {
+    const n = (t) => {
+      var u;
+      for (let a = 0; a < t.length; a++) {
+        const o = t[a];
+        if (o.childItems) {
+          const r = n(o.childItems);
+          if (r) return r;
+        } else if (o.useExactRoute) {
+          if (e.currentPath === "/admin" + o.path) return o.uuid;
+        } else if ((u = e.currentPath) != null && u.startsWith("/admin" + (o.path || "")))
+          return o.uuid;
       }
-    ) }) }) }),
-    (c || !!t) && /* @__PURE__ */ a(
-      I,
-      {
-        className: u(
-          "h-[72px] min-h-[72px] flex-row items-center gap-0 border-t border-sidebar-border p-0",
-          c && "justify-center border-t-0"
-        ),
-        children: [
-          c && /* @__PURE__ */ e(
-            "button",
-            {
-              onClick: () => s == null ? void 0 : s(),
-              className: "flex items-center justify-center rounded bg-black p-2.5 text-sidebar-foreground transition-colors duration-300 hover:bg-gray-black-7 hover:text-sidebar-accent-foreground",
-              children: /* @__PURE__ */ e(z, { className: "h-4 w-4" })
-            }
-          ),
-          t && /* @__PURE__ */ e(
-            _,
-            {
-              footerMenu: t,
-              showAvatarBorder: h,
-              setShowAvatarBorder: l,
-              isCollapsed: o,
-              theme: d
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-function v(t) {
-  return u(
-    "flex min-w-[200px] max-w-[300px] flex-col rounded border-none bg-sidebar-popup p-2 shadow-xs",
-    t === "dark" && "dark text-sidebar-foreground"
-  );
-}
-function _({
-  footerMenu: t,
-  showAvatarBorder: r,
-  setShowAvatarBorder: h,
-  isCollapsed: l,
-  theme: i
-}) {
-  var m, o;
-  const b = `${((m = t.firstName) == null ? void 0 : m[0]) ?? ""}${((o = t.lastName) == null ? void 0 : o[0]) ?? ""}`.toUpperCase(), n = g.useRef(null), [d, c] = g.useState(!1);
-  g.useEffect(() => {
-    const f = n.current;
-    f && c(f.scrollWidth > f.clientWidth);
-  }, [t.fullName, l]);
-  const s = /* @__PURE__ */ a(
-    F,
-    {
-      className: u(
-        "h-9 w-9 shrink-0",
-        // Avatar border: expanded dark #2e2e33 / light #e3e8ef,
-        // collapsed dark #4a4a4f / light #e3e8ef (original style.tsx:582-597)
-        r && (l ? "ring-1 ring-gray-blue-2 dark:ring-gray-black-6" : "ring-1 ring-gray-blue-2 dark:ring-gray-black-7")
-      ),
-      children: [
-        /* @__PURE__ */ e(
-          P,
-          {
-            src: t.thumbnailImageSrc,
-            alt: t.fullName,
-            onError: () => (h(!0), !0)
-          }
-        ),
-        /* @__PURE__ */ e(R, { className: "bg-transparent text-xs text-gray-blue-5 dark:text-gray-black-3", children: b })
-      ]
-    }
-  );
-  return l ? /* @__PURE__ */ a(x, { children: [
-    /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e("button", { className: "flex h-full w-full cursor-pointer items-center justify-center transition-colors duration-300 hover:bg-sidebar-accent", children: s }) }),
-    /* @__PURE__ */ e(
-      N,
-      {
-        side: "right",
-        align: "start",
-        sideOffset: -8,
-        alignOffset: -12,
-        showArrow: !1,
-        className: v(i),
-        children: /* @__PURE__ */ e(
-          w,
-          {
-            actions: t.actions,
-            theme: i
+    }, s = [...e.menuItems];
+    return e.footerTopMenu && s.push(e.footerTopMenu), e.salesChannelMenu && s.push(e.salesChannelMenu), e.bottomMenuItems && s.push(...e.bottomMenuItems), n(s);
+  }, [
+    e.currentPath,
+    e.menuItems,
+    e.footerTopMenu,
+    e.salesChannelMenu,
+    e.bottomMenuItems
+  ]), C = g(
+    () => i ? [i] : [],
+    [i]
+  ), R = l(
+    (n) => {
+      const s = (u) => {
+        for (let a = 0; a < u.length; a++) {
+          const o = u[a];
+          if (o.uuid === n) return o;
+          if (o.childItems) {
+            const r = s(o.childItems);
+            if (r) return r;
           }
-        )
-      }
-    )
-  ] }) : /* @__PURE__ */ a("div", { className: "flex h-full w-full items-center gap-2 px-4", children: [
-    s,
-    /* @__PURE__ */ a("div", { className: "flex min-w-0 max-w-[124px] flex-1 flex-col", children: [
-      d ? /* @__PURE__ */ e(
-        W,
-        {
-          content: t.fullName,
-          className: y(i),
-          showArrow: !1,
-          children: /* @__PURE__ */ e(
-            "span",
-            {
-              ref: n,
-              className: "truncate text-sm font-medium text-sidebar-accent-foreground",
-              children: t.fullName
-            }
-          )
         }
-      ) : /* @__PURE__ */ e(
-        "span",
-        {
-          ref: n,
-          className: "truncate text-sm font-medium text-sidebar-accent-foreground",
-          children: t.fullName
-        }
-      ),
-      /* @__PURE__ */ e("span", { className: "truncate text-xs text-sidebar-foreground", children: t.merchantName })
-    ] }),
-    /* @__PURE__ */ a(x, { children: [
-      /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e("button", { className: "ml-auto flex h-8 w-8 shrink-0 items-center justify-center rounded border border-transparent text-gray-blue-5 transition-colors duration-300 hover:border-gray-blue-2 hover:bg-gray-blue-0 dark:text-white dark:hover:border-gray-black-7 dark:hover:bg-gray-black-7", children: /* @__PURE__ */ e(D, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ e(
-        N,
-        {
-          side: "right",
-          align: "start",
-          sideOffset: 8,
-          alignOffset: 6,
-          showArrow: !1,
-          className: v(i),
-          children: /* @__PURE__ */ e(
-            w,
-            {
-              actions: t.actions,
-              theme: i
+      }, t = [...e.menuItems];
+      return e.footerTopMenu && t.push(e.footerTopMenu), e.bottomMenuItems && t.push(...e.bottomMenuItems), s(t);
+    },
+    [e.menuItems, e.footerTopMenu, e.bottomMenuItems]
+  ), c = l(
+    (n, s = !0) => {
+      h.current && clearTimeout(h.current), e.sidebarCollapsed && s && e.setSidebarCollapsed(!1), w(n), B(!0);
+    },
+    [e]
+  ), I = l(
+    (n = !1) => {
+      var t;
+      h.current && clearTimeout(h.current);
+      const s = () => {
+        var u;
+        (u = d == null ? void 0 : d.expandedMenuSettings) != null && u.onBackClick && d.expandedMenuSettings.onBackClick(), w(null);
+      };
+      B(!1), n || (t = d == null ? void 0 : d.expandedMenuSettings) != null && t.closeFast ? s() : h.current = setTimeout(s, 300);
+    },
+    [d]
+  ), U = l(
+    (n) => {
+      if (!e.sidebarCollapsed && n.length) {
+        const s = n[n.length - 1];
+        let t = i;
+        e.menuItems.forEach((u) => {
+          var o;
+          ((o = u.childItems) == null ? void 0 : o.find(
+            (r) => r.uuid === i
+          )) && (t = u.uuid);
+        }), n.find((u) => u === t) && t !== s && (n = [t, s]);
+      }
+      E(n.slice(n.length - 2, n.length) || []);
+    },
+    [e.sidebarCollapsed, e.menuItems, i]
+  ), y = l(
+    (n) => {
+      e.expandMenuItem && e.expandMenuItem.path === n.path && e.expandMenuItem.isExpandableMenu || n.isExpandableMenu || n.path && (!document.startViewTransition || n.skipViewTransition || e.isExpandedMenu ? x(n.path) : document.startViewTransition(() => {
+        z(() => {
+          x(n.path);
+        });
+      }));
+    },
+    [e.expandMenuItem, e.isExpandedMenu, x]
+  ), D = l(
+    (n) => {
+      var s;
+      if (e.expandMenuItem)
+        if (e.expandMenuItem.path === n.path) {
+          const t = e.menuItems.find(
+            (u) => {
+              var a;
+              return ((a = e.expandMenuItem) == null ? void 0 : a.uuid) === u.uuid;
             }
-          )
+          ) || e.expandMenuItem;
+          c(t, !1);
+          return;
+        } else
+          I(!0);
+      n.isExpandableMenu ? c(n, !1) : (s = n == null ? void 0 : n.onClick) == null || s.call(n);
+    },
+    [e.expandMenuItem, e.menuItems, c, I]
+  ), b = l(() => {
+    C.length && !M.length && e.menuItems.forEach((n) => {
+      var t;
+      ((t = n.childItems) == null ? void 0 : t.find(
+        (u) => u.uuid === i
+      )) && E([n.uuid]);
+    });
+  }, [C, M, e.menuItems, i]), K = l(
+    (n) => {
+      var t, u;
+      if ((t = n.childItems) == null ? void 0 : t.some(
+        (a) => a.isExpandableMenu
+      )) {
+        const a = (u = n.childItems) == null ? void 0 : u.find(
+          (o) => {
+            var r;
+            return (r = o.childItems) == null ? void 0 : r.find((j) => j.uuid === i);
+          }
+        );
+        a && c(a);
+      }
+    },
+    [i, c]
+  ), p = l(
+    (n = !0) => {
+      if (!e.expandMenuItem) return;
+      const s = e.menuItems.find(
+        (t) => {
+          var u;
+          return ((u = e.expandMenuItem) == null ? void 0 : u.uuid) === t.uuid;
         }
-      )
-    ] })
-  ] });
-}
-function w({
-  actions: t
-}) {
-  return /* @__PURE__ */ e("div", { className: "flex flex-col", children: t.map((r) => /* @__PURE__ */ a(
-    "button",
-    {
-      onClick: r.item.onClick,
-      className: u(
-        "flex h-9 cursor-pointer items-center gap-2 rounded px-2.5 text-sm font-medium transition-colors duration-300",
-        "text-sidebar-accent-foreground hover:bg-sidebar-popup-hover dark:text-sidebar-foreground",
-        r.isRed ? "hover:text-gray-blue-6 dark:hover:text-error" : "dark:hover:text-sidebar-foreground"
-      ),
-      children: [
-        r.item.icon && /* @__PURE__ */ e(k, { icon: r.item.icon, size: 16 }),
-        /* @__PURE__ */ e("span", { className: "truncate", children: r.item.labelTitle }),
-        !!r.item.newDataCount && /* @__PURE__ */ e("span", { className: "ml-auto flex h-5 min-w-[26px] items-center justify-center rounded-xl bg-purple text-xs text-white", children: r.item.newDataCount })
-      ]
+      ) || e.expandMenuItem;
+      c(s, n);
+    },
+    [e.expandMenuItem, e.menuItems, c]
+  ), L = g(() => {
+    if (d)
+      return {
+        sidebarCollapsed: e.sidebarCollapsed,
+        menuItems: [d],
+        currentPath: e.currentPath,
+        footerMenu: void 0,
+        isExpandedMenu: !0,
+        setSidebarCollapsed: e.setSidebarCollapsed
+      };
+  }, [d, e.sidebarCollapsed, e.currentPath, e.setSidebarCollapsed]), N = l(
+    (n) => {
+      var s, t;
+      if (n != null && n.iconBackgroundColor)
+        return n.iconBackgroundColor;
+      if ((s = n == null ? void 0 : n.expandedMenuSettings) != null && s.backgroundColor)
+        return n.expandedMenuSettings.backgroundColor;
+      if ((t = n.icon) != null && t.displayName) {
+        const u = n.icon.displayName;
+        if (u === "world-icon") return "#B2A4FF";
+        if (u === "building-icon") return "#8FCCF8";
+        if (u === "store-icon") return "#9AA4B2";
+      }
     },
-    r.item.uuid
-  )) });
+    []
+  );
+  S(() => {
+    var n, s;
+    if (e.sidebarCollapsed || b(), e.salesChannelMenu && T([e.salesChannelMenu.uuid]), p(), M.length || (e.menuItems.forEach((t) => K(t)), e.salesChannelMenu && K(e.salesChannelMenu)), e.isExpandedMenu && e.menuItems.length && ((n = e.menuItems[0].childItems) != null && n.length)) {
+      const t = e.menuItems[0].childItems;
+      !t.slice(1).some(
+        (o) => o.uuid === i
+      ) && t[0] && y(t[0]);
+    }
+    (s = e.footerMenu) != null && s.thumbnailImageSrc && k(!1);
+  }, []), S(() => {
+    const n = V(
+      () => e.sidebarCollapsed,
+      (s) => {
+        s ? m(!1) : (m(!0), setTimeout(() => {
+          b(), p();
+        }, 300));
+      }
+    );
+    return () => n();
+  }, [e, b, p]), S(() => {
+    const n = V(
+      () => !!e.expandMenuItem,
+      () => {
+        e.expandMenuItem ? p() : I();
+      }
+    );
+    return () => n();
+  }, [e, p, I]);
+  const W = e.isExpandedMenu && e.sidebarCollapsed;
+  return {
+    // State
+    openKeys: M,
+    salesChannelOpenKey: F,
+    selectedExpandedMenu: d,
+    isSelectedExpandedMenuVisible: P,
+    showAvatarBorder: A,
+    showTypographyText: O,
+    selectedItemUUID: i,
+    selectedUUIDList: C,
+    isExpandedFooterVisible: W,
+    salesChannelsSidebarModel: L,
+    // Setters
+    setShowAvatarBorder: k,
+    setSalesChannelOpenKey: T,
+    // Actions
+    getItem: R,
+    expandMenu: c,
+    clearExpandedMenu: I,
+    onOpenKeysChange: U,
+    onItemClick: y,
+    onLeafClick: D,
+    openExpandedItem: p,
+    getSalesChannelIconBackgroundColor: N
+  };
 }
 export {
-  K as NavigationFooter
+  Q as useNavigation
 };

package/dist/index112.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("@ikas/ui"),a=require("./index3.cjs"),p=require("./index110.cjs"),x=require("./index77.cjs");function g({salesChannelMenu:r,selectedUUIDList:n,openKeys:i,onOpenKeysChange:o,onItemClick:c,onLeafClick:d,showTypographyText:l,getSalesChannelIconBackgroundColor:u,theme:b}){const{state:m}=s.useSidebar(),t=m==="collapsed";return e.jsxs(s.SidebarGroup,{className:"my-4",children:[e.jsxs(s.SidebarGroupLabel,{className:a.cn("mb-1 flex h-auto items-center justify-between gap-2 text-xs font-medium text-sidebar-accent-foreground dark:text-gray-black-4",t?"p-0":"py-2 pl-2.5 pr-2"),children:[!t&&e.jsx("span",{children:r.labelTitle}),r.onAddClick&&e.jsxs("button",{onClick:r.onAddClick,className:a.cn("group/scadd relative flex h-9 w-9 shrink-0 items-center justify-center transition-colors duration-300 hover:text-sidebar-accent-foreground",!t&&"-my-2 -mr-2"),children:[e.jsx(x.default,{className:"h-4 w-4"}),e.jsx("span",{className:"pointer-events-none absolute inset-[7px] rounded-sm border border-gray-blue-9 transition-colors duration-300 dark:border-gray-black-6 dark:group-hover/scadd:border-gray-black-4","aria-hidden":!0})]})]}),e.jsx(p.NavigationMenu,{items:r.childItems??[],selectedUUIDList:n,openKeys:i,onOpenKeysChange:o,onItemClick:c,onLeafClick:d,isSalesChannel:!0,showTypographyText:l,getSalesChannelIconBackgroundColor:u,theme:b})]})}exports.SalesChannelMenu=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),h=require("@ikas/ui"),v=require("./index3.cjs"),l=require("./index306.cjs"),w=require("./index128.cjs"),q=require("./index129.cjs");function L({theme:r="dark",isExpandedMenu:s,menuItems:n,logoRightSideContent:i,logo:u,collapsedLogo:g,onLogoSectionClick:o,clearExpandedMenu:d,expandedMenuItem:p,getSalesChannelIconBackgroundColor:k,onCollapse:x,salesChannelMenuUUID:b,setSalesChannelOpenKey:y}){const{state:N}=h.useSidebar(),m=N==="collapsed";if(!s)return e.jsx(h.SidebarHeader,{className:"h-[72px] min-h-[72px] flex-row items-center justify-between p-4",children:m?e.jsx("button",{onClick:()=>x(!1),className:"mx-auto flex items-center justify-center rounded bg-black p-2 text-sidebar-foreground transition-colors duration-300 hover:bg-gray-black-7 hover:text-sidebar-accent-foreground",children:g??e.jsx(l.Logo,{className:"h-6 w-6"})}):e.jsxs(e.Fragment,{children:[e.jsxs("div",{onClick:o,className:"flex h-10 flex-1 items-center gap-2 pl-1.5",style:{cursor:o?"pointer":void 0},children:[u??(r==="light"?e.jsx(l.LightSidebarIkasLogo,{}):e.jsx(l.LogoIkas,{})),i]}),e.jsx("button",{onClick:()=>{x(!0),b&&y([b])},className:"flex h-10 w-10 shrink-0 items-center justify-center text-gray-blue-5 transition-colors duration-300 hover:text-sidebar-accent-foreground dark:text-gray-black-4",style:{marginRight:"calc((18px - 40px) / 2)"},children:e.jsx(w.default,{className:"h-[18px] w-[18px]"})})]})});const t=n[0],j=t?k(t):void 0,c=p??t;return e.jsx(h.SidebarHeader,{className:"h-[72px] min-h-[72px] p-0 border-b border-sidebar-accent",children:m?e.jsx("button",{onClick:()=>x(!1),className:v.cn("mx-auto flex items-center justify-center rounded bg-black text-sidebar-foreground transition-colors duration-300 hover:bg-gray-black-7 hover:text-sidebar-accent-foreground",t!=null&&t.icon?"p-2.5":"p-2"),children:t!=null&&t.icon?e.jsx(f,{icon:t.icon,fillColor:j,size:20}):e.jsx(l.Logo,{className:"h-6 w-6"})}):e.jsxs("button",{onClick:()=>d==null?void 0:d(),className:"flex h-full w-full items-center gap-2 px-[26px] text-sidebar-foreground transition-colors duration-300 hover:bg-sidebar-accent select-none",children:[e.jsx(q.default,{className:"h-4 w-4 shrink-0"}),e.jsxs("div",{className:"flex flex-1 items-center gap-2 min-w-0",children:[(t==null?void 0:t.icon)&&e.jsx(f,{icon:t.icon,fillColor:j,size:20}),e.jsx("span",{className:"max-w-[136px] truncate text-sm font-medium",children:(c==null?void 0:c.label)??(c==null?void 0:c.labelTitle)})]})]})})}function S({icon:r,fillColor:s,size:n=16}){if(!r)return null;const i=a.isValidElement(r)?r:e.jsx(r,{style:{width:"100%",height:"100%",fill:"none",...s?{"--icon-fill-color":s}:{}}});return e.jsx("span",{className:"flex shrink-0 items-center justify-center [&_svg_rect]:transition-colors",style:{width:n,height:n},children:i})}function f({icon:r,fillColor:s,size:n=16}){if(!r)return null;const i=a.useRef(null);a.useEffect(()=>{i.current&&s&&i.current.querySelectorAll("svg rect").forEach(o=>{o.style.fill=s})},[s]);const u=a.isValidElement(r)?r:e.jsx(r,{style:{width:"100%",height:"100%",fill:"none"}});return e.jsx("span",{ref:i,className:"flex shrink-0 items-center justify-center",style:{width:n,height:n},children:u})}exports.IconWithFill=f;exports.IconWrapper=S;exports.NavigationHeader=L;