@canvas-components/react-components 0.2.0 → 0.3.1

package/dist/index.cjs

@@ -47,7 +47,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/styles/variables.css
-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");
+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");
 
 // src/shared/class-names.ts
 function joinClassNames(...values) {
@@ -1128,16 +1128,31 @@ var operators = [
 ];
 function ReactFilterPanel(props) {
   const { request } = props;
-  const [draft, setDraft] = React.useState(request?.value ?? null);
+  const [draft, setDraft] = React.useState(() => createDraft(request?.value));
   const [tab, setTab] = React.useState(resolveTab(request?.value));
   const [options, setOptions] = React.useState(request?.options ?? []);
   const [loading, setLoading] = React.useState(Boolean(request?.loadOptions));
+  const conditionListRef = React.useRef(null);
+  const [conditionListOverflowing, setConditionListOverflowing] = React.useState(false);
   React.useEffect(() => {
-    setDraft(request?.value ?? null);
+    setDraft(createDraft(request?.value));
     setTab(resolveTab(request?.value));
     setOptions(request?.options ?? []);
     setLoading(Boolean(request?.loadOptions));
   }, [request]);
+  React.useLayoutEffect(() => {
+    const element = conditionListRef.current;
+    if (!element || tab !== "condition") {
+      setConditionListOverflowing(false);
+      return;
+    }
+    const measure = () => setConditionListOverflowing(element.scrollHeight > element.clientHeight + 1);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [draft?.conditions, tab]);
   React.useEffect(() => {
     if (!request?.loadOptions) return;
     const controller = new AbortController();
@@ -1172,6 +1187,20 @@ function ReactFilterPanel(props) {
   const allChecked = visibleKeys.length > 0 && selectedCount === visibleKeys.length;
   const allCount = request.options.find((item) => item.kind === "all")?.count ?? visibleOptions.filter((item) => item.kind === "value").reduce((sum, item) => sum + item.count, 0);
   const update = (patch) => setDraft((current) => ({ ...current ?? request.value, ...patch }));
+  const updateConditions = (conditions) => {
+    const first = conditions[0] ?? createEmptyCondition();
+    const second = conditions[1] ?? createEmptyCondition();
+    update({
+      conditions,
+      filterType: "condition",
+      conditionOperator: first.operator,
+      conditionValue: first.value ?? "",
+      conditionSecondValue: first.secondValue ?? "",
+      secondConditionOperator: second.operator,
+      secondConditionValue: second.value ?? "",
+      secondConditionSecondValue: second.secondValue ?? ""
+    });
+  };
   const toggle = (keys, checked) => {
     const next = new Set(draft.selectedKeys ?? []);
     keys.forEach((key) => checked ? next.add(key) : next.delete(key));
@@ -1278,97 +1307,138 @@ function ReactFilterPanel(props) {
               )
             }
           ) })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 12, display: "grid", gap: 12, minHeight: 290, alignContent: "start", flex: "1 1 auto" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ConditionEditor,
-            {
-              label: request.texts.firstConditionLabel,
-              operator: draft.conditionOperator ?? "none",
-              value: draft.conditionValue ?? "",
-              secondValue: draft.conditionSecondValue ?? "",
-              texts: request.texts,
-              onChange: (patch) => update(patch),
-              onSubmit: apply
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { style: fieldLabelStyle, children: request.texts.relationLabel }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ReactSelect,
-              {
-                value: draft.conditionRelation === "or" ? "or" : "and",
-                allowClear: false,
-                options: [{ label: request.texts.relationAndLabel, value: "and" }, { label: request.texts.relationOrLabel, value: "or" }],
-                onChange: (value) => update({ conditionRelation: value, filterType: "condition" }),
-                style: { width: "100%" }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ConditionEditor,
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 12, display: "flex", flexDirection: "column", gap: 10, minHeight: 0, flex: "1 1 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: conditionListRef,
+            className: "react-filter-panel-condition-list",
+            style: { ...conditionListStyle, overflowY: conditionListOverflowing ? "auto" : "hidden" },
+            children: (draft.conditions ?? []).map((condition, index, conditions) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+              index > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-filter-panel-condition-relation", style: conditionRowStyle, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: inlineLabelStyle, children: request.texts.relationLabel }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ReactSelect,
+                  {
+                    value: draft.conditionRelation === "or" ? "or" : "and",
+                    allowClear: false,
+                    options: [{ label: request.texts.relationAndLabel, value: "and" }, { label: request.texts.relationOrLabel, value: "or" }],
+                    onChange: (value) => update({ conditionRelation: value, filterType: "condition" }),
+                    style: { width: "100%" }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", {})
+              ] }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ConditionEditor,
+                {
+                  label: resolveConditionLabel(request.texts, index),
+                  condition,
+                  texts: request.texts,
+                  canDelete: conditions.length > 1,
+                  onDelete: () => updateConditions(conditions.filter((_item, itemIndex) => itemIndex !== index)),
+                  onChange: (nextCondition) => updateConditions(conditions.map((item, itemIndex) => itemIndex === index ? nextCondition : item)),
+                  onSubmit: apply
+                }
+              )
+            ] }, index))
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-filter-panel-footer", style: footerStyle, children: [
+          tab === "condition" ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
             {
-              second: true,
-              label: request.texts.secondConditionLabel,
-              operator: draft.secondConditionOperator ?? "none",
-              value: draft.secondConditionValue ?? "",
-              secondValue: draft.secondConditionSecondValue ?? "",
-              texts: request.texts,
-              onChange: (patch) => update(patch),
-              onSubmit: apply
+              type: "button",
+              style: addConditionStyle,
+              onClick: () => updateConditions([...draft.conditions ?? [], createEmptyCondition()]),
+              children: [
+                "+ ",
+                request.texts.addConditionAction ?? "\u65B0\u589E\u6761\u4EF6"
+              ]
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: actionStyle(false), onClick: () => {
-            request.onReset();
-            request.onClose();
-          }, children: request.texts.resetAction }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: actionStyle(true), onClick: apply, children: request.texts.applyAction })
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-filter-panel-footer-actions", style: footerActionsStyle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: actionStyle(false), onClick: () => {
+              request.onReset();
+              request.onClose();
+            }, children: request.texts.resetAction }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: actionStyle(true), onClick: apply, children: request.texts.applyAction })
+          ] })
         ] })
       ] })
     }
   );
 }
 function ConditionEditor(props) {
-  const prefix = props.second ? "secondCondition" : "condition";
-  const hidesValue = ["none", "blank", "notBlank"].includes(props.operator);
-  const needsSecond = ["between", "notBetween"].includes(props.operator);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: fieldLabelStyle, children: props.label }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ReactSelect,
-      {
-        value: props.operator,
-        options: operators,
-        allowClear: false,
-        onChange: (value) => props.onChange({ [`${prefix}Operator`]: value, filterType: "condition" }),
-        style: { width: "100%" }
-      }
-    ),
-    hidesValue ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gap: 8, marginTop: 8 }, children: [
+  const hidesValue = ["none", "blank", "notBlank"].includes(props.condition.operator);
+  const needsSecond = ["between", "notBetween"].includes(props.condition.operator);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: conditionEditorStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-filter-panel-condition-row", style: conditionRowStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: inlineLabelStyle, children: props.label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ReactSelect,
+        {
+          value: props.condition.operator,
+          options: operators,
+          allowClear: false,
+          onChange: (value) => props.onChange({ ...props.condition, operator: value }),
+          style: { width: "100%" }
+        }
+      ),
+      props.canDelete ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          title: `${props.texts.deleteConditionAction ?? "\u5220\u9664\u6761\u4EF6"} ${props.label}`,
+          "aria-label": `${props.texts.deleteConditionAction ?? "\u5220\u9664\u6761\u4EF6"} ${props.label}`,
+          style: deleteConditionStyle,
+          onClick: props.onDelete,
+          children: "\xD7"
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("span", {})
+    ] }),
+    hidesValue ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: conditionValueStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         ReactInput,
         {
-          value: props.value,
+          value: props.condition.value ?? "",
           placeholder: props.texts.firstValuePlaceholder,
           onPressEnter: props.onSubmit,
-          onChange: (event) => props.onChange({ [`${prefix}Value`]: event.target.value, filterType: "condition" }),
+          onChange: (event) => props.onChange({ ...props.condition, value: event.target.value }),
           style: { width: "100%" }
         }
       ),
       needsSecond ? /* @__PURE__ */ jsxRuntime.jsx(
         ReactInput,
         {
-          value: props.secondValue,
+          value: props.condition.secondValue ?? "",
           placeholder: props.texts.secondValuePlaceholder,
           onPressEnter: props.onSubmit,
-          onChange: (event) => props.onChange({ [`${prefix}SecondValue`]: event.target.value, filterType: "condition" }),
+          onChange: (event) => props.onChange({ ...props.condition, secondValue: event.target.value }),
           style: { width: "100%" }
         }
       ) : null
     ] })
   ] });
 }
+function createDraft(value) {
+  if (!value) return null;
+  return { ...value, conditions: resolveDraftConditions(value) };
+}
+function resolveDraftConditions(value) {
+  if (value.conditions?.length) return value.conditions.map((condition) => ({ ...condition }));
+  return [
+    { operator: value.conditionOperator ?? "none", value: value.conditionValue ?? "", secondValue: value.conditionSecondValue ?? "" },
+    { operator: value.secondConditionOperator ?? "none", value: value.secondConditionValue ?? "", secondValue: value.secondConditionSecondValue ?? "" }
+  ];
+}
+function createEmptyCondition() {
+  return { operator: "none", value: "", secondValue: "" };
+}
+function resolveConditionLabel(texts, index) {
+  if (index === 0) return texts.firstConditionLabel;
+  if (index === 1) return texts.secondConditionLabel;
+  return `${texts.conditionLabel ?? "\u6761\u4EF6"} ${index + 1}`;
+}
 function resolveTab(value) {
   return value?.filterType === "condition" || value?.conditionOperator && value.conditionOperator !== "none" ? "condition" : "value";
 }
@@ -1380,7 +1450,15 @@ function optionLabel(item, texts) {
 var checkLabelStyle = { display: "inline-flex", alignItems: "center", gap: 8, color: "#374151", fontSize: 14 };
 var optionStyle = { display: "flex", alignItems: "center", gap: 8, minHeight: 40, padding: "4px 8px", borderRadius: 6, color: "#374151", fontSize: 14, cursor: "pointer", boxSizing: "border-box" };
 var optionTextStyle = { display: "block", flex: "1 1 0", width: 0, minWidth: 0, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" };
-var fieldLabelStyle = { marginBottom: 6, fontSize: 12, color: "#6b7280" };
+var conditionListStyle = { display: "grid", gap: 8, minHeight: 0, flex: "1 1 auto", alignContent: "start", paddingRight: 3 };
+var conditionEditorStyle = { display: "grid", gap: 8 };
+var conditionRowStyle = { display: "grid", gridTemplateColumns: "56px minmax(0, 1fr) 22px", alignItems: "center", gap: 8 };
+var inlineLabelStyle = { color: "#6b7280", fontSize: 12, whiteSpace: "nowrap" };
+var conditionValueStyle = { display: "grid", gap: 8, marginLeft: 64, marginRight: 30 };
+var addConditionStyle = { height: 32, padding: "0 10px", border: "1px solid #91caff", borderRadius: 6, background: "#f0f7ff", color: "#1677ff", cursor: "pointer", whiteSpace: "nowrap" };
+var deleteConditionStyle = { width: 22, height: 22, padding: 0, border: 0, borderRadius: 4, background: "transparent", color: "#9ca3af", fontSize: 18, lineHeight: "20px", cursor: "pointer" };
+var footerStyle = { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 };
+var footerActionsStyle = { display: "flex", gap: 8, marginLeft: "auto" };
 function tabStyle(active) {
   return { flex: 1, height: 32, border: active ? "1px solid #1677ff" : "1px solid #d9d9d9", borderRadius: 6, background: active ? "#e6f4ff" : "#fff", color: active ? "#1677ff" : "#374151", cursor: "pointer" };
 }
@@ -5273,7 +5351,7 @@ function useCompatibleId(prefix = "canvas-react-id") {
 }
 
 // src/components/modal/style.css
-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');
+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');
 var MODAL_MOTION_DURATION = 200;
 var FOCUSABLE_SELECTOR = [
   "a[href]",
@@ -5297,6 +5375,7 @@ function ReactModal(props) {
     closable = true,
     confirmLoading,
     defaultFullscreen = false,
+    draggable = false,
     focusTriggerAfterClose = true,
     footer,
     fullscreen,
@@ -5325,7 +5404,9 @@ function ReactModal(props) {
   });
   const [innerFullscreen, setInnerFullscreen] = React.useState(defaultFullscreen);
   const [innerConfirmLoading, setInnerConfirmLoading] = React.useState(false);
+  const [dragOffset, setDragOffset] = React.useState({ x: 0, y: 0 });
   const panelRef = React.useRef(null);
+  const dragRef = React.useRef(null);
   const restoreFocusRef = React.useRef(null);
   const wasRenderedRef = React.useRef(false);
   const titleId = useCompatibleId(`${REACT_COMPONENT_PREFIX}-modal-title`);
@@ -5333,6 +5414,32 @@ function ReactModal(props) {
   const mergedFullscreen = controlledFullscreen ? Boolean(fullscreen) : innerFullscreen;
   const mergedConfirmLoading = confirmLoading ?? innerConfirmLoading;
   const hasTitle = title !== null && title !== void 0 && title !== false;
+  React.useEffect(() => {
+    if (!draggable || !transition.rendered) return;
+    const handleMouseMove = (event) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      setDragOffset({
+        x: drag.offsetX + event.clientX - drag.startX,
+        y: drag.offsetY + event.clientY - drag.startY
+      });
+    };
+    const handleMouseUp = () => {
+      dragRef.current = null;
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [draggable, transition.rendered]);
+  React.useEffect(() => {
+    if (!open) {
+      dragRef.current = null;
+      setDragOffset({ x: 0, y: 0 });
+    }
+  }, [open]);
   React.useEffect(() => {
     if (!transition.rendered) {
       if (wasRenderedRef.current) {
@@ -5349,11 +5456,13 @@ function ReactModal(props) {
       wasRenderedRef.current = true;
       restoreFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     }
-    lockBodyScroll();
-    return unlockBodyScroll;
-  }, [afterClose, focusTriggerAfterClose, transition.rendered]);
+    if (mask) {
+      lockBodyScroll();
+      return unlockBodyScroll;
+    }
+  }, [afterClose, focusTriggerAfterClose, mask, transition.rendered]);
   React.useEffect(() => {
-    if (!open || !transition.rendered) {
+    if (!mask || !open || !transition.rendered) {
       return;
     }
     const frameId = window.requestAnimationFrame(() => {
@@ -5362,9 +5471,9 @@ function ReactModal(props) {
     return () => {
       window.cancelAnimationFrame(frameId);
     };
-  }, [open, transition.rendered]);
+  }, [mask, open, transition.rendered]);
   React.useEffect(() => {
-    if (!transition.rendered) {
+    if (!mask || !transition.rendered) {
       return;
     }
     const handleKeyDown = (event) => {
@@ -5382,7 +5491,7 @@ function ReactModal(props) {
     return () => {
       document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [keyboard, onCancel, open, transition.rendered]);
+  }, [keyboard, mask, onCancel, open, transition.rendered]);
   const setFullscreen = (nextFullscreen) => {
     if (!controlledFullscreen) {
       setInnerFullscreen(nextFullscreen);
@@ -5467,6 +5576,7 @@ function ReactModal(props) {
       {
         className: joinClassNames(
           `${REACT_COMPONENT_PREFIX}-modal-root`,
+          !mask && `${REACT_COMPONENT_PREFIX}-modal-root-passthrough`,
           centered && `${REACT_COMPONENT_PREFIX}-modal-root-centered`,
           mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-root-fullscreen`,
           transition.className,
@@ -5496,63 +5606,95 @@ function ReactModal(props) {
                 mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-fullscreen`,
                 className
               ),
-              style: { width, ...style },
+              style: {
+                width,
+                ...style,
+                ...draggable && !mergedFullscreen ? {
+                  position: "relative",
+                  left: dragOffset.x,
+                  top: dragOffset.y
+                } : void 0
+              },
               role: "dialog",
-              "aria-modal": "true",
+              "aria-modal": mask ? "true" : void 0,
               "aria-label": hasTitle ? void 0 : "\u5BF9\u8BDD\u6846",
               "aria-labelledby": hasTitle ? titleId : void 0,
               tabIndex: -1,
               children: [
-                hasTitle || closable || fullscreenable ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-modal-header`, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      id: hasTitle ? titleId : void 0,
-                      className: `${REACT_COMPONENT_PREFIX}-modal-title`,
-                      children: title
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-modal-tools`, children: [
-                    fullscreenable ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        className: `${REACT_COMPONENT_PREFIX}-modal-tool`,
-                        title: mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
-                        "aria-label": mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
-                        "aria-pressed": mergedFullscreen,
-                        onClick: () => setFullscreen(!mergedFullscreen),
-                        children: /* @__PURE__ */ jsxRuntime.jsx(
-                          "span",
+                hasTitle || closable || fullscreenable ? /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: joinClassNames(
+                      `${REACT_COMPONENT_PREFIX}-modal-header`,
+                      draggable && !mergedFullscreen ? `${REACT_COMPONENT_PREFIX}-modal-header-draggable` : void 0
+                    ),
+                    onMouseDown: (event) => {
+                      if (!draggable || mergedFullscreen || event.button !== 0) {
+                        return;
+                      }
+                      if (event.target.closest("button")) {
+                        return;
+                      }
+                      dragRef.current = {
+                        startX: event.clientX,
+                        startY: event.clientY,
+                        offsetX: dragOffset.x,
+                        offsetY: dragOffset.y
+                      };
+                      event.preventDefault();
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          id: hasTitle ? titleId : void 0,
+                          className: `${REACT_COMPONENT_PREFIX}-modal-title`,
+                          children: title
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-modal-tools`, children: [
+                        fullscreenable ? /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
                           {
-                            className: joinClassNames(
-                              `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon`,
-                              mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon-exit`
-                            ),
-                            "aria-hidden": "true"
+                            type: "button",
+                            className: `${REACT_COMPONENT_PREFIX}-modal-tool`,
+                            title: mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
+                            "aria-label": mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
+                            "aria-pressed": mergedFullscreen,
+                            onClick: () => setFullscreen(!mergedFullscreen),
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              "span",
+                              {
+                                className: joinClassNames(
+                                  `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon`,
+                                  mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon-exit`
+                                ),
+                                "aria-hidden": "true"
+                              }
+                            )
                           }
-                        )
-                      }
-                    ) : null,
-                    closable ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        className: `${REACT_COMPONENT_PREFIX}-modal-tool`,
-                        title: "\u5173\u95ED",
-                        "aria-label": "\u5173\u95ED",
-                        onClick: onCancel,
-                        children: /* @__PURE__ */ jsxRuntime.jsx(
-                          "span",
+                        ) : null,
+                        closable ? /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
                           {
-                            className: `${REACT_COMPONENT_PREFIX}-modal-close-icon`,
-                            "aria-hidden": "true"
+                            type: "button",
+                            className: `${REACT_COMPONENT_PREFIX}-modal-tool`,
+                            title: "\u5173\u95ED",
+                            "aria-label": "\u5173\u95ED",
+                            onClick: onCancel,
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              "span",
+                              {
+                                className: `${REACT_COMPONENT_PREFIX}-modal-close-icon`,
+                                "aria-hidden": "true"
+                              }
+                            )
                           }
-                        )
-                      }
-                    ) : null
-                  ] })
-                ] }) : null,
+                        ) : null
+                      ] })
+                    ]
+                  }
+                ) : null,
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {