@primer/behaviors 0.0.0-20231219214124 → 0.0.0-20231220220225

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 +46 -41
  2. package/dist/esm/focus-zone.js +47 -42
  3. package/package.json +1 -1
package/dist/cjs/focus-zone.js CHANGED
@@ -259,6 +259,11 @@ function focusZone(container, settings) {
259
259
  endFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(removedNode, iterateFocusableElementsOptions));
260
260
  }
261
261
  }
262
+ if (mutation.type === 'attributes' && mutation.oldValue === null) {
263
+ if (mutation.target instanceof HTMLElement) {
264
+ endFocusManagement(mutation.target);
265
+ }
266
+ }
262
267
  }
263
268
  for (const mutation of mutations) {
264
269
  for (const addedNode of mutation.addedNodes) {
@@ -266,11 +271,18 @@ function focusZone(container, settings) {
266
271
  beginFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(addedNode, iterateFocusableElementsOptions));
267
272
  }
268
273
  }
274
+ if (mutation.type === 'attributes' && mutation.oldValue !== null) {
275
+ if (mutation.target instanceof HTMLElement) {
276
+ beginFocusManagement(mutation.target);
277
+ }
278
+ }
269
279
  }
270
280
  });
271
281
  observer.observe(container, {
272
282
  subtree: true,
273
283
  childList: true,
284
+ attributeFilter: ['hidden', 'disabled'],
285
+ attributeOldValue: true,
274
286
  });
275
287
  const controller = new AbortController();
276
288
  const signal = (_e = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _e !== void 0 ? _e : controller.signal;
@@ -375,41 +387,6 @@ function focusZone(container, settings) {
375
387
  const fallbackIndex = currentFocusedElement === container ? -1 : 0;
376
388
  return focusedIndex !== -1 ? focusedIndex : fallbackIndex;
377
389
  }
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
- }
413
390
  keyboardEventRecipient.addEventListener('keydown', event => {
414
391
  var _a;
415
392
  if (event.key in KEY_TO_DIRECTION) {
@@ -423,18 +400,46 @@ function focusZone(container, settings) {
423
400
  nextElementToFocus = settings.getNextFocusable(direction, (_a = document.activeElement) !== null && _a !== void 0 ? _a : undefined, event);
424
401
  }
425
402
  if (!nextElementToFocus) {
426
- nextElementToFocus = handleKeydownInteraction(direction, event.key);
403
+ const lastFocusedIndex = getCurrentFocusedIndex();
404
+ let nextFocusedIndex = lastFocusedIndex;
405
+ if (direction === 'previous') {
406
+ nextFocusedIndex -= 1;
407
+ }
408
+ else if (direction === 'start') {
409
+ nextFocusedIndex = 0;
410
+ }
411
+ else if (direction === 'next') {
412
+ nextFocusedIndex += 1;
413
+ }
414
+ else {
415
+ nextFocusedIndex = focusableElements.length - 1;
416
+ }
417
+ if (nextFocusedIndex < 0) {
418
+ if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
419
+ nextFocusedIndex = focusableElements.length - 1;
420
+ }
421
+ else {
422
+ nextFocusedIndex = 0;
423
+ }
424
+ }
425
+ if (nextFocusedIndex >= focusableElements.length) {
426
+ if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
427
+ nextFocusedIndex = 0;
428
+ }
429
+ else {
430
+ nextFocusedIndex = focusableElements.length - 1;
431
+ }
432
+ }
433
+ if (lastFocusedIndex !== nextFocusedIndex) {
434
+ nextElementToFocus = focusableElements[nextFocusedIndex];
435
+ }
427
436
  }
428
437
  if (activeDescendantControl) {
429
438
  updateFocusedElement(nextElementToFocus || currentFocusedElement, true);
430
439
  }
431
440
  else if (nextElementToFocus) {
432
- if (!(0, iterate_focusable_elements_js_1.isFocusable)(nextElementToFocus)) {
433
- endFocusManagement(nextElementToFocus);
434
- nextElementToFocus = handleKeydownInteraction(direction, event.key);
435
- }
436
441
  lastKeyboardFocusDirection = direction;
437
- nextElementToFocus === null || nextElementToFocus === void 0 ? void 0 : nextElementToFocus.focus({ preventScroll });
442
+ nextElementToFocus.focus({ preventScroll });
438
443
  }
439
444
  if (event.key !== 'Tab' || nextElementToFocus) {
440
445
  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 { isFocusable, iterateFocusableElements } from './utils/iterate-focusable-elements.js';
3
+ import { iterateFocusableElements } from './utils/iterate-focusable-elements.js';
4
4
  import { uniqueId } from './utils/unique-id.js';
5
5
  eventListenerSignalPolyfill();
6
6
  export var FocusKeys;
@@ -256,6 +256,11 @@ export function focusZone(container, settings) {
256
256
  endFocusManagement(...iterateFocusableElements(removedNode, iterateFocusableElementsOptions));
257
257
  }
258
258
  }
259
+ if (mutation.type === 'attributes' && mutation.oldValue === null) {
260
+ if (mutation.target instanceof HTMLElement) {
261
+ endFocusManagement(mutation.target);
262
+ }
263
+ }
259
264
  }
260
265
  for (const mutation of mutations) {
261
266
  for (const addedNode of mutation.addedNodes) {
@@ -263,11 +268,18 @@ export function focusZone(container, settings) {
263
268
  beginFocusManagement(...iterateFocusableElements(addedNode, iterateFocusableElementsOptions));
264
269
  }
265
270
  }
271
+ if (mutation.type === 'attributes' && mutation.oldValue !== null) {
272
+ if (mutation.target instanceof HTMLElement) {
273
+ beginFocusManagement(mutation.target);
274
+ }
275
+ }
266
276
  }
267
277
  });
268
278
  observer.observe(container, {
269
279
  subtree: true,
270
280
  childList: true,
281
+ attributeFilter: ['hidden', 'disabled'],
282
+ attributeOldValue: true,
271
283
  });
272
284
  const controller = new AbortController();
273
285
  const signal = (_e = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _e !== void 0 ? _e : controller.signal;
@@ -372,41 +384,6 @@ export function focusZone(container, settings) {
372
384
  const fallbackIndex = currentFocusedElement === container ? -1 : 0;
373
385
  return focusedIndex !== -1 ? focusedIndex : fallbackIndex;
374
386
  }
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
- }
410
387
  keyboardEventRecipient.addEventListener('keydown', event => {
411
388
  var _a;
412
389
  if (event.key in KEY_TO_DIRECTION) {
@@ -420,18 +397,46 @@ export function focusZone(container, settings) {
420
397
  nextElementToFocus = settings.getNextFocusable(direction, (_a = document.activeElement) !== null && _a !== void 0 ? _a : undefined, event);
421
398
  }
422
399
  if (!nextElementToFocus) {
423
- nextElementToFocus = handleKeydownInteraction(direction, event.key);
400
+ const lastFocusedIndex = getCurrentFocusedIndex();
401
+ let nextFocusedIndex = lastFocusedIndex;
402
+ if (direction === 'previous') {
403
+ nextFocusedIndex -= 1;
404
+ }
405
+ else if (direction === 'start') {
406
+ nextFocusedIndex = 0;
407
+ }
408
+ else if (direction === 'next') {
409
+ nextFocusedIndex += 1;
410
+ }
411
+ else {
412
+ nextFocusedIndex = focusableElements.length - 1;
413
+ }
414
+ if (nextFocusedIndex < 0) {
415
+ if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
416
+ nextFocusedIndex = focusableElements.length - 1;
417
+ }
418
+ else {
419
+ nextFocusedIndex = 0;
420
+ }
421
+ }
422
+ if (nextFocusedIndex >= focusableElements.length) {
423
+ if (focusOutBehavior === 'wrap' && event.key !== 'Tab') {
424
+ nextFocusedIndex = 0;
425
+ }
426
+ else {
427
+ nextFocusedIndex = focusableElements.length - 1;
428
+ }
429
+ }
430
+ if (lastFocusedIndex !== nextFocusedIndex) {
431
+ nextElementToFocus = focusableElements[nextFocusedIndex];
432
+ }
424
433
  }
425
434
  if (activeDescendantControl) {
426
435
  updateFocusedElement(nextElementToFocus || currentFocusedElement, true);
427
436
  }
428
437
  else if (nextElementToFocus) {
429
- if (!isFocusable(nextElementToFocus)) {
430
- endFocusManagement(nextElementToFocus);
431
- nextElementToFocus = handleKeydownInteraction(direction, event.key);
432
- }
433
438
  lastKeyboardFocusDirection = direction;
434
- nextElementToFocus === null || nextElementToFocus === void 0 ? void 0 : nextElementToFocus.focus({ preventScroll });
439
+ nextElementToFocus.focus({ preventScroll });
435
440
  }
436
441
  if (event.key !== 'Tab' || nextElementToFocus) {
437
442
  event.preventDefault();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/behaviors",
3
- "version": "0.0.0-20231219214124",
3
+ "version": "0.0.0-20231220220225",
4
4
  "description": "Shared behaviors for JavaScript components",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",