grep-components 1.27.0-GREPF-2190.1 → 1.27.0-GREPF-2104.2

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

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

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

@@ -12,3 +12,9 @@ export declare const Standard: {
         name: string;
     };
 };
+export declare const ExpandAndClick: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/index.js

@@ -12,7 +12,7 @@ import { useTheme } from '@mui/material/styles';
 import { useHistory, NavLink, Prompt } from 'react-router-dom';
 import MenuIcon from '@mui/icons-material/Menu';
 import IconExpand from '@mui/icons-material/ExpandMore';
-import { ArrowForward, Info, ExpandMore, ExpandLess, Menu as Menu$1 } from '@mui/icons-material';
+import { ArrowForward, Info, ExpandLess, ExpandMore, Menu as Menu$1 } from '@mui/icons-material';
 import ListItemIcon$1 from '@mui/material/ListItemIcon';
 import MoreVert from '@mui/icons-material/MoreVert';
 import { useDispatch, connect, Provider as Provider$1, useSelector } from 'react-redux';
@@ -3582,7 +3582,7 @@ var TableHeader = function (_a) {
         React__default.createElement(TableRow, null, headerColumns.map(function (column, index) {
             var sortable = !!(onSortBy && column.sortable);
             var label = column.label, colDef = column.colDef;
-            return (React__default.createElement(TableHeaderCell, { key: index, empty: label === undefined, column: column, direction: sortDirection, active: sortable ? sortBy === colDef : undefined, onClick: function () { return sortable && onSortBy(column); }, onKeyDown: onActivation(function (e) {
+            return (React__default.createElement(TableHeaderCell, { key: index, empty: !label, column: column, direction: sortDirection, active: sortable ? sortBy === colDef : undefined, onClick: function () { return sortable && onSortBy(column); }, onKeyDown: onActivation(function (e) {
                     if (sortable) {
                         e.preventDefault();
                         onSortBy(column);
@@ -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;
+    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,18 +4746,44 @@ var Sidebar = function (_a) {
         }
     };
     var handleClick = function (page) {
-        page.children ? toggleExpand(page.id) : onPageClick(page);
+        if (expandOnIcon) {
+            onPageClick(page);
+        }
+        else {
+            page.children ? toggleExpand(page.id) : onPageClick(page);
+        }
     };
     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(ExpandMore, null)) : (React.createElement(ExpandLess, 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))); })))));
         }))));