grep-components 2.18.0-GREPF-2830.1 → 2.19.0

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

@@ -4,7 +4,7 @@ interface Props {
     title: string;
     pages: NavigationProps[];
     style?: React.CSSProperties;
-    onPageClick: (page: NavigationProps) => void;
+    onPageClick: (page: NavigationProps, event: React.MouseEvent) => void;
 }
 declare const _default: React.ComponentType<Props>;
 export default _default;

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

@@ -8,7 +8,7 @@ export type DropdownMenuItem<T> = Omit<MenuItemProps, 'disabled'> & {
     tooltipPlacement?: TooltipPlacement;
     disabled?: BooleanFunction<T> | boolean;
     children?: Array<DropdownMenuItem<T>>;
-    handleClick?: (context?: T) => void;
+    handleClick?: (context?: T, mouseEvent?: React.MouseEvent) => void;
 };
 export interface DropdownMenuProps<T> extends MenuProps {
     context?: T;

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

@@ -33,7 +33,7 @@ export interface GrepTableProps<T> extends Pick<TableProps, 'size' | 'stickyHead
     sortDirection?: 'desc' | 'asc';
     isRowDisabled?: (row: T) => boolean;
     onSelectedRowChange?: (row: T | null) => void;
-    onRowClick?: (row: T) => void;
+    onRowClick?: (row: T, mouseEvent?: React.MouseEvent) => void;
     menuTooltip?: (row: T) => string;
     menuDisabled?: (row: T) => boolean;
     onContextIdChanged?: (row: T) => void;

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

@@ -3,7 +3,7 @@ import { NavigationProps } from '../AppBarNavList';
 interface Props {
     title: string;
     pages: NavigationProps[];
-    onPageClick: (page: NavigationProps) => unknown;
+    onPageClick: (page: NavigationProps, mouseEvent: React.MouseEvent) => unknown;
 }
 declare const _default: React.ComponentType<Props>;
 export default _default;

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

@@ -3,7 +3,7 @@ import { NavigationProps } from '..';
 export interface SidebarProps {
     currentPageId?: number;
     pages: NavigationProps[];
-    onPageClick: (page: NavigationProps) => void;
+    onPageClick: (page: NavigationProps, mouseEvent?: React.MouseEvent) => void;
     expandOnIcon?: boolean;
 }
 declare const Sidebar: ({ pages, onPageClick, currentPageId, expandOnIcon, }: SidebarProps) => React.JSX.Element;

package/dist/components/ToC/styles/nav.style.d.ts

@@ -2,7 +2,7 @@ export declare const useStyles: (params: void, muiStyleOverridesParams?: {
     props: Record<string, unknown>;
     ownerState?: Record<string, unknown> | undefined;
 } | undefined) => {
-    classes: Record<"root" | "keyboardHint", string>;
+    classes: Record<"root", string>;
     theme: import("@mui/material").Theme;
     css: import("tss-react").Css;
     cx: import("tss-react").Cx;

package/dist/index.js

@@ -1745,7 +1745,17 @@ const DropdownMenu = ({ context, menuItems, ...menuProps }) => {
                 return;
             }
             menuProps.onClose && menuProps.onClose(e, 'backdropClick');
-            !isDisabled && handleClick && handleClick(context);
+            handleClick && handleClick(context, e);
+        };
+        props.onMouseDown = (e) => {
+            // 1 = middle mouse button / wheel
+            if (isDisabled || e.button !== 1) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            menuProps.onClose && menuProps.onClose(e, 'backdropClick');
+            handleClick && handleClick(context, e);
         };
         return (React__default.createElement(CollapsableMenuItem, { sx: isDisabled && !children ? { cursor: 'not-allowed' } : {}, level: level, id: label, disabled: isDisabled, items: children?.map(renderChild(level + 1, isDisabled)), ...props },
             React__default.createElement("span", { style: style }, label)));
@@ -1884,12 +1894,18 @@ const Footer = ({ items, serviceNameText, udirLink, udirLogo, }) => {
 const LinkList = (props) => (React__default.createElement(Box$1, { width: "100%", flexDirection: "column" },
     React__default.createElement(Typography$1, { style: { fontSize: 24, color: Colors.black, marginBottom: 20 } }, props.title),
     React__default.createElement(List$1, null, props.pages.map((page) => (React__default.createElement(Box$1, { key: page.id },
-        React__default.createElement(ListItemButton, { onClick: () => props.onPageClick(page), style: { padding: '12px 4px' } },
+        React__default.createElement(ListItemButton, { onMouseDown: (e) => {
+                if (e.button === 1) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                }
+                props.onPageClick(page, e);
+            }, style: { padding: '12px 4px' } },
             React__default.createElement(ListItemText$1, { primary: page.label, slotProps: {
                     primary: {
                         color: 'primary',
                         style: { fontSize: 18 },
-                    }
+                    },
                 } }),
             React__default.createElement(ListItemIcon, { style: { justifyContent: 'flex-end' } },
                 React__default.createElement(ArrowForward, { color: "primary" }))),
@@ -1914,7 +1930,13 @@ const ContainedLinkList = (props) => {
     return (React.createElement(Box, { className: classes.container, style: props.style },
         React.createElement(Typography, { className: classes.title }, props.title),
         React.createElement(List, { style: { padding: 0 } }, props.pages.map((page) => (React.createElement(ListItem, { divider: true, key: page.id, disablePadding: true },
-            React.createElement(ListItemButton, { onClick: () => props.onPageClick(page) },
+            React.createElement(ListItemButton, { onMouseDown: (e) => {
+                    if (e.button === 1) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }
+                    props.onPageClick(page, e);
+                } },
                 page.linkIcon && React.createElement(ListItemIcon, null, page.linkIcon),
                 React.createElement(ListItemText, { primary: page.label }))))))));
 };
@@ -2172,9 +2194,9 @@ const GrepTable = ({ placeholderText, dropdownItems, isRowDisabled, pagination,
         setDropdownContext(row);
         setMenuAnchor(e.currentTarget);
     };
-    const _handleRowClick = useCallback((row) => {
-        const disabled = isRowDisabled && isRowDisabled(row);
-        !disabled && onRowClick && onRowClick(row);
+    const _handleRowClick = useCallback((row, event) => {
+        const disabled = (isRowDisabled && isRowDisabled(row)) ?? false;
+        !disabled && onRowClick && onRowClick(row, event);
     }, [onRowClick]);
     const _handlePageChange = (event, newPage) => {
         event && event.preventDefault();
@@ -2239,7 +2261,12 @@ const GrepTable = ({ placeholderText, dropdownItems, isRowDisabled, pagination,
                 else {
                     setSelectedElement(e.currentTarget);
                     if (!disableSelectOnClick) {
-                        _handleRowClick(row);
+                        const me = e;
+                        if (me.button === 1) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }
+                        _handleRowClick(row, me);
                     }
                 }
             }, columns: rowColumns, row: row, style: getRowStyle(row, index, clickableRows, disabled), onFocus: (e) => {
@@ -3196,12 +3223,12 @@ const Sidebar = ({ pages, onPageClick, currentPageId, expandOnIcon, }) => {
             setExpanded([...expanded, id]);
         }
     };
-    const handleClick = (page) => {
+    const handleClick = (page, mouseEvent) => {
         if (expandOnIcon) {
-            onPageClick(page);
+            onPageClick(page, mouseEvent);
         }
         else {
-            page.children ? toggleExpand(page.id) : onPageClick(page);
+            page.children ? toggleExpand(page.id) : onPageClick(page, mouseEvent);
         }
     };
     const renderItem = (page) => (React__default.createElement(React__default.Fragment, null,
@@ -3212,7 +3239,8 @@ const Sidebar = ({ pages, onPageClick, currentPageId, expandOnIcon, }) => {
             if (expanded.includes(page.id)) {
                 if (expandOnIcon) {
                     return (React__default.createElement(ExpandLess, { onClick: (e) => {
-                            e.stopPropagation(), toggleExpand(page.id);
+                            e.stopPropagation();
+                            toggleExpand(page.id);
                         } }));
                 }
                 else {
@@ -3222,7 +3250,8 @@ const Sidebar = ({ pages, onPageClick, currentPageId, expandOnIcon, }) => {
             else {
                 if (expandOnIcon) {
                     return (React__default.createElement(ExpandMore, { onClick: (e) => {
-                            e.stopPropagation(), toggleExpand(page.id);
+                            e.stopPropagation();
+                            toggleExpand(page.id);
                         } }));
                 }
                 else {
@@ -3234,11 +3263,11 @@ const Sidebar = ({ pages, onPageClick, currentPageId, expandOnIcon, }) => {
     };
     return (React__default.createElement(Box$1, { className: classes.container },
         React__default.createElement(List$1, null, pages.map((page) => (React__default.createElement("div", { key: page.id },
-            React__default.createElement(ListItem$1, { key: page.id, tabIndex: 0, className: classes.item, onClick: () => handleClick(page), onKeyPress: keyboard.onActivation(() => handleClick(page)) },
+            React__default.createElement(ListItem$1, { key: page.id, tabIndex: 0, className: classes.item, onMouseDown: (e) => handleClick(page, e), onKeyPress: keyboard.onActivation(() => handleClick(page)) },
                 renderItem(page),
                 renderExpandIcon(page)),
             React__default.createElement(Collapse$1, { in: expanded.includes(page.id), timeout: "auto", unmountOnExit: true },
-                React__default.createElement(List$1, { disablePadding: true }, page.children?.map((child) => (React__default.createElement(ListItem$1, { key: child.id, style: { paddingLeft: '30px' }, tabIndex: 0, className: classes.item, onClick: () => handleClick(child), onKeyPress: keyboard.onActivation(() => handleClick(child)) }, renderItem(child))))))))))));
+                React__default.createElement(List$1, { disablePadding: true }, page.children?.map((child) => (React__default.createElement(ListItem$1, { key: child.id, style: { paddingLeft: '30px' }, tabIndex: 0, className: classes.item, onMouseDown: (e) => handleClick(child, e), onKeyPress: keyboard.onActivation(() => handleClick(child)) }, renderItem(child))))))))))));
 };
 
 var useStyles$4 = makeStyles()(() => ({
@@ -10292,19 +10321,6 @@ const useStyles = makeStyles()(() => ({
             background: 'transparent' /* Optional: just make scrollbar invisible */,
         },
     },
-    keyboardHint: {
-        position: 'relative',
-        '&::after': {
-            content: '"innholdsfortegnelse: [ alt + i ]"',
-            fontSize: 12,
-            position: 'absolute',
-            display: 'block',
-            top: 5,
-            right: 5,
-            background: convertToRgba('#000', 0.1),
-            padding: '2px 5px',
-        },
-    },
 }));
 
 const getElementLevel = (el) => {
@@ -10337,7 +10353,6 @@ const buildTree = (elements, normalizer = normalize) => {
 };
 
 const GrepTableOfContentNav = (props) => {
-    const [showKeyboardHint, setShowKeyboardHint] = useState(false);
     const ref = useRef(null);
     const { elements, classes, selected, setSelected } = useContext(context);
     const tree = useMemo(() => buildTree(Object.values(elements)), [elements]);
@@ -10355,16 +10370,6 @@ const GrepTableOfContentNav = (props) => {
         });
     }, [ref]);
     const onKeyDown = (e) => {
-        if (selected && e.key === Key.Tab && e.shiftKey === false) {
-            const tabindex = selected.getAttribute('tabindex');
-            selected.setAttribute('tabindex', '0');
-            selected.focus();
-            requestAnimationFrame(() => {
-                tabindex === null
-                    ? selected.removeAttribute('tabindex')
-                    : selected.setAttribute('tabindex', tabindex);
-            });
-        }
         if (e.key === Key.ArrowUp || e.key === Key.ArrowDown) {
             e.preventDefault();
             e.stopPropagation();
@@ -10376,25 +10381,8 @@ const GrepTableOfContentNav = (props) => {
             focusSelected();
         }
     };
-    useEffect(() => {
-        const onKeyDown = (e) => {
-            e.key === Key.Alt && setShowKeyboardHint(true);
-            if (e.altKey) {
-                e.key === Key.I && focusSelected();
-            }
-        };
-        const onKeyUp = (e) => {
-            e.key === Key.Alt && setShowKeyboardHint(false);
-        };
-        window.addEventListener('keydown', onKeyDown);
-        window.addEventListener('keyup', onKeyUp);
-        return () => {
-            window.removeEventListener('keydown', onKeyDown);
-            window.removeEventListener('keyup', onKeyUp);
-        };
-    }, [focusSelected]);
     const { classes: style } = useStyles();
-    const className = clsx('grep-toc__nav', style.root, classes?.nav, props.className, showKeyboardHint && style.keyboardHint);
+    const className = clsx('grep-toc__nav', style.root, classes?.nav, props.className);
     return (React__default.createElement("nav", { className: className, style: props.style, tabIndex: selected ? -1 : 0, onKeyDown: onKeyDown, ref: ref },
         React__default.createElement(NavTree, { elements: tree, setSelectedValue: props.setSelectedValue, percentageRendered: props.percentageRendered })));
 };