grep-components 2.17.0 → 2.17.1-GREPF-2801.2
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
|
@@ -10292,19 +10292,6 @@ const useStyles = makeStyles()(() => ({
|
|
|
10292
10292
|
background: 'transparent' /* Optional: just make scrollbar invisible */,
|
|
10293
10293
|
},
|
|
10294
10294
|
},
|
|
10295
|
-
keyboardHint: {
|
|
10296
|
-
position: 'relative',
|
|
10297
|
-
'&::after': {
|
|
10298
|
-
content: '"innholdsfortegnelse: [ alt + i ]"',
|
|
10299
|
-
fontSize: 12,
|
|
10300
|
-
position: 'absolute',
|
|
10301
|
-
display: 'block',
|
|
10302
|
-
top: 5,
|
|
10303
|
-
right: 5,
|
|
10304
|
-
background: convertToRgba('#000', 0.1),
|
|
10305
|
-
padding: '2px 5px',
|
|
10306
|
-
},
|
|
10307
|
-
},
|
|
10308
10295
|
}));
|
|
10309
10296
|
|
|
10310
10297
|
const getElementLevel = (el) => {
|
|
@@ -10337,7 +10324,6 @@ const buildTree = (elements, normalizer = normalize) => {
|
|
|
10337
10324
|
};
|
|
10338
10325
|
|
|
10339
10326
|
const GrepTableOfContentNav = (props) => {
|
|
10340
|
-
const [showKeyboardHint, setShowKeyboardHint] = useState(false);
|
|
10341
10327
|
const ref = useRef(null);
|
|
10342
10328
|
const { elements, classes, selected, setSelected } = useContext(context);
|
|
10343
10329
|
const tree = useMemo(() => buildTree(Object.values(elements)), [elements]);
|
|
@@ -10355,16 +10341,6 @@ const GrepTableOfContentNav = (props) => {
|
|
|
10355
10341
|
});
|
|
10356
10342
|
}, [ref]);
|
|
10357
10343
|
const onKeyDown = (e) => {
|
|
10358
|
-
if (selected && e.key === Key.Tab && e.shiftKey === false) {
|
|
10359
|
-
const tabindex = selected.getAttribute('tabindex');
|
|
10360
|
-
selected.setAttribute('tabindex', '0');
|
|
10361
|
-
selected.focus();
|
|
10362
|
-
requestAnimationFrame(() => {
|
|
10363
|
-
tabindex === null
|
|
10364
|
-
? selected.removeAttribute('tabindex')
|
|
10365
|
-
: selected.setAttribute('tabindex', tabindex);
|
|
10366
|
-
});
|
|
10367
|
-
}
|
|
10368
10344
|
if (e.key === Key.ArrowUp || e.key === Key.ArrowDown) {
|
|
10369
10345
|
e.preventDefault();
|
|
10370
10346
|
e.stopPropagation();
|
|
@@ -10376,25 +10352,8 @@ const GrepTableOfContentNav = (props) => {
|
|
|
10376
10352
|
focusSelected();
|
|
10377
10353
|
}
|
|
10378
10354
|
};
|
|
10379
|
-
useEffect(() => {
|
|
10380
|
-
const onKeyDown = (e) => {
|
|
10381
|
-
e.key === Key.Alt && setShowKeyboardHint(true);
|
|
10382
|
-
if (e.altKey) {
|
|
10383
|
-
e.key === Key.I && focusSelected();
|
|
10384
|
-
}
|
|
10385
|
-
};
|
|
10386
|
-
const onKeyUp = (e) => {
|
|
10387
|
-
e.key === Key.Alt && setShowKeyboardHint(false);
|
|
10388
|
-
};
|
|
10389
|
-
window.addEventListener('keydown', onKeyDown);
|
|
10390
|
-
window.addEventListener('keyup', onKeyUp);
|
|
10391
|
-
return () => {
|
|
10392
|
-
window.removeEventListener('keydown', onKeyDown);
|
|
10393
|
-
window.removeEventListener('keyup', onKeyUp);
|
|
10394
|
-
};
|
|
10395
|
-
}, [focusSelected]);
|
|
10396
10355
|
const { classes: style } = useStyles();
|
|
10397
|
-
const className = clsx('grep-toc__nav', style.root, classes?.nav, props.className
|
|
10356
|
+
const className = clsx('grep-toc__nav', style.root, classes?.nav, props.className);
|
|
10398
10357
|
return (React__default.createElement("nav", { className: className, style: props.style, tabIndex: selected ? -1 : 0, onKeyDown: onKeyDown, ref: ref },
|
|
10399
10358
|
React__default.createElement(NavTree, { elements: tree, setSelectedValue: props.setSelectedValue, percentageRendered: props.percentageRendered })));
|
|
10400
10359
|
};
|