@acusti/dropdown 1.0.0-rc.1 → 1.0.0-rc.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.
- package/README.md +7 -5
- package/dist/Dropdown.js +7 -6
- package/dist/Dropdown.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
# @acusti/dropdown
|
|
2
2
|
|
|
3
|
-
[](https://npmx.dev/package/@acusti/dropdown)
|
|
4
|
+
[](https://npmx.dev/package/@acusti/dropdown)
|
|
5
|
+
[](https://npmx.dev/package/@acusti/dropdown)
|
|
6
|
+
[](https://npmx.dev/package/@acusti/dropdown)
|
|
7
|
+
[](https://npmx.dev/package/@acusti/dropdown)
|
|
7
8
|
|
|
8
9
|
`Dropdown` is a React component that renders a menu-like UI with a trigger
|
|
9
10
|
that the user clicks to disclose a dropdown anchored to that trigger. The
|
|
@@ -1042,7 +1043,8 @@ Menubar behaviors:
|
|
|
1042
1043
|
tabbing away and back returns you where you were; it starts on (and falls
|
|
1043
1044
|
back to) the first enabled member. A searchable member sits outside this
|
|
1044
1045
|
— it’s a `combobox`, not a menu item, so it keeps its own native tab stop
|
|
1045
|
-
and never takes the bar’s
|
|
1046
|
+
and never takes the bar’s. ←/→ inside its input stay caret movement, and
|
|
1047
|
+
the bar’s roving passes over it rather than landing in it
|
|
1046
1048
|
- at most one menu in the bar is open at a time
|
|
1047
1049
|
- opening a trigger’s menu (by click or keyboard) engages the bar
|
|
1048
1050
|
(menu-mode). While engaged, hovering or focusing another trigger switches
|
package/dist/Dropdown.js
CHANGED
|
@@ -309,15 +309,15 @@ var compareDocumentOrder = (a, b) => {
|
|
|
309
309
|
return 0;
|
|
310
310
|
};
|
|
311
311
|
var NON_MENU_CONTROL_SELECTOR = "a[href], button, input, select, textarea, [tabindex]";
|
|
312
|
-
var
|
|
312
|
+
var canHoldTabStop = (member) => !member.isDisabled() && member.isMenuPopup();
|
|
313
|
+
var findNextTargetMember = (members, fromIndex, direction) => {
|
|
313
314
|
const { length } = members;
|
|
314
315
|
for (let step = 1; step < length; step++) {
|
|
315
316
|
const member = members[((fromIndex + direction * step) % length + length) % length];
|
|
316
|
-
if (
|
|
317
|
+
if (canHoldTabStop(member)) return member;
|
|
317
318
|
}
|
|
318
319
|
return null;
|
|
319
320
|
};
|
|
320
|
-
var canHoldTabStop = (member) => !member.isDisabled() && member.isMenuPopup();
|
|
321
321
|
function Menubar(t0) {
|
|
322
322
|
const $ = c(22);
|
|
323
323
|
const { children, className, style } = t0;
|
|
@@ -365,7 +365,7 @@ function Menubar(t0) {
|
|
|
365
365
|
if (members_0.length < 2) return;
|
|
366
366
|
const index = members_0.findIndex((member_0) => member_0.element === fromElement);
|
|
367
367
|
if (index === -1) return;
|
|
368
|
-
const next =
|
|
368
|
+
const next = findNextTargetMember(members_0, index, direction);
|
|
369
369
|
if (!next) return;
|
|
370
370
|
members_0[index].close();
|
|
371
371
|
next.open();
|
|
@@ -397,15 +397,16 @@ function Menubar(t0) {
|
|
|
397
397
|
t6 = (event) => {
|
|
398
398
|
const { key } = event;
|
|
399
399
|
if (key !== "ArrowLeft" && key !== "ArrowRight") return;
|
|
400
|
+
if (isEventTargetUsingKeyEvent(event.nativeEvent)) return;
|
|
400
401
|
const members_1 = getOrderedMembers();
|
|
401
402
|
if (members_1.length < 2) return;
|
|
402
403
|
if (members_1.some(_temp2)) return;
|
|
403
404
|
const eventTarget = event.target;
|
|
404
405
|
const index_0 = members_1.findIndex((member_4) => member_4.element.contains(eventTarget));
|
|
405
|
-
if (index_0 === -1) return;
|
|
406
|
+
if (index_0 === -1 || !members_1[index_0].isMenuPopup()) return;
|
|
406
407
|
event.preventDefault();
|
|
407
408
|
event.stopPropagation();
|
|
408
|
-
const next_0 =
|
|
409
|
+
const next_0 = findNextTargetMember(members_1, index_0, key === "ArrowRight" ? 1 : -1);
|
|
409
410
|
if (!next_0) return;
|
|
410
411
|
next_0.focusTrigger();
|
|
411
412
|
};
|