@symply.io/basic-components 1.0.7 → 1.0.8-beta.1

package/Sidebar/SidebarItem.js

@@ -18,45 +18,44 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import LockIcon from "@mui/icons-material/LockRounded";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
 function SidebarItem(props) {
-    var icon = props.icon, name = props.name, active = props.active, expand = props.expand, lock = props.lock, beta = props.beta, isSub = props.isSub, hasChildren = props.hasChildren, _a = props.betaTagColor, betaTagColor = _a === void 0 ? "#00A2A9" : _a, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onClick = props.onClick;
-    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(ListItem, __assign({ button: true, onClick: onClick, disabled: lock, sx: {
-                paddingLeft: isSub ? theme.spacing(4) : undefined,
-                display: "flex",
-                width: "100%",
-                "&:hover": {
-                    backgroundColor: colorAlpha(theme.palette.primary.main, 0.3)
-                },
-                backgroundColor: active
-                    ? colorAlpha(theme.palette.primary.main, 0.2)
-                    : undefined
-            } }, { children: [_jsx(ListItemIcon, __assign({ sx: {
-                        color: active ? theme.palette.primary.main : undefined,
+    var icon = props.icon, name = props.name, active = props.active, expand = props.expand, lock = props.lock, beta = props.beta, isSub = props.isSub, hasChildren = props.hasChildren, _a = props.betaTagColor, betaTagColor = _a === void 0 ? "#00A2A9" : _a, onClick = props.onClick;
+    var theme = useCustomTheme();
+    return (_jsxs(ListItem, __assign({ button: true, onClick: onClick, disabled: lock, sx: {
+            paddingLeft: isSub ? theme.spacing(4) : undefined,
+            display: "flex",
+            width: "100%",
+            "&:hover": {
+                backgroundColor: colorAlpha(theme.palette.primary.main, 0.3)
+            },
+            backgroundColor: active
+                ? colorAlpha(theme.palette.primary.main, 0.2)
+                : undefined
+        } }, { children: [_jsx(ListItemIcon, __assign({ sx: {
+                    color: active ? theme.palette.primary.main : undefined,
+                    borderRadius: active ? "5px" : undefined,
+                    opacity: active ? "1" : undefined,
+                    fontWeight: active ? 600 : undefined
+                } }, { children: icon })), _jsx(ListItemText, { primaryTypographyProps: {
+                    color: active ? theme.palette.primary.main : "textPrimary",
+                    sx: {
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
                         borderRadius: active ? "5px" : undefined,
                         opacity: active ? "1" : undefined,
                         fontWeight: active ? 600 : undefined
-                    } }, { children: icon })), _jsx(ListItemText, { primaryTypographyProps: {
-                        color: active ? theme.palette.primary.main : "textPrimary",
-                        sx: {
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap",
-                            borderRadius: active ? "5px" : undefined,
-                            opacity: active ? "1" : undefined,
-                            fontWeight: active ? 600 : undefined
-                        }
-                    }, primary: name }), lock && (_jsx(LockIcon, { fontSize: "small", color: "error", sx: {
-                        fontSize: "1rem"
-                    }, "data-nw": "".concat(name, "_lock") })), beta && (_jsx(Chip, { label: "BETA", color: "primary", size: "small", sx: {
-                        borderRadius: theme.spacing(0.5),
-                        backgroundColor: betaTagColor,
-                        color: "white",
-                        height: theme.spacing(2.5),
-                        fontSize: theme.spacing(1.25),
-                        padding: theme.spacing(0, 0.75)
-                    } })), hasChildren && (expand ? _jsx(ExpandMoreIcon, {}) : _jsx(ChevronRightIcon, {}))] })) })));
+                    }
+                }, primary: name }), lock && (_jsx(LockIcon, { fontSize: "small", color: "error", sx: {
+                    fontSize: "1rem"
+                }, "data-nw": "".concat(name, "_lock") })), beta && (_jsx(Chip, { label: "BETA", color: "primary", size: "small", sx: {
+                    borderRadius: theme.spacing(0.5),
+                    backgroundColor: betaTagColor,
+                    color: "white",
+                    height: theme.spacing(2.5),
+                    fontSize: theme.spacing(1.25),
+                    padding: theme.spacing(0, 0.75)
+                } })), hasChildren && (expand ? _jsx(ExpandMoreIcon, {}) : _jsx(ChevronRightIcon, {}))] })));
 }
 export default SidebarItem;

package/Sidebar/SidebarItemsGroup.js

@@ -9,10 +9,9 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, memo, useMemo, useEffect, useCallback } from "react";
 import { Match, useLocation } from "@reach/router";
-import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import Collapse from "@mui/material/Collapse";
 import List from "@mui/material/List";
 import useCustomTheme from "../useCustomTheme";
@@ -20,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, primaryColor = item.primaryColor, secondaryColor = item.secondaryColor;
+    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 pathname = useLocation().pathname;
     var match = useMemo(function () {
         return pathname.includes(path);
@@ -32,7 +31,7 @@ function SidebarItemsGroup(props) {
     useEffect(function () {
         setExpand(match);
     }, [match]);
-    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { 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, primaryColor: primaryColor, secondaryColor: secondaryColor, 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, primaryColor: c.primaryColor, secondaryColor: c.secondaryColor, isSub: true })); } }), c.name)); }) })) })))] })));
+    var theme = useCustomTheme();
+    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)); }) })) })))] }));
 }
 export default memo(SidebarItemsGroup);

package/Sidebar/SidebarLink.js

@@ -22,16 +22,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Link, useLocation } from "@reach/router";
-import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
 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, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["name", "path", "icon", "lock", "beta", "active", "titleForLock", "betaTagColor", "primaryColor", "secondaryColor"]);
-    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Link, __assign({ to: lock ? pathname : path, title: lock ? titleForLock || "Feature is unavailable on Free plan" : name, style: {
-                color: primaryColor || theme.palette.primary.main,
-                textDecoration: "none"
-            } }, { children: _jsx(SidebarItem, __assign({ name: name, icon: icon, lock: lock, beta: beta, active: active, betaTagColor: betaTagColor, primaryColor: primaryColor, secondaryColor: secondaryColor }, rest), name) })) })));
+    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 theme = useCustomTheme();
+    return (_jsx(Link, __assign({ 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) })));
 }
 export default SidebarLink;

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, primaryColor = i.primaryColor, secondaryColor = i.secondaryColor;
-                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, primaryColor: primaryColor, secondaryColor: secondaryColor }, name)); } }), name));
+                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));
             }) }) })));
 }
 export default Sidebar;

package/package.json

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