react-resizable-panels 2.0.8 → 2.0.9

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/CHANGELOG.md +5 -0
  2. package/dist/react-resizable-panels.browser.cjs.js +110 -3
  3. package/dist/react-resizable-panels.browser.development.cjs.js +110 -3
  4. package/dist/react-resizable-panels.browser.development.esm.js +109 -2
  5. package/dist/react-resizable-panels.browser.esm.js +109 -2
  6. package/dist/react-resizable-panels.cjs.js +110 -3
  7. package/dist/react-resizable-panels.development.cjs.js +110 -3
  8. package/dist/react-resizable-panels.development.esm.js +109 -2
  9. package/dist/react-resizable-panels.development.node.cjs.js +110 -3
  10. package/dist/react-resizable-panels.development.node.esm.js +109 -2
  11. package/dist/react-resizable-panels.esm.js +109 -2
  12. package/dist/react-resizable-panels.node.cjs.js +110 -3
  13. package/dist/react-resizable-panels.node.esm.js +109 -2
  14. package/package.json +1 -4
  15. package/src/PanelResizeHandleRegistry.ts +2 -2
  16. package/src/vendor/stacking-order.ts +130 -0
package/dist/react-resizable-panels.node.cjs.js CHANGED
@@ -3,7 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- var stackingOrder = require('stacking-order');
7
6
 
8
7
  function _interopNamespace(e) {
9
8
  if (e && e.__esModule) return e;
@@ -268,6 +267,114 @@ function intersects(rectOne, rectTwo, strict) {
268
267
  }
269
268
  }
270
269
 
270
+ // Forked from NPM stacking-order@2.0.0
271
+
272
+ /**
273
+ * Determine which of two nodes appears in front of the other —
274
+ * if `a` is in front, returns 1, otherwise returns -1
275
+ * @param {HTMLElement} a
276
+ * @param {HTMLElement} b
277
+ */
278
+ function compare(a, b) {
279
+ if (a === b) throw new Error("Cannot compare node with itself");
280
+ const ancestors = {
281
+ a: get_ancestors(a),
282
+ b: get_ancestors(b)
283
+ };
284
+ let common_ancestor;
285
+
286
+ // remove shared ancestors
287
+ while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
288
+ a = ancestors.a.pop();
289
+ b = ancestors.b.pop();
290
+ common_ancestor = a;
291
+ }
292
+ assert(common_ancestor);
293
+ const z_indexes = {
294
+ a: get_z_index(find_stacking_context(ancestors.a)),
295
+ b: get_z_index(find_stacking_context(ancestors.b))
296
+ };
297
+ if (z_indexes.a === z_indexes.b) {
298
+ const children = common_ancestor.childNodes;
299
+ const furthest_ancestors = {
300
+ a: ancestors.a.at(-1),
301
+ b: ancestors.b.at(-1)
302
+ };
303
+ let i = children.length;
304
+ while (i--) {
305
+ const child = children[i];
306
+ if (child === furthest_ancestors.a) return 1;
307
+ if (child === furthest_ancestors.b) return -1;
308
+ }
309
+ }
310
+ return Math.sign(z_indexes.a - z_indexes.b);
311
+ }
312
+ const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
313
+
314
+ /** @param {HTMLElement} node */
315
+ function is_flex_item(node) {
316
+ const display = getComputedStyle(get_parent(node)).display;
317
+ return display === "flex" || display === "inline-flex";
318
+ }
319
+
320
+ /** @param {HTMLElement} node */
321
+ function creates_stacking_context(node) {
322
+ const style = getComputedStyle(node);
323
+
324
+ // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
325
+ if (style.position === "fixed") return true;
326
+ // Forked to fix upstream bug https://github.com/Rich-Harris/stacking-order/issues/3
327
+ // if (
328
+ // (style.zIndex !== "auto" && style.position !== "static") ||
329
+ // is_flex_item(node)
330
+ // )
331
+ if (style.zIndex !== "auto" && (style.position !== "static" || is_flex_item(node))) return true;
332
+ if (+style.opacity < 1) return true;
333
+ if ("transform" in style && style.transform !== "none") return true;
334
+ if ("webkitTransform" in style && style.webkitTransform !== "none") return true;
335
+ if ("mixBlendMode" in style && style.mixBlendMode !== "normal") return true;
336
+ if ("filter" in style && style.filter !== "none") return true;
337
+ if ("webkitFilter" in style && style.webkitFilter !== "none") return true;
338
+ if ("isolation" in style && style.isolation === "isolate") return true;
339
+ if (props.test(style.willChange)) return true;
340
+ // @ts-expect-error
341
+ if (style.webkitOverflowScrolling === "touch") return true;
342
+ return false;
343
+ }
344
+
345
+ /** @param {HTMLElement[]} nodes */
346
+ function find_stacking_context(nodes) {
347
+ let i = nodes.length;
348
+ while (i--) {
349
+ const node = nodes[i];
350
+ assert(node);
351
+ if (creates_stacking_context(node)) return node;
352
+ }
353
+ return null;
354
+ }
355
+
356
+ /** @param {HTMLElement} node */
357
+ function get_z_index(node) {
358
+ return node && Number(getComputedStyle(node).zIndex) || 0;
359
+ }
360
+
361
+ /** @param {HTMLElement} node */
362
+ function get_ancestors(node) {
363
+ const ancestors = [];
364
+ while (node) {
365
+ ancestors.push(node);
366
+ node = get_parent(node);
367
+ }
368
+ return ancestors; // [ node, ... <body>, <html>, document ]
369
+ }
370
+
371
+ /** @param {HTMLElement} node */
372
+ function get_parent(node) {
373
+ var _node$parentNode;
374
+ // @ts-ignore
375
+ return ((_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.host) || node.parentNode;
376
+ }
377
+
271
378
  const EXCEEDED_HORIZONTAL_MIN = 0b0001;
272
379
  const EXCEEDED_HORIZONTAL_MAX = 0b0010;
273
380
  const EXCEEDED_VERTICAL_MIN = 0b0100;
@@ -409,7 +516,7 @@ function recalculateIntersectingHandles({
409
516
  // Calculating stacking order has a cost, so we should avoid it if possible
410
517
  // That is why we only check potentially intersecting handles,
411
518
  // and why we skip if the event target is within the handle's DOM
412
- stackingOrder.compare(targetElement, dragHandleElement) > 0) {
519
+ compare(targetElement, dragHandleElement) > 0) {
413
520
  // If the target is above the drag handle, then we also need to confirm they overlap
414
521
  // If they are beside each other (e.g. a panel and its drag handle) then the handle is still interactive
415
522
  //
@@ -480,7 +587,7 @@ function updateListeners() {
480
587
  window.removeEventListener("mouseup", handlePointerUp);
481
588
  window.removeEventListener("touchcancel", handlePointerUp);
482
589
  window.removeEventListener("touchend", handlePointerUp);
483
- if (registerResizeHandle.length > 0) {
590
+ if (registeredResizeHandlers.size > 0) {
484
591
  if (isPointerDown) {
485
592
  if (intersectingHandles.length > 0) {
486
593
  ownerDocumentCounts.forEach((count, ownerDocument) => {
package/dist/react-resizable-panels.node.esm.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import * as React from 'react';
2
- import { compare } from 'stacking-order';
3
2
 
4
3
  // This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
5
4
 
@@ -244,6 +243,114 @@ function intersects(rectOne, rectTwo, strict) {
244
243
  }
245
244
  }
246
245
 
246
+ // Forked from NPM stacking-order@2.0.0
247
+
248
+ /**
249
+ * Determine which of two nodes appears in front of the other —
250
+ * if `a` is in front, returns 1, otherwise returns -1
251
+ * @param {HTMLElement} a
252
+ * @param {HTMLElement} b
253
+ */
254
+ function compare(a, b) {
255
+ if (a === b) throw new Error("Cannot compare node with itself");
256
+ const ancestors = {
257
+ a: get_ancestors(a),
258
+ b: get_ancestors(b)
259
+ };
260
+ let common_ancestor;
261
+
262
+ // remove shared ancestors
263
+ while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
264
+ a = ancestors.a.pop();
265
+ b = ancestors.b.pop();
266
+ common_ancestor = a;
267
+ }
268
+ assert(common_ancestor);
269
+ const z_indexes = {
270
+ a: get_z_index(find_stacking_context(ancestors.a)),
271
+ b: get_z_index(find_stacking_context(ancestors.b))
272
+ };
273
+ if (z_indexes.a === z_indexes.b) {
274
+ const children = common_ancestor.childNodes;
275
+ const furthest_ancestors = {
276
+ a: ancestors.a.at(-1),
277
+ b: ancestors.b.at(-1)
278
+ };
279
+ let i = children.length;
280
+ while (i--) {
281
+ const child = children[i];
282
+ if (child === furthest_ancestors.a) return 1;
283
+ if (child === furthest_ancestors.b) return -1;
284
+ }
285
+ }
286
+ return Math.sign(z_indexes.a - z_indexes.b);
287
+ }
288
+ const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
289
+
290
+ /** @param {HTMLElement} node */
291
+ function is_flex_item(node) {
292
+ const display = getComputedStyle(get_parent(node)).display;
293
+ return display === "flex" || display === "inline-flex";
294
+ }
295
+
296
+ /** @param {HTMLElement} node */
297
+ function creates_stacking_context(node) {
298
+ const style = getComputedStyle(node);
299
+
300
+ // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
301
+ if (style.position === "fixed") return true;
302
+ // Forked to fix upstream bug https://github.com/Rich-Harris/stacking-order/issues/3
303
+ // if (
304
+ // (style.zIndex !== "auto" && style.position !== "static") ||
305
+ // is_flex_item(node)
306
+ // )
307
+ if (style.zIndex !== "auto" && (style.position !== "static" || is_flex_item(node))) return true;
308
+ if (+style.opacity < 1) return true;
309
+ if ("transform" in style && style.transform !== "none") return true;
310
+ if ("webkitTransform" in style && style.webkitTransform !== "none") return true;
311
+ if ("mixBlendMode" in style && style.mixBlendMode !== "normal") return true;
312
+ if ("filter" in style && style.filter !== "none") return true;
313
+ if ("webkitFilter" in style && style.webkitFilter !== "none") return true;
314
+ if ("isolation" in style && style.isolation === "isolate") return true;
315
+ if (props.test(style.willChange)) return true;
316
+ // @ts-expect-error
317
+ if (style.webkitOverflowScrolling === "touch") return true;
318
+ return false;
319
+ }
320
+
321
+ /** @param {HTMLElement[]} nodes */
322
+ function find_stacking_context(nodes) {
323
+ let i = nodes.length;
324
+ while (i--) {
325
+ const node = nodes[i];
326
+ assert(node);
327
+ if (creates_stacking_context(node)) return node;
328
+ }
329
+ return null;
330
+ }
331
+
332
+ /** @param {HTMLElement} node */
333
+ function get_z_index(node) {
334
+ return node && Number(getComputedStyle(node).zIndex) || 0;
335
+ }
336
+
337
+ /** @param {HTMLElement} node */
338
+ function get_ancestors(node) {
339
+ const ancestors = [];
340
+ while (node) {
341
+ ancestors.push(node);
342
+ node = get_parent(node);
343
+ }
344
+ return ancestors; // [ node, ... <body>, <html>, document ]
345
+ }
346
+
347
+ /** @param {HTMLElement} node */
348
+ function get_parent(node) {
349
+ var _node$parentNode;
350
+ // @ts-ignore
351
+ return ((_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.host) || node.parentNode;
352
+ }
353
+
247
354
  const EXCEEDED_HORIZONTAL_MIN = 0b0001;
248
355
  const EXCEEDED_HORIZONTAL_MAX = 0b0010;
249
356
  const EXCEEDED_VERTICAL_MIN = 0b0100;
@@ -456,7 +563,7 @@ function updateListeners() {
456
563
  window.removeEventListener("mouseup", handlePointerUp);
457
564
  window.removeEventListener("touchcancel", handlePointerUp);
458
565
  window.removeEventListener("touchend", handlePointerUp);
459
- if (registerResizeHandle.length > 0) {
566
+ if (registeredResizeHandlers.size > 0) {
460
567
  if (isPointerDown) {
461
568
  if (intersectingHandles.length > 0) {
462
569
  ownerDocumentCounts.forEach((count, ownerDocument) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-resizable-panels",
3
- "version": "2.0.8",
3
+ "version": "2.0.9",
4
4
  "description": "React components for resizable panel groups/layouts",
5
5
  "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
6
6
  "license": "MIT",
@@ -66,9 +66,6 @@
66
66
  "test:watch": "jest --config=jest.config.js --watch",
67
67
  "watch": "parcel watch --port=2345"
68
68
  },
69
- "dependencies": {
70
- "stacking-order": "^1"
71
- },
72
69
  "devDependencies": {
73
70
  "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
74
71
  "@babel/plugin-proposal-optional-chaining": "7.21.0",
package/src/PanelResizeHandleRegistry.ts CHANGED
@@ -1,9 +1,9 @@
1
- import { compare } from "stacking-order";
2
1
  import { Direction, ResizeEvent } from "./types";
3
2
  import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
4
3
  import { getResizeEventCoordinates } from "./utils/events/getResizeEventCoordinates";
5
4
  import { getInputType } from "./utils/getInputType";
6
5
  import { intersects } from "./utils/rects/intersects";
6
+ import { compare } from "./vendor/stacking-order";
7
7
 
8
8
  export type ResizeHandlerAction = "down" | "move" | "up";
9
9
  export type SetResizeHandlerState = (
@@ -269,7 +269,7 @@ function updateListeners() {
269
269
  window.removeEventListener("touchcancel", handlePointerUp);
270
270
  window.removeEventListener("touchend", handlePointerUp);
271
271
 
272
- if (registerResizeHandle.length > 0) {
272
+ if (registeredResizeHandlers.size > 0) {
273
273
  if (isPointerDown) {
274
274
  if (intersectingHandles.length > 0) {
275
275
  ownerDocumentCounts.forEach((count, ownerDocument) => {
package/src/vendor/stacking-order.ts ADDED
@@ -0,0 +1,130 @@
1
+ // Forked from NPM stacking-order@2.0.0
2
+ // Background at https://github.com/Rich-Harris/stacking-order/issues/3
3
+
4
+ import { assert } from "..";
5
+
6
+ /**
7
+ * Determine which of two nodes appears in front of the other —
8
+ * if `a` is in front, returns 1, otherwise returns -1
9
+ * @param {HTMLElement} a
10
+ * @param {HTMLElement} b
11
+ */
12
+ export function compare(a: HTMLElement, b: HTMLElement): number {
13
+ if (a === b) throw new Error("Cannot compare node with itself");
14
+
15
+ const ancestors = {
16
+ a: get_ancestors(a),
17
+ b: get_ancestors(b),
18
+ };
19
+
20
+ let common_ancestor;
21
+
22
+ // remove shared ancestors
23
+ while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
24
+ a = ancestors.a.pop() as HTMLElement;
25
+ b = ancestors.b.pop() as HTMLElement;
26
+
27
+ common_ancestor = a;
28
+ }
29
+
30
+ assert(common_ancestor);
31
+
32
+ const z_indexes = {
33
+ a: get_z_index(find_stacking_context(ancestors.a)),
34
+ b: get_z_index(find_stacking_context(ancestors.b)),
35
+ };
36
+
37
+ if (z_indexes.a === z_indexes.b) {
38
+ const children = common_ancestor.childNodes;
39
+
40
+ const furthest_ancestors = {
41
+ a: ancestors.a.at(-1),
42
+ b: ancestors.b.at(-1),
43
+ };
44
+
45
+ let i = children.length;
46
+ while (i--) {
47
+ const child = children[i];
48
+ if (child === furthest_ancestors.a) return 1;
49
+ if (child === furthest_ancestors.b) return -1;
50
+ }
51
+ }
52
+
53
+ return Math.sign(z_indexes.a - z_indexes.b);
54
+ }
55
+
56
+ const props =
57
+ /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
58
+
59
+ /** @param {HTMLElement} node */
60
+ function is_flex_item(node: HTMLElement) {
61
+ const display = getComputedStyle(get_parent(node)).display;
62
+ return display === "flex" || display === "inline-flex";
63
+ }
64
+
65
+ /** @param {HTMLElement} node */
66
+ function creates_stacking_context(node: HTMLElement) {
67
+ const style = getComputedStyle(node);
68
+
69
+ // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
70
+ if (style.position === "fixed") return true;
71
+ // Forked to fix upstream bug https://github.com/Rich-Harris/stacking-order/issues/3
72
+ // if (
73
+ // (style.zIndex !== "auto" && style.position !== "static") ||
74
+ // is_flex_item(node)
75
+ // )
76
+ if (
77
+ style.zIndex !== "auto" &&
78
+ (style.position !== "static" || is_flex_item(node))
79
+ )
80
+ return true;
81
+ if (+style.opacity < 1) return true;
82
+ if ("transform" in style && style.transform !== "none") return true;
83
+ if ("webkitTransform" in style && style.webkitTransform !== "none")
84
+ return true;
85
+ if ("mixBlendMode" in style && style.mixBlendMode !== "normal") return true;
86
+ if ("filter" in style && style.filter !== "none") return true;
87
+ if ("webkitFilter" in style && style.webkitFilter !== "none") return true;
88
+ if ("isolation" in style && style.isolation === "isolate") return true;
89
+ if (props.test(style.willChange)) return true;
90
+ // @ts-expect-error
91
+ if (style.webkitOverflowScrolling === "touch") return true;
92
+
93
+ return false;
94
+ }
95
+
96
+ /** @param {HTMLElement[]} nodes */
97
+ function find_stacking_context(nodes: HTMLElement[]) {
98
+ let i = nodes.length;
99
+
100
+ while (i--) {
101
+ const node = nodes[i];
102
+ assert(node);
103
+ if (creates_stacking_context(node)) return node;
104
+ }
105
+
106
+ return null;
107
+ }
108
+
109
+ /** @param {HTMLElement} node */
110
+ function get_z_index(node: HTMLElement | null) {
111
+ return (node && Number(getComputedStyle(node).zIndex)) || 0;
112
+ }
113
+
114
+ /** @param {HTMLElement} node */
115
+ function get_ancestors(node: HTMLElement) {
116
+ const ancestors = [];
117
+
118
+ while (node) {
119
+ ancestors.push(node);
120
+ node = get_parent(node);
121
+ }
122
+
123
+ return ancestors; // [ node, ... <body>, <html>, document ]
124
+ }
125
+
126
+ /** @param {HTMLElement} node */
127
+ function get_parent(node: HTMLElement) {
128
+ // @ts-ignore
129
+ return node.parentNode?.host || node.parentNode;
130
+ }