@apexcura/ui-components 0.0.16-Beta51 → 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 [selectedKeys, setSelectedKeys] = (0, import_react16.useState)([]);
-  const handleChange = (item, keys) => {
-    setSelectedKeys(keys);
+  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, keys = []) {
+  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: keys.includes(key.toString()) ? {
+          style: isSelected ? {
             filter: "brightness(0) saturate(100%) invert(22%) sepia(87%) saturate(7476%) hue-rotate(209deg) brightness(97%) contrast(107%)"
           } : {}
         },
@@ -800,21 +801,19 @@ var Sidebar = (props) => {
       ) : null,
       children,
       label,
-      onClick: children ? void 0 : () => handleChange(item, keys.concat(key.toString()))
-      // Only set onClick for leaf nodes
+      onClick: children ? void 0 : () => handleChange(item, key.toString().split("-"))
     };
   }
-  function mapItems(items2, parentKeys = []) {
+  function mapItems(items2, parentKey = "") {
     return items2.map((eachItem, index) => {
-      const key = parentKeys.concat(index.toString());
+      const key = parentKey ? `${parentKey}-${index}` : index.toString();
       const childItems = eachItem.items ? mapItems(eachItem.items, key) : void 0;
       return getItem(
         eachItem.label,
-        key[key.length - 1],
+        key,
         eachItem.icon ? icons[eachItem.icon] || /* @__PURE__ */ import_react16.default.createElement("img", { src: eachItem.icon, alt: "" }) : null,
         childItems,
-        eachItem,
-        key
+        eachItem
       );
     });
   }
@@ -829,14 +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: selectedKeys.map((key) => key.split("-").pop())
-      }
-    )
+    /* @__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 [selectedKeys, setSelectedKeys] = useState5([]);
-  const handleChange = (item, keys) => {
-    setSelectedKeys(keys);
+  const [selectedPath, setSelectedPath] = useState5([]);
+  const handleChange = (item, keyPath) => {
+    setSelectedPath(keyPath);
     if (props.onChange) {
       props.onChange(item);
     }
   };
-  function getItem(label, key, icon, children, item, keys = []) {
+  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: keys.includes(key.toString()) ? {
+          style: isSelected ? {
             filter: "brightness(0) saturate(100%) invert(22%) sepia(87%) saturate(7476%) hue-rotate(209deg) brightness(97%) contrast(107%)"
           } : {}
         },
@@ -729,21 +730,19 @@ var Sidebar = (props) => {
       ) : null,
       children,
       label,
-      onClick: children ? void 0 : () => handleChange(item, keys.concat(key.toString()))
-      // Only set onClick for leaf nodes
+      onClick: children ? void 0 : () => handleChange(item, key.toString().split("-"))
     };
   }
-  function mapItems(items2, parentKeys = []) {
+  function mapItems(items2, parentKey = "") {
     return items2.map((eachItem, index) => {
-      const key = parentKeys.concat(index.toString());
+      const key = parentKey ? `${parentKey}-${index}` : index.toString();
       const childItems = eachItem.items ? mapItems(eachItem.items, key) : void 0;
       return getItem(
         eachItem.label,
-        key[key.length - 1],
+        key,
         eachItem.icon ? icons[eachItem.icon] || /* @__PURE__ */ React15.createElement("img", { src: eachItem.icon, alt: "" }) : null,
         childItems,
-        eachItem,
-        key
+        eachItem
       );
     });
   }
@@ -758,14 +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: selectedKeys.map((key) => key.split("-").pop())
-      }
-    )
+    /* @__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-Beta51",
+  "version": "0.0.16-Beta52",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",