grep-components 1.27.0-GREPF-2104.1 → 1.27.0-GREPF-2104.2

package/dist/components/Sidebar/index.d.ts

@@ -4,7 +4,7 @@ export interface SidebarProps {
     currentPageId?: number;
     pages: NavigationProps[];
     onPageClick: (page: NavigationProps) => any;
-    expandAndClick?: boolean;
+    expandOnIcon?: boolean;
 }
-declare const Sidebar: ({ pages, onPageClick, currentPageId, expandAndClick }: SidebarProps) => JSX.Element;
+declare const Sidebar: ({ pages, onPageClick, currentPageId, expandOnIcon }: SidebarProps) => JSX.Element;
 export default Sidebar;

package/dist/index.js

@@ -4727,7 +4727,7 @@ var useStyles$6 = makeStyles()(function (_a, _props, classes) {
 });
 
 var Sidebar = function (_a) {
-    var pages = _a.pages, onPageClick = _a.onPageClick, currentPageId = _a.currentPageId, expandAndClick = _a.expandAndClick;
+    var pages = _a.pages, onPageClick = _a.onPageClick, currentPageId = _a.currentPageId, expandOnIcon = _a.expandOnIcon;
     var _b = __read(React.useState([]), 2), expanded = _b[0], setExpanded = _b[1];
     var classes = useStyles$6().classes;
     React.useEffect(function () {
@@ -4746,8 +4746,7 @@ var Sidebar = function (_a) {
         }
     };
     var handleClick = function (page) {
-        if (expandAndClick) {
-            toggleExpand(page.id);
+        if (expandOnIcon) {
             onPageClick(page);
         }
         else {
@@ -4757,13 +4756,34 @@ var Sidebar = function (_a) {
     var renderItem = function (page) { return (React.createElement(React.Fragment, null,
         page.linkIcon && (React.createElement(ListItemIcon, { className: classes.icon }, page.linkIcon)),
         React.createElement(ListItemText$1, { sx: { outline: 'none !important' }, tabIndex: -1, disableTypography: true, primary: page.label, className: page.id === currentPageId ? classes.selected : classes.text }))); };
+    var renderExpandIcon = function (page) {
+        if (page.children) {
+            if (expanded.includes(page.id)) {
+                if (expandOnIcon) {
+                    return React.createElement(ExpandLess, { onClick: function (e) { e.stopPropagation(), toggleExpand(page.id); } });
+                }
+                else {
+                    return React.createElement(ExpandLess, null);
+                }
+            }
+            else {
+                if (expandOnIcon) {
+                    return React.createElement(ExpandMore, { onClick: function (e) { e.stopPropagation(), toggleExpand(page.id); } });
+                }
+                else {
+                    return React.createElement(ExpandMore, null);
+                }
+            }
+        }
+        return null;
+    };
     return (React.createElement(Box$1, { className: classes.container },
         React.createElement(List$1, null, pages.map(function (page) {
             var _a;
             return (React.createElement("div", { key: page.id },
                 React.createElement(ListItem$1, { key: page.id, tabIndex: 0, className: classes.item, onClick: function () { return handleClick(page); }, onKeyPress: keyboard.onActivation(function () { return handleClick(page); }) },
                     renderItem(page),
-                    page.children ? (expanded.includes(page.id) ? (React.createElement(ExpandLess, null)) : (React.createElement(ExpandMore, null))) : null),
+                    renderExpandIcon(page)),
                 React.createElement(Collapse, { in: expanded.includes(page.id), timeout: "auto", unmountOnExit: true },
                     React.createElement(List$1, { disablePadding: true }, (_a = page.children) === null || _a === void 0 ? void 0 : _a.map(function (child) { return (React.createElement(ListItem$1, { key: child.id, style: { paddingLeft: '30px' }, tabIndex: 0, className: classes.item, onClick: function () { return handleClick(child); }, onKeyPress: keyboard.onActivation(function () { return handleClick(child); }) }, renderItem(child))); })))));
         }))));