@primer/behaviors 1.9.1 → 1.9.2-rc.45ff0ed

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 +35 -23
  2. package/dist/esm/anchored-position.mjs +35 -23
  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 parentElement = getPositionedParent(floatingElement);
16
- const clippingRect = getClippingRect(parentElement);
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 = {
@@ -23,19 +23,43 @@ 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 getPositionedParent(element) {
27
- if (isOnTopLayer(element))
28
- return document.body;
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;
29
39
  let parentNode = element.parentNode;
30
40
  while (parentNode !== null && parentNode !== document.body) {
31
41
  if (parentNode instanceof HTMLElement) {
32
- if (getComputedStyle(parentNode).position !== 'static') {
33
- return parentNode;
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;
34
53
  }
35
54
  }
36
55
  parentNode = parentNode.parentNode;
37
56
  }
38
- return document.body;
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
+ };
39
63
  }
40
64
  function isOnTopLayer(element) {
41
65
  var _a;
@@ -52,21 +76,9 @@ function isOnTopLayer(element) {
52
76
  }
53
77
  return false;
54
78
  }
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
- }
79
+ function getClippingRect(clippingNode, cachedStyle = null) {
68
80
  const elemRect = clippingNode.getBoundingClientRect();
69
- const elemStyle = getComputedStyle(clippingNode);
81
+ const elemStyle = cachedStyle || getComputedStyle(clippingNode);
70
82
  const borderTop = parseInt(elemStyle.borderTopWidth, 10) || 0;
71
83
  const borderLeft = parseInt(elemStyle.borderLeftWidth, 10) || 0;
72
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 parentElement = getPositionedParent(floatingElement);
14
- const clippingRect = getClippingRect(parentElement);
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 = {
@@ -21,19 +21,43 @@ 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 getPositionedParent(element) {
25
- if (isOnTopLayer(element))
26
- return document.body;
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;
27
37
  let parentNode = element.parentNode;
28
38
  while (parentNode !== null && parentNode !== document.body) {
29
39
  if (parentNode instanceof HTMLElement) {
30
- if (getComputedStyle(parentNode).position !== 'static') {
31
- return parentNode;
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;
32
51
  }
33
52
  }
34
53
  parentNode = parentNode.parentNode;
35
54
  }
36
- return document.body;
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
+ };
37
61
  }
38
62
  function isOnTopLayer(element) {
39
63
  var _a;
@@ -50,21 +74,9 @@ function isOnTopLayer(element) {
50
74
  }
51
75
  return false;
52
76
  }
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
- }
77
+ function getClippingRect(clippingNode, cachedStyle = null) {
66
78
  const elemRect = clippingNode.getBoundingClientRect();
67
- const elemStyle = getComputedStyle(clippingNode);
79
+ const elemStyle = cachedStyle || getComputedStyle(clippingNode);
68
80
  const borderTop = parseInt(elemStyle.borderTopWidth, 10) || 0;
69
81
  const borderLeft = parseInt(elemStyle.borderLeftWidth, 10) || 0;
70
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": "1.9.1",
3
+ "version": "1.9.2-rc.45ff0ed",
4
4
  "description": "Shared behaviors for JavaScript components",
5
5
  "type": "commonjs",
6
6
  "main": "dist/cjs/index.js",