@leduchai/vmeta-ui-shell 0.1.4 → 0.1.5

package/dist/index.cjs

@@ -60,6 +60,7 @@ function VmetaSidebar({
   activePath,
   collapsed = false,
   storageKey = `vmeta:${app.appId}:menu-groups`,
+  idPrefix,
   account,
   footer,
   showCollapse = false,
@@ -67,6 +68,8 @@ function VmetaSidebar({
   onNavigate,
   onCollapsedChange
 }) {
+  const generatedId = (0, import_react.useId)().replace(/:/g, "");
+  const groupIdPrefix = idPrefix ?? `vmeta-menu-${app.appId}-${generatedId}`;
   const visibleGroups = (0, import_react.useMemo)(
     () => groups.map((group) => ({
       ...group,
@@ -128,14 +131,14 @@ function VmetaSidebar({
             className: "vmeta-menu-group__toggle",
             onClick: () => toggleGroup(group.key),
             "aria-expanded": open,
-            "aria-controls": `vmeta-menu-group-${group.key}`,
+            "aria-controls": `${groupIdPrefix}-${group.key}`,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: group.label }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `vmeta-menu-group__chevron ${open ? "is-open" : ""}`, "aria-hidden": "true", children: "\u2304" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: `vmeta-menu-group-${group.key}`, className: `vmeta-menu-group__items ${open ? "is-open" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: group.children.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VmetaMenuButton, { item, active: isMenuItemActive(item, activePath), onNavigate: navigate }, item.key)) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: `${groupIdPrefix}-${group.key}`, className: `vmeta-menu-group__items ${open ? "is-open" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: group.children.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VmetaMenuButton, { item, active: isMenuItemActive(item, activePath), onNavigate: navigate }, item.key)) }) })
       ] }, group.key);
     }) }),
     footer && !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vmeta-sidebar__footer", children: footer }),
@@ -196,15 +199,24 @@ function VmetaAppShell({
   canAccess,
   onNavigate
 }) {
-  const [collapsed, setCollapsed] = (0, import_react.useState)(() => readStoredBoolean(storageKey, false));
+  const [collapsed, setCollapsed] = (0, import_react.useState)(false);
   const [menuOpen, setMenuOpen] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    setCollapsed(readStoredBoolean(storageKey, false));
+  }, [storageKey]);
   const updateCollapsed = (value) => {
     setCollapsed(value);
     writeStorage(storageKey, String(value));
   };
   const navigate = (item) => {
     setMenuOpen(false);
-    onNavigate?.(item);
+    if (onNavigate) {
+      onNavigate(item);
+      return;
+    }
+    if (typeof window === "undefined") return;
+    if (item.external) window.open(item.href, "_blank", "noopener,noreferrer");
+    else window.location.assign(item.href);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: `vmeta-app-shell ${collapsed ? "is-collapsed" : ""}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/index.d.cts

@@ -48,6 +48,7 @@ interface VmetaSidebarProps {
     activePath: string;
     collapsed?: boolean;
     storageKey?: string;
+    idPrefix?: string;
     account?: VmetaAccount;
     footer?: ReactNode;
     showCollapse?: boolean;
@@ -55,7 +56,7 @@ interface VmetaSidebarProps {
     onNavigate?: (item: VmetaMenuItem) => void;
     onCollapsedChange?: (collapsed: boolean) => void;
 }
-declare function VmetaSidebar({ app, groups, activePath, collapsed, storageKey, account, footer, showCollapse, canAccess, onNavigate, onCollapsedChange, }: VmetaSidebarProps): react_jsx_runtime.JSX.Element;
+declare function VmetaSidebar({ app, groups, activePath, collapsed, storageKey, idPrefix, account, footer, showCollapse, canAccess, onNavigate, onCollapsedChange, }: VmetaSidebarProps): react_jsx_runtime.JSX.Element;
 interface VmetaAppShellProps {
     app: VmetaAppIdentity;
     groups: VmetaMenuGroup[];

package/dist/index.d.ts

@@ -48,6 +48,7 @@ interface VmetaSidebarProps {
     activePath: string;
     collapsed?: boolean;
     storageKey?: string;
+    idPrefix?: string;
     account?: VmetaAccount;
     footer?: ReactNode;
     showCollapse?: boolean;
@@ -55,7 +56,7 @@ interface VmetaSidebarProps {
     onNavigate?: (item: VmetaMenuItem) => void;
     onCollapsedChange?: (collapsed: boolean) => void;
 }
-declare function VmetaSidebar({ app, groups, activePath, collapsed, storageKey, account, footer, showCollapse, canAccess, onNavigate, onCollapsedChange, }: VmetaSidebarProps): react_jsx_runtime.JSX.Element;
+declare function VmetaSidebar({ app, groups, activePath, collapsed, storageKey, idPrefix, account, footer, showCollapse, canAccess, onNavigate, onCollapsedChange, }: VmetaSidebarProps): react_jsx_runtime.JSX.Element;
 interface VmetaAppShellProps {
     app: VmetaAppIdentity;
     groups: VmetaMenuGroup[];

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/index.tsx
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useId, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var allowAllPermissions = () => true;
 function isMenuItemActive(item, activePath) {
@@ -35,6 +35,7 @@ function VmetaSidebar({
   activePath,
   collapsed = false,
   storageKey = `vmeta:${app.appId}:menu-groups`,
+  idPrefix,
   account,
   footer,
   showCollapse = false,
@@ -42,6 +43,8 @@ function VmetaSidebar({
   onNavigate,
   onCollapsedChange
 }) {
+  const generatedId = useId().replace(/:/g, "");
+  const groupIdPrefix = idPrefix ?? `vmeta-menu-${app.appId}-${generatedId}`;
   const visibleGroups = useMemo(
     () => groups.map((group) => ({
       ...group,
@@ -103,14 +106,14 @@ function VmetaSidebar({
             className: "vmeta-menu-group__toggle",
             onClick: () => toggleGroup(group.key),
             "aria-expanded": open,
-            "aria-controls": `vmeta-menu-group-${group.key}`,
+            "aria-controls": `${groupIdPrefix}-${group.key}`,
             children: [
               /* @__PURE__ */ jsx("span", { children: group.label }),
               /* @__PURE__ */ jsx("span", { className: `vmeta-menu-group__chevron ${open ? "is-open" : ""}`, "aria-hidden": "true", children: "\u2304" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { id: `vmeta-menu-group-${group.key}`, className: `vmeta-menu-group__items ${open ? "is-open" : ""}`, children: /* @__PURE__ */ jsx("div", { children: group.children.map((item) => /* @__PURE__ */ jsx(VmetaMenuButton, { item, active: isMenuItemActive(item, activePath), onNavigate: navigate }, item.key)) }) })
+        /* @__PURE__ */ jsx("div", { id: `${groupIdPrefix}-${group.key}`, className: `vmeta-menu-group__items ${open ? "is-open" : ""}`, children: /* @__PURE__ */ jsx("div", { children: group.children.map((item) => /* @__PURE__ */ jsx(VmetaMenuButton, { item, active: isMenuItemActive(item, activePath), onNavigate: navigate }, item.key)) }) })
       ] }, group.key);
     }) }),
     footer && !collapsed && /* @__PURE__ */ jsx("div", { className: "vmeta-sidebar__footer", children: footer }),
@@ -171,15 +174,24 @@ function VmetaAppShell({
   canAccess,
   onNavigate
 }) {
-  const [collapsed, setCollapsed] = useState(() => readStoredBoolean(storageKey, false));
+  const [collapsed, setCollapsed] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
+  useEffect(() => {
+    setCollapsed(readStoredBoolean(storageKey, false));
+  }, [storageKey]);
   const updateCollapsed = (value) => {
     setCollapsed(value);
     writeStorage(storageKey, String(value));
   };
   const navigate = (item) => {
     setMenuOpen(false);
-    onNavigate?.(item);
+    if (onNavigate) {
+      onNavigate(item);
+      return;
+    }
+    if (typeof window === "undefined") return;
+    if (item.external) window.open(item.href, "_blank", "noopener,noreferrer");
+    else window.location.assign(item.href);
   };
   return /* @__PURE__ */ jsxs("main", { className: `vmeta-app-shell ${collapsed ? "is-collapsed" : ""}`, children: [
     /* @__PURE__ */ jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leduchai/vmeta-ui-shell",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Application shell, sidebar, menu va header dung chung cua VMETA.",
   "license": "MIT",
   "type": "module",
@@ -21,7 +21,7 @@
     "build": "tsup src/index.tsx --format esm,cjs --dts --clean --external react --external react-dom && node ../../scripts/copy-file.mjs src/styles.css dist/styles.css"
   },
   "dependencies": {
-    "@leduchai/vmeta-ui-tokens": "0.1.4"
+    "@leduchai/vmeta-ui-tokens": "0.1.5"
   },
   "peerDependencies": {
     "react": ">=18 <20",