@reshaped/utilities 3.9.1-canary.2 → 3.9.1-canary.3

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 (16) hide show
  1. package/dist/flyout/Flyout.js +9 -7
  2. package/dist/flyout/constants.d.ts +1 -1
  3. package/dist/flyout/constants.js +1 -1
  4. package/dist/flyout/utilities/applyPosition.js +45 -25
  5. package/dist/flyout/utilities/calculateLayoutAdjustment.d.ts +19 -0
  6. package/dist/flyout/utilities/calculateLayoutAdjustment.js +73 -0
  7. package/dist/flyout/utilities/calculatePosition.d.ts +7 -20
  8. package/dist/flyout/utilities/calculatePosition.js +11 -87
  9. package/dist/flyout/utilities/isFullyVisible.d.ts +2 -4
  10. package/dist/flyout/utilities/isFullyVisible.js +11 -14
  11. package/dist/flyout/utilities/tests/calculateLayoutAdjustment.test.d.ts +1 -0
  12. package/dist/flyout/utilities/tests/calculateLayoutAdjustment.test.js +384 -0
  13. package/dist/flyout/utilities/tests/calculatePosition.test.js +243 -292
  14. package/dist/flyout/utilities/tests/findClosestFixedContainer.test.js +1 -1
  15. package/dist/flyout/utilities/tests/isFullyVisible.test.js +27 -51
  16. package/package.json +1 -1
package/dist/flyout/utilities/tests/findClosestFixedContainer.test.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { expect, test, describe } from "vitest";
2
- import findClosestFixedContainer from "../findClosestFixedContainer.js";
2
+ import findClosestFixedContainer from "flyout/utilities/findClosestFixedContainer";
3
3
  describe("flyout/findClosestFixedContainer", () => {
4
4
  test("returns document.body when element is null", () => {
5
5
  const result = findClosestFixedContainer({ el: null });
package/dist/flyout/utilities/tests/isFullyVisible.test.js CHANGED
@@ -4,32 +4,28 @@ describe("flyout/isFullyVisible", () => {
4
4
  test("returns true when flyout is fully visible within visual container", () => {
5
5
  const result = isFullyVisible({
6
6
  flyoutBounds: { left: 8, top: 8, width: 50, height: 50 },
7
- visualContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
8
- renderContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
7
+ containerBounds: { left: 0, top: 0, width: 100, height: 100 },
9
8
  });
10
9
  expect(result).toBe(true);
11
10
  });
12
11
  test("returns true when flyout is fully visible and is exactly on the edges of the visual container", () => {
13
12
  const result = isFullyVisible({
14
13
  flyoutBounds: { left: 8, top: 8, width: 84, height: 84 },
15
- visualContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
16
- renderContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
14
+ containerBounds: { left: 0, top: 0, width: 100, height: 100 },
17
15
  });
18
16
  expect(result).toBe(true);
19
17
  });
20
18
  test("returns false when flyout extends beyond left edge", () => {
21
19
  const result = isFullyVisible({
22
20
  flyoutBounds: { left: 7, top: 8, width: 50, height: 50 },
23
- visualContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
24
- renderContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
21
+ containerBounds: { left: 0, top: 0, width: 100, height: 100 },
25
22
  });
26
23
  expect(result).toBe(false);
27
24
  });
28
25
  test("returns false when flyout extends beyond top edge", () => {
29
26
  const result = isFullyVisible({
30
27
  flyoutBounds: { left: 8, top: 7, width: 50, height: 50 },
31
- visualContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
32
- renderContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
28
+ containerBounds: { left: 0, top: 0, width: 100, height: 100 },
33
29
  });
34
30
  expect(result).toBe(false);
35
31
  });
@@ -41,8 +37,7 @@ describe("flyout/isFullyVisible", () => {
41
37
  width: 50,
42
38
  height: 50,
43
39
  },
44
- visualContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
45
- renderContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
40
+ containerBounds: { left: 0, top: 0, width: 100, height: 100 },
46
41
  });
47
42
  expect(result).toBe(false);
48
43
  });
@@ -54,75 +49,56 @@ describe("flyout/isFullyVisible", () => {
54
49
  width: 50,
55
50
  height: 50,
56
51
  },
57
- visualContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
58
- renderContainerBounds: { left: 0, top: 0, width: 100, height: 100 },
52
+ containerBounds: { left: 0, top: 0, width: 100, height: 100 },
59
53
  });
60
54
  expect(result).toBe(false);
61
55
  });
62
- /**
63
- * Render container
64
- */
65
- test("returns true when flyout is fully visible with offset render container", () => {
56
+ test("returns true when flyout is fully visible within container with non-zero position", () => {
66
57
  const result = isFullyVisible({
67
- flyoutBounds: { left: 58, top: 58, width: 100, height: 100 },
68
- renderContainerBounds: { left: 50, top: 50, width: 200, height: 200 },
69
- visualContainerBounds: { left: 100, top: 100, width: 200, height: 200 },
58
+ flyoutBounds: { left: 108, top: 208, width: 50, height: 50 },
59
+ containerBounds: { left: 100, top: 200, width: 100, height: 100 },
70
60
  });
71
61
  expect(result).toBe(true);
72
62
  });
73
- test("returns false when flyout extends beyond left edge with offset render container", () => {
63
+ test("returns false when flyout extends beyond left edge of container with non-zero position", () => {
74
64
  const result = isFullyVisible({
75
- flyoutBounds: { left: 0, top: 58, width: 50, height: 50 },
76
- renderContainerBounds: { left: 50, top: 50, width: 200, height: 200 },
77
- visualContainerBounds: { left: 100, top: 100, width: 200, height: 200 },
65
+ flyoutBounds: { left: 107, top: 208, width: 50, height: 50 },
66
+ containerBounds: { left: 100, top: 200, width: 100, height: 100 },
78
67
  });
79
68
  expect(result).toBe(false);
80
69
  });
81
- test("returns false when flyout extends beyond top edge with offset render container", () => {
70
+ test("returns false when flyout extends beyond top edge of container with non-zero position", () => {
82
71
  const result = isFullyVisible({
83
- flyoutBounds: { left: 58, top: 0, width: 50, height: 50 },
84
- renderContainerBounds: { left: 50, top: 50, width: 200, height: 200 },
85
- visualContainerBounds: { left: 100, top: 100, width: 200, height: 200 },
72
+ flyoutBounds: { left: 108, top: 207, width: 50, height: 50 },
73
+ containerBounds: { left: 100, top: 200, width: 100, height: 100 },
86
74
  });
87
75
  expect(result).toBe(false);
88
76
  });
89
- test("returns false when flyout extends beyond right edge with offset render container", () => {
77
+ test("returns false when flyout extends beyond multiple edges", () => {
90
78
  const result = isFullyVisible({
91
- flyoutBounds: { left: 200 - 7, top: 58, width: 50, height: 50 },
92
- renderContainerBounds: { left: 50, top: 50, width: 200, height: 200 },
93
- visualContainerBounds: { left: 100, top: 100, width: 200, height: 200 },
79
+ flyoutBounds: { left: 5, top: 5, width: 100, height: 100 },
80
+ containerBounds: { left: 0, top: 0, width: 100, height: 100 },
94
81
  });
95
82
  expect(result).toBe(false);
96
83
  });
97
- test("returns false when flyout extends beyond bottom edge with offset render container", () => {
84
+ test("returns false when flyout is completely outside container", () => {
98
85
  const result = isFullyVisible({
99
- flyoutBounds: { left: 58, top: 200 - 7, width: 50, height: 50 },
100
- renderContainerBounds: { left: 50, top: 50, width: 200, height: 200 },
101
- visualContainerBounds: { left: 100, top: 100, width: 200, height: 200 },
86
+ flyoutBounds: { left: 200, top: 200, width: 50, height: 50 },
87
+ containerBounds: { left: 0, top: 0, width: 100, height: 100 },
102
88
  });
103
89
  expect(result).toBe(false);
104
90
  });
105
- test("returns false when flyout is larger than visual container", () => {
91
+ test("returns true when flyout has zero dimensions but is within bounds", () => {
106
92
  const result = isFullyVisible({
107
- flyoutBounds: { left: 0, top: 0, width: 300, height: 300 },
108
- visualContainerBounds: { left: 0, top: 0, width: 200, height: 200 },
109
- renderContainerBounds: { left: 0, top: 0, width: 200, height: 200 },
110
- });
111
- expect(result).toBe(false);
112
- });
113
- test("returns true when flyout is fully visible with negative render container position", () => {
114
- const result = isFullyVisible({
115
- flyoutBounds: { left: 118, top: 118, width: 100, height: 50 },
116
- visualContainerBounds: { left: 100, top: 100, width: 200, height: 200 },
117
- renderContainerBounds: { left: -10, top: -10, width: 200, height: 200 },
93
+ flyoutBounds: { left: 50, top: 50, width: 0, height: 0 },
94
+ containerBounds: { left: 0, top: 0, width: 100, height: 100 },
118
95
  });
119
96
  expect(result).toBe(true);
120
97
  });
121
- test("returns false when flyout extends beyond left with negative render container position", () => {
98
+ test("returns false when container is smaller than required offsets", () => {
122
99
  const result = isFullyVisible({
123
- flyoutBounds: { left: 0, top: 110, width: 100, height: 50 },
124
- visualContainerBounds: { left: 100, top: 100, width: 200, height: 200 },
125
- renderContainerBounds: { left: -10, top: -10, width: 200, height: 200 },
100
+ flyoutBounds: { left: 8, top: 8, width: 1, height: 1 },
101
+ containerBounds: { left: 0, top: 0, width: 10, height: 10 },
126
102
  });
127
103
  expect(result).toBe(false);
128
104
  });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@reshaped/utilities",
3
3
  "description": "Vanilla JS utilities for implementing common UI patterns",
4
- "version": "3.9.1-canary.2",
4
+ "version": "3.9.1-canary.3",
5
5
  "license": "MIT",
6
6
  "homepage": "https://reshaped.so",
7
7
  "repository": {