grep-components 2.18.0 → 2.19.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,7 +2,7 @@ export declare const useStyles: (params: void, muiStyleOverridesParams?: {
|
|
|
2
2
|
props: Record<string, unknown>;
|
|
3
3
|
ownerState?: Record<string, unknown> | undefined;
|
|
4
4
|
} | undefined) => {
|
|
5
|
-
classes: Record<"root"
|
|
5
|
+
classes: Record<"root", string>;
|
|
6
6
|
theme: import("@mui/material").Theme;
|
|
7
7
|
css: import("tss-react").Css;
|
|
8
8
|
cx: import("tss-react").Cx;
|
package/dist/index.js
CHANGED
|
@@ -10321,19 +10321,6 @@ const useStyles = makeStyles()(() => ({
|
|
|
10321
10321
|
background: 'transparent' /* Optional: just make scrollbar invisible */,
|
|
10322
10322
|
},
|
|
10323
10323
|
},
|
|
10324
|
-
keyboardHint: {
|
|
10325
|
-
position: 'relative',
|
|
10326
|
-
'&::after': {
|
|
10327
|
-
content: '"innholdsfortegnelse: [ alt + i ]"',
|
|
10328
|
-
fontSize: 12,
|
|
10329
|
-
position: 'absolute',
|
|
10330
|
-
display: 'block',
|
|
10331
|
-
top: 5,
|
|
10332
|
-
right: 5,
|
|
10333
|
-
background: convertToRgba('#000', 0.1),
|
|
10334
|
-
padding: '2px 5px',
|
|
10335
|
-
},
|
|
10336
|
-
},
|
|
10337
10324
|
}));
|
|
10338
10325
|
|
|
10339
10326
|
const getElementLevel = (el) => {
|
|
@@ -10366,7 +10353,6 @@ const buildTree = (elements, normalizer = normalize) => {
|
|
|
10366
10353
|
};
|
|
10367
10354
|
|
|
10368
10355
|
const GrepTableOfContentNav = (props) => {
|
|
10369
|
-
const [showKeyboardHint, setShowKeyboardHint] = useState(false);
|
|
10370
10356
|
const ref = useRef(null);
|
|
10371
10357
|
const { elements, classes, selected, setSelected } = useContext(context);
|
|
10372
10358
|
const tree = useMemo(() => buildTree(Object.values(elements)), [elements]);
|
|
@@ -10384,16 +10370,6 @@ const GrepTableOfContentNav = (props) => {
|
|
|
10384
10370
|
});
|
|
10385
10371
|
}, [ref]);
|
|
10386
10372
|
const onKeyDown = (e) => {
|
|
10387
|
-
if (selected && e.key === Key.Tab && e.shiftKey === false) {
|
|
10388
|
-
const tabindex = selected.getAttribute('tabindex');
|
|
10389
|
-
selected.setAttribute('tabindex', '0');
|
|
10390
|
-
selected.focus();
|
|
10391
|
-
requestAnimationFrame(() => {
|
|
10392
|
-
tabindex === null
|
|
10393
|
-
? selected.removeAttribute('tabindex')
|
|
10394
|
-
: selected.setAttribute('tabindex', tabindex);
|
|
10395
|
-
});
|
|
10396
|
-
}
|
|
10397
10373
|
if (e.key === Key.ArrowUp || e.key === Key.ArrowDown) {
|
|
10398
10374
|
e.preventDefault();
|
|
10399
10375
|
e.stopPropagation();
|
|
@@ -10405,25 +10381,8 @@ const GrepTableOfContentNav = (props) => {
|
|
|
10405
10381
|
focusSelected();
|
|
10406
10382
|
}
|
|
10407
10383
|
};
|
|
10408
|
-
useEffect(() => {
|
|
10409
|
-
const onKeyDown = (e) => {
|
|
10410
|
-
e.key === Key.Alt && setShowKeyboardHint(true);
|
|
10411
|
-
if (e.altKey) {
|
|
10412
|
-
e.key === Key.I && focusSelected();
|
|
10413
|
-
}
|
|
10414
|
-
};
|
|
10415
|
-
const onKeyUp = (e) => {
|
|
10416
|
-
e.key === Key.Alt && setShowKeyboardHint(false);
|
|
10417
|
-
};
|
|
10418
|
-
window.addEventListener('keydown', onKeyDown);
|
|
10419
|
-
window.addEventListener('keyup', onKeyUp);
|
|
10420
|
-
return () => {
|
|
10421
|
-
window.removeEventListener('keydown', onKeyDown);
|
|
10422
|
-
window.removeEventListener('keyup', onKeyUp);
|
|
10423
|
-
};
|
|
10424
|
-
}, [focusSelected]);
|
|
10425
10384
|
const { classes: style } = useStyles();
|
|
10426
|
-
const className = clsx('grep-toc__nav', style.root, classes?.nav, props.className
|
|
10385
|
+
const className = clsx('grep-toc__nav', style.root, classes?.nav, props.className);
|
|
10427
10386
|
return (React__default.createElement("nav", { className: className, style: props.style, tabIndex: selected ? -1 : 0, onKeyDown: onKeyDown, ref: ref },
|
|
10428
10387
|
React__default.createElement(NavTree, { elements: tree, setSelectedValue: props.setSelectedValue, percentageRendered: props.percentageRendered })));
|
|
10429
10388
|
};
|