@canvas-components/react-components 0.2.0 → 0.2.1

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 (7) hide show
  1. package/dist/index.cjs +121 -57
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +2 -0
  4. package/dist/index.d.ts +2 -0
  5. package/dist/index.js +121 -57
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -377,6 +377,8 @@ interface ReactModalProps {
377
377
  closable?: boolean;
378
378
  /** 是否提供全屏切换操作。@default true */
379
379
  fullscreenable?: boolean;
380
+ /** 是否允许拖拽标题栏移动 Modal。@default false */
381
+ draggable?: boolean;
380
382
  /** 当前是否全屏，传入后进入受控模式。 */
381
383
  fullscreen?: boolean;
382
384
  /** 默认是否全屏。@default false */
package/dist/index.d.ts CHANGED
@@ -377,6 +377,8 @@ interface ReactModalProps {
377
377
  closable?: boolean;
378
378
  /** 是否提供全屏切换操作。@default true */
379
379
  fullscreenable?: boolean;
380
+ /** 是否允许拖拽标题栏移动 Modal。@default false */
381
+ draggable?: boolean;
380
382
  /** 当前是否全屏，传入后进入受控模式。 */
381
383
  fullscreen?: boolean;
382
384
  /** 默认是否全屏。@default false */
package/dist/index.js CHANGED
@@ -26,7 +26,7 @@ function styleInject(css, { insertAt } = {}) {
26
26
  }
27
27
 
28
28
  // src/styles/variables.css
29
- styleInject(":root {\n --canvas-react-color-primary: #1677ff;\n --canvas-react-color-primary-hover: #4096ff;\n --canvas-react-color-border: #d9d9d9;\n --canvas-react-color-border-strong: #bfbfbf;\n --canvas-react-color-text: #1f2937;\n --canvas-react-color-text-muted: #6b7280;\n --canvas-react-color-bg: #ffffff;\n --canvas-react-color-bg-soft: #f5f5f5;\n --canvas-react-color-bg-hover: #f3f4f6;\n --canvas-react-color-bg-active: #e6f4ff;\n --canvas-react-shadow-focus: 0 0 0 2px rgba(22, 119, 255, 0.12);\n --canvas-react-shadow-popup: 0 8px 24px rgba(15, 23, 42, 0.16);\n --canvas-react-radius-sm: 6px;\n --canvas-react-radius-md: 8px;\n --canvas-react-control-height: 32px;\n --canvas-react-font-size: 14px;\n --canvas-react-control-padding-inline: 11px;\n --canvas-react-control-padding-block: 0px;\n --canvas-react-content-zoom: 1;\n}\n");
29
+ styleInject(":root {\n --canvas-react-color-primary: #1677ff;\n --canvas-react-color-primary-hover: #4096ff;\n --canvas-react-color-border: #d9d9d9;\n --canvas-react-color-border-strong: #bfbfbf;\n --canvas-react-color-text: #1f2937;\n --canvas-react-color-text-muted: #6b7280;\n --canvas-react-color-bg: #ffffff;\n --canvas-react-color-bg-soft: #f5f5f5;\n --canvas-react-color-bg-hover: #f3f4f6;\n --canvas-react-color-bg-active: #e6f4ff;\n --canvas-react-shadow-focus: 0 0 0 2px rgba(22, 119, 255, 0.12);\n --canvas-react-shadow-popup: 0 8px 24px rgba(15, 23, 42, 0.16);\n --canvas-react-radius-sm: 6px;\n --canvas-react-radius-md: 8px;\n --canvas-react-control-height: 32px;\n --canvas-react-font-size: 14px;\n --canvas-react-control-padding-inline: 11px;\n --canvas-react-control-padding-block: 0px;\n --canvas-react-content-zoom: 1;\n}\n*,\n*::before,\n*::after {\n scrollbar-width: thin;\n scrollbar-color: #aeb4bd transparent;\n}\n*::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n*::-webkit-scrollbar-track {\n background: transparent;\n}\n*::-webkit-scrollbar-thumb {\n min-height: 32px;\n border: 2px solid transparent;\n border-radius: 999px;\n background: #aeb4bd;\n background-clip: content-box;\n}\n*::-webkit-scrollbar-thumb:hover {\n background: #8f98a5;\n background-clip: content-box;\n}\n*::-webkit-scrollbar-corner {\n background: transparent;\n}\n");
30
30
 
31
31
  // src/shared/class-names.ts
32
32
  function joinClassNames(...values) {
@@ -5252,7 +5252,7 @@ function useCompatibleId(prefix = "canvas-react-id") {
5252
5252
  }
5253
5253
 
5254
5254
  // src/components/modal/style.css
5255
- 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-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-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-fullscreen-icon {\n position: relative;\n display: block;\n width: 15px;\n height: 15px;\n border: 1.5px solid currentColor;\n}\n.canvas-react-modal-fullscreen-icon-exit::before {\n position: absolute;\n inset: 3px -4px -4px 3px;\n border-right: 1.5px solid currentColor;\n border-bottom: 1.5px solid currentColor;\n content: "";\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');
5255
+ 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-fullscreen-icon {\n position: relative;\n display: block;\n width: 15px;\n height: 15px;\n border: 1.5px solid currentColor;\n}\n.canvas-react-modal-fullscreen-icon-exit::before {\n position: absolute;\n inset: 3px -4px -4px 3px;\n border-right: 1.5px solid currentColor;\n border-bottom: 1.5px solid currentColor;\n content: "";\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');
5256
5256
  var MODAL_MOTION_DURATION = 200;
5257
5257
  var FOCUSABLE_SELECTOR = [
5258
5258
  "a[href]",
@@ -5276,6 +5276,7 @@ function ReactModal(props) {
5276
5276
  closable = true,
5277
5277
  confirmLoading,
5278
5278
  defaultFullscreen = false,
5279
+ draggable = false,
5279
5280
  focusTriggerAfterClose = true,
5280
5281
  footer,
5281
5282
  fullscreen,
@@ -5304,7 +5305,9 @@ function ReactModal(props) {
5304
5305
  });
5305
5306
  const [innerFullscreen, setInnerFullscreen] = useState(defaultFullscreen);
5306
5307
  const [innerConfirmLoading, setInnerConfirmLoading] = useState(false);
5308
+ const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
5307
5309
  const panelRef = useRef(null);
5310
+ const dragRef = useRef(null);
5308
5311
  const restoreFocusRef = useRef(null);
5309
5312
  const wasRenderedRef = useRef(false);
5310
5313
  const titleId = useCompatibleId(`${REACT_COMPONENT_PREFIX}-modal-title`);
@@ -5312,6 +5315,32 @@ function ReactModal(props) {
5312
5315
  const mergedFullscreen = controlledFullscreen ? Boolean(fullscreen) : innerFullscreen;
5313
5316
  const mergedConfirmLoading = confirmLoading ?? innerConfirmLoading;
5314
5317
  const hasTitle = title !== null && title !== void 0 && title !== false;
5318
+ useEffect(() => {
5319
+ if (!draggable || !transition.rendered) return;
5320
+ const handleMouseMove = (event) => {
5321
+ const drag = dragRef.current;
5322
+ if (!drag) return;
5323
+ setDragOffset({
5324
+ x: drag.offsetX + event.clientX - drag.startX,
5325
+ y: drag.offsetY + event.clientY - drag.startY
5326
+ });
5327
+ };
5328
+ const handleMouseUp = () => {
5329
+ dragRef.current = null;
5330
+ };
5331
+ window.addEventListener("mousemove", handleMouseMove);
5332
+ window.addEventListener("mouseup", handleMouseUp);
5333
+ return () => {
5334
+ window.removeEventListener("mousemove", handleMouseMove);
5335
+ window.removeEventListener("mouseup", handleMouseUp);
5336
+ };
5337
+ }, [draggable, transition.rendered]);
5338
+ useEffect(() => {
5339
+ if (!open) {
5340
+ dragRef.current = null;
5341
+ setDragOffset({ x: 0, y: 0 });
5342
+ }
5343
+ }, [open]);
5315
5344
  useEffect(() => {
5316
5345
  if (!transition.rendered) {
5317
5346
  if (wasRenderedRef.current) {
@@ -5328,11 +5357,13 @@ function ReactModal(props) {
5328
5357
  wasRenderedRef.current = true;
5329
5358
  restoreFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
5330
5359
  }
5331
- lockBodyScroll();
5332
- return unlockBodyScroll;
5333
- }, [afterClose, focusTriggerAfterClose, transition.rendered]);
5360
+ if (mask) {
5361
+ lockBodyScroll();
5362
+ return unlockBodyScroll;
5363
+ }
5364
+ }, [afterClose, focusTriggerAfterClose, mask, transition.rendered]);
5334
5365
  useEffect(() => {
5335
- if (!open || !transition.rendered) {
5366
+ if (!mask || !open || !transition.rendered) {
5336
5367
  return;
5337
5368
  }
5338
5369
  const frameId = window.requestAnimationFrame(() => {
@@ -5341,9 +5372,9 @@ function ReactModal(props) {
5341
5372
  return () => {
5342
5373
  window.cancelAnimationFrame(frameId);
5343
5374
  };
5344
- }, [open, transition.rendered]);
5375
+ }, [mask, open, transition.rendered]);
5345
5376
  useEffect(() => {
5346
- if (!transition.rendered) {
5377
+ if (!mask || !transition.rendered) {
5347
5378
  return;
5348
5379
  }
5349
5380
  const handleKeyDown = (event) => {
@@ -5361,7 +5392,7 @@ function ReactModal(props) {
5361
5392
  return () => {
5362
5393
  document.removeEventListener("keydown", handleKeyDown);
5363
5394
  };
5364
- }, [keyboard, onCancel, open, transition.rendered]);
5395
+ }, [keyboard, mask, onCancel, open, transition.rendered]);
5365
5396
  const setFullscreen = (nextFullscreen) => {
5366
5397
  if (!controlledFullscreen) {
5367
5398
  setInnerFullscreen(nextFullscreen);
@@ -5446,6 +5477,7 @@ function ReactModal(props) {
5446
5477
  {
5447
5478
  className: joinClassNames(
5448
5479
  `${REACT_COMPONENT_PREFIX}-modal-root`,
5480
+ !mask && `${REACT_COMPONENT_PREFIX}-modal-root-passthrough`,
5449
5481
  centered && `${REACT_COMPONENT_PREFIX}-modal-root-centered`,
5450
5482
  mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-root-fullscreen`,
5451
5483
  transition.className,
@@ -5475,63 +5507,95 @@ function ReactModal(props) {
5475
5507
  mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-fullscreen`,
5476
5508
  className
5477
5509
  ),
5478
- style: { width, ...style },
5510
+ style: {
5511
+ width,
5512
+ ...style,
5513
+ ...draggable && !mergedFullscreen ? {
5514
+ position: "relative",
5515
+ left: dragOffset.x,
5516
+ top: dragOffset.y
5517
+ } : void 0
5518
+ },
5479
5519
  role: "dialog",
5480
- "aria-modal": "true",
5520
+ "aria-modal": mask ? "true" : void 0,
5481
5521
  "aria-label": hasTitle ? void 0 : "\u5BF9\u8BDD\u6846",
5482
5522
  "aria-labelledby": hasTitle ? titleId : void 0,
5483
5523
  tabIndex: -1,
5484
5524
  children: [
5485
- hasTitle || closable || fullscreenable ? /* @__PURE__ */ jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-modal-header`, children: [
5486
- /* @__PURE__ */ jsx(
5487
- "div",
5488
- {
5489
- id: hasTitle ? titleId : void 0,
5490
- className: `${REACT_COMPONENT_PREFIX}-modal-title`,
5491
- children: title
5492
- }
5493
- ),
5494
- /* @__PURE__ */ jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-modal-tools`, children: [
5495
- fullscreenable ? /* @__PURE__ */ jsx(
5496
- "button",
5497
- {
5498
- type: "button",
5499
- className: `${REACT_COMPONENT_PREFIX}-modal-tool`,
5500
- title: mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
5501
- "aria-label": mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
5502
- "aria-pressed": mergedFullscreen,
5503
- onClick: () => setFullscreen(!mergedFullscreen),
5504
- children: /* @__PURE__ */ jsx(
5505
- "span",
5525
+ hasTitle || closable || fullscreenable ? /* @__PURE__ */ jsxs(
5526
+ "div",
5527
+ {
5528
+ className: joinClassNames(
5529
+ `${REACT_COMPONENT_PREFIX}-modal-header`,
5530
+ draggable && !mergedFullscreen ? `${REACT_COMPONENT_PREFIX}-modal-header-draggable` : void 0
5531
+ ),
5532
+ onMouseDown: (event) => {
5533
+ if (!draggable || mergedFullscreen || event.button !== 0) {
5534
+ return;
5535
+ }
5536
+ if (event.target.closest("button")) {
5537
+ return;
5538
+ }
5539
+ dragRef.current = {
5540
+ startX: event.clientX,
5541
+ startY: event.clientY,
5542
+ offsetX: dragOffset.x,
5543
+ offsetY: dragOffset.y
5544
+ };
5545
+ event.preventDefault();
5546
+ },
5547
+ children: [
5548
+ /* @__PURE__ */ jsx(
5549
+ "div",
5550
+ {
5551
+ id: hasTitle ? titleId : void 0,
5552
+ className: `${REACT_COMPONENT_PREFIX}-modal-title`,
5553
+ children: title
5554
+ }
5555
+ ),
5556
+ /* @__PURE__ */ jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-modal-tools`, children: [
5557
+ fullscreenable ? /* @__PURE__ */ jsx(
5558
+ "button",
5506
5559
  {
5507
- className: joinClassNames(
5508
- `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon`,
5509
- mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon-exit`
5510
- ),
5511
- "aria-hidden": "true"
5560
+ type: "button",
5561
+ className: `${REACT_COMPONENT_PREFIX}-modal-tool`,
5562
+ title: mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
5563
+ "aria-label": mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
5564
+ "aria-pressed": mergedFullscreen,
5565
+ onClick: () => setFullscreen(!mergedFullscreen),
5566
+ children: /* @__PURE__ */ jsx(
5567
+ "span",
5568
+ {
5569
+ className: joinClassNames(
5570
+ `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon`,
5571
+ mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon-exit`
5572
+ ),
5573
+ "aria-hidden": "true"
5574
+ }
5575
+ )
5512
5576
  }
5513
- )
5514
- }
5515
- ) : null,
5516
- closable ? /* @__PURE__ */ jsx(
5517
- "button",
5518
- {
5519
- type: "button",
5520
- className: `${REACT_COMPONENT_PREFIX}-modal-tool`,
5521
- title: "\u5173\u95ED",
5522
- "aria-label": "\u5173\u95ED",
5523
- onClick: onCancel,
5524
- children: /* @__PURE__ */ jsx(
5525
- "span",
5577
+ ) : null,
5578
+ closable ? /* @__PURE__ */ jsx(
5579
+ "button",
5526
5580
  {
5527
- className: `${REACT_COMPONENT_PREFIX}-modal-close-icon`,
5528
- "aria-hidden": "true"
5581
+ type: "button",
5582
+ className: `${REACT_COMPONENT_PREFIX}-modal-tool`,
5583
+ title: "\u5173\u95ED",
5584
+ "aria-label": "\u5173\u95ED",
5585
+ onClick: onCancel,
5586
+ children: /* @__PURE__ */ jsx(
5587
+ "span",
5588
+ {
5589
+ className: `${REACT_COMPONENT_PREFIX}-modal-close-icon`,
5590
+ "aria-hidden": "true"
5591
+ }
5592
+ )
5529
5593
  }
5530
- )
5531
- }
5532
- ) : null
5533
- ] })
5534
- ] }) : null,
5594
+ ) : null
5595
+ ] })
5596
+ ]
5597
+ }
5598
+ ) : null,
5535
5599
  /* @__PURE__ */ jsx(
5536
5600
  "div",
5537
5601
  {