@primer/behaviors 0.0.0-20231219200130 → 0.0.0-20231220183046

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.
Files changed (3) hide show
  1. package/dist/cjs/focus-zone.js +41 -34
  2. package/dist/esm/focus-zone.js +42 -35
  3. package/package.json +2 -2
package/dist/cjs/focus-zone.js CHANGED
@@ -375,6 +375,41 @@ function focusZone(container, settings) {
375
375
  const fallbackIndex = currentFocusedElement === container ? -1 : 0;
376
376
  return focusedIndex !== -1 ? focusedIndex : fallbackIndex;
377
377
  }
378
+ function handleKeydownInteraction(direction, key) {
379
+ const lastFocusedIndex = getCurrentFocusedIndex();
380
+ let nextFocusedIndex = lastFocusedIndex;
381
+ if (direction === 'previous') {
382
+ nextFocusedIndex -= 1;
383
+ }
384
+ else if (direction === 'start') {
385
+ nextFocusedIndex = 0;
386
+ }
387
+ else if (direction === 'next') {
388
+ nextFocusedIndex += 1;
389
+ }
390
+ else {
391
+ nextFocusedIndex = focusableElements.length - 1;
392
+ }
393
+ if (nextFocusedIndex < 0) {
394
+ if (focusOutBehavior === 'wrap' && key !== 'Tab') {
395
+ nextFocusedIndex = focusableElements.length - 1;
396
+ }
397
+ else {
398
+ nextFocusedIndex = 0;
399
+ }
400
+ }
401
+ if (nextFocusedIndex >= focusableElements.length) {
402
+ if (focusOutBehavior === 'wrap' && key !== 'Tab') {
403
+ nextFocusedIndex = 0;
404
+ }
405
+ else {
406
+ nextFocusedIndex = focusableElements.length - 1;
407
+ }
408
+ }
409
+ if (lastFocusedIndex !== nextFocusedIndex) {
410
+ return focusableElements[nextFocusedIndex];
411
+ }
412
+ }
378
413
  keyboardEventRecipient.addEventListener('keydown', event => {
379
414
  var _a;
380
415
  if (event.key in KEY_TO_DIRECTION) {
@@ -388,46 +423,18 @@ function focusZone(container, settings) {
388
423
  nextElementToFocus = settings.getNextFocusable(direction, (_a = document.activeElement) !== null && _a !== void 0 ? _a : undefined, event);
389
424
  }
390
425
  if (!nextElementToFocus) {
391
- const lastFocusedIndex = getCurrentFocusedIndex();
392
- let nextFocusedIndex = lastFocusedIndex;
393
- if (direction === 'previous') {
394
- nextFocusedIndex -= 1;
395
- }
396
- else if (direction === 'start') {
397
- nextFocusedIndex = 0;
398
- }
399
- else if (direction === 'next') {
400
- nextFocusedIndex += 1;
401
- }
402
- else {
403
- nextFocusedIndex = focusableElements.length - 1;
404
- }
405
- if (nextFocusedIndex < 0) {
406
- if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
407
- nextFocusedIndex = focusableElements.length - 1;
408
- }
409
- else {
410
- nextFocusedIndex = 0;
411
- }
412
- }
413
- if (nextFocusedIndex >= focusableElements.length) {
414
- if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
415
- nextFocusedIndex = 0;
416
- }
417
- else {
418
- nextFocusedIndex = focusableElements.length - 1;
419
- }
420
- }
421
- if (lastFocusedIndex !== nextFocusedIndex) {
422
- nextElementToFocus = focusableElements[nextFocusedIndex];
423
- }
426
+ nextElementToFocus = handleKeydownInteraction(direction, event.key);
424
427
  }
425
428
  if (activeDescendantControl) {
426
429
  updateFocusedElement(nextElementToFocus || currentFocusedElement, true);
427
430
  }
428
431
  else if (nextElementToFocus) {
432
+ if (!(0, iterate_focusable_elements_js_1.isFocusable)(nextElementToFocus)) {
433
+ endFocusManagement(nextElementToFocus);
434
+ nextElementToFocus = handleKeydownInteraction(direction, event.key);
435
+ }
429
436
  lastKeyboardFocusDirection = direction;
430
- nextElementToFocus.focus({ preventScroll });
437
+ nextElementToFocus === null || nextElementToFocus === void 0 ? void 0 : nextElementToFocus.focus({ preventScroll });
431
438
  }
432
439
  if (event.key !== 'Tab' || nextElementToFocus) {
433
440
  event.preventDefault();
package/dist/esm/focus-zone.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { polyfill as eventListenerSignalPolyfill } from './polyfills/event-listener-signal.js';
2
2
  import { isMacOS } from './utils/user-agent.js';
3
- import { iterateFocusableElements } from './utils/iterate-focusable-elements.js';
3
+ import { isFocusable, iterateFocusableElements } from './utils/iterate-focusable-elements.js';
4
4
  import { uniqueId } from './utils/unique-id.js';
5
5
  eventListenerSignalPolyfill();
6
6
  export var FocusKeys;
@@ -372,6 +372,41 @@ export function focusZone(container, settings) {
372
372
  const fallbackIndex = currentFocusedElement === container ? -1 : 0;
373
373
  return focusedIndex !== -1 ? focusedIndex : fallbackIndex;
374
374
  }
375
+ function handleKeydownInteraction(direction, key) {
376
+ const lastFocusedIndex = getCurrentFocusedIndex();
377
+ let nextFocusedIndex = lastFocusedIndex;
378
+ if (direction === 'previous') {
379
+ nextFocusedIndex -= 1;
380
+ }
381
+ else if (direction === 'start') {
382
+ nextFocusedIndex = 0;
383
+ }
384
+ else if (direction === 'next') {
385
+ nextFocusedIndex += 1;
386
+ }
387
+ else {
388
+ nextFocusedIndex = focusableElements.length - 1;
389
+ }
390
+ if (nextFocusedIndex < 0) {
391
+ if (focusOutBehavior === 'wrap' && key !== 'Tab') {
392
+ nextFocusedIndex = focusableElements.length - 1;
393
+ }
394
+ else {
395
+ nextFocusedIndex = 0;
396
+ }
397
+ }
398
+ if (nextFocusedIndex >= focusableElements.length) {
399
+ if (focusOutBehavior === 'wrap' && key !== 'Tab') {
400
+ nextFocusedIndex = 0;
401
+ }
402
+ else {
403
+ nextFocusedIndex = focusableElements.length - 1;
404
+ }
405
+ }
406
+ if (lastFocusedIndex !== nextFocusedIndex) {
407
+ return focusableElements[nextFocusedIndex];
408
+ }
409
+ }
375
410
  keyboardEventRecipient.addEventListener('keydown', event => {
376
411
  var _a;
377
412
  if (event.key in KEY_TO_DIRECTION) {
@@ -385,46 +420,18 @@ export function focusZone(container, settings) {
385
420
  nextElementToFocus = settings.getNextFocusable(direction, (_a = document.activeElement) !== null && _a !== void 0 ? _a : undefined, event);
386
421
  }
387
422
  if (!nextElementToFocus) {
388
- const lastFocusedIndex = getCurrentFocusedIndex();
389
- let nextFocusedIndex = lastFocusedIndex;
390
- if (direction === 'previous') {
391
- nextFocusedIndex -= 1;
392
- }
393
- else if (direction === 'start') {
394
- nextFocusedIndex = 0;
395
- }
396
- else if (direction === 'next') {
397
- nextFocusedIndex += 1;
398
- }
399
- else {
400
- nextFocusedIndex = focusableElements.length - 1;
401
- }
402
- if (nextFocusedIndex < 0) {
403
- if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
404
- nextFocusedIndex = focusableElements.length - 1;
405
- }
406
- else {
407
- nextFocusedIndex = 0;
408
- }
409
- }
410
- if (nextFocusedIndex >= focusableElements.length) {
411
- if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
412
- nextFocusedIndex = 0;
413
- }
414
- else {
415
- nextFocusedIndex = focusableElements.length - 1;
416
- }
417
- }
418
- if (lastFocusedIndex !== nextFocusedIndex) {
419
- nextElementToFocus = focusableElements[nextFocusedIndex];
420
- }
423
+ nextElementToFocus = handleKeydownInteraction(direction, event.key);
421
424
  }
422
425
  if (activeDescendantControl) {
423
426
  updateFocusedElement(nextElementToFocus || currentFocusedElement, true);
424
427
  }
425
428
  else if (nextElementToFocus) {
429
+ if (!isFocusable(nextElementToFocus)) {
430
+ endFocusManagement(nextElementToFocus);
431
+ nextElementToFocus = handleKeydownInteraction(direction, event.key);
432
+ }
426
433
  lastKeyboardFocusDirection = direction;
427
- nextElementToFocus.focus({ preventScroll });
434
+ nextElementToFocus === null || nextElementToFocus === void 0 ? void 0 : nextElementToFocus.focus({ preventScroll });
428
435
  }
429
436
  if (event.key !== 'Tab' || nextElementToFocus) {
430
437
  event.preventDefault();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/behaviors",
3
- "version": "0.0.0-20231219200130",
3
+ "version": "0.0.0-20231220183046",
4
4
  "description": "Shared behaviors for JavaScript components",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -73,7 +73,7 @@
73
73
  "@testing-library/react": "^14.0.0",
74
74
  "@testing-library/user-event": "^14.5.1",
75
75
  "@types/jest": "^27.0.3",
76
- "@types/node": "^20.10.5",
76
+ "@types/node": "^18.18.0",
77
77
  "@types/react": "^18.2.23",
78
78
  "esbuild": "^0.19.4",
79
79
  "esbuild-jest": "^0.5.0",