grep-components 1.24.0-GREPF-2082.2 → 1.24.0-GREPF-2126.3

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

@@ -1,10 +1,9 @@
 /// <reference types="react" />
 import { MenuItemProps, MenuProps } from '@mui/material';
-declare type BooleanFunction<T> = (context?: T) => boolean;
 export declare type DropdownMenuItem<T> = Omit<MenuItemProps, 'disabled'> & {
     label: string;
     tooltipText?: string;
-    disabled?: BooleanFunction<T> | boolean;
+    disabled?: boolean;
     children?: Array<DropdownMenuItem<T>>;
     handleClick?: (context?: T) => void;
 };

package/dist/components/GrepTable/components/grep-table-cell.d.ts

@@ -6,7 +6,6 @@ export interface Properties<T> extends TableCellProps {
     column: TableColumn<T>;
     lines?: number;
     selected?: boolean;
-    expanded?: boolean;
 }
 declare type ComponentProperties<T> = PropsWithChildren<Properties<T>>;
 export declare type Component<T> = FunctionComponent<ComponentProperties<T>>;

package/dist/components/GrepTable/components/grep-table-row.d.ts

@@ -8,7 +8,6 @@ interface Properties<T> extends TableRowProps, Pick<TableCellProperties<T>, 'var
     clickable?: boolean;
     height?: number;
     underlineOnFocus?: boolean;
-    expanded?: boolean;
 }
 declare type Component<T> = React.FunctionComponent<Properties<T>>;
 export declare const GrepTableRow: Component<any>;

package/dist/index.js

@@ -3124,9 +3124,9 @@ var CollapsableMenu = function (_a) {
 };
 
 var TooltipMenuItem = function (_a) {
-    var children = _a.children, tooltipText = _a.tooltipText, disabled = _a.disabled, props = __rest$1(_a, ["children", "tooltipText", "disabled"]);
+    var children = _a.children, tooltipText = _a.tooltipText, props = __rest$1(_a, ["children", "tooltipText"]);
     return (React__default.createElement(Tooltip, { title: tooltipText },
-        React__default.createElement(MenuItem, __assign({ role: "menuitem", disabled: disabled, sx: { pointerEvents: 'inherit !important' } }, props), children)));
+        React__default.createElement(MenuItem, __assign({ role: "menuitem", sx: { pointerEvents: 'inherit !important' } }, props), children)));
 };
 
 var useStyles$g = makeStyles()(function (_a, _b) {
@@ -3218,7 +3218,7 @@ var CollapsableMenuItem = function (_a) {
     var onScrimClick = useCallback$1(function (e) {
         var _a;
         var scrimClick = !((_a = listItemRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target));
-        scrimClick && collapse();
+        scrimClick && !disabled && collapse();
     }, [listItemRef, collapse]);
     var handleClick = items ? onToggleClick : onClick;
     useEffect(function () {
@@ -3235,7 +3235,7 @@ var CollapsableMenuItem = function (_a) {
                     return window.dispatchEvent(new Event('resize'));
                 });
             } }, items)))); };
-    return tooltipText ? (React__default.createElement(TooltipMenuItem, { className: classes.root, tooltipText: tooltipText, onMouseOver: function (e) { return e.currentTarget.focus(); }, disabled: disabled, selected: open, onClick: handleClick, onKeyDown: handleKey }, renderInner())) : (React__default.createElement(MenuItem, __assign({ className: classes.root, ref: listItemRef, selected: open, disabled: disabled, onClick: handleClick, onKeyDown: handleKey }, props), renderInner()));
+    return tooltipText ? (React__default.createElement(TooltipMenuItem, { sx: disabled && !items ? { cursor: 'not-allowed' } : {}, className: classes.root, tooltipText: tooltipText, onMouseOver: function (e) { return e.currentTarget.focus(); }, selected: open, onClick: handleClick, onKeyDown: handleKey }, renderInner())) : (React__default.createElement(MenuItem, __assign({ sx: disabled && !items ? { cursor: 'not-allowed' } : {}, className: classes.root, ref: listItemRef, selected: open, onClick: handleClick, onKeyDown: handleKey }, props), renderInner()));
 };
 
 var useStyles$f = makeStyles()(function (_a) {
@@ -3251,20 +3251,34 @@ var useStyles$f = makeStyles()(function (_a) {
 var DropdownMenu = function (_a) {
     var context = _a.context, menuItems = _a.menuItems, menuProps = __rest$1(_a, ["context", "menuItems"]);
     var classes = useStyles$f().classes;
-    var renderChild = function (level) {
+    var renderChild = function (level, parentDisabled) {
         if (level === void 0) { level = 0; }
+        if (parentDisabled === void 0) { parentDisabled = false; }
         // eslint-disable-next-line react/display-name
         return function (item, index) {
+            var _a;
             var label = item.label, children = item.children, handleClick = item.handleClick, disabled = item.disabled, props = __rest$1(item, ["label", "children", "handleClick", "disabled"]);
+            var itemOrParentDisabled = (_a = (parentDisabled || disabled)) !== null && _a !== void 0 ? _a : false;
             props.key = "child-item-".concat(index);
             props.classes = { selected: classes.selected };
             // ninja way, since rewriting existing code on lpu and admin is daunting
             props.onClick = function (e) {
+                if (itemOrParentDisabled) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    return;
+                }
                 menuProps.onClose && menuProps.onClose(e, 'backdropClick');
-                handleClick && handleClick(context);
+                !itemOrParentDisabled && handleClick && handleClick(context);
             };
-            return (React__default.createElement(CollapsableMenuItem, __assign({ level: level, id: label, disabled: typeof disabled === 'function' ? disabled(context) : disabled, items: children === null || children === void 0 ? void 0 : children.map(renderChild(level + 1)) }, props),
-                React__default.createElement("span", { style: { paddingLeft: "".concat(level * 0.5, "rem") } }, label)));
+            var style = !itemOrParentDisabled
+                ? { paddingLeft: "".concat(level * 0.5, "rem") }
+                : {
+                    paddingLeft: "".concat(level * 0.5, "rem"),
+                    opacity: 0.4,
+                };
+            return (React__default.createElement(CollapsableMenuItem, __assign({ sx: itemOrParentDisabled && !children ? { cursor: 'not-allowed' } : {}, level: level, id: label, disabled: itemOrParentDisabled, items: children === null || children === void 0 ? void 0 : children.map(renderChild(level + 1, itemOrParentDisabled)) }, props),
+                React__default.createElement("span", { style: style }, label)));
         };
     };
     return (React__default.createElement(Menu, __assign({}, menuProps, { anchorOrigin: (menuProps === null || menuProps === void 0 ? void 0 : menuProps.anchorOrigin) || {
@@ -3478,8 +3492,8 @@ var CellValue = styled('span')({
     WebkitBoxOrient: 'vertical',
 });
 var GrepTableRow$1 = function (_a) {
-    var row = _a.row, column = _a.column, expanded = _a.expanded, props = __rest$1(_a, ["row", "column", "expanded"]);
-    var forceTooltip = column.forceTooltip, getTooltip = column.getTooltip, getCell = column.getCell, lang = column.lang, _b = column.lines, lines = _b === void 0 ? function () { return (expanded ? undefined : 1); } : _b;
+    var row = _a.row, column = _a.column, selected = _a.selected, props = __rest$1(_a, ["row", "column", "selected"]);
+    var forceTooltip = column.forceTooltip, getTooltip = column.getTooltip, getCell = column.getCell, lang = column.lang, _b = column.lines, lines = _b === void 0 ? function () { return (selected ? undefined : 1); } : _b;
     var padding = column.padding;
     var value = (React__default.createElement(CellValue, { style: { WebkitLineClamp: lines(row) }, lang: typeof lang === 'string' ? lang : lang ? lang(row) : '' }, getCell(row)));
     if (forceTooltip || getTooltip) {
@@ -3490,8 +3504,8 @@ var GrepTableRow$1 = function (_a) {
 };
 
 var GrepTableRow = function (_a) {
-    var row = _a.row, columns = _a.columns, selected = _a.selected, expanded = _a.expanded, variant = _a.variant; _a.clickable; _a.height; var underlineOnFocus = _a.underlineOnFocus, props = __rest$1(_a, ["row", "columns", "selected", "expanded", "variant", "clickable", "height", "underlineOnFocus"]);
-    var render = function (column, index) { return (React__default.createElement(GrepTableRow$1, __assign({ key: index, expanded: expanded }, { column: column, row: row, variant: variant, selected: selected }))); };
+    var row = _a.row, columns = _a.columns, selected = _a.selected, variant = _a.variant; _a.clickable; _a.height; var underlineOnFocus = _a.underlineOnFocus, props = __rest$1(_a, ["row", "columns", "selected", "variant", "clickable", "height", "underlineOnFocus"]);
+    var render = function (column, index) { return (React__default.createElement(GrepTableRow$1, __assign({ key: index }, { column: column, row: row, variant: variant, selected: selected }))); };
     return (React__default.createElement(TableRow, __assign({ sx: {
             ':focus': { textDecoration: underlineOnFocus ? 'underline' : 'none' },
         }, tabIndex: props.tabIndex }, __assign({ selected: selected }, props)), columns.map(render)));
@@ -3667,35 +3681,23 @@ var GrepTable = function (_a) {
     var _d = __read(React__default.useState(null), 2), menuAnchor = _d[0], setMenuAnchor = _d[1];
     var _e = __read(React__default.useState(0), 2), currentPage = _e[0], _setCurrentPage = _e[1];
     var _f = __read(React__default.useState(), 2), selectedRowIndex = _f[0], _setSelectedRowIndex = _f[1];
-    var _g = __read(React__default.useState(), 2), expandedRowIndex = _g[0], _setExpandedRowIndex = _g[1];
-    var _h = __read(React__default.useState(), 2), dropdownContext = _h[0], setDropdownContext = _h[1];
+    var _g = __read(React__default.useState(), 2), dropdownContext = _g[0], setDropdownContext = _g[1];
     var selectedRow = data[selectedRowIndex] || null;
-    var setCurrentPage = useCallback$1(function (index, rowIndex, shouldExpand) {
+    var setCurrentPage = useCallback$1(function (index, rowIndex) {
         index = pagination && index >= 0 ? index : 0;
         _setCurrentPage(index);
         _setSelectedRowIndex(rowIndex);
-        if (shouldExpand) {
-            _setExpandedRowIndex(rowIndex);
-        }
-    }, [
-        _setCurrentPage,
-        _setSelectedRowIndex,
-        _setExpandedRowIndex,
-        rowsPerPage,
-        pagination,
-    ]);
-    var setSelectedRowIndex = function (index, shouldExpand) {
-        if (shouldExpand === void 0) { shouldExpand = true; }
+    }, [_setCurrentPage, _setSelectedRowIndex, rowsPerPage, pagination]);
+    var setSelectedRowIndex = function (index) {
         var hasIndexChanged = index === selectedRowIndex;
         var pageIndex = Math.floor(index / rowsPerPage);
-        setCurrentPage(pageIndex, index, shouldExpand);
+        setCurrentPage(pageIndex, index);
         if (hasIndexChanged && onSelectedRowChange) {
             onSelectedRowChange(data[index]);
         }
     };
-    var setSelectedElement = function (el, shouldExpand) {
-        if (shouldExpand === void 0) { shouldExpand = true; }
-        setSelectedRowIndex(getElementIndex(el), shouldExpand);
+    var setSelectedElement = function (el) {
+        return setSelectedRowIndex(getElementIndex(el));
     };
     var tableRef = React__default.useRef(null);
     // focus selected row first tabable item
@@ -3763,22 +3765,15 @@ var GrepTable = function (_a) {
         var clickableRows = !!onRowClick;
         var disabled = isRowDisabled && isRowDisabled(row);
         var rowIndex = index + currentPage * rowsPerPage;
-        return (React__default.createElement(GrepTableRow, { key: rowIndex, "data-index": rowIndex, tabIndex: rowTabIndex !== null && rowTabIndex !== void 0 ? rowTabIndex : 0, hover: clickableRows, selected: rowIndex === selectedRowIndex, expanded: rowIndex === expandedRowIndex, clickable: clickableRows, onMouseDown: function (e) {
-                if (e.target.type === 'checkbox') {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    setSelectedElement(e.currentTarget, false);
-                }
-                else {
-                    setSelectedElement(e.currentTarget);
-                    if (!disableSelectOnClick) {
-                        _handleRowClick(row);
-                    }
-                }
-            }, columns: rowColumns, row: row, style: { cursor: clickableRows && !disabled ? 'pointer' : '' }, onFocus: function (e) {
-                if (selectedRowIndex !== rowIndex) {
-                    setSelectedElement(e.currentTarget);
+        return (React__default.createElement(GrepTableRow, { key: rowIndex, "data-index": rowIndex, tabIndex: rowTabIndex !== null && rowTabIndex !== void 0 ? rowTabIndex : 0, hover: clickableRows, selected: rowIndex === selectedRowIndex, clickable: clickableRows, onMouseDown: function (_a) {
+                var currentTarget = _a.currentTarget;
+                setSelectedElement(currentTarget);
+                if (!disableSelectOnClick) {
+                    _handleRowClick(row);
                 }
+            }, columns: rowColumns, row: row, style: { cursor: clickableRows && !disabled ? 'pointer' : '' }, onFocus: function (_a) {
+                var currentTarget = _a.currentTarget;
+                return setSelectedElement(currentTarget);
             }, underlineOnFocus: underlineOnFocus }));
     };
     var onKey = function (e) {