@symply.io/basic-components 1.1.0 → 1.1.1-beta.1

package/Sidebar/SidebarItem.js

@@ -9,7 +9,7 @@ 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 colorAlpha from "color-alpha";
 import Chip from "@mui/material/Chip";
 import ListItem from "@mui/material/ListItem";
@@ -20,7 +20,7 @@ import useTheme from "@mui/material/styles/useTheme";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 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, onClick = props.onClick;
+    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, _b = props.showIconOnly, showIconOnly = _b === void 0 ? false : _b, onClick = props.onClick;
     var theme = useTheme();
     return (_jsxs(ListItem, __assign({ button: true, onClick: onClick, disabled: lock, sx: {
             paddingLeft: isSub ? theme.spacing(4) : undefined,
@@ -47,15 +47,13 @@ function SidebarItem(props) {
                         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: {
+                }, primary: name }), lock && !showIconOnly ? (_jsx(LockIcon, { fontSize: "small", color: "error", sx: { fontSize: "1rem" } })) : (_jsx(_Fragment, {})), beta && !showIconOnly ? (_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, {}))] })));
+                } })) : (_jsx(_Fragment, {})), hasChildren && !showIconOnly ? (expand ? (_jsx(ExpandMoreIcon, {})) : (_jsx(ChevronRightIcon, {}))) : (_jsx(_Fragment, {}))] })));
 }
 export default SidebarItem;

package/Sidebar/SidebarItemsGroup.js

@@ -18,7 +18,7 @@ import useTheme from "@mui/material/styles/useTheme";
 import SidebarItem from "./SidebarItem";
 import SidebarLink from "./SidebarLink";
 function SidebarItemsGroup(props) {
-    var item = props.item;
+    var item = props.item, showIconOnly = props.showIconOnly;
     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 () {
@@ -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, { 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)); }) })) })))] }));
+    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, showIconOnly: showIconOnly, 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, showIconOnly: showIconOnly, isSub: true })); } }), c.name)); }) })) })))] }));
 }
 export default memo(SidebarItemsGroup);

package/Sidebar/index.js

@@ -18,11 +18,11 @@ import SidebarItem from "./SidebarItem";
 import SidebarItemsGroup from "./SidebarItemsGroup";
 import SidebarLink from "./SidebarLink";
 function Sidebar(props) {
-    var items = props.items, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var items = props.items, showIconOnly = props.showIconOnly, 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 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));
+                return children ? (_jsx(SidebarItemsGroup, { item: i, showIconOnly: showIconOnly }, 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, showIconOnly: showIconOnly, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: betaTagColor }, name)); } }), name));
             }) }) })));
 }
 export default Sidebar;

package/Sidebar/types.d.ts

@@ -14,6 +14,7 @@ export interface SidebarBaseProps extends SidebarItemBaseProps {
 }
 export interface SidebarProps {
     items: Array<SidebarBaseProps>;
+    showIconOnly?: boolean;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
 }
@@ -22,6 +23,7 @@ export interface SidebarItemProps extends Omit<SidebarItemBaseProps, "path"> {
     expand?: boolean;
     isSub?: boolean;
     hasChildren?: boolean;
+    showIconOnly?: boolean;
     onClick?: () => void;
 }
 export interface SidebarLinkProps extends SidebarItemProps {
@@ -29,4 +31,5 @@ export interface SidebarLinkProps extends SidebarItemProps {
 }
 export interface SidebarItemsGroupProps {
     item: SidebarBaseProps;
+    showIconOnly?: boolean;
 }

package/package.json

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