@netfoundry/docusaurus-theme 0.10.11 → 0.10.12
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.
- package/dist/theme/NavbarItem/DropdownNavbarItem/Desktop/index.d.ts.map +1 -1
- package/dist/theme/NavbarItem/DropdownNavbarItem/Desktop/index.js +7 -43
- package/dist/theme/NavbarItem/DropdownNavbarItem/Desktop/index.js.map +1 -1
- package/package.json +1 -1
- package/theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx +81 -125
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,GAAG,2CAkEL"}
|
|
@@ -1,13 +1,5 @@
|
|
|
1
1
|
import { createElement as _createElement } from "react";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
/**
|
|
4
|
-
* Swizzled DropdownNavbarItemDesktop
|
|
5
|
-
*
|
|
6
|
-
* Opens on hover. The panel stays open until the user actually moves their
|
|
7
|
-
* cursor into it — so the gap between the trigger and the fixed panel never
|
|
8
|
-
* causes a flicker. Once the cursor has entered the panel, leaving it
|
|
9
|
-
* (or clicking outside) closes it normally.
|
|
10
|
-
*/
|
|
11
3
|
import { useState, useRef, useEffect, useCallback } from 'react';
|
|
12
4
|
import clsx from 'clsx';
|
|
13
5
|
import NavbarNavLinkOrig from '@theme/NavbarItem/NavbarNavLink';
|
|
@@ -16,14 +8,12 @@ const NavbarNavLink = NavbarNavLinkOrig;
|
|
|
16
8
|
const NavbarItem = NavbarItemOrig;
|
|
17
9
|
export default function DropdownNavbarItemDesktop({ items, position, className, onClick, ...props }) {
|
|
18
10
|
const dropdownRef = useRef(null);
|
|
19
|
-
const hasEnteredPanel = useRef(false);
|
|
20
11
|
const [showDropdown, setShowDropdown] = useState(false);
|
|
21
12
|
// Close on click / touch outside
|
|
22
13
|
useEffect(() => {
|
|
23
14
|
const close = (e) => {
|
|
24
15
|
if (!dropdownRef.current?.contains(e.target)) {
|
|
25
16
|
setShowDropdown(false);
|
|
26
|
-
hasEnteredPanel.current = false;
|
|
27
17
|
}
|
|
28
18
|
};
|
|
29
19
|
document.addEventListener('mousedown', close);
|
|
@@ -33,50 +23,24 @@ export default function DropdownNavbarItemDesktop({ items, position, className,
|
|
|
33
23
|
document.removeEventListener('touchstart', close);
|
|
34
24
|
};
|
|
35
25
|
}, []);
|
|
36
|
-
//
|
|
26
|
+
// Close when a NavbarPicker opens
|
|
37
27
|
useEffect(() => {
|
|
38
|
-
const onOtherOpen = (
|
|
39
|
-
if (e.detail.label !== props.label) {
|
|
40
|
-
setShowDropdown(false);
|
|
41
|
-
hasEnteredPanel.current = false;
|
|
42
|
-
}
|
|
43
|
-
};
|
|
28
|
+
const onOtherOpen = () => setShowDropdown(false);
|
|
44
29
|
window.addEventListener('nf-picker:open', onOtherOpen);
|
|
45
30
|
return () => window.removeEventListener('nf-picker:open', onOtherOpen);
|
|
46
|
-
}, [props.label]);
|
|
47
|
-
// Open on hover — reset entry state each time
|
|
48
|
-
const handleMouseEnter = useCallback(() => {
|
|
49
|
-
hasEnteredPanel.current = false;
|
|
50
|
-
window.dispatchEvent(new CustomEvent('nf-picker:open', { detail: { label: props.label } }));
|
|
51
|
-
setShowDropdown(true);
|
|
52
|
-
console.log('[product-picker] popped open:', props.label);
|
|
53
|
-
}, [props.label]);
|
|
54
|
-
// Leaving the trigger: do nothing — the panel stays open until the user
|
|
55
|
-
// either enters it (then leaves) or clicks outside.
|
|
56
|
-
const handleTriggerLeave = useCallback(() => {
|
|
57
|
-
console.log('[product-picker] trigger leave — hasEnteredPanel:', hasEnteredPanel.current);
|
|
58
|
-
}, []);
|
|
59
|
-
// Once the cursor enters the panel, normal leave/blur can close it
|
|
60
|
-
const handlePanelEnter = useCallback(() => {
|
|
61
|
-
hasEnteredPanel.current = true;
|
|
62
|
-
console.log('[product-picker] panel focus obtained');
|
|
63
31
|
}, []);
|
|
64
|
-
const
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
setShowDropdown(false);
|
|
68
|
-
hasEnteredPanel.current = false;
|
|
69
|
-
console.log('[product-picker] closing — cursor left panel');
|
|
70
|
-
}
|
|
32
|
+
const handleClick = useCallback((e) => {
|
|
33
|
+
e.preventDefault();
|
|
34
|
+
setShowDropdown(prev => !prev);
|
|
71
35
|
}, []);
|
|
72
36
|
return (_jsxs("div", { ref: dropdownRef, className: clsx('navbar__item', 'dropdown', {
|
|
73
37
|
'dropdown--right': position === 'right',
|
|
74
38
|
'dropdown--show': showDropdown,
|
|
75
|
-
}),
|
|
39
|
+
}), children: [_jsx(NavbarNavLink, { "aria-haspopup": "true", "aria-expanded": showDropdown, role: "button", href: props.to ? undefined : '#', className: clsx('navbar__link', className), ...props, onClick: props.to ? undefined : handleClick, onKeyDown: (e) => {
|
|
76
40
|
if (e.key === 'Enter') {
|
|
77
41
|
e.preventDefault();
|
|
78
42
|
setShowDropdown(prev => !prev);
|
|
79
43
|
}
|
|
80
|
-
}, children: props.children ?? props.label }), _jsx("ul", { className: "dropdown__menu",
|
|
44
|
+
}, children: props.children ?? props.label }), _jsx("ul", { className: "dropdown__menu", children: items.map((childItemProps, i) => (_createElement(NavbarItem, { isDropdownItem: true, activeClassName: "dropdown__link--active", ...childItemProps, key: i }))) })] }));
|
|
81
45
|
}
|
|
82
46
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx"],"names":[],"mappings":";;AAAA
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,125 +1,81 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
return () =>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}
|
|
83
|
-
}, []);
|
|
84
|
-
|
|
85
|
-
return (
|
|
86
|
-
<div
|
|
87
|
-
ref={dropdownRef}
|
|
88
|
-
className={clsx('navbar__item', 'dropdown', {
|
|
89
|
-
'dropdown--right': position === 'right',
|
|
90
|
-
'dropdown--show': showDropdown,
|
|
91
|
-
})}
|
|
92
|
-
onMouseEnter={handleMouseEnter}
|
|
93
|
-
onMouseLeave={handleTriggerLeave}>
|
|
94
|
-
<NavbarNavLink
|
|
95
|
-
aria-haspopup="true"
|
|
96
|
-
aria-expanded={showDropdown}
|
|
97
|
-
role="button"
|
|
98
|
-
href={props.to ? undefined : '#'}
|
|
99
|
-
className={clsx('navbar__link', className)}
|
|
100
|
-
{...props}
|
|
101
|
-
onClick={props.to ? undefined : (e: React.MouseEvent) => e.preventDefault()}
|
|
102
|
-
onKeyDown={(e: React.KeyboardEvent) => {
|
|
103
|
-
if (e.key === 'Enter') {
|
|
104
|
-
e.preventDefault();
|
|
105
|
-
setShowDropdown(prev => !prev);
|
|
106
|
-
}
|
|
107
|
-
}}>
|
|
108
|
-
{props.children ?? props.label}
|
|
109
|
-
</NavbarNavLink>
|
|
110
|
-
<ul
|
|
111
|
-
className="dropdown__menu"
|
|
112
|
-
onMouseEnter={handlePanelEnter}
|
|
113
|
-
onMouseLeave={handlePanelLeave}>
|
|
114
|
-
{items.map((childItemProps: any, i: number) => (
|
|
115
|
-
<NavbarItem
|
|
116
|
-
isDropdownItem
|
|
117
|
-
activeClassName="dropdown__link--active"
|
|
118
|
-
{...childItemProps}
|
|
119
|
-
key={i}
|
|
120
|
-
/>
|
|
121
|
-
))}
|
|
122
|
-
</ul>
|
|
123
|
-
</div>
|
|
124
|
-
);
|
|
125
|
-
}
|
|
1
|
+
import React, {useState, useRef, useEffect, useCallback} from 'react';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import NavbarNavLinkOrig from '@theme/NavbarItem/NavbarNavLink';
|
|
4
|
+
import NavbarItemOrig from '@theme/NavbarItem';
|
|
5
|
+
|
|
6
|
+
const NavbarNavLink = NavbarNavLinkOrig as React.ComponentType<any>;
|
|
7
|
+
const NavbarItem = NavbarItemOrig as React.ComponentType<any>;
|
|
8
|
+
|
|
9
|
+
export default function DropdownNavbarItemDesktop({
|
|
10
|
+
items,
|
|
11
|
+
position,
|
|
12
|
+
className,
|
|
13
|
+
onClick,
|
|
14
|
+
...props
|
|
15
|
+
}: any) {
|
|
16
|
+
const dropdownRef = useRef<HTMLDivElement>(null);
|
|
17
|
+
const [showDropdown, setShowDropdown] = useState(false);
|
|
18
|
+
|
|
19
|
+
// Close on click / touch outside
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
const close = (e: MouseEvent | TouchEvent) => {
|
|
22
|
+
if (!dropdownRef.current?.contains(e.target as Node)) {
|
|
23
|
+
setShowDropdown(false);
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
document.addEventListener('mousedown', close);
|
|
27
|
+
document.addEventListener('touchstart', close);
|
|
28
|
+
return () => {
|
|
29
|
+
document.removeEventListener('mousedown', close);
|
|
30
|
+
document.removeEventListener('touchstart', close);
|
|
31
|
+
};
|
|
32
|
+
}, []);
|
|
33
|
+
|
|
34
|
+
// Close when a NavbarPicker opens
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
const onOtherOpen = () => setShowDropdown(false);
|
|
37
|
+
window.addEventListener('nf-picker:open', onOtherOpen);
|
|
38
|
+
return () => window.removeEventListener('nf-picker:open', onOtherOpen);
|
|
39
|
+
}, []);
|
|
40
|
+
|
|
41
|
+
const handleClick = useCallback((e: React.MouseEvent) => {
|
|
42
|
+
e.preventDefault();
|
|
43
|
+
setShowDropdown(prev => !prev);
|
|
44
|
+
}, []);
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<div
|
|
48
|
+
ref={dropdownRef}
|
|
49
|
+
className={clsx('navbar__item', 'dropdown', {
|
|
50
|
+
'dropdown--right': position === 'right',
|
|
51
|
+
'dropdown--show': showDropdown,
|
|
52
|
+
})}>
|
|
53
|
+
<NavbarNavLink
|
|
54
|
+
aria-haspopup="true"
|
|
55
|
+
aria-expanded={showDropdown}
|
|
56
|
+
role="button"
|
|
57
|
+
href={props.to ? undefined : '#'}
|
|
58
|
+
className={clsx('navbar__link', className)}
|
|
59
|
+
{...props}
|
|
60
|
+
onClick={props.to ? undefined : handleClick}
|
|
61
|
+
onKeyDown={(e: React.KeyboardEvent) => {
|
|
62
|
+
if (e.key === 'Enter') {
|
|
63
|
+
e.preventDefault();
|
|
64
|
+
setShowDropdown(prev => !prev);
|
|
65
|
+
}
|
|
66
|
+
}}>
|
|
67
|
+
{props.children ?? props.label}
|
|
68
|
+
</NavbarNavLink>
|
|
69
|
+
<ul className="dropdown__menu">
|
|
70
|
+
{items.map((childItemProps: any, i: number) => (
|
|
71
|
+
<NavbarItem
|
|
72
|
+
isDropdownItem
|
|
73
|
+
activeClassName="dropdown__link--active"
|
|
74
|
+
{...childItemProps}
|
|
75
|
+
key={i}
|
|
76
|
+
/>
|
|
77
|
+
))}
|
|
78
|
+
</ul>
|
|
79
|
+
</div>
|
|
80
|
+
);
|
|
81
|
+
}
|