@primer/behaviors 0.0.0-20260101062449 → 0.0.0-20260106105613

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 (5) hide show
  1. package/dist/cjs/anchored-position.js +23 -35
  2. package/dist/cjs/focus-zone.js +5 -2
  3. package/dist/esm/anchored-position.mjs +23 -35
  4. package/dist/esm/focus-zone.mjs +5 -2
  5. package/package.json +1 -1
package/dist/cjs/anchored-position.js CHANGED
@@ -12,9 +12,9 @@ const alternateAlignments = {
12
12
  center: ['end', 'start'],
13
13
  };
14
14
  function getAnchoredPosition(floatingElement, anchorElement, settings = {}) {
15
- const { positionedParent: parentElement, clippingNode, positionedParentStyle, clippingNodeStyle, } = getPositionedParentAndClippingNode(floatingElement);
16
- const clippingRect = getClippingRect(clippingNode, clippingNodeStyle);
17
- const parentElementStyle = positionedParentStyle || getComputedStyle(parentElement);
15
+ const parentElement = getPositionedParent(floatingElement);
16
+ const clippingRect = getClippingRect(parentElement);
17
+ const parentElementStyle = getComputedStyle(parentElement);
18
18
  const parentElementRect = parentElement.getBoundingClientRect();
19
19
  const [borderTop, borderLeft] = [parentElementStyle.borderTopWidth, parentElementStyle.borderLeftWidth].map(v => parseInt(v, 10) || 0);
20
20
  const relativeRect = {
@@ -23,43 +23,19 @@ function getAnchoredPosition(floatingElement, anchorElement, settings = {}) {
23
23
  };
24
24
  return pureCalculateAnchoredPosition(clippingRect, relativeRect, floatingElement.getBoundingClientRect(), anchorElement instanceof Element ? anchorElement.getBoundingClientRect() : anchorElement, getDefaultSettings(settings));
25
25
  }
26
- function getPositionedParentAndClippingNode(element) {
27
- if (isOnTopLayer(element)) {
28
- return {
29
- positionedParent: document.body,
30
- clippingNode: document.body,
31
- positionedParentStyle: null,
32
- clippingNodeStyle: null,
33
- };
34
- }
35
- let positionedParent = null;
36
- let clippingNode = null;
37
- let positionedParentStyle = null;
38
- let clippingNodeStyle = null;
26
+ function getPositionedParent(element) {
27
+ if (isOnTopLayer(element))
28
+ return document.body;
39
29
  let parentNode = element.parentNode;
40
30
  while (parentNode !== null && parentNode !== document.body) {
41
31
  if (parentNode instanceof HTMLElement) {
42
- const style = getComputedStyle(parentNode);
43
- if (!positionedParent && style.position !== 'static') {
44
- positionedParent = parentNode;
45
- positionedParentStyle = style;
46
- }
47
- if (!clippingNode && style.overflow !== 'visible') {
48
- clippingNode = parentNode;
49
- clippingNodeStyle = style;
50
- }
51
- if (positionedParent && clippingNode) {
52
- break;
32
+ if (getComputedStyle(parentNode).position !== 'static') {
33
+ return parentNode;
53
34
  }
54
35
  }
55
36
  parentNode = parentNode.parentNode;
56
37
  }
57
- return {
58
- positionedParent: positionedParent !== null && positionedParent !== void 0 ? positionedParent : document.body,
59
- clippingNode: clippingNode !== null && clippingNode !== void 0 ? clippingNode : document.body,
60
- positionedParentStyle,
61
- clippingNodeStyle,
62
- };
38
+ return document.body;
63
39
  }
64
40
  function isOnTopLayer(element) {
65
41
  var _a;
@@ -76,9 +52,21 @@ function isOnTopLayer(element) {
76
52
  }
77
53
  return false;
78
54
  }
79
- function getClippingRect(clippingNode, cachedStyle = null) {
55
+ function getClippingRect(element) {
56
+ let clippingNode = document.body;
57
+ let parentNode = element;
58
+ while (parentNode !== null && parentNode !== document.body) {
59
+ if (parentNode instanceof HTMLElement) {
60
+ const overflow = getComputedStyle(parentNode).overflow;
61
+ if (overflow !== 'visible') {
62
+ clippingNode = parentNode;
63
+ break;
64
+ }
65
+ }
66
+ parentNode = parentNode.parentNode;
67
+ }
80
68
  const elemRect = clippingNode.getBoundingClientRect();
81
- const elemStyle = cachedStyle || getComputedStyle(clippingNode);
69
+ const elemStyle = getComputedStyle(clippingNode);
82
70
  const borderTop = parseInt(elemStyle.borderTopWidth, 10) || 0;
83
71
  const borderLeft = parseInt(elemStyle.borderLeftWidth, 10) || 0;
84
72
  const borderRight = parseInt(elemStyle.borderRightWidth, 10) || 0;
package/dist/cjs/focus-zone.js CHANGED
@@ -141,6 +141,7 @@ function focusZone(container, settings) {
141
141
  const activeDescendantCallback = settings === null || settings === void 0 ? void 0 : settings.onActiveDescendantChanged;
142
142
  const ignoreHoverEvents = (_d = settings === null || settings === void 0 ? void 0 : settings.ignoreHoverEvents) !== null && _d !== void 0 ? _d : false;
143
143
  let currentFocusedElement;
144
+ let wasDirectlyActivated = false;
144
145
  const preventScroll = (_e = settings === null || settings === void 0 ? void 0 : settings.preventScroll) !== null && _e !== void 0 ? _e : false;
145
146
  const preventInitialFocus = focusInStrategy === 'initial' && (settings === null || settings === void 0 ? void 0 : settings.activeDescendantControl);
146
147
  function getFirstFocusableElement() {
@@ -152,6 +153,7 @@ function focusZone(container, settings) {
152
153
  function updateFocusedElement(to, directlyActivated = false) {
153
154
  const from = currentFocusedElement;
154
155
  currentFocusedElement = to;
156
+ wasDirectlyActivated = directlyActivated;
155
157
  if (activeDescendantControl) {
156
158
  if (to && isActiveDescendantInputFocused()) {
157
159
  setActiveDescendant(from, to, directlyActivated);
@@ -202,14 +204,15 @@ function focusZone(container, settings) {
202
204
  if (filteredElements.length === 0) {
203
205
  return;
204
206
  }
205
- focusableElements.insertAt(findInsertionIndex(filteredElements), ...filteredElements);
207
+ const insertionIndex = findInsertionIndex(filteredElements);
208
+ focusableElements.insertAt(insertionIndex, ...filteredElements);
206
209
  for (const element of filteredElements) {
207
210
  if (!savedTabIndex.has(element)) {
208
211
  savedTabIndex.set(element, element.getAttribute('tabindex'));
209
212
  }
210
213
  element.setAttribute('tabindex', '-1');
211
214
  }
212
- if (!currentFocusedElement && !preventInitialFocus) {
215
+ if (!preventInitialFocus && (!currentFocusedElement || (insertionIndex === 0 && !wasDirectlyActivated))) {
213
216
  updateFocusedElement(getFirstFocusableElement());
214
217
  }
215
218
  }
package/dist/esm/anchored-position.mjs CHANGED
@@ -10,9 +10,9 @@ const alternateAlignments = {
10
10
  center: ['end', 'start'],
11
11
  };
12
12
  function getAnchoredPosition(floatingElement, anchorElement, settings = {}) {
13
- const { positionedParent: parentElement, clippingNode, positionedParentStyle, clippingNodeStyle, } = getPositionedParentAndClippingNode(floatingElement);
14
- const clippingRect = getClippingRect(clippingNode, clippingNodeStyle);
15
- const parentElementStyle = positionedParentStyle || getComputedStyle(parentElement);
13
+ const parentElement = getPositionedParent(floatingElement);
14
+ const clippingRect = getClippingRect(parentElement);
15
+ const parentElementStyle = getComputedStyle(parentElement);
16
16
  const parentElementRect = parentElement.getBoundingClientRect();
17
17
  const [borderTop, borderLeft] = [parentElementStyle.borderTopWidth, parentElementStyle.borderLeftWidth].map(v => parseInt(v, 10) || 0);
18
18
  const relativeRect = {
@@ -21,43 +21,19 @@ function getAnchoredPosition(floatingElement, anchorElement, settings = {}) {
21
21
  };
22
22
  return pureCalculateAnchoredPosition(clippingRect, relativeRect, floatingElement.getBoundingClientRect(), anchorElement instanceof Element ? anchorElement.getBoundingClientRect() : anchorElement, getDefaultSettings(settings));
23
23
  }
24
- function getPositionedParentAndClippingNode(element) {
25
- if (isOnTopLayer(element)) {
26
- return {
27
- positionedParent: document.body,
28
- clippingNode: document.body,
29
- positionedParentStyle: null,
30
- clippingNodeStyle: null,
31
- };
32
- }
33
- let positionedParent = null;
34
- let clippingNode = null;
35
- let positionedParentStyle = null;
36
- let clippingNodeStyle = null;
24
+ function getPositionedParent(element) {
25
+ if (isOnTopLayer(element))
26
+ return document.body;
37
27
  let parentNode = element.parentNode;
38
28
  while (parentNode !== null && parentNode !== document.body) {
39
29
  if (parentNode instanceof HTMLElement) {
40
- const style = getComputedStyle(parentNode);
41
- if (!positionedParent && style.position !== 'static') {
42
- positionedParent = parentNode;
43
- positionedParentStyle = style;
44
- }
45
- if (!clippingNode && style.overflow !== 'visible') {
46
- clippingNode = parentNode;
47
- clippingNodeStyle = style;
48
- }
49
- if (positionedParent && clippingNode) {
50
- break;
30
+ if (getComputedStyle(parentNode).position !== 'static') {
31
+ return parentNode;
51
32
  }
52
33
  }
53
34
  parentNode = parentNode.parentNode;
54
35
  }
55
- return {
56
- positionedParent: positionedParent !== null && positionedParent !== void 0 ? positionedParent : document.body,
57
- clippingNode: clippingNode !== null && clippingNode !== void 0 ? clippingNode : document.body,
58
- positionedParentStyle,
59
- clippingNodeStyle,
60
- };
36
+ return document.body;
61
37
  }
62
38
  function isOnTopLayer(element) {
63
39
  var _a;
@@ -74,9 +50,21 @@ function isOnTopLayer(element) {
74
50
  }
75
51
  return false;
76
52
  }
77
- function getClippingRect(clippingNode, cachedStyle = null) {
53
+ function getClippingRect(element) {
54
+ let clippingNode = document.body;
55
+ let parentNode = element;
56
+ while (parentNode !== null && parentNode !== document.body) {
57
+ if (parentNode instanceof HTMLElement) {
58
+ const overflow = getComputedStyle(parentNode).overflow;
59
+ if (overflow !== 'visible') {
60
+ clippingNode = parentNode;
61
+ break;
62
+ }
63
+ }
64
+ parentNode = parentNode.parentNode;
65
+ }
78
66
  const elemRect = clippingNode.getBoundingClientRect();
79
- const elemStyle = cachedStyle || getComputedStyle(clippingNode);
67
+ const elemStyle = getComputedStyle(clippingNode);
80
68
  const borderTop = parseInt(elemStyle.borderTopWidth, 10) || 0;
81
69
  const borderLeft = parseInt(elemStyle.borderLeftWidth, 10) || 0;
82
70
  const borderRight = parseInt(elemStyle.borderRightWidth, 10) || 0;
package/dist/esm/focus-zone.mjs CHANGED
@@ -139,6 +139,7 @@ function focusZone(container, settings) {
139
139
  const activeDescendantCallback = settings === null || settings === void 0 ? void 0 : settings.onActiveDescendantChanged;
140
140
  const ignoreHoverEvents = (_d = settings === null || settings === void 0 ? void 0 : settings.ignoreHoverEvents) !== null && _d !== void 0 ? _d : false;
141
141
  let currentFocusedElement;
142
+ let wasDirectlyActivated = false;
142
143
  const preventScroll = (_e = settings === null || settings === void 0 ? void 0 : settings.preventScroll) !== null && _e !== void 0 ? _e : false;
143
144
  const preventInitialFocus = focusInStrategy === 'initial' && (settings === null || settings === void 0 ? void 0 : settings.activeDescendantControl);
144
145
  function getFirstFocusableElement() {
@@ -150,6 +151,7 @@ function focusZone(container, settings) {
150
151
  function updateFocusedElement(to, directlyActivated = false) {
151
152
  const from = currentFocusedElement;
152
153
  currentFocusedElement = to;
154
+ wasDirectlyActivated = directlyActivated;
153
155
  if (activeDescendantControl) {
154
156
  if (to && isActiveDescendantInputFocused()) {
155
157
  setActiveDescendant(from, to, directlyActivated);
@@ -200,14 +202,15 @@ function focusZone(container, settings) {
200
202
  if (filteredElements.length === 0) {
201
203
  return;
202
204
  }
203
- focusableElements.insertAt(findInsertionIndex(filteredElements), ...filteredElements);
205
+ const insertionIndex = findInsertionIndex(filteredElements);
206
+ focusableElements.insertAt(insertionIndex, ...filteredElements);
204
207
  for (const element of filteredElements) {
205
208
  if (!savedTabIndex.has(element)) {
206
209
  savedTabIndex.set(element, element.getAttribute('tabindex'));
207
210
  }
208
211
  element.setAttribute('tabindex', '-1');
209
212
  }
210
- if (!currentFocusedElement && !preventInitialFocus) {
213
+ if (!preventInitialFocus && (!currentFocusedElement || (insertionIndex === 0 && !wasDirectlyActivated))) {
211
214
  updateFocusedElement(getFirstFocusableElement());
212
215
  }
213
216
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/behaviors",
3
- "version": "0.0.0-20260101062449",
3
+ "version": "0.0.0-20260106105613",
4
4
  "description": "Shared behaviors for JavaScript components",
5
5
  "type": "commonjs",
6
6
  "main": "dist/cjs/index.js",