@canvas-components/react-components 0.3.11 → 0.3.13
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.
- package/dist/index.cjs +95 -17
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +95 -17
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -5377,9 +5377,23 @@ function useCompatibleId(prefix = "canvas-react-id") {
|
|
|
5377
5377
|
}
|
|
5378
5378
|
return nativeUseId ? nativeUseId() : fallbackIdRef.current;
|
|
5379
5379
|
}
|
|
5380
|
+
function ModalFullscreenIcon({ exit }) {
|
|
5381
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
5382
|
+
"svg",
|
|
5383
|
+
{
|
|
5384
|
+
"aria-hidden": "true",
|
|
5385
|
+
viewBox: "64 64 896 896",
|
|
5386
|
+
width: "18",
|
|
5387
|
+
height: "18",
|
|
5388
|
+
fill: "currentColor",
|
|
5389
|
+
focusable: "false",
|
|
5390
|
+
children: exit ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M391 240.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L200 146.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L280 333.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L401 410c5.1.6 9.5-3.7 8.9-8.9L391 240.9zm10.1 373.2L240.8 633c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L146.3 824a8.03 8.03 0 000 11.3l42.4 42.3c3.1 3.1 8.2 3.1 11.3 0L333.7 744l43.7 43.7A8.01 8.01 0 00391 783l18.9-160.1c.6-5.1-3.7-9.4-8.8-8.8zm221.8-204.2L783.2 391c6.6-.8 9.4-8.9 4.7-13.6L744 333.6 877.7 200c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.3a8.03 8.03 0 00-11.3 0L690.3 279.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L614.1 401c-.6 5.2 3.7 9.5 8.8 8.9zM744 690.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L623 614c-5.1-.6-9.5 3.7-8.9 8.9L633 783.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L824 877.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L744 690.4z" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M290 236.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L169 160c-5.1-.6-9.5 3.7-8.9 8.9L179 329.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zm352.7 187.3c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7a8.01 8.01 0 0013.6-4.7L863.9 169c.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370a8.03 8.03 0 000 11.3l42.4 42.4zM845 694.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L734 787.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L855 864c5.1.6 9.5-3.7 8.9-8.9L845 694.9zm-463.7-94.6a8.03 8.03 0 00-11.3 0L236.3 733.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L160.1 855c-.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z" })
|
|
5391
|
+
}
|
|
5392
|
+
);
|
|
5393
|
+
}
|
|
5380
5394
|
|
|
5381
5395
|
// src/components/modal/style.css
|
|
5382
|
-
styleInject('@import "../../styles/variables.css";\n.canvas-react-modal-root,\n.canvas-react-modal-root * {\n box-sizing: border-box;\n}\n.canvas-react-modal-root {\n position: fixed;\n inset: 0;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n line-height: 1.5;\n}\n.canvas-react-modal-root-passthrough {\n pointer-events: none;\n}\n.canvas-react-modal-root-passthrough .canvas-react-modal {\n pointer-events: auto;\n}\n.canvas-react-modal-mask {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.45);\n}\n.canvas-react-modal-wrap {\n position: absolute;\n inset: 0;\n overflow: auto;\n padding: 100px 24px 24px;\n pointer-events: none;\n}\n.canvas-react-modal-root-centered .canvas-react-modal-wrap {\n display: flex;\n align-items: center;\n padding-top: 24px;\n}\n.canvas-react-modal-root-fullscreen .canvas-react-modal-wrap {\n padding: 0;\n overflow: hidden;\n}\n.canvas-react-modal {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 520px;\n max-width: calc(100vw - 48px);\n max-height: calc(100vh - 124px);\n margin: 0 auto;\n overflow: hidden;\n border-radius: var(--canvas-react-radius-md, 8px);\n background: var(--canvas-react-color-bg, #ffffff);\n box-shadow: 0 12px 40px rgba(15, 23, 42, 0.22);\n outline: none;\n pointer-events: auto;\n}\n.canvas-react-modal-root-centered .canvas-react-modal {\n max-height: calc(100vh - 48px);\n}\n.canvas-react-modal.canvas-react-modal-fullscreen {\n width: 100% !important;\n max-width: none;\n height: 100%;\n max-height: none;\n border-radius: 0;\n}\n.canvas-react-modal-header {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n min-height: 56px;\n padding: 0 16px 0 24px;\n border-bottom: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-modal-header-draggable {\n cursor: move;\n user-select: none;\n}\n.canvas-react-modal-title {\n min-width: 0;\n flex: 1 1 auto;\n color: var(--canvas-react-color-text);\n font-size: 16px;\n font-weight: 600;\n overflow-wrap: anywhere;\n}\n.canvas-react-modal-tools {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: 4px;\n margin-left: 16px;\n}\n.canvas-react-modal-tool {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: 0;\n border-radius: var(--canvas-react-radius-sm, 6px);\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n cursor: pointer;\n transition: background-color 0.18s ease, color 0.18s ease;\n}\n.canvas-react-modal-tool:hover {\n background: var(--canvas-react-color-bg-hover);\n color: var(--canvas-react-color-text);\n}\n.canvas-react-modal-tool:focus-visible,\n.canvas-react-modal-button:focus-visible {\n outline: 2px solid var(--canvas-react-color-primary);\n outline-offset: 2px;\n}\n.canvas-react-modal-
|
|
5396
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-modal-root,\n.canvas-react-modal-root * {\n box-sizing: border-box;\n}\n.canvas-react-modal-root {\n position: fixed;\n inset: 0;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n line-height: 1.5;\n}\n.canvas-react-modal-root-passthrough {\n pointer-events: none;\n}\n.canvas-react-modal-root-passthrough .canvas-react-modal {\n pointer-events: auto;\n}\n.canvas-react-modal-mask {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.45);\n}\n.canvas-react-modal-wrap {\n position: absolute;\n inset: 0;\n overflow: auto;\n padding: 100px 24px 24px;\n pointer-events: none;\n}\n.canvas-react-modal-root-centered .canvas-react-modal-wrap {\n display: flex;\n align-items: center;\n padding-top: 24px;\n}\n.canvas-react-modal-root-fullscreen .canvas-react-modal-wrap {\n padding: 0;\n overflow: hidden;\n}\n.canvas-react-modal {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 520px;\n max-width: calc(100vw - 48px);\n max-height: calc(100vh - 124px);\n margin: 0 auto;\n overflow: hidden;\n border-radius: var(--canvas-react-radius-md, 8px);\n background: var(--canvas-react-color-bg, #ffffff);\n box-shadow: 0 12px 40px rgba(15, 23, 42, 0.22);\n outline: none;\n pointer-events: auto;\n}\n.canvas-react-modal-root-centered .canvas-react-modal {\n max-height: calc(100vh - 48px);\n}\n.canvas-react-modal.canvas-react-modal-fullscreen {\n width: 100% !important;\n max-width: none;\n height: 100%;\n max-height: none;\n border-radius: 0;\n}\n.canvas-react-modal-resize-handle {\n position: absolute;\n z-index: 2;\n touch-action: none;\n}\n.canvas-react-modal-resize-n,\n.canvas-react-modal-resize-s {\n right: 12px;\n left: 12px;\n height: 6px;\n cursor: ns-resize;\n}\n.canvas-react-modal-resize-n {\n top: 0;\n}\n.canvas-react-modal-resize-s {\n bottom: 0;\n}\n.canvas-react-modal-resize-e,\n.canvas-react-modal-resize-w {\n top: 12px;\n bottom: 12px;\n width: 6px;\n cursor: ew-resize;\n}\n.canvas-react-modal-resize-e {\n right: 0;\n}\n.canvas-react-modal-resize-w {\n left: 0;\n}\n.canvas-react-modal-resize-ne,\n.canvas-react-modal-resize-nw,\n.canvas-react-modal-resize-se,\n.canvas-react-modal-resize-sw {\n width: 12px;\n height: 12px;\n}\n.canvas-react-modal-resize-ne {\n top: 0;\n right: 0;\n cursor: nesw-resize;\n}\n.canvas-react-modal-resize-nw {\n top: 0;\n left: 0;\n cursor: nwse-resize;\n}\n.canvas-react-modal-resize-se {\n bottom: 0;\n right: 0;\n cursor: nwse-resize;\n}\n.canvas-react-modal-resize-sw {\n bottom: 0;\n left: 0;\n cursor: nesw-resize;\n}\n.canvas-react-modal-header {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n min-height: 56px;\n padding: 0 16px 0 24px;\n border-bottom: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-modal-header-draggable {\n cursor: move;\n user-select: none;\n}\n.canvas-react-modal-title {\n min-width: 0;\n flex: 1 1 auto;\n color: var(--canvas-react-color-text);\n font-size: 16px;\n font-weight: 600;\n overflow-wrap: anywhere;\n}\n.canvas-react-modal-tools {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: 4px;\n margin-left: 16px;\n}\n.canvas-react-modal-tool {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: 0;\n border-radius: var(--canvas-react-radius-sm, 6px);\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n cursor: pointer;\n transition: background-color 0.18s ease, color 0.18s ease;\n}\n.canvas-react-modal-tool:hover {\n background: var(--canvas-react-color-bg-hover);\n color: var(--canvas-react-color-text);\n}\n.canvas-react-modal-tool:focus-visible,\n.canvas-react-modal-button:focus-visible {\n outline: 2px solid var(--canvas-react-color-primary);\n outline-offset: 2px;\n}\n.canvas-react-modal-close-icon {\n position: relative;\n display: block;\n width: 16px;\n height: 16px;\n}\n.canvas-react-modal-close-icon::before,\n.canvas-react-modal-close-icon::after {\n position: absolute;\n top: 7px;\n left: 1px;\n width: 14px;\n height: 1.5px;\n border-radius: 1px;\n background: currentColor;\n content: "";\n}\n.canvas-react-modal-close-icon::before {\n transform: rotate(45deg);\n}\n.canvas-react-modal-close-icon::after {\n transform: rotate(-45deg);\n}\n.canvas-react-modal-body {\n min-height: 0;\n flex: 1 1 auto;\n overflow: auto;\n padding: 20px 24px;\n}\n.canvas-react-modal-footer {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n padding: 12px 24px;\n border-top: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-modal-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n height: var(--canvas-react-control-height, 32px);\n min-width: 64px;\n padding: 0 var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm, 6px);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font: inherit;\n line-height: 1;\n white-space: nowrap;\n cursor: pointer;\n transition:\n border-color 0.18s ease,\n background-color 0.18s ease,\n color 0.18s ease,\n opacity 0.18s ease;\n}\n.canvas-react-modal-button:hover {\n border-color: var(--canvas-react-color-primary-hover);\n color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-modal-button-primary {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-primary);\n color: #ffffff;\n}\n.canvas-react-modal-button-primary:hover {\n border-color: var(--canvas-react-color-primary-hover);\n background: var(--canvas-react-color-primary-hover);\n color: #ffffff;\n}\n.canvas-react-modal-button:disabled {\n opacity: 0.56;\n cursor: not-allowed;\n}\n.canvas-react-modal-loading {\n width: 14px;\n height: 14px;\n border: 2px solid rgba(255, 255, 255, 0.45);\n border-top-color: #ffffff;\n border-radius: 50%;\n animation: canvas-react-modal-loading 0.8s linear infinite;\n}\n.canvas-react-modal-motion-enter-active,\n.canvas-react-modal-motion-leave-active {\n transition: opacity 0.2s ease;\n}\n.canvas-react-modal-motion-enter-active .canvas-react-modal,\n.canvas-react-modal-motion-leave-active .canvas-react-modal {\n transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.canvas-react-modal-motion-enter-from,\n.canvas-react-modal-motion-leave-to {\n opacity: 0;\n}\n.canvas-react-modal-motion-enter-from .canvas-react-modal,\n.canvas-react-modal-motion-leave-to .canvas-react-modal {\n opacity: 0;\n transform: scale(0.96) translateY(-8px);\n}\n@keyframes canvas-react-modal-loading {\n to {\n transform: rotate(360deg);\n }\n}\n@media (max-width: 575px) {\n .canvas-react-modal-wrap {\n padding: 24px 12px;\n }\n .canvas-react-modal {\n max-width: calc(100vw - 24px);\n max-height: calc(100vh - 48px);\n }\n .canvas-react-modal-header {\n padding-right: 12px;\n padding-left: 16px;\n }\n .canvas-react-modal-body {\n padding: 16px;\n }\n .canvas-react-modal-footer {\n padding: 12px 16px;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .canvas-react-modal-motion-enter-active,\n .canvas-react-modal-motion-leave-active,\n .canvas-react-modal-motion-enter-active .canvas-react-modal,\n .canvas-react-modal-motion-leave-active .canvas-react-modal {\n transition-duration: 0.01ms;\n }\n}\n');
|
|
5383
5397
|
var MODAL_MOTION_DURATION = 200;
|
|
5384
5398
|
var FOCUSABLE_SELECTOR = [
|
|
5385
5399
|
"a[href]",
|
|
@@ -5421,6 +5435,7 @@ function ReactModal(props) {
|
|
|
5421
5435
|
onOk,
|
|
5422
5436
|
open,
|
|
5423
5437
|
rootClassName,
|
|
5438
|
+
resizable = false,
|
|
5424
5439
|
style,
|
|
5425
5440
|
title,
|
|
5426
5441
|
width = 520,
|
|
@@ -5434,9 +5449,11 @@ function ReactModal(props) {
|
|
|
5434
5449
|
const [innerFullscreen, setInnerFullscreen] = React.useState(defaultFullscreen);
|
|
5435
5450
|
const [innerConfirmLoading, setInnerConfirmLoading] = React.useState(false);
|
|
5436
5451
|
const [dragOffset, setDragOffset] = React.useState({ x: 0, y: 0 });
|
|
5452
|
+
const [resizeSize, setResizeSize] = React.useState(null);
|
|
5437
5453
|
const [, setFullscreenRevision] = React.useState(0);
|
|
5438
5454
|
const panelRef = React.useRef(null);
|
|
5439
5455
|
const dragRef = React.useRef(null);
|
|
5456
|
+
const resizeRef = React.useRef(null);
|
|
5440
5457
|
const restoreFocusRef = React.useRef(null);
|
|
5441
5458
|
const wasRenderedRef = React.useRef(false);
|
|
5442
5459
|
const afterOpenChangeRef = React.useRef(afterOpenChange);
|
|
@@ -5484,10 +5501,49 @@ function ReactModal(props) {
|
|
|
5484
5501
|
window.removeEventListener("mouseup", handleMouseUp);
|
|
5485
5502
|
};
|
|
5486
5503
|
}, [draggable, transition.rendered]);
|
|
5504
|
+
React.useEffect(() => {
|
|
5505
|
+
if (!resizable || !transition.rendered) return;
|
|
5506
|
+
const handleMouseMove = (event) => {
|
|
5507
|
+
const resize = resizeRef.current;
|
|
5508
|
+
if (!resize) return;
|
|
5509
|
+
const deltaX = event.clientX - resize.startX;
|
|
5510
|
+
const deltaY = event.clientY - resize.startY;
|
|
5511
|
+
const west = resize.direction.includes("w");
|
|
5512
|
+
const east = resize.direction.includes("e");
|
|
5513
|
+
const north = resize.direction.includes("n");
|
|
5514
|
+
const south = resize.direction.includes("s");
|
|
5515
|
+
const nextWidth = Math.min(
|
|
5516
|
+
Math.max(resize.width + (west ? -deltaX : east ? deltaX : 0), 360),
|
|
5517
|
+
Math.max(window.innerWidth - 48, 360)
|
|
5518
|
+
);
|
|
5519
|
+
const nextHeight = Math.min(
|
|
5520
|
+
Math.max(resize.height + (north ? -deltaY : south ? deltaY : 0), 260),
|
|
5521
|
+
Math.max(window.innerHeight - 48, 260)
|
|
5522
|
+
);
|
|
5523
|
+
const widthDelta = nextWidth - resize.width;
|
|
5524
|
+
const heightDelta = nextHeight - resize.height;
|
|
5525
|
+
setResizeSize({ width: nextWidth, height: nextHeight });
|
|
5526
|
+
setDragOffset({
|
|
5527
|
+
x: resize.offsetX + (west ? -widthDelta / 2 : east ? widthDelta / 2 : 0),
|
|
5528
|
+
y: resize.offsetY + (centered ? north ? -heightDelta / 2 : south ? heightDelta / 2 : 0 : north ? -heightDelta : 0)
|
|
5529
|
+
});
|
|
5530
|
+
};
|
|
5531
|
+
const handleMouseUp = () => {
|
|
5532
|
+
resizeRef.current = null;
|
|
5533
|
+
};
|
|
5534
|
+
window.addEventListener("mousemove", handleMouseMove);
|
|
5535
|
+
window.addEventListener("mouseup", handleMouseUp);
|
|
5536
|
+
return () => {
|
|
5537
|
+
window.removeEventListener("mousemove", handleMouseMove);
|
|
5538
|
+
window.removeEventListener("mouseup", handleMouseUp);
|
|
5539
|
+
};
|
|
5540
|
+
}, [centered, resizable, transition.rendered]);
|
|
5487
5541
|
React.useEffect(() => {
|
|
5488
5542
|
if (!open) {
|
|
5489
5543
|
dragRef.current = null;
|
|
5544
|
+
resizeRef.current = null;
|
|
5490
5545
|
setDragOffset({ x: 0, y: 0 });
|
|
5546
|
+
setResizeSize(null);
|
|
5491
5547
|
}
|
|
5492
5548
|
}, [open]);
|
|
5493
5549
|
React.useEffect(() => {
|
|
@@ -5566,7 +5622,7 @@ function ReactModal(props) {
|
|
|
5566
5622
|
if (!transition.rendered || typeof document === "undefined") {
|
|
5567
5623
|
return null;
|
|
5568
5624
|
}
|
|
5569
|
-
const container = resolveContainer(getContainer);
|
|
5625
|
+
const container = resolveContainer(getContainer, panelRef.current);
|
|
5570
5626
|
if (!container) {
|
|
5571
5627
|
return null;
|
|
5572
5628
|
}
|
|
@@ -5657,9 +5713,11 @@ function ReactModal(props) {
|
|
|
5657
5713
|
className
|
|
5658
5714
|
),
|
|
5659
5715
|
style: {
|
|
5660
|
-
width,
|
|
5716
|
+
width: !mergedFullscreen ? resizeSize?.width ?? width : width,
|
|
5717
|
+
...!mergedFullscreen && resizeSize ? { height: resizeSize.height } : void 0,
|
|
5661
5718
|
...style,
|
|
5662
|
-
...
|
|
5719
|
+
...mergedFullscreen ? { width: "100%", height: "100%" } : void 0,
|
|
5720
|
+
...(draggable || resizable) && !mergedFullscreen ? {
|
|
5663
5721
|
position: "relative",
|
|
5664
5722
|
left: dragOffset.x,
|
|
5665
5723
|
top: dragOffset.y
|
|
@@ -5712,16 +5770,7 @@ function ReactModal(props) {
|
|
|
5712
5770
|
"aria-label": mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
|
|
5713
5771
|
"aria-pressed": mergedFullscreen,
|
|
5714
5772
|
onClick: () => setFullscreen(!mergedFullscreen),
|
|
5715
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5716
|
-
"span",
|
|
5717
|
-
{
|
|
5718
|
-
className: joinClassNames(
|
|
5719
|
-
`${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon`,
|
|
5720
|
-
mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon-exit`
|
|
5721
|
-
),
|
|
5722
|
-
"aria-hidden": "true"
|
|
5723
|
-
}
|
|
5724
|
-
)
|
|
5773
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(ModalFullscreenIcon, { exit: mergedFullscreen })
|
|
5725
5774
|
}
|
|
5726
5775
|
) : null,
|
|
5727
5776
|
closable ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -5753,7 +5802,31 @@ function ReactModal(props) {
|
|
|
5753
5802
|
children
|
|
5754
5803
|
}
|
|
5755
5804
|
),
|
|
5756
|
-
footer === false ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-modal-footer`, children: footer ?? defaultFooter })
|
|
5805
|
+
footer === false ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-modal-footer`, children: footer ?? defaultFooter }),
|
|
5806
|
+
resizable && !mergedFullscreen ? ["n", "s", "e", "w", "ne", "nw", "se", "sw"].map((direction) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5807
|
+
"div",
|
|
5808
|
+
{
|
|
5809
|
+
className: `${REACT_COMPONENT_PREFIX}-modal-resize-handle ${REACT_COMPONENT_PREFIX}-modal-resize-${direction}`,
|
|
5810
|
+
"aria-hidden": "true",
|
|
5811
|
+
onMouseDown: (event) => {
|
|
5812
|
+
if (event.button !== 0 || !panelRef.current) return;
|
|
5813
|
+
const rect = panelRef.current.getBoundingClientRect();
|
|
5814
|
+
dragRef.current = null;
|
|
5815
|
+
resizeRef.current = {
|
|
5816
|
+
direction,
|
|
5817
|
+
startX: event.clientX,
|
|
5818
|
+
startY: event.clientY,
|
|
5819
|
+
width: rect.width,
|
|
5820
|
+
height: rect.height,
|
|
5821
|
+
offsetX: dragOffset.x,
|
|
5822
|
+
offsetY: dragOffset.y
|
|
5823
|
+
};
|
|
5824
|
+
event.preventDefault();
|
|
5825
|
+
event.stopPropagation();
|
|
5826
|
+
}
|
|
5827
|
+
},
|
|
5828
|
+
direction
|
|
5829
|
+
)) : null
|
|
5757
5830
|
]
|
|
5758
5831
|
}
|
|
5759
5832
|
) })
|
|
@@ -5763,13 +5836,18 @@ function ReactModal(props) {
|
|
|
5763
5836
|
container
|
|
5764
5837
|
);
|
|
5765
5838
|
}
|
|
5766
|
-
function resolveContainer(getContainer) {
|
|
5839
|
+
function resolveContainer(getContainer, panel) {
|
|
5767
5840
|
if (typeof document === "undefined") {
|
|
5768
5841
|
return null;
|
|
5769
5842
|
}
|
|
5770
5843
|
if (typeof getContainer === "function") return getContainer();
|
|
5771
5844
|
if (getContainer) return getContainer;
|
|
5772
|
-
|
|
5845
|
+
const fullscreenNode = document.fullscreenElement;
|
|
5846
|
+
if (!(fullscreenNode instanceof HTMLElement)) return document.body;
|
|
5847
|
+
if (panel?.contains(fullscreenNode)) {
|
|
5848
|
+
return panel.closest(`.${REACT_COMPONENT_PREFIX}-modal-root`)?.parentElement ?? document.body;
|
|
5849
|
+
}
|
|
5850
|
+
return fullscreenNode;
|
|
5773
5851
|
}
|
|
5774
5852
|
function trapFocus(event, panel) {
|
|
5775
5853
|
if (!panel) {
|