@primer/behaviors 1.3.6-rc.e734c51 → 1.4.0-rc.a4c4774

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 (7) hide show
  1. package/dist/cjs/focus-zone.d.ts +3 -2
  2. package/dist/cjs/focus-zone.js +8 -3
  3. package/dist/cjs/utils/iterate-focusable-elements.js +4 -2
  4. package/dist/esm/focus-zone.d.ts +3 -2
  5. package/dist/esm/focus-zone.js +8 -3
  6. package/dist/esm/utils/iterate-focusable-elements.js +4 -2
  7. package/package.json +1 -1
package/dist/cjs/focus-zone.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { IterateFocusableElements } from './utils/iterate-focusable-elements.js';
1
2
  export type Direction = 'previous' | 'next' | 'start' | 'end';
2
3
  export type FocusMovementKeys = 'ArrowLeft' | 'ArrowDown' | 'ArrowUp' | 'ArrowRight' | 'h' | 'j' | 'k' | 'l' | 'a' | 's' | 'w' | 'd' | 'Tab' | 'Home' | 'End' | 'PageUp' | 'PageDown' | 'Backspace';
3
4
  export declare enum FocusKeys {
@@ -16,7 +17,7 @@ export declare enum FocusKeys {
16
17
  WASD = 96,
17
18
  All = 511
18
19
  }
19
- export interface FocusZoneSettings {
20
+ export type FocusZoneSettings = IterateFocusableElements & {
20
21
  focusOutBehavior?: 'stop' | 'wrap';
21
22
  getNextFocusable?: (direction: Direction, from: Element | undefined, event: KeyboardEvent) => HTMLElement | undefined;
22
23
  focusableElementFilter?: (element: HTMLElement) => boolean;
@@ -26,7 +27,7 @@ export interface FocusZoneSettings {
26
27
  onActiveDescendantChanged?: (newActiveDescendant: HTMLElement | undefined, previousActiveDescendant: HTMLElement | undefined, directlyActivated: boolean) => void;
27
28
  focusInStrategy?: 'first' | 'closest' | 'previous' | ((previousFocusedElement: Element) => HTMLElement | undefined);
28
29
  preventScroll?: boolean;
29
- }
30
+ };
30
31
  export declare const isActiveDescendantAttribute = "data-is-active-descendant";
31
32
  export declare const activeDescendantActivatedDirectly = "activated-directly";
32
33
  export declare const activeDescendantActivatedIndirectly = "activated-indirectly";
package/dist/cjs/focus-zone.js CHANGED
@@ -244,21 +244,26 @@ function focusZone(container, settings) {
244
244
  }
245
245
  }
246
246
  }
247
- beginFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(container));
247
+ const iterateFocusableElementsOptions = {
248
+ reverse: settings === null || settings === void 0 ? void 0 : settings.reverse,
249
+ strict: settings === null || settings === void 0 ? void 0 : settings.strict,
250
+ onlyTabbable: settings === null || settings === void 0 ? void 0 : settings.onlyTabbable,
251
+ };
252
+ beginFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(container, iterateFocusableElementsOptions));
248
253
  const initialElement = typeof focusInStrategy === 'function' ? focusInStrategy(document.body) : getFirstFocusableElement();
249
254
  updateFocusedElement(initialElement);
250
255
  const observer = new MutationObserver(mutations => {
251
256
  for (const mutation of mutations) {
252
257
  for (const removedNode of mutation.removedNodes) {
253
258
  if (removedNode instanceof HTMLElement) {
254
- endFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(removedNode));
259
+ endFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(removedNode, iterateFocusableElementsOptions));
255
260
  }
256
261
  }
257
262
  }
258
263
  for (const mutation of mutations) {
259
264
  for (const addedNode of mutation.addedNodes) {
260
265
  if (addedNode instanceof HTMLElement) {
261
- beginFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(addedNode));
266
+ beginFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(addedNode, iterateFocusableElementsOptions));
262
267
  }
263
268
  }
264
269
  }
package/dist/cjs/utils/iterate-focusable-elements.js CHANGED
@@ -46,10 +46,12 @@ function isFocusable(elem, strict = false) {
46
46
  return false;
47
47
  }
48
48
  if (strict) {
49
+ const style = getComputedStyle(elem);
49
50
  const sizeInert = elem.offsetWidth === 0 || elem.offsetHeight === 0;
50
- const visibilityInert = ['hidden', 'collapse'].includes(getComputedStyle(elem).visibility);
51
+ const visibilityInert = ['hidden', 'collapse'].includes(style.visibility);
52
+ const displayInert = style.display === 'none' || !elem.offsetParent;
51
53
  const clientRectsInert = elem.getClientRects().length === 0;
52
- if (sizeInert || visibilityInert || clientRectsInert) {
54
+ if (sizeInert || visibilityInert || clientRectsInert || displayInert) {
53
55
  return false;
54
56
  }
55
57
  }
package/dist/esm/focus-zone.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { IterateFocusableElements } from './utils/iterate-focusable-elements.js';
1
2
  export type Direction = 'previous' | 'next' | 'start' | 'end';
2
3
  export type FocusMovementKeys = 'ArrowLeft' | 'ArrowDown' | 'ArrowUp' | 'ArrowRight' | 'h' | 'j' | 'k' | 'l' | 'a' | 's' | 'w' | 'd' | 'Tab' | 'Home' | 'End' | 'PageUp' | 'PageDown' | 'Backspace';
3
4
  export declare enum FocusKeys {
@@ -16,7 +17,7 @@ export declare enum FocusKeys {
16
17
  WASD = 96,
17
18
  All = 511
18
19
  }
19
- export interface FocusZoneSettings {
20
+ export type FocusZoneSettings = IterateFocusableElements & {
20
21
  focusOutBehavior?: 'stop' | 'wrap';
21
22
  getNextFocusable?: (direction: Direction, from: Element | undefined, event: KeyboardEvent) => HTMLElement | undefined;
22
23
  focusableElementFilter?: (element: HTMLElement) => boolean;
@@ -26,7 +27,7 @@ export interface FocusZoneSettings {
26
27
  onActiveDescendantChanged?: (newActiveDescendant: HTMLElement | undefined, previousActiveDescendant: HTMLElement | undefined, directlyActivated: boolean) => void;
27
28
  focusInStrategy?: 'first' | 'closest' | 'previous' | ((previousFocusedElement: Element) => HTMLElement | undefined);
28
29
  preventScroll?: boolean;
29
- }
30
+ };
30
31
  export declare const isActiveDescendantAttribute = "data-is-active-descendant";
31
32
  export declare const activeDescendantActivatedDirectly = "activated-directly";
32
33
  export declare const activeDescendantActivatedIndirectly = "activated-indirectly";
package/dist/esm/focus-zone.js CHANGED
@@ -241,21 +241,26 @@ export function focusZone(container, settings) {
241
241
  }
242
242
  }
243
243
  }
244
- beginFocusManagement(...iterateFocusableElements(container));
244
+ const iterateFocusableElementsOptions = {
245
+ reverse: settings === null || settings === void 0 ? void 0 : settings.reverse,
246
+ strict: settings === null || settings === void 0 ? void 0 : settings.strict,
247
+ onlyTabbable: settings === null || settings === void 0 ? void 0 : settings.onlyTabbable,
248
+ };
249
+ beginFocusManagement(...iterateFocusableElements(container, iterateFocusableElementsOptions));
245
250
  const initialElement = typeof focusInStrategy === 'function' ? focusInStrategy(document.body) : getFirstFocusableElement();
246
251
  updateFocusedElement(initialElement);
247
252
  const observer = new MutationObserver(mutations => {
248
253
  for (const mutation of mutations) {
249
254
  for (const removedNode of mutation.removedNodes) {
250
255
  if (removedNode instanceof HTMLElement) {
251
- endFocusManagement(...iterateFocusableElements(removedNode));
256
+ endFocusManagement(...iterateFocusableElements(removedNode, iterateFocusableElementsOptions));
252
257
  }
253
258
  }
254
259
  }
255
260
  for (const mutation of mutations) {
256
261
  for (const addedNode of mutation.addedNodes) {
257
262
  if (addedNode instanceof HTMLElement) {
258
- beginFocusManagement(...iterateFocusableElements(addedNode));
263
+ beginFocusManagement(...iterateFocusableElements(addedNode, iterateFocusableElementsOptions));
259
264
  }
260
265
  }
261
266
  }
package/dist/esm/utils/iterate-focusable-elements.js CHANGED
@@ -41,10 +41,12 @@ export function isFocusable(elem, strict = false) {
41
41
  return false;
42
42
  }
43
43
  if (strict) {
44
+ const style = getComputedStyle(elem);
44
45
  const sizeInert = elem.offsetWidth === 0 || elem.offsetHeight === 0;
45
- const visibilityInert = ['hidden', 'collapse'].includes(getComputedStyle(elem).visibility);
46
+ const visibilityInert = ['hidden', 'collapse'].includes(style.visibility);
47
+ const displayInert = style.display === 'none' || !elem.offsetParent;
46
48
  const clientRectsInert = elem.getClientRects().length === 0;
47
- if (sizeInert || visibilityInert || clientRectsInert) {
49
+ if (sizeInert || visibilityInert || clientRectsInert || displayInert) {
48
50
  return false;
49
51
  }
50
52
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/behaviors",
3
- "version": "1.3.6-rc.e734c51",
3
+ "version": "1.4.0-rc.a4c4774",
4
4
  "description": "Shared behaviors for JavaScript components",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",