@apexcura/ui-components 0.0.16-Beta60 → 0.0.16-Beta62

package/dist/index.js

@@ -779,14 +779,19 @@ 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) => {
-    console.log(index);
-    setSelectedIndex(index);
+  const [selectedKey, setSelectedKey] = (0, import_react16.useState)(props.value);
+  const handleChange = (item) => {
+    console.log(item);
+    setSelectedKey(item.key);
     if (props.onChange) {
-      props.onChange(item);
+      props.onChange(item.key);
     }
   };
+  (0, import_react16.useEffect)(() => {
+    if (props.value) {
+      setSelectedKey(props.value);
+    }
+  }, [props.value]);
   function getItem(label, key, icon, children, item) {
     return {
       key,
@@ -794,15 +799,14 @@ var Sidebar = (props) => {
         "span",
         {
           className: props.iconsClassName,
-          style: selectedIndex === key ? {
+          style: selectedKey === key ? {
             filter: "brightness(0) saturate(100%) invert(22%) sepia(87%) saturate(7476%) hue-rotate(209deg) brightness(97%) contrast(107%)"
           } : {}
         },
         icon
       ) : null,
       children,
-      label,
-      onClick: children ? void 0 : () => handleChange(item, key.toString())
+      label
     };
   }
   function mapItems(items2, parentKey = "") {
@@ -829,7 +833,15 @@ 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: [selectedKey],
+        onClick: (item) => handleChange(item)
+      }
+    )
   ));
 };
 

package/dist/index.mjs

@@ -702,19 +702,24 @@ var AddMoreTable = (props) => {
 };
 
 // src/Components/Sidebar.tsx
-import React15, { useState as useState5 } from "react";
+import React15, { useEffect as useEffect2, useState as useState5 } from "react";
 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) => {
-    console.log(index);
-    setSelectedIndex(index);
+  const [selectedKey, setSelectedKey] = useState5(props.value);
+  const handleChange = (item) => {
+    console.log(item);
+    setSelectedKey(item.key);
     if (props.onChange) {
-      props.onChange(item);
+      props.onChange(item.key);
     }
   };
+  useEffect2(() => {
+    if (props.value) {
+      setSelectedKey(props.value);
+    }
+  }, [props.value]);
   function getItem(label, key, icon, children, item) {
     return {
       key,
@@ -722,15 +727,14 @@ var Sidebar = (props) => {
         "span",
         {
           className: props.iconsClassName,
-          style: selectedIndex === key ? {
+          style: selectedKey === key ? {
             filter: "brightness(0) saturate(100%) invert(22%) sepia(87%) saturate(7476%) hue-rotate(209deg) brightness(97%) contrast(107%)"
           } : {}
         },
         icon
       ) : null,
       children,
-      label,
-      onClick: children ? void 0 : () => handleChange(item, key.toString())
+      label
     };
   }
   function mapItems(items2, parentKey = "") {
@@ -757,7 +761,15 @@ 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: [selectedKey],
+        onClick: (item) => handleChange(item)
+      }
+    )
   ));
 };
 
@@ -822,12 +834,12 @@ var Navbar = (props) => {
 };
 
 // src/Components/TableElement.tsx
-import React20, { useState as useState6, useEffect as useEffect2 } from "react";
+import React20, { useState as useState6, useEffect as useEffect3 } from "react";
 import { Table as Table2 } from "antd";
 var TableElement = (props) => {
   const { thead, tbody } = props;
   const [dataSource, setDataSource] = useState6([]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (tbody) {
       setDataSource(
         tbody.map((row, index) => ({
@@ -1171,7 +1183,7 @@ var Upload2 = (props) => {
 };
 
 // src/Components/OtpElement.tsx
-import React30, { useState as useState11, useRef as useRef2, useEffect as useEffect3 } from "react";
+import React30, { useState as useState11, useRef as useRef2, useEffect as useEffect4 } from "react";
 import { Input as Input3 } from "antd";
 var OtpElement = (props) => {
   const length = props.length;
@@ -1208,7 +1220,7 @@ var OtpElement = (props) => {
       });
     }
   };
-  useEffect3(() => {
+  useEffect4(() => {
     inputRefs.current[0]?.focus();
   }, []);
   return /* @__PURE__ */ React30.createElement("div", { className: props.containerClassName }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React30.createElement(
@@ -1460,7 +1472,7 @@ var HorizontalBarChart = (props) => {
 };
 
 // src/Components/LineChart.tsx
-import React34, { useEffect as useEffect4, useRef as useRef3 } from "react";
+import React34, { useEffect as useEffect5, useRef as useRef3 } from "react";
 import Chart from "chart.js/auto";
 var LineChart = (props) => {
   const chartRef = useRef3(null);
@@ -1471,7 +1483,7 @@ var LineChart = (props) => {
     { label: "Conversion Rate", data: [50, 100, 150, 180, 50] }
   ];
   const labels = ["Instagram", "Whatsapp", "Messages", "Telegram", "Linkedin"];
-  useEffect4(() => {
+  useEffect5(() => {
     if (chartRef.current) {
       if (chartInstance.current) {
         chartInstance.current.destroy();
@@ -1533,12 +1545,12 @@ var LineChart = (props) => {
 };
 
 // src/Components/DoubleBarChart.tsx
-import React35, { useEffect as useEffect5, useRef as useRef4 } from "react";
+import React35, { useEffect as useEffect6, useRef as useRef4 } from "react";
 import Chart2 from "chart.js/auto";
 var DoubleBarChart = (props) => {
   const chartRef = useRef4(null);
   const chartInstance = useRef4(null);
-  useEffect5(() => {
+  useEffect6(() => {
     if (chartRef.current) {
       if (chartInstance.current) {
         chartInstance.current.destroy();
@@ -1689,11 +1701,11 @@ var DivContainer = (props) => {
 };
 
 // src/Components/ColorPickerElement.tsx
-import React38, { useEffect as useEffect6, useState as useState12 } from "react";
+import React38, { useEffect as useEffect7, useState as useState12 } from "react";
 import { ColorPicker } from "antd";
 var ColorPickerElement = (props) => {
   const [val, setVal] = useState12(props.value);
-  useEffect6(() => {
+  useEffect7(() => {
     if (props.value) {
       setVal(props.value);
     }

package/package.json

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