@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.cjs CHANGED
@@ -47,7 +47,7 @@ function styleInject(css, { insertAt } = {}) {
47
47
  }
48
48
 
49
49
  // src/styles/variables.css
50
- 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");
50
+ 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");
51
51
 
52
52
  // src/shared/class-names.ts
53
53
  function joinClassNames(...values) {
@@ -5273,7 +5273,7 @@ function useCompatibleId(prefix = "canvas-react-id") {
5273
5273
  }
5274
5274
 
5275
5275
  // src/components/modal/style.css
5276
- 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');
5276
+ 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');
5277
5277
  var MODAL_MOTION_DURATION = 200;
5278
5278
  var FOCUSABLE_SELECTOR = [
5279
5279
  "a[href]",
@@ -5297,6 +5297,7 @@ function ReactModal(props) {
5297
5297
  closable = true,
5298
5298
  confirmLoading,
5299
5299
  defaultFullscreen = false,
5300
+ draggable = false,
5300
5301
  focusTriggerAfterClose = true,
5301
5302
  footer,
5302
5303
  fullscreen,
@@ -5325,7 +5326,9 @@ function ReactModal(props) {
5325
5326
  });
5326
5327
  const [innerFullscreen, setInnerFullscreen] = React.useState(defaultFullscreen);
5327
5328
  const [innerConfirmLoading, setInnerConfirmLoading] = React.useState(false);
5329
+ const [dragOffset, setDragOffset] = React.useState({ x: 0, y: 0 });
5328
5330
  const panelRef = React.useRef(null);
5331
+ const dragRef = React.useRef(null);
5329
5332
  const restoreFocusRef = React.useRef(null);
5330
5333
  const wasRenderedRef = React.useRef(false);
5331
5334
  const titleId = useCompatibleId(`${REACT_COMPONENT_PREFIX}-modal-title`);
@@ -5333,6 +5336,32 @@ function ReactModal(props) {
5333
5336
  const mergedFullscreen = controlledFullscreen ? Boolean(fullscreen) : innerFullscreen;
5334
5337
  const mergedConfirmLoading = confirmLoading ?? innerConfirmLoading;
5335
5338
  const hasTitle = title !== null && title !== void 0 && title !== false;
5339
+ React.useEffect(() => {
5340
+ if (!draggable || !transition.rendered) return;
5341
+ const handleMouseMove = (event) => {
5342
+ const drag = dragRef.current;
5343
+ if (!drag) return;
5344
+ setDragOffset({
5345
+ x: drag.offsetX + event.clientX - drag.startX,
5346
+ y: drag.offsetY + event.clientY - drag.startY
5347
+ });
5348
+ };
5349
+ const handleMouseUp = () => {
5350
+ dragRef.current = null;
5351
+ };
5352
+ window.addEventListener("mousemove", handleMouseMove);
5353
+ window.addEventListener("mouseup", handleMouseUp);
5354
+ return () => {
5355
+ window.removeEventListener("mousemove", handleMouseMove);
5356
+ window.removeEventListener("mouseup", handleMouseUp);
5357
+ };
5358
+ }, [draggable, transition.rendered]);
5359
+ React.useEffect(() => {
5360
+ if (!open) {
5361
+ dragRef.current = null;
5362
+ setDragOffset({ x: 0, y: 0 });
5363
+ }
5364
+ }, [open]);
5336
5365
  React.useEffect(() => {
5337
5366
  if (!transition.rendered) {
5338
5367
  if (wasRenderedRef.current) {
@@ -5349,11 +5378,13 @@ function ReactModal(props) {
5349
5378
  wasRenderedRef.current = true;
5350
5379
  restoreFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
5351
5380
  }
5352
- lockBodyScroll();
5353
- return unlockBodyScroll;
5354
- }, [afterClose, focusTriggerAfterClose, transition.rendered]);
5381
+ if (mask) {
5382
+ lockBodyScroll();
5383
+ return unlockBodyScroll;
5384
+ }
5385
+ }, [afterClose, focusTriggerAfterClose, mask, transition.rendered]);
5355
5386
  React.useEffect(() => {
5356
- if (!open || !transition.rendered) {
5387
+ if (!mask || !open || !transition.rendered) {
5357
5388
  return;
5358
5389
  }
5359
5390
  const frameId = window.requestAnimationFrame(() => {
@@ -5362,9 +5393,9 @@ function ReactModal(props) {
5362
5393
  return () => {
5363
5394
  window.cancelAnimationFrame(frameId);
5364
5395
  };
5365
- }, [open, transition.rendered]);
5396
+ }, [mask, open, transition.rendered]);
5366
5397
  React.useEffect(() => {
5367
- if (!transition.rendered) {
5398
+ if (!mask || !transition.rendered) {
5368
5399
  return;
5369
5400
  }
5370
5401
  const handleKeyDown = (event) => {
@@ -5382,7 +5413,7 @@ function ReactModal(props) {
5382
5413
  return () => {
5383
5414
  document.removeEventListener("keydown", handleKeyDown);
5384
5415
  };
5385
- }, [keyboard, onCancel, open, transition.rendered]);
5416
+ }, [keyboard, mask, onCancel, open, transition.rendered]);
5386
5417
  const setFullscreen = (nextFullscreen) => {
5387
5418
  if (!controlledFullscreen) {
5388
5419
  setInnerFullscreen(nextFullscreen);
@@ -5467,6 +5498,7 @@ function ReactModal(props) {
5467
5498
  {
5468
5499
  className: joinClassNames(
5469
5500
  `${REACT_COMPONENT_PREFIX}-modal-root`,
5501
+ !mask && `${REACT_COMPONENT_PREFIX}-modal-root-passthrough`,
5470
5502
  centered && `${REACT_COMPONENT_PREFIX}-modal-root-centered`,
5471
5503
  mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-root-fullscreen`,
5472
5504
  transition.className,
@@ -5496,63 +5528,95 @@ function ReactModal(props) {
5496
5528
  mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-fullscreen`,
5497
5529
  className
5498
5530
  ),
5499
- style: { width, ...style },
5531
+ style: {
5532
+ width,
5533
+ ...style,
5534
+ ...draggable && !mergedFullscreen ? {
5535
+ position: "relative",
5536
+ left: dragOffset.x,
5537
+ top: dragOffset.y
5538
+ } : void 0
5539
+ },
5500
5540
  role: "dialog",
5501
- "aria-modal": "true",
5541
+ "aria-modal": mask ? "true" : void 0,
5502
5542
  "aria-label": hasTitle ? void 0 : "\u5BF9\u8BDD\u6846",
5503
5543
  "aria-labelledby": hasTitle ? titleId : void 0,
5504
5544
  tabIndex: -1,
5505
5545
  children: [
5506
- hasTitle || closable || fullscreenable ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-modal-header`, children: [
5507
- /* @__PURE__ */ jsxRuntime.jsx(
5508
- "div",
5509
- {
5510
- id: hasTitle ? titleId : void 0,
5511
- className: `${REACT_COMPONENT_PREFIX}-modal-title`,
5512
- children: title
5513
- }
5514
- ),
5515
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-modal-tools`, children: [
5516
- fullscreenable ? /* @__PURE__ */ jsxRuntime.jsx(
5517
- "button",
5518
- {
5519
- type: "button",
5520
- className: `${REACT_COMPONENT_PREFIX}-modal-tool`,
5521
- title: mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
5522
- "aria-label": mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
5523
- "aria-pressed": mergedFullscreen,
5524
- onClick: () => setFullscreen(!mergedFullscreen),
5525
- children: /* @__PURE__ */ jsxRuntime.jsx(
5526
- "span",
5546
+ hasTitle || closable || fullscreenable ? /* @__PURE__ */ jsxRuntime.jsxs(
5547
+ "div",
5548
+ {
5549
+ className: joinClassNames(
5550
+ `${REACT_COMPONENT_PREFIX}-modal-header`,
5551
+ draggable && !mergedFullscreen ? `${REACT_COMPONENT_PREFIX}-modal-header-draggable` : void 0
5552
+ ),
5553
+ onMouseDown: (event) => {
5554
+ if (!draggable || mergedFullscreen || event.button !== 0) {
5555
+ return;
5556
+ }
5557
+ if (event.target.closest("button")) {
5558
+ return;
5559
+ }
5560
+ dragRef.current = {
5561
+ startX: event.clientX,
5562
+ startY: event.clientY,
5563
+ offsetX: dragOffset.x,
5564
+ offsetY: dragOffset.y
5565
+ };
5566
+ event.preventDefault();
5567
+ },
5568
+ children: [
5569
+ /* @__PURE__ */ jsxRuntime.jsx(
5570
+ "div",
5571
+ {
5572
+ id: hasTitle ? titleId : void 0,
5573
+ className: `${REACT_COMPONENT_PREFIX}-modal-title`,
5574
+ children: title
5575
+ }
5576
+ ),
5577
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-modal-tools`, children: [
5578
+ fullscreenable ? /* @__PURE__ */ jsxRuntime.jsx(
5579
+ "button",
5527
5580
  {
5528
- className: joinClassNames(
5529
- `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon`,
5530
- mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon-exit`
5531
- ),
5532
- "aria-hidden": "true"
5581
+ type: "button",
5582
+ className: `${REACT_COMPONENT_PREFIX}-modal-tool`,
5583
+ title: mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
5584
+ "aria-label": mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
5585
+ "aria-pressed": mergedFullscreen,
5586
+ onClick: () => setFullscreen(!mergedFullscreen),
5587
+ children: /* @__PURE__ */ jsxRuntime.jsx(
5588
+ "span",
5589
+ {
5590
+ className: joinClassNames(
5591
+ `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon`,
5592
+ mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon-exit`
5593
+ ),
5594
+ "aria-hidden": "true"
5595
+ }
5596
+ )
5533
5597
  }
5534
- )
5535
- }
5536
- ) : null,
5537
- closable ? /* @__PURE__ */ jsxRuntime.jsx(
5538
- "button",
5539
- {
5540
- type: "button",
5541
- className: `${REACT_COMPONENT_PREFIX}-modal-tool`,
5542
- title: "\u5173\u95ED",
5543
- "aria-label": "\u5173\u95ED",
5544
- onClick: onCancel,
5545
- children: /* @__PURE__ */ jsxRuntime.jsx(
5546
- "span",
5598
+ ) : null,
5599
+ closable ? /* @__PURE__ */ jsxRuntime.jsx(
5600
+ "button",
5547
5601
  {
5548
- className: `${REACT_COMPONENT_PREFIX}-modal-close-icon`,
5549
- "aria-hidden": "true"
5602
+ type: "button",
5603
+ className: `${REACT_COMPONENT_PREFIX}-modal-tool`,
5604
+ title: "\u5173\u95ED",
5605
+ "aria-label": "\u5173\u95ED",
5606
+ onClick: onCancel,
5607
+ children: /* @__PURE__ */ jsxRuntime.jsx(
5608
+ "span",
5609
+ {
5610
+ className: `${REACT_COMPONENT_PREFIX}-modal-close-icon`,
5611
+ "aria-hidden": "true"
5612
+ }
5613
+ )
5550
5614
  }
5551
- )
5552
- }
5553
- ) : null
5554
- ] })
5555
- ] }) : null,
5615
+ ) : null
5616
+ ] })
5617
+ ]
5618
+ }
5619
+ ) : null,
5556
5620
  /* @__PURE__ */ jsxRuntime.jsx(
5557
5621
  "div",
5558
5622
  {