@canvas-components/react-components 0.3.10 → 0.3.12
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 +100 -15
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +100 -15
- 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,8 +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);
|
|
5453
|
+
const [, setFullscreenRevision] = React.useState(0);
|
|
5437
5454
|
const panelRef = React.useRef(null);
|
|
5438
5455
|
const dragRef = React.useRef(null);
|
|
5456
|
+
const resizeRef = React.useRef(null);
|
|
5439
5457
|
const restoreFocusRef = React.useRef(null);
|
|
5440
5458
|
const wasRenderedRef = React.useRef(false);
|
|
5441
5459
|
const afterOpenChangeRef = React.useRef(afterOpenChange);
|
|
@@ -5446,6 +5464,16 @@ function ReactModal(props) {
|
|
|
5446
5464
|
const mergedFullscreen = controlledFullscreen ? Boolean(fullscreen) : innerFullscreen;
|
|
5447
5465
|
const mergedConfirmLoading = confirmLoading ?? innerConfirmLoading;
|
|
5448
5466
|
const hasTitle = title !== null && title !== void 0 && title !== false;
|
|
5467
|
+
React.useEffect(() => {
|
|
5468
|
+
if (!transition.rendered || typeof document === "undefined") return;
|
|
5469
|
+
const handleFullscreenChange = () => {
|
|
5470
|
+
setFullscreenRevision((revision) => revision + 1);
|
|
5471
|
+
};
|
|
5472
|
+
document.addEventListener("fullscreenchange", handleFullscreenChange);
|
|
5473
|
+
return () => {
|
|
5474
|
+
document.removeEventListener("fullscreenchange", handleFullscreenChange);
|
|
5475
|
+
};
|
|
5476
|
+
}, [transition.rendered]);
|
|
5449
5477
|
React.useEffect(() => {
|
|
5450
5478
|
if (previousOpenRef.current === open) {
|
|
5451
5479
|
return;
|
|
@@ -5473,10 +5501,49 @@ function ReactModal(props) {
|
|
|
5473
5501
|
window.removeEventListener("mouseup", handleMouseUp);
|
|
5474
5502
|
};
|
|
5475
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]);
|
|
5476
5541
|
React.useEffect(() => {
|
|
5477
5542
|
if (!open) {
|
|
5478
5543
|
dragRef.current = null;
|
|
5544
|
+
resizeRef.current = null;
|
|
5479
5545
|
setDragOffset({ x: 0, y: 0 });
|
|
5546
|
+
setResizeSize(null);
|
|
5480
5547
|
}
|
|
5481
5548
|
}, [open]);
|
|
5482
5549
|
React.useEffect(() => {
|
|
@@ -5646,9 +5713,10 @@ function ReactModal(props) {
|
|
|
5646
5713
|
className
|
|
5647
5714
|
),
|
|
5648
5715
|
style: {
|
|
5649
|
-
width,
|
|
5716
|
+
width: !mergedFullscreen ? resizeSize?.width ?? width : width,
|
|
5717
|
+
...!mergedFullscreen && resizeSize ? { height: resizeSize.height } : void 0,
|
|
5650
5718
|
...style,
|
|
5651
|
-
...draggable && !mergedFullscreen ? {
|
|
5719
|
+
...(draggable || resizable) && !mergedFullscreen ? {
|
|
5652
5720
|
position: "relative",
|
|
5653
5721
|
left: dragOffset.x,
|
|
5654
5722
|
top: dragOffset.y
|
|
@@ -5701,16 +5769,7 @@ function ReactModal(props) {
|
|
|
5701
5769
|
"aria-label": mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
|
|
5702
5770
|
"aria-pressed": mergedFullscreen,
|
|
5703
5771
|
onClick: () => setFullscreen(!mergedFullscreen),
|
|
5704
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5705
|
-
"span",
|
|
5706
|
-
{
|
|
5707
|
-
className: joinClassNames(
|
|
5708
|
-
`${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon`,
|
|
5709
|
-
mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon-exit`
|
|
5710
|
-
),
|
|
5711
|
-
"aria-hidden": "true"
|
|
5712
|
-
}
|
|
5713
|
-
)
|
|
5772
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(ModalFullscreenIcon, { exit: mergedFullscreen })
|
|
5714
5773
|
}
|
|
5715
5774
|
) : null,
|
|
5716
5775
|
closable ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -5742,7 +5801,31 @@ function ReactModal(props) {
|
|
|
5742
5801
|
children
|
|
5743
5802
|
}
|
|
5744
5803
|
),
|
|
5745
|
-
footer === false ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-modal-footer`, children: footer ?? defaultFooter })
|
|
5804
|
+
footer === false ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-modal-footer`, children: footer ?? defaultFooter }),
|
|
5805
|
+
resizable && !mergedFullscreen ? ["n", "s", "e", "w", "ne", "nw", "se", "sw"].map((direction) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5806
|
+
"div",
|
|
5807
|
+
{
|
|
5808
|
+
className: `${REACT_COMPONENT_PREFIX}-modal-resize-handle ${REACT_COMPONENT_PREFIX}-modal-resize-${direction}`,
|
|
5809
|
+
"aria-hidden": "true",
|
|
5810
|
+
onMouseDown: (event) => {
|
|
5811
|
+
if (event.button !== 0 || !panelRef.current) return;
|
|
5812
|
+
const rect = panelRef.current.getBoundingClientRect();
|
|
5813
|
+
dragRef.current = null;
|
|
5814
|
+
resizeRef.current = {
|
|
5815
|
+
direction,
|
|
5816
|
+
startX: event.clientX,
|
|
5817
|
+
startY: event.clientY,
|
|
5818
|
+
width: rect.width,
|
|
5819
|
+
height: rect.height,
|
|
5820
|
+
offsetX: dragOffset.x,
|
|
5821
|
+
offsetY: dragOffset.y
|
|
5822
|
+
};
|
|
5823
|
+
event.preventDefault();
|
|
5824
|
+
event.stopPropagation();
|
|
5825
|
+
}
|
|
5826
|
+
},
|
|
5827
|
+
direction
|
|
5828
|
+
)) : null
|
|
5746
5829
|
]
|
|
5747
5830
|
}
|
|
5748
5831
|
) })
|
|
@@ -5756,7 +5839,9 @@ function resolveContainer(getContainer) {
|
|
|
5756
5839
|
if (typeof document === "undefined") {
|
|
5757
5840
|
return null;
|
|
5758
5841
|
}
|
|
5759
|
-
|
|
5842
|
+
if (typeof getContainer === "function") return getContainer();
|
|
5843
|
+
if (getContainer) return getContainer;
|
|
5844
|
+
return document.fullscreenElement instanceof HTMLElement ? document.fullscreenElement : document.body;
|
|
5760
5845
|
}
|
|
5761
5846
|
function trapFocus(event, panel) {
|
|
5762
5847
|
if (!panel) {
|