@apexcura/ui-components 0.0.16-Beta50 → 0.0.16-Beta52

package/dist/index.js

@@ -778,21 +778,22 @@ var import_antd11 = require("antd");
 var { Sider } = import_antd11.Layout;
 var Sidebar = (props) => {
   const [collapsed, setCollapsed] = (0, import_react16.useState)(false);
-  const [selectedIndex, setSelectedIndex] = (0, import_react16.useState)(null);
-  const handleChange = (item, index) => {
-    setSelectedIndex(index);
+  const [selectedPath, setSelectedPath] = (0, import_react16.useState)([]);
+  const handleChange = (item, keyPath) => {
+    setSelectedPath(keyPath);
     if (props.onChange) {
       props.onChange(item);
     }
   };
   function getItem(label, key, icon, children, item) {
+    const isSelected = selectedPath.includes(key.toString());
     return {
       key,
       icon: icon ? /* @__PURE__ */ import_react16.default.createElement(
         "span",
         {
           className: props.iconsClassName,
-          style: selectedIndex === key ? {
+          style: isSelected ? {
             filter: "brightness(0) saturate(100%) invert(22%) sepia(87%) saturate(7476%) hue-rotate(209deg) brightness(97%) contrast(107%)"
           } : {}
         },
@@ -800,8 +801,7 @@ var Sidebar = (props) => {
       ) : null,
       children,
       label,
-      onClick: children ? void 0 : () => handleChange(item, key.toString())
-      // Only set onClick for leaf nodes
+      onClick: children ? void 0 : () => handleChange(item, key.toString().split("-"))
     };
   }
   function mapItems(items2, parentKey = "") {
@@ -828,7 +828,7 @@ var Sidebar = (props) => {
     },
     /* @__PURE__ */ import_react16.default.createElement("div", { className: "demo-logo-vertical" }),
     /* @__PURE__ */ import_react16.default.createElement("img", { src: props.img, alt: "", className: props.imgClassName }),
-    /* @__PURE__ */ import_react16.default.createElement(import_antd11.Menu, { mode: "inline", items, selectedKeys: [selectedIndex] })
+    /* @__PURE__ */ import_react16.default.createElement(import_antd11.Menu, { mode: "inline", items, selectedKeys: [selectedPath[selectedPath.length - 1] || ""] })
   ));
 };
 

package/dist/index.mjs

@@ -707,21 +707,22 @@ import { Layout, Menu } from "antd";
 var { Sider } = Layout;
 var Sidebar = (props) => {
   const [collapsed, setCollapsed] = useState5(false);
-  const [selectedIndex, setSelectedIndex] = useState5(null);
-  const handleChange = (item, index) => {
-    setSelectedIndex(index);
+  const [selectedPath, setSelectedPath] = useState5([]);
+  const handleChange = (item, keyPath) => {
+    setSelectedPath(keyPath);
     if (props.onChange) {
       props.onChange(item);
     }
   };
   function getItem(label, key, icon, children, item) {
+    const isSelected = selectedPath.includes(key.toString());
     return {
       key,
       icon: icon ? /* @__PURE__ */ React15.createElement(
         "span",
         {
           className: props.iconsClassName,
-          style: selectedIndex === key ? {
+          style: isSelected ? {
             filter: "brightness(0) saturate(100%) invert(22%) sepia(87%) saturate(7476%) hue-rotate(209deg) brightness(97%) contrast(107%)"
           } : {}
         },
@@ -729,8 +730,7 @@ var Sidebar = (props) => {
       ) : null,
       children,
       label,
-      onClick: children ? void 0 : () => handleChange(item, key.toString())
-      // Only set onClick for leaf nodes
+      onClick: children ? void 0 : () => handleChange(item, key.toString().split("-"))
     };
   }
   function mapItems(items2, parentKey = "") {
@@ -757,7 +757,7 @@ var Sidebar = (props) => {
     },
     /* @__PURE__ */ React15.createElement("div", { className: "demo-logo-vertical" }),
     /* @__PURE__ */ React15.createElement("img", { src: props.img, alt: "", className: props.imgClassName }),
-    /* @__PURE__ */ React15.createElement(Menu, { mode: "inline", items, selectedKeys: [selectedIndex] })
+    /* @__PURE__ */ React15.createElement(Menu, { mode: "inline", items, selectedKeys: [selectedPath[selectedPath.length - 1] || ""] })
   ));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.16-Beta50",
+  "version": "0.0.16-Beta52",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",