@ikas/core 1.0.8 → 1.0.9

package/dist/index111.js

@@ -1,225 +1,207 @@
-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
+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 "./index123.js";
+import D from "./index124.js";
+function K({
+  footerMenu: t,
+  footerTopMenu: r,
+  showAvatarBorder: h,
+  setShowAvatarBorder: l,
+  selectedUUIDList: i,
+  onItemClick: b,
+  onLeafClick: n,
+  theme: d = "dark",
+  isExpandedFooterVisible: c,
+  clearExpandedMenu: s
 }) {
-  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;
+  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 })
+        ]
       }
-    }, 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;
-          }
-        }
-      }, 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;
+    ) }) }) }),
+    (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" })
             }
-          ) || 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;
-        }
-      ) || 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";
+          ),
+          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"
   );
-  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]);
+}
+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 })
+      ]
     }
-    (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 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
+          }
+        )
       }
-    );
-    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
-  };
+    )
+  ] }) : /* @__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
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+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 })
+      ]
+    },
+    r.item.uuid
+  )) });
 }
 export {
-  Q as useNavigation
+  K as NavigationFooter
 };

package/dist/index112.cjs

@@ -1 +1 @@
-"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;
+"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;