@primer/behaviors 0.0.0-20251221220409 → 0.0.0-20251222183246

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/anchored-position.js +13 -5
  2. package/dist/esm/anchored-position.mjs +13 -5
  3. 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 } = getPositionedParentAndClippingNode(floatingElement);
16
- const clippingRect = getClippingRect(clippingNode);
17
- const parentElementStyle = getComputedStyle(parentElement);
15
+ const { positionedParent: parentElement, clippingNode, positionedParentStyle, clippingNodeStyle, } = getPositionedParentAndClippingNode(floatingElement);
16
+ const clippingRect = getClippingRect(clippingNode, clippingNodeStyle);
17
+ const parentElementStyle = positionedParentStyle || 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 = {
@@ -28,19 +28,25 @@ function getPositionedParentAndClippingNode(element) {
28
28
  return {
29
29
  positionedParent: document.body,
30
30
  clippingNode: document.body,
31
+ positionedParentStyle: null,
32
+ clippingNodeStyle: null,
31
33
  };
32
34
  }
33
35
  let positionedParent = null;
34
36
  let clippingNode = null;
37
+ let positionedParentStyle = null;
38
+ let clippingNodeStyle = null;
35
39
  let parentNode = element.parentNode;
36
40
  while (parentNode !== null && parentNode !== document.body) {
37
41
  if (parentNode instanceof HTMLElement) {
38
42
  const style = getComputedStyle(parentNode);
39
43
  if (!positionedParent && style.position !== 'static') {
40
44
  positionedParent = parentNode;
45
+ positionedParentStyle = style;
41
46
  }
42
47
  if (!clippingNode && style.overflow !== 'visible') {
43
48
  clippingNode = parentNode;
49
+ clippingNodeStyle = style;
44
50
  }
45
51
  if (positionedParent && clippingNode) {
46
52
  break;
@@ -51,6 +57,8 @@ function getPositionedParentAndClippingNode(element) {
51
57
  return {
52
58
  positionedParent: positionedParent !== null && positionedParent !== void 0 ? positionedParent : document.body,
53
59
  clippingNode: clippingNode !== null && clippingNode !== void 0 ? clippingNode : document.body,
60
+ positionedParentStyle,
61
+ clippingNodeStyle,
54
62
  };
55
63
  }
56
64
  function isOnTopLayer(element) {
@@ -68,9 +76,9 @@ function isOnTopLayer(element) {
68
76
  }
69
77
  return false;
70
78
  }
71
- function getClippingRect(clippingNode) {
79
+ function getClippingRect(clippingNode, cachedStyle = null) {
72
80
  const elemRect = clippingNode.getBoundingClientRect();
73
- const elemStyle = getComputedStyle(clippingNode);
81
+ const elemStyle = cachedStyle || getComputedStyle(clippingNode);
74
82
  const borderTop = parseInt(elemStyle.borderTopWidth, 10) || 0;
75
83
  const borderLeft = parseInt(elemStyle.borderLeftWidth, 10) || 0;
76
84
  const borderRight = parseInt(elemStyle.borderRightWidth, 10) || 0;
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 } = getPositionedParentAndClippingNode(floatingElement);
14
- const clippingRect = getClippingRect(clippingNode);
15
- const parentElementStyle = getComputedStyle(parentElement);
13
+ const { positionedParent: parentElement, clippingNode, positionedParentStyle, clippingNodeStyle, } = getPositionedParentAndClippingNode(floatingElement);
14
+ const clippingRect = getClippingRect(clippingNode, clippingNodeStyle);
15
+ const parentElementStyle = positionedParentStyle || 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 = {
@@ -26,19 +26,25 @@ function getPositionedParentAndClippingNode(element) {
26
26
  return {
27
27
  positionedParent: document.body,
28
28
  clippingNode: document.body,
29
+ positionedParentStyle: null,
30
+ clippingNodeStyle: null,
29
31
  };
30
32
  }
31
33
  let positionedParent = null;
32
34
  let clippingNode = null;
35
+ let positionedParentStyle = null;
36
+ let clippingNodeStyle = null;
33
37
  let parentNode = element.parentNode;
34
38
  while (parentNode !== null && parentNode !== document.body) {
35
39
  if (parentNode instanceof HTMLElement) {
36
40
  const style = getComputedStyle(parentNode);
37
41
  if (!positionedParent && style.position !== 'static') {
38
42
  positionedParent = parentNode;
43
+ positionedParentStyle = style;
39
44
  }
40
45
  if (!clippingNode && style.overflow !== 'visible') {
41
46
  clippingNode = parentNode;
47
+ clippingNodeStyle = style;
42
48
  }
43
49
  if (positionedParent && clippingNode) {
44
50
  break;
@@ -49,6 +55,8 @@ function getPositionedParentAndClippingNode(element) {
49
55
  return {
50
56
  positionedParent: positionedParent !== null && positionedParent !== void 0 ? positionedParent : document.body,
51
57
  clippingNode: clippingNode !== null && clippingNode !== void 0 ? clippingNode : document.body,
58
+ positionedParentStyle,
59
+ clippingNodeStyle,
52
60
  };
53
61
  }
54
62
  function isOnTopLayer(element) {
@@ -66,9 +74,9 @@ function isOnTopLayer(element) {
66
74
  }
67
75
  return false;
68
76
  }
69
- function getClippingRect(clippingNode) {
77
+ function getClippingRect(clippingNode, cachedStyle = null) {
70
78
  const elemRect = clippingNode.getBoundingClientRect();
71
- const elemStyle = getComputedStyle(clippingNode);
79
+ const elemStyle = cachedStyle || getComputedStyle(clippingNode);
72
80
  const borderTop = parseInt(elemStyle.borderTopWidth, 10) || 0;
73
81
  const borderLeft = parseInt(elemStyle.borderLeftWidth, 10) || 0;
74
82
  const borderRight = parseInt(elemStyle.borderRightWidth, 10) || 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/behaviors",
3
- "version": "0.0.0-20251221220409",
3
+ "version": "0.0.0-20251222183246",
4
4
  "description": "Shared behaviors for JavaScript components",
5
5
  "type": "commonjs",
6
6
  "main": "dist/cjs/index.js",