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

package/dist/index.js

@@ -778,21 +778,21 @@ 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 [selectedKeys, setSelectedKeys] = (0, import_react16.useState)([]);
+  const handleChange = (item, keys) => {
+    setSelectedKeys(keys);
     if (props.onChange) {
       props.onChange(item);
     }
   };
-  function getItem(label, key, icon, children, item) {
+  function getItem(label, key, icon, children, item, keys = []) {
     return {
       key,
       icon: icon ? /* @__PURE__ */ import_react16.default.createElement(
         "span",
         {
           className: props.iconsClassName,
-          style: selectedIndex === key ? {
+          style: keys.includes(key.toString()) ? {
             filter: "brightness(0) saturate(100%) invert(22%) sepia(87%) saturate(7476%) hue-rotate(209deg) brightness(97%) contrast(107%)"
           } : {}
         },
@@ -800,20 +800,21 @@ var Sidebar = (props) => {
       ) : null,
       children,
       label,
-      onClick: children ? void 0 : () => handleChange(item, key.toString())
+      onClick: children ? void 0 : () => handleChange(item, keys.concat(key.toString()))
       // Only set onClick for leaf nodes
     };
   }
-  function mapItems(items2, parentKey = "") {
+  function mapItems(items2, parentKeys = []) {
     return items2.map((eachItem, index) => {
-      const key = parentKey ? `${parentKey}-${index}` : index.toString();
+      const key = parentKeys.concat(index.toString());
       const childItems = eachItem.items ? mapItems(eachItem.items, key) : void 0;
       return getItem(
         eachItem.label,
-        key,
+        key[key.length - 1],
         eachItem.icon ? icons[eachItem.icon] || /* @__PURE__ */ import_react16.default.createElement("img", { src: eachItem.icon, alt: "" }) : null,
         childItems,
-        eachItem
+        eachItem,
+        key
       );
     });
   }
@@ -828,7 +829,14 @@ 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: selectedKeys.map((key) => key.split("-").pop())
+      }
+    )
   ));
 };
 

package/dist/index.mjs

@@ -707,21 +707,21 @@ 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 [selectedKeys, setSelectedKeys] = useState5([]);
+  const handleChange = (item, keys) => {
+    setSelectedKeys(keys);
     if (props.onChange) {
       props.onChange(item);
     }
   };
-  function getItem(label, key, icon, children, item) {
+  function getItem(label, key, icon, children, item, keys = []) {
     return {
       key,
       icon: icon ? /* @__PURE__ */ React15.createElement(
         "span",
         {
           className: props.iconsClassName,
-          style: selectedIndex === key ? {
+          style: keys.includes(key.toString()) ? {
             filter: "brightness(0) saturate(100%) invert(22%) sepia(87%) saturate(7476%) hue-rotate(209deg) brightness(97%) contrast(107%)"
           } : {}
         },
@@ -729,20 +729,21 @@ var Sidebar = (props) => {
       ) : null,
       children,
       label,
-      onClick: children ? void 0 : () => handleChange(item, key.toString())
+      onClick: children ? void 0 : () => handleChange(item, keys.concat(key.toString()))
       // Only set onClick for leaf nodes
     };
   }
-  function mapItems(items2, parentKey = "") {
+  function mapItems(items2, parentKeys = []) {
     return items2.map((eachItem, index) => {
-      const key = parentKey ? `${parentKey}-${index}` : index.toString();
+      const key = parentKeys.concat(index.toString());
       const childItems = eachItem.items ? mapItems(eachItem.items, key) : void 0;
       return getItem(
         eachItem.label,
-        key,
+        key[key.length - 1],
         eachItem.icon ? icons[eachItem.icon] || /* @__PURE__ */ React15.createElement("img", { src: eachItem.icon, alt: "" }) : null,
         childItems,
-        eachItem
+        eachItem,
+        key
       );
     });
   }
@@ -757,7 +758,14 @@ 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: selectedKeys.map((key) => key.split("-").pop())
+      }
+    )
   ));
 };
 

package/package.json

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