react-resizable-panels 3.0.2 → 3.0.4

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 (10) hide show
  1. package/README.md +12 -0
  2. package/dist/declarations/src/index.d.ts +3 -2
  3. package/dist/declarations/src/utils/cursor.d.ts +13 -2
  4. package/dist/react-resizable-panels.browser.development.js +32 -13
  5. package/dist/react-resizable-panels.browser.js +32 -13
  6. package/dist/react-resizable-panels.development.edge-light.js +32 -13
  7. package/dist/react-resizable-panels.development.js +32 -13
  8. package/dist/react-resizable-panels.edge-light.js +32 -13
  9. package/dist/react-resizable-panels.js +32 -13
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -247,3 +247,15 @@ import { disableGlobalCursorStyles } from "react-resizable-panels";
247
247
 
248
248
  disableGlobalCursorStyles();
249
249
  ```
250
+
251
+ #### How can I override the global cursor styles?
252
+
253
+ ```js
254
+ import { customizeGlobalCursorStyles, type CustomCursorStyleConfig } from "react-resizable-panels";
255
+
256
+ function customCursor({ isPointerDown }: CustomCursorStyleConfig) {
257
+ return isPointerDown ? "grabbing" : "grab";
258
+ }
259
+
260
+ customizeGlobalCursorStyles(customCursor);
261
+ ```
package/dist/declarations/src/index.d.ts CHANGED
@@ -5,7 +5,7 @@ import { DATA_ATTRIBUTES } from "./constants.js";
5
5
  import { usePanelGroupContext } from "./hooks/usePanelGroupContext.js";
6
6
  import { assert } from "./utils/assert.js";
7
7
  import { setNonce } from "./utils/csp.js";
8
- import { disableGlobalCursorStyles, enableGlobalCursorStyles } from "./utils/cursor.js";
8
+ import { customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles } from "./utils/cursor.js";
9
9
  import { getPanelElement } from "./utils/dom/getPanelElement.js";
10
10
  import { getPanelElementsForGroup } from "./utils/dom/getPanelElementsForGroup.js";
11
11
  import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement.js";
@@ -19,4 +19,5 @@ import type { ImperativePanelHandle, PanelOnCollapse, PanelOnExpand, PanelOnResi
19
19
  import type { ImperativePanelGroupHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage } from "./PanelGroup.js";
20
20
  import type { PanelResizeHandleOnDragging, PanelResizeHandleProps } from "./PanelResizeHandle.js";
21
21
  import type { PointerHitAreaMargins } from "./PanelResizeHandleRegistry.js";
22
- export { ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, PointerHitAreaMargins, Panel, PanelGroup, PanelResizeHandle, usePanelGroupContext, assert, getIntersectingRectangle, intersects, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, enableGlobalCursorStyles, disableGlobalCursorStyles, setNonce, DATA_ATTRIBUTES, };
22
+ import type { CustomCursorStyleConfig } from "./utils/cursor.js";
23
+ export { ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, PointerHitAreaMargins, Panel, PanelGroup, PanelResizeHandle, usePanelGroupContext, assert, getIntersectingRectangle, intersects, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, setNonce, customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles, CustomCursorStyleConfig, DATA_ATTRIBUTES, };
package/dist/declarations/src/utils/cursor.d.ts CHANGED
@@ -1,7 +1,18 @@
1
1
  type CursorState = "horizontal" | "intersection" | "vertical";
2
+ export type CustomCursorStyleConfig = {
3
+ exceedsHorizontalMaximum: boolean;
4
+ exceedsHorizontalMinimum: boolean;
5
+ exceedsVerticalMaximum: boolean;
6
+ exceedsVerticalMinimum: boolean;
7
+ intersectsHorizontalDragHandle: boolean;
8
+ intersectsVerticalDragHandle: boolean;
9
+ isPointerDown: boolean;
10
+ };
11
+ type GetCustomCursorStyleFunction = (config: CustomCursorStyleConfig) => string;
12
+ export declare function customizeGlobalCursorStyles(callback: GetCustomCursorStyleFunction | null): void;
2
13
  export declare function disableGlobalCursorStyles(): void;
3
14
  export declare function enableGlobalCursorStyles(): void;
4
- export declare function getCursorStyle(state: CursorState, constraintFlags: number): string;
15
+ export declare function getCursorStyle(state: CursorState, constraintFlags: number, isPointerDown: boolean): string;
5
16
  export declare function resetGlobalCursorStyle(): void;
6
- export declare function setGlobalCursorStyle(state: CursorState, constraintFlags: number): void;
17
+ export declare function setGlobalCursorStyle(state: CursorState, constraintFlags: number, isPointerDown: boolean): void;
7
18
  export {};
package/dist/react-resizable-panels.browser.development.js CHANGED
@@ -188,20 +188,35 @@ function setNonce(value) {
188
188
 
189
189
  let currentCursorStyle = null;
190
190
  let enabled = true;
191
+ let getCustomCursorStyleFunction = null;
191
192
  let prevRuleIndex = -1;
192
193
  let styleElement = null;
194
+ function customizeGlobalCursorStyles(callback) {
195
+ getCustomCursorStyleFunction = callback;
196
+ }
193
197
  function disableGlobalCursorStyles() {
194
198
  enabled = false;
195
199
  }
196
200
  function enableGlobalCursorStyles() {
197
201
  enabled = true;
198
202
  }
199
- function getCursorStyle(state, constraintFlags) {
203
+ function getCursorStyle(state, constraintFlags, isPointerDown) {
204
+ const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
205
+ const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
206
+ const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
207
+ const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
208
+ if (getCustomCursorStyleFunction) {
209
+ return getCustomCursorStyleFunction({
210
+ exceedsHorizontalMaximum: horizontalMax,
211
+ exceedsHorizontalMinimum: horizontalMin,
212
+ exceedsVerticalMaximum: verticalMax,
213
+ exceedsVerticalMinimum: verticalMin,
214
+ intersectsHorizontalDragHandle: state === "horizontal" || state === "intersection",
215
+ intersectsVerticalDragHandle: state === "vertical" || state === "intersection",
216
+ isPointerDown
217
+ });
218
+ }
200
219
  if (constraintFlags) {
201
- const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
202
- const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
203
- const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
204
- const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
205
220
  if (horizontalMin) {
206
221
  if (verticalMin) {
207
222
  return "se-resize";
@@ -241,12 +256,12 @@ function resetGlobalCursorStyle() {
241
256
  prevRuleIndex = -1;
242
257
  }
243
258
  }
244
- function setGlobalCursorStyle(state, constraintFlags) {
259
+ function setGlobalCursorStyle(state, constraintFlags, isPointerDown) {
245
260
  var _styleElement$sheet$i, _styleElement$sheet2;
246
261
  if (!enabled) {
247
262
  return;
248
263
  }
249
- const style = getCursorStyle(state, constraintFlags);
264
+ const style = getCursorStyle(state, constraintFlags, isPointerDown);
250
265
  if (currentCursorStyle === style) {
251
266
  return;
252
267
  }
@@ -493,6 +508,9 @@ function handlePointerDown(event) {
493
508
  updateListeners();
494
509
  if (intersectingHandles.length > 0) {
495
510
  updateResizeHandlerStates("down", event);
511
+
512
+ // Update cursor based on return value(s) from active handles
513
+ updateCursor();
496
514
  event.preventDefault();
497
515
  if (!isWithinResizeHandle(target)) {
498
516
  event.stopImmediatePropagation();
@@ -650,18 +668,19 @@ function updateCursor() {
650
668
  constraintFlags |= flag;
651
669
  });
652
670
  if (intersectsHorizontal && intersectsVertical) {
653
- setGlobalCursorStyle("intersection", constraintFlags);
671
+ setGlobalCursorStyle("intersection", constraintFlags, isPointerDown);
654
672
  } else if (intersectsHorizontal) {
655
- setGlobalCursorStyle("horizontal", constraintFlags);
673
+ setGlobalCursorStyle("horizontal", constraintFlags, isPointerDown);
656
674
  } else if (intersectsVertical) {
657
- setGlobalCursorStyle("vertical", constraintFlags);
675
+ setGlobalCursorStyle("vertical", constraintFlags, isPointerDown);
658
676
  } else {
659
677
  resetGlobalCursorStyle();
660
678
  }
661
679
  }
662
- let listenersAbortController = new AbortController();
680
+ let listenersAbortController;
663
681
  function updateListeners() {
664
- listenersAbortController.abort();
682
+ var _listenersAbortContro;
683
+ (_listenersAbortContro = listenersAbortController) === null || _listenersAbortContro === void 0 ? void 0 : _listenersAbortContro.abort();
665
684
  listenersAbortController = new AbortController();
666
685
  const options = {
667
686
  capture: true,
@@ -2568,4 +2587,4 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
2568
2587
  };
2569
2588
  }
2570
2589
 
2571
- export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
2590
+ export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
package/dist/react-resizable-panels.browser.js CHANGED
@@ -182,20 +182,35 @@ function setNonce(value) {
182
182
 
183
183
  let currentCursorStyle = null;
184
184
  let enabled = true;
185
+ let getCustomCursorStyleFunction = null;
185
186
  let prevRuleIndex = -1;
186
187
  let styleElement = null;
188
+ function customizeGlobalCursorStyles(callback) {
189
+ getCustomCursorStyleFunction = callback;
190
+ }
187
191
  function disableGlobalCursorStyles() {
188
192
  enabled = false;
189
193
  }
190
194
  function enableGlobalCursorStyles() {
191
195
  enabled = true;
192
196
  }
193
- function getCursorStyle(state, constraintFlags) {
197
+ function getCursorStyle(state, constraintFlags, isPointerDown) {
198
+ const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
199
+ const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
200
+ const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
201
+ const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
202
+ if (getCustomCursorStyleFunction) {
203
+ return getCustomCursorStyleFunction({
204
+ exceedsHorizontalMaximum: horizontalMax,
205
+ exceedsHorizontalMinimum: horizontalMin,
206
+ exceedsVerticalMaximum: verticalMax,
207
+ exceedsVerticalMinimum: verticalMin,
208
+ intersectsHorizontalDragHandle: state === "horizontal" || state === "intersection",
209
+ intersectsVerticalDragHandle: state === "vertical" || state === "intersection",
210
+ isPointerDown
211
+ });
212
+ }
194
213
  if (constraintFlags) {
195
- const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
196
- const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
197
- const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
198
- const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
199
214
  if (horizontalMin) {
200
215
  if (verticalMin) {
201
216
  return "se-resize";
@@ -235,12 +250,12 @@ function resetGlobalCursorStyle() {
235
250
  prevRuleIndex = -1;
236
251
  }
237
252
  }
238
- function setGlobalCursorStyle(state, constraintFlags) {
253
+ function setGlobalCursorStyle(state, constraintFlags, isPointerDown) {
239
254
  var _styleElement$sheet$i, _styleElement$sheet2;
240
255
  if (!enabled) {
241
256
  return;
242
257
  }
243
- const style = getCursorStyle(state, constraintFlags);
258
+ const style = getCursorStyle(state, constraintFlags, isPointerDown);
244
259
  if (currentCursorStyle === style) {
245
260
  return;
246
261
  }
@@ -487,6 +502,9 @@ function handlePointerDown(event) {
487
502
  updateListeners();
488
503
  if (intersectingHandles.length > 0) {
489
504
  updateResizeHandlerStates("down", event);
505
+
506
+ // Update cursor based on return value(s) from active handles
507
+ updateCursor();
490
508
  event.preventDefault();
491
509
  if (!isWithinResizeHandle(target)) {
492
510
  event.stopImmediatePropagation();
@@ -644,18 +662,19 @@ function updateCursor() {
644
662
  constraintFlags |= flag;
645
663
  });
646
664
  if (intersectsHorizontal && intersectsVertical) {
647
- setGlobalCursorStyle("intersection", constraintFlags);
665
+ setGlobalCursorStyle("intersection", constraintFlags, isPointerDown);
648
666
  } else if (intersectsHorizontal) {
649
- setGlobalCursorStyle("horizontal", constraintFlags);
667
+ setGlobalCursorStyle("horizontal", constraintFlags, isPointerDown);
650
668
  } else if (intersectsVertical) {
651
- setGlobalCursorStyle("vertical", constraintFlags);
669
+ setGlobalCursorStyle("vertical", constraintFlags, isPointerDown);
652
670
  } else {
653
671
  resetGlobalCursorStyle();
654
672
  }
655
673
  }
656
- let listenersAbortController = new AbortController();
674
+ let listenersAbortController;
657
675
  function updateListeners() {
658
- listenersAbortController.abort();
676
+ var _listenersAbortContro;
677
+ (_listenersAbortContro = listenersAbortController) === null || _listenersAbortContro === void 0 ? void 0 : _listenersAbortContro.abort();
659
678
  listenersAbortController = new AbortController();
660
679
  const options = {
661
680
  capture: true,
@@ -2462,4 +2481,4 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
2462
2481
  };
2463
2482
  }
2464
2483
 
2465
- export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
2484
+ export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
package/dist/react-resizable-panels.development.edge-light.js CHANGED
@@ -158,20 +158,35 @@ function setNonce(value) {
158
158
 
159
159
  let currentCursorStyle = null;
160
160
  let enabled = true;
161
+ let getCustomCursorStyleFunction = null;
161
162
  let prevRuleIndex = -1;
162
163
  let styleElement = null;
164
+ function customizeGlobalCursorStyles(callback) {
165
+ getCustomCursorStyleFunction = callback;
166
+ }
163
167
  function disableGlobalCursorStyles() {
164
168
  enabled = false;
165
169
  }
166
170
  function enableGlobalCursorStyles() {
167
171
  enabled = true;
168
172
  }
169
- function getCursorStyle(state, constraintFlags) {
173
+ function getCursorStyle(state, constraintFlags, isPointerDown) {
174
+ const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
175
+ const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
176
+ const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
177
+ const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
178
+ if (getCustomCursorStyleFunction) {
179
+ return getCustomCursorStyleFunction({
180
+ exceedsHorizontalMaximum: horizontalMax,
181
+ exceedsHorizontalMinimum: horizontalMin,
182
+ exceedsVerticalMaximum: verticalMax,
183
+ exceedsVerticalMinimum: verticalMin,
184
+ intersectsHorizontalDragHandle: state === "horizontal" || state === "intersection",
185
+ intersectsVerticalDragHandle: state === "vertical" || state === "intersection",
186
+ isPointerDown
187
+ });
188
+ }
170
189
  if (constraintFlags) {
171
- const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
172
- const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
173
- const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
174
- const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
175
190
  if (horizontalMin) {
176
191
  if (verticalMin) {
177
192
  return "se-resize";
@@ -211,12 +226,12 @@ function resetGlobalCursorStyle() {
211
226
  prevRuleIndex = -1;
212
227
  }
213
228
  }
214
- function setGlobalCursorStyle(state, constraintFlags) {
229
+ function setGlobalCursorStyle(state, constraintFlags, isPointerDown) {
215
230
  var _styleElement$sheet$i, _styleElement$sheet2;
216
231
  if (!enabled) {
217
232
  return;
218
233
  }
219
- const style = getCursorStyle(state, constraintFlags);
234
+ const style = getCursorStyle(state, constraintFlags, isPointerDown);
220
235
  if (currentCursorStyle === style) {
221
236
  return;
222
237
  }
@@ -463,6 +478,9 @@ function handlePointerDown(event) {
463
478
  updateListeners();
464
479
  if (intersectingHandles.length > 0) {
465
480
  updateResizeHandlerStates("down", event);
481
+
482
+ // Update cursor based on return value(s) from active handles
483
+ updateCursor();
466
484
  event.preventDefault();
467
485
  if (!isWithinResizeHandle(target)) {
468
486
  event.stopImmediatePropagation();
@@ -620,18 +638,19 @@ function updateCursor() {
620
638
  constraintFlags |= flag;
621
639
  });
622
640
  if (intersectsHorizontal && intersectsVertical) {
623
- setGlobalCursorStyle("intersection", constraintFlags);
641
+ setGlobalCursorStyle("intersection", constraintFlags, isPointerDown);
624
642
  } else if (intersectsHorizontal) {
625
- setGlobalCursorStyle("horizontal", constraintFlags);
643
+ setGlobalCursorStyle("horizontal", constraintFlags, isPointerDown);
626
644
  } else if (intersectsVertical) {
627
- setGlobalCursorStyle("vertical", constraintFlags);
645
+ setGlobalCursorStyle("vertical", constraintFlags, isPointerDown);
628
646
  } else {
629
647
  resetGlobalCursorStyle();
630
648
  }
631
649
  }
632
- let listenersAbortController = new AbortController();
650
+ let listenersAbortController;
633
651
  function updateListeners() {
634
- listenersAbortController.abort();
652
+ var _listenersAbortContro;
653
+ (_listenersAbortContro = listenersAbortController) === null || _listenersAbortContro === void 0 ? void 0 : _listenersAbortContro.abort();
635
654
  listenersAbortController = new AbortController();
636
655
  const options = {
637
656
  capture: true,
@@ -2341,4 +2360,4 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
2341
2360
  };
2342
2361
  }
2343
2362
 
2344
- export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
2363
+ export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
package/dist/react-resizable-panels.development.js CHANGED
@@ -195,20 +195,35 @@ function setNonce(value) {
195
195
 
196
196
  let currentCursorStyle = null;
197
197
  let enabled = true;
198
+ let getCustomCursorStyleFunction = null;
198
199
  let prevRuleIndex = -1;
199
200
  let styleElement = null;
201
+ function customizeGlobalCursorStyles(callback) {
202
+ getCustomCursorStyleFunction = callback;
203
+ }
200
204
  function disableGlobalCursorStyles() {
201
205
  enabled = false;
202
206
  }
203
207
  function enableGlobalCursorStyles() {
204
208
  enabled = true;
205
209
  }
206
- function getCursorStyle(state, constraintFlags) {
210
+ function getCursorStyle(state, constraintFlags, isPointerDown) {
211
+ const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
212
+ const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
213
+ const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
214
+ const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
215
+ if (getCustomCursorStyleFunction) {
216
+ return getCustomCursorStyleFunction({
217
+ exceedsHorizontalMaximum: horizontalMax,
218
+ exceedsHorizontalMinimum: horizontalMin,
219
+ exceedsVerticalMaximum: verticalMax,
220
+ exceedsVerticalMinimum: verticalMin,
221
+ intersectsHorizontalDragHandle: state === "horizontal" || state === "intersection",
222
+ intersectsVerticalDragHandle: state === "vertical" || state === "intersection",
223
+ isPointerDown
224
+ });
225
+ }
207
226
  if (constraintFlags) {
208
- const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
209
- const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
210
- const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
211
- const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
212
227
  if (horizontalMin) {
213
228
  if (verticalMin) {
214
229
  return "se-resize";
@@ -248,12 +263,12 @@ function resetGlobalCursorStyle() {
248
263
  prevRuleIndex = -1;
249
264
  }
250
265
  }
251
- function setGlobalCursorStyle(state, constraintFlags) {
266
+ function setGlobalCursorStyle(state, constraintFlags, isPointerDown) {
252
267
  var _styleElement$sheet$i, _styleElement$sheet2;
253
268
  if (!enabled) {
254
269
  return;
255
270
  }
256
- const style = getCursorStyle(state, constraintFlags);
271
+ const style = getCursorStyle(state, constraintFlags, isPointerDown);
257
272
  if (currentCursorStyle === style) {
258
273
  return;
259
274
  }
@@ -500,6 +515,9 @@ function handlePointerDown(event) {
500
515
  updateListeners();
501
516
  if (intersectingHandles.length > 0) {
502
517
  updateResizeHandlerStates("down", event);
518
+
519
+ // Update cursor based on return value(s) from active handles
520
+ updateCursor();
503
521
  event.preventDefault();
504
522
  if (!isWithinResizeHandle(target)) {
505
523
  event.stopImmediatePropagation();
@@ -657,18 +675,19 @@ function updateCursor() {
657
675
  constraintFlags |= flag;
658
676
  });
659
677
  if (intersectsHorizontal && intersectsVertical) {
660
- setGlobalCursorStyle("intersection", constraintFlags);
678
+ setGlobalCursorStyle("intersection", constraintFlags, isPointerDown);
661
679
  } else if (intersectsHorizontal) {
662
- setGlobalCursorStyle("horizontal", constraintFlags);
680
+ setGlobalCursorStyle("horizontal", constraintFlags, isPointerDown);
663
681
  } else if (intersectsVertical) {
664
- setGlobalCursorStyle("vertical", constraintFlags);
682
+ setGlobalCursorStyle("vertical", constraintFlags, isPointerDown);
665
683
  } else {
666
684
  resetGlobalCursorStyle();
667
685
  }
668
686
  }
669
- let listenersAbortController = new AbortController();
687
+ let listenersAbortController;
670
688
  function updateListeners() {
671
- listenersAbortController.abort();
689
+ var _listenersAbortContro;
690
+ (_listenersAbortContro = listenersAbortController) === null || _listenersAbortContro === void 0 ? void 0 : _listenersAbortContro.abort();
672
691
  listenersAbortController = new AbortController();
673
692
  const options = {
674
693
  capture: true,
@@ -2575,4 +2594,4 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
2575
2594
  };
2576
2595
  }
2577
2596
 
2578
- export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
2597
+ export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
package/dist/react-resizable-panels.edge-light.js CHANGED
@@ -147,20 +147,35 @@ function setNonce(value) {
147
147
 
148
148
  let currentCursorStyle = null;
149
149
  let enabled = true;
150
+ let getCustomCursorStyleFunction = null;
150
151
  let prevRuleIndex = -1;
151
152
  let styleElement = null;
153
+ function customizeGlobalCursorStyles(callback) {
154
+ getCustomCursorStyleFunction = callback;
155
+ }
152
156
  function disableGlobalCursorStyles() {
153
157
  enabled = false;
154
158
  }
155
159
  function enableGlobalCursorStyles() {
156
160
  enabled = true;
157
161
  }
158
- function getCursorStyle(state, constraintFlags) {
162
+ function getCursorStyle(state, constraintFlags, isPointerDown) {
163
+ const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
164
+ const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
165
+ const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
166
+ const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
167
+ if (getCustomCursorStyleFunction) {
168
+ return getCustomCursorStyleFunction({
169
+ exceedsHorizontalMaximum: horizontalMax,
170
+ exceedsHorizontalMinimum: horizontalMin,
171
+ exceedsVerticalMaximum: verticalMax,
172
+ exceedsVerticalMinimum: verticalMin,
173
+ intersectsHorizontalDragHandle: state === "horizontal" || state === "intersection",
174
+ intersectsVerticalDragHandle: state === "vertical" || state === "intersection",
175
+ isPointerDown
176
+ });
177
+ }
159
178
  if (constraintFlags) {
160
- const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
161
- const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
162
- const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
163
- const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
164
179
  if (horizontalMin) {
165
180
  if (verticalMin) {
166
181
  return "se-resize";
@@ -200,12 +215,12 @@ function resetGlobalCursorStyle() {
200
215
  prevRuleIndex = -1;
201
216
  }
202
217
  }
203
- function setGlobalCursorStyle(state, constraintFlags) {
218
+ function setGlobalCursorStyle(state, constraintFlags, isPointerDown) {
204
219
  var _styleElement$sheet$i, _styleElement$sheet2;
205
220
  if (!enabled) {
206
221
  return;
207
222
  }
208
- const style = getCursorStyle(state, constraintFlags);
223
+ const style = getCursorStyle(state, constraintFlags, isPointerDown);
209
224
  if (currentCursorStyle === style) {
210
225
  return;
211
226
  }
@@ -452,6 +467,9 @@ function handlePointerDown(event) {
452
467
  updateListeners();
453
468
  if (intersectingHandles.length > 0) {
454
469
  updateResizeHandlerStates("down", event);
470
+
471
+ // Update cursor based on return value(s) from active handles
472
+ updateCursor();
455
473
  event.preventDefault();
456
474
  if (!isWithinResizeHandle(target)) {
457
475
  event.stopImmediatePropagation();
@@ -609,18 +627,19 @@ function updateCursor() {
609
627
  constraintFlags |= flag;
610
628
  });
611
629
  if (intersectsHorizontal && intersectsVertical) {
612
- setGlobalCursorStyle("intersection", constraintFlags);
630
+ setGlobalCursorStyle("intersection", constraintFlags, isPointerDown);
613
631
  } else if (intersectsHorizontal) {
614
- setGlobalCursorStyle("horizontal", constraintFlags);
632
+ setGlobalCursorStyle("horizontal", constraintFlags, isPointerDown);
615
633
  } else if (intersectsVertical) {
616
- setGlobalCursorStyle("vertical", constraintFlags);
634
+ setGlobalCursorStyle("vertical", constraintFlags, isPointerDown);
617
635
  } else {
618
636
  resetGlobalCursorStyle();
619
637
  }
620
638
  }
621
- let listenersAbortController = new AbortController();
639
+ let listenersAbortController;
622
640
  function updateListeners() {
623
- listenersAbortController.abort();
641
+ var _listenersAbortContro;
642
+ (_listenersAbortContro = listenersAbortController) === null || _listenersAbortContro === void 0 ? void 0 : _listenersAbortContro.abort();
624
643
  listenersAbortController = new AbortController();
625
644
  const options = {
626
645
  capture: true,
@@ -2240,4 +2259,4 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
2240
2259
  };
2241
2260
  }
2242
2261
 
2243
- export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
2262
+ export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
package/dist/react-resizable-panels.js CHANGED
@@ -184,20 +184,35 @@ function setNonce(value) {
184
184
 
185
185
  let currentCursorStyle = null;
186
186
  let enabled = true;
187
+ let getCustomCursorStyleFunction = null;
187
188
  let prevRuleIndex = -1;
188
189
  let styleElement = null;
190
+ function customizeGlobalCursorStyles(callback) {
191
+ getCustomCursorStyleFunction = callback;
192
+ }
189
193
  function disableGlobalCursorStyles() {
190
194
  enabled = false;
191
195
  }
192
196
  function enableGlobalCursorStyles() {
193
197
  enabled = true;
194
198
  }
195
- function getCursorStyle(state, constraintFlags) {
199
+ function getCursorStyle(state, constraintFlags, isPointerDown) {
200
+ const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
201
+ const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
202
+ const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
203
+ const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
204
+ if (getCustomCursorStyleFunction) {
205
+ return getCustomCursorStyleFunction({
206
+ exceedsHorizontalMaximum: horizontalMax,
207
+ exceedsHorizontalMinimum: horizontalMin,
208
+ exceedsVerticalMaximum: verticalMax,
209
+ exceedsVerticalMinimum: verticalMin,
210
+ intersectsHorizontalDragHandle: state === "horizontal" || state === "intersection",
211
+ intersectsVerticalDragHandle: state === "vertical" || state === "intersection",
212
+ isPointerDown
213
+ });
214
+ }
196
215
  if (constraintFlags) {
197
- const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
198
- const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
199
- const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
200
- const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
201
216
  if (horizontalMin) {
202
217
  if (verticalMin) {
203
218
  return "se-resize";
@@ -237,12 +252,12 @@ function resetGlobalCursorStyle() {
237
252
  prevRuleIndex = -1;
238
253
  }
239
254
  }
240
- function setGlobalCursorStyle(state, constraintFlags) {
255
+ function setGlobalCursorStyle(state, constraintFlags, isPointerDown) {
241
256
  var _styleElement$sheet$i, _styleElement$sheet2;
242
257
  if (!enabled) {
243
258
  return;
244
259
  }
245
- const style = getCursorStyle(state, constraintFlags);
260
+ const style = getCursorStyle(state, constraintFlags, isPointerDown);
246
261
  if (currentCursorStyle === style) {
247
262
  return;
248
263
  }
@@ -489,6 +504,9 @@ function handlePointerDown(event) {
489
504
  updateListeners();
490
505
  if (intersectingHandles.length > 0) {
491
506
  updateResizeHandlerStates("down", event);
507
+
508
+ // Update cursor based on return value(s) from active handles
509
+ updateCursor();
492
510
  event.preventDefault();
493
511
  if (!isWithinResizeHandle(target)) {
494
512
  event.stopImmediatePropagation();
@@ -646,18 +664,19 @@ function updateCursor() {
646
664
  constraintFlags |= flag;
647
665
  });
648
666
  if (intersectsHorizontal && intersectsVertical) {
649
- setGlobalCursorStyle("intersection", constraintFlags);
667
+ setGlobalCursorStyle("intersection", constraintFlags, isPointerDown);
650
668
  } else if (intersectsHorizontal) {
651
- setGlobalCursorStyle("horizontal", constraintFlags);
669
+ setGlobalCursorStyle("horizontal", constraintFlags, isPointerDown);
652
670
  } else if (intersectsVertical) {
653
- setGlobalCursorStyle("vertical", constraintFlags);
671
+ setGlobalCursorStyle("vertical", constraintFlags, isPointerDown);
654
672
  } else {
655
673
  resetGlobalCursorStyle();
656
674
  }
657
675
  }
658
- let listenersAbortController = new AbortController();
676
+ let listenersAbortController;
659
677
  function updateListeners() {
660
- listenersAbortController.abort();
678
+ var _listenersAbortContro;
679
+ (_listenersAbortContro = listenersAbortController) === null || _listenersAbortContro === void 0 ? void 0 : _listenersAbortContro.abort();
661
680
  listenersAbortController = new AbortController();
662
681
  const options = {
663
682
  capture: true,
@@ -2464,4 +2483,4 @@ function getIntersectingRectangle(rectOne, rectTwo, strict) {
2464
2483
  };
2465
2484
  }
2466
2485
 
2467
- export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
2486
+ export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-resizable-panels",
3
- "version": "3.0.2",
3
+ "version": "3.0.4",
4
4
  "type": "module",
5
5
  "description": "React components for resizable panel groups/layouts",
6
6
  "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",