@symply.io/basic-components 1.0.8 → 1.0.9-beta.2

package/Sidebar/SidebarItemsGroup.js

@@ -19,7 +19,7 @@ import SidebarItem from "./SidebarItem";
 import SidebarLink from "./SidebarLink";
 function SidebarItemsGroup(props) {
     var item = props.item;
-    var name = item.name, path = item.path, icon = item.icon, children = item.children, lock = item.lock, beta = item.beta, titleForLock = item.titleForLock, betaTagColor = item.betaTagColor;
+    var id = item.id, name = item.name, path = item.path, icon = item.icon, children = item.children, lock = item.lock, beta = item.beta, titleForLock = item.titleForLock, betaTagColor = item.betaTagColor;
     var pathname = useLocation().pathname;
     var match = useMemo(function () {
         return pathname.includes(path);
@@ -32,6 +32,6 @@ function SidebarItemsGroup(props) {
         setExpand(match);
     }, [match]);
     var theme = useTheme();
-    return (_jsxs(_Fragment, { children: [_jsx(List, __assign({ component: "div", disablePadding: true }, { children: _jsx(SidebarItem, { active: false, name: name, icon: icon, lock: lock, beta: beta, expand: expand, hasChildren: true, betaTagColor: betaTagColor, onClick: onToggleExpand }) })), children && (_jsx(Collapse, __assign({ in: expand, timeout: "auto" }, { children: _jsx(List, __assign({ component: "div", disablePadding: true }, { children: children.map(function (c) { return (_jsx(Match, __assign({ path: c.path }, { children: function (prop) { return (_jsx(SidebarLink, { name: c.name, path: c.path, icon: c.icon, lock: c.lock, beta: c.beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: c.betaTagColor, isSub: true })); } }), c.name)); }) })) })))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(List, __assign({ component: "div", disablePadding: true }, { children: _jsx(SidebarItem, { id: id, active: false, name: name, icon: icon, lock: lock, beta: beta, expand: expand, hasChildren: true, betaTagColor: betaTagColor, onClick: onToggleExpand }) })), children && (_jsx(Collapse, __assign({ in: expand, timeout: "auto" }, { children: _jsx(List, __assign({ component: "div", disablePadding: true }, { children: children.map(function (c) { return (_jsx(Match, __assign({ path: c.path }, { children: function (prop) { return (_jsx(SidebarLink, { id: c.id, name: c.name, path: c.path, icon: c.icon, lock: c.lock, beta: c.beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: c.betaTagColor, isSub: true })); } }), c.name)); }) })) })))] }));
 }
 export default memo(SidebarItemsGroup);

package/Sidebar/SidebarLink.js

@@ -26,9 +26,9 @@ import useTheme from "@mui/material/styles/useTheme";
 import SidebarItem from "./SidebarItem";
 function SidebarLink(props) {
     var pathname = useLocation().pathname;
-    var name = props.name, path = props.path, icon = props.icon, lock = props.lock, beta = props.beta, active = props.active, titleForLock = props.titleForLock, betaTagColor = props.betaTagColor, rest = __rest(props, ["name", "path", "icon", "lock", "beta", "active", "titleForLock", "betaTagColor"]);
+    var id = props.id, name = props.name, path = props.path, icon = props.icon, lock = props.lock, beta = props.beta, active = props.active, titleForLock = props.titleForLock, betaTagColor = props.betaTagColor, rest = __rest(props, ["id", "name", "path", "icon", "lock", "beta", "active", "titleForLock", "betaTagColor"]);
     var theme = useTheme();
-    return (_jsx(Link, __assign({ to: lock ? pathname : path, title: lock ? titleForLock || "Feature is unavailable on Free plan" : name, style: {
+    return (_jsx(Link, __assign({ id: id, to: lock ? pathname : path, title: lock ? titleForLock || "Feature is unavailable on Free plan" : name, style: {
             color: theme.palette.primary.main,
             textDecoration: "none"
         } }, { children: _jsx(SidebarItem, __assign({ name: name, icon: icon, lock: lock, beta: beta, active: active, betaTagColor: betaTagColor }, rest), name) })));

package/Sidebar/index.js

@@ -21,8 +21,8 @@ function Sidebar(props) {
     var items = props.items, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(List, { children: items.map(function (i) {
-                var children = i.children, path = i.path, icon = i.icon, name = i.name, lock = i.lock, beta = i.beta, titleForLock = i.titleForLock, betaTagColor = i.betaTagColor;
-                return children ? (_jsx(SidebarItemsGroup, { item: i }, name)) : (_jsx(Match, __assign({ path: path === "/" ? path : path.concat("/*") }, { children: function (prop) { return (_jsx(SidebarLink, { name: name, path: path, icon: icon, lock: lock, beta: beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: betaTagColor }, name)); } }), name));
+                var id = i.id, children = i.children, path = i.path, icon = i.icon, name = i.name, lock = i.lock, beta = i.beta, titleForLock = i.titleForLock, betaTagColor = i.betaTagColor;
+                return children ? (_jsx(SidebarItemsGroup, { item: i }, name)) : (_jsx(Match, __assign({ path: path === "/" ? path : path.concat("/*") }, { children: function (prop) { return (_jsx(SidebarLink, { id: id, name: name, path: path, icon: icon, lock: lock, beta: beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: betaTagColor }, name)); } }), name));
             }) }) })));
 }
 export default Sidebar;

package/Sidebar/types.d.ts

@@ -1,5 +1,6 @@
 import { CSSProperties, ReactElement } from "react";
 export interface SidebarItemBaseProps {
+    id?: string;
     path: string;
     name: string;
     lock?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.0.8",
+  "version": "1.0.9-beta.2",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",