@canvas-components/react-components 0.3.2 → 0.3.4

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 (8) hide show
  1. package/README.md +11 -4
  2. package/dist/index.cjs +492 -100
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +143 -2
  5. package/dist/index.d.ts +143 -2
  6. package/dist/index.js +483 -102
  7. package/dist/index.js.map +1 -1
  8. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { forwardRef, useRef, useEffect, useImperativeHandle, createContext, useState, useMemo, useLayoutEffect, useContext, Fragment as Fragment$1 } from 'react';
2
+ import { forwardRef, useRef, useEffect, useImperativeHandle, createContext, useState, useMemo, useLayoutEffect, useContext, useSyncExternalStore, cloneElement, Fragment as Fragment$1 } from 'react';
3
3
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
4
4
  import { createPortal } from 'react-dom';
5
5
 
@@ -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:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"]),\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"]) * {\n scrollbar-width: thin;\n scrollbar-color: #aeb4bd transparent;\n}\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"])::-webkit-scrollbar,\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"]) *::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"])::-webkit-scrollbar-track,\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"]) *::-webkit-scrollbar-track {\n background: transparent;\n}\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"])::-webkit-scrollbar-thumb,\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"]) *::-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:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"])::-webkit-scrollbar-thumb:hover,\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"]) *::-webkit-scrollbar-thumb:hover {\n background: #8f98a5;\n background-clip: content-box;\n}\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"])::-webkit-scrollbar-corner,\n:where(.canvas-list-table-root, .react-list-table-shell, .react-xlsx-table-shell, [class^=canvas-react-], [class*=" canvas-react-"]) *::-webkit-scrollbar-corner {\n background: transparent;\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.canvas-react-scrollbar {\n scrollbar-width: thin;\n}\n.canvas-react-scrollbar::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n.canvas-react-scrollbar::-webkit-scrollbar-track {\n background: transparent;\n}\n.canvas-react-scrollbar::-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.canvas-react-scrollbar::-webkit-scrollbar-thumb:hover {\n background: #8f98a5;\n background-clip: content-box;\n}\n.canvas-react-scrollbar::-webkit-scrollbar-corner {\n background: transparent;\n}\n");
30
30
 
31
31
  // src/shared/class-names.ts
32
32
  function joinClassNames(...values) {
@@ -655,7 +655,11 @@ var ReactVirtualList = forwardRef(function ReactVirtualListInner(props, ref) {
655
655
  "div",
656
656
  {
657
657
  ref: hostRef,
658
- className: joinClassNames(`${REACT_COMPONENT_PREFIX}-virtual-list`, className),
658
+ className: joinClassNames(
659
+ `${REACT_COMPONENT_PREFIX}-virtual-list`,
660
+ `${REACT_COMPONENT_PREFIX}-scrollbar`,
661
+ className
662
+ ),
659
663
  style: { height, ...style },
660
664
  onScroll: (event) => {
661
665
  setScrollTop(event.currentTarget.scrollTop);
@@ -5345,6 +5349,7 @@ var bodyOverflowBeforeLock = "";
5345
5349
  function ReactModal(props) {
5346
5350
  const {
5347
5351
  afterClose,
5352
+ afterOpenChange,
5348
5353
  bodyStyle,
5349
5354
  cancelButtonProps,
5350
5355
  cancelText = "\u53D6\u6D88",
@@ -5388,11 +5393,21 @@ function ReactModal(props) {
5388
5393
  const dragRef = useRef(null);
5389
5394
  const restoreFocusRef = useRef(null);
5390
5395
  const wasRenderedRef = useRef(false);
5396
+ const afterOpenChangeRef = useRef(afterOpenChange);
5397
+ const previousOpenRef = useRef();
5398
+ afterOpenChangeRef.current = afterOpenChange;
5391
5399
  const titleId = useCompatibleId(`${REACT_COMPONENT_PREFIX}-modal-title`);
5392
5400
  const controlledFullscreen = fullscreen !== void 0;
5393
5401
  const mergedFullscreen = controlledFullscreen ? Boolean(fullscreen) : innerFullscreen;
5394
5402
  const mergedConfirmLoading = confirmLoading ?? innerConfirmLoading;
5395
5403
  const hasTitle = title !== null && title !== void 0 && title !== false;
5404
+ useEffect(() => {
5405
+ if (previousOpenRef.current === open) {
5406
+ return;
5407
+ }
5408
+ previousOpenRef.current = open;
5409
+ afterOpenChangeRef.current?.(open);
5410
+ }, [open]);
5396
5411
  useEffect(() => {
5397
5412
  if (!draggable || !transition.rendered) return;
5398
5413
  const handleMouseMove = (event) => {
@@ -5971,7 +5986,7 @@ function formatDisplayValue(value, formatter, precision, step) {
5971
5986
  }
5972
5987
 
5973
5988
  // src/components/pagination/style.css
5974
- styleInject('@import "../../styles/variables.css";\n.canvas-react-pagination {\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: 8px;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n white-space: nowrap;\n}\n.canvas-react-pagination-pages {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n flex-wrap: nowrap;\n}\n.canvas-react-pagination-button,\n.canvas-react-pagination-page {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 32px;\n height: 32px;\n padding: 0 10px;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n color 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-pagination-button {\n position: relative;\n width: 32px;\n min-width: 32px;\n padding: 0;\n}\n.canvas-react-pagination-button:hover,\n.canvas-react-pagination-page:hover {\n border-color: var(--canvas-react-color-primary-hover);\n color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-page-active {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-pagination-button:disabled,\n.canvas-react-pagination-page:disabled {\n opacity: 0.48;\n cursor: not-allowed;\n}\n.canvas-react-pagination-ellipsis {\n color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-pagination-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 7px;\n height: 7px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transition:\n border-color 0.18s ease,\n transform 0.18s ease,\n opacity 0.18s ease;\n}\n.canvas-react-pagination-arrow-prev {\n transform: translate(-42%, -50%) rotate(135deg);\n}\n.canvas-react-pagination-arrow-next {\n transform: translate(-58%, -50%) rotate(-45deg);\n}\n.canvas-react-pagination-button:hover .canvas-react-pagination-arrow {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-button:disabled .canvas-react-pagination-arrow {\n opacity: 0.56;\n}\n.canvas-react-pagination-quick {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n flex-wrap: nowrap;\n}\n.canvas-react-pagination-total {\n color: var(--canvas-react-color-text-muted);\n}\n');
5989
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-pagination {\n --canvas-react-pagination-control-size: 32px;\n --canvas-react-pagination-gap: 8px;\n --canvas-react-pagination-padding-inline: 10px;\n --canvas-react-control-height: var(--canvas-react-pagination-control-size);\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--canvas-react-pagination-gap);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n white-space: nowrap;\n}\n.canvas-react-pagination-small {\n --canvas-react-pagination-control-size: 24px;\n --canvas-react-pagination-gap: 4px;\n --canvas-react-pagination-padding-inline: 6px;\n}\n.canvas-react-pagination-large {\n --canvas-react-pagination-control-size: 40px;\n --canvas-react-pagination-gap: 10px;\n --canvas-react-pagination-padding-inline: 14px;\n}\n.canvas-react-pagination-pages {\n display: inline-flex;\n align-items: center;\n gap: var(--canvas-react-pagination-gap);\n flex-wrap: nowrap;\n}\n.canvas-react-pagination-button,\n.canvas-react-pagination-page {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--canvas-react-pagination-control-size);\n height: var(--canvas-react-pagination-control-size);\n padding: 0 var(--canvas-react-pagination-padding-inline);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n color 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-pagination-button {\n position: relative;\n width: var(--canvas-react-pagination-control-size);\n min-width: var(--canvas-react-pagination-control-size);\n padding: 0;\n}\n.canvas-react-pagination-button:hover,\n.canvas-react-pagination-page:hover {\n border-color: var(--canvas-react-color-primary-hover);\n color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-page-active {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-pagination-button:disabled,\n.canvas-react-pagination-page:disabled {\n opacity: 0.48;\n cursor: not-allowed;\n}\n.canvas-react-pagination-ellipsis {\n color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-pagination-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 7px;\n height: 7px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transition:\n border-color 0.18s ease,\n transform 0.18s ease,\n opacity 0.18s ease;\n}\n.canvas-react-pagination-arrow-prev {\n transform: translate(-42%, -50%) rotate(135deg);\n}\n.canvas-react-pagination-arrow-next {\n transform: translate(-58%, -50%) rotate(-45deg);\n}\n.canvas-react-pagination-button:hover .canvas-react-pagination-arrow {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-button:disabled .canvas-react-pagination-arrow {\n opacity: 0.56;\n}\n.canvas-react-pagination-quick {\n display: inline-flex;\n align-items: center;\n gap: var(--canvas-react-pagination-gap);\n flex-wrap: nowrap;\n}\n.canvas-react-pagination-total {\n color: var(--canvas-react-color-text-muted);\n}\n');
5975
5990
  function ReactPagination(props) {
5976
5991
  const {
5977
5992
  current,
@@ -5985,6 +6000,7 @@ function ReactPagination(props) {
5985
6000
  showSizeChanger,
5986
6001
  showTotal,
5987
6002
  simple,
6003
+ size = "middle",
5988
6004
  total
5989
6005
  } = props;
5990
6006
  const [quickValue, setQuickValue] = useState("");
@@ -6012,108 +6028,120 @@ function ReactPagination(props) {
6012
6028
  jumpToPage(Number(quickValue));
6013
6029
  setQuickValue("");
6014
6030
  };
6015
- return /* @__PURE__ */ jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-pagination`, children: [
6016
- showTotal ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: showTotal(total, range) }) : null,
6017
- /* @__PURE__ */ jsx(
6018
- "button",
6019
- {
6020
- type: "button",
6021
- className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
6022
- "aria-label": "\u4E0A\u4E00\u9875",
6023
- disabled: disabled || safeCurrent <= 1,
6024
- onClick: () => jumpToPage(safeCurrent - 1),
6025
- children: /* @__PURE__ */ jsx(
6026
- "span",
6031
+ return /* @__PURE__ */ jsxs(
6032
+ "div",
6033
+ {
6034
+ className: `${REACT_COMPONENT_PREFIX}-pagination ${REACT_COMPONENT_PREFIX}-pagination-${size}`,
6035
+ children: [
6036
+ showTotal ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: showTotal(total, range) }) : null,
6037
+ /* @__PURE__ */ jsx(
6038
+ "button",
6027
6039
  {
6028
- className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-prev`
6040
+ type: "button",
6041
+ className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
6042
+ "aria-label": "\u4E0A\u4E00\u9875",
6043
+ disabled: disabled || safeCurrent <= 1,
6044
+ onClick: () => jumpToPage(safeCurrent - 1),
6045
+ children: /* @__PURE__ */ jsx(
6046
+ "span",
6047
+ {
6048
+ className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-prev`
6049
+ }
6050
+ )
6029
6051
  }
6030
- )
6031
- }
6032
- ),
6033
- simple ? /* @__PURE__ */ jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: [
6034
- safeCurrent,
6035
- " / ",
6036
- totalPages
6037
- ] }) : /* @__PURE__ */ jsx("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-pages`, children: pages.map(
6038
- (item, index) => item === "..." ? /* @__PURE__ */ jsx(
6039
- "span",
6040
- {
6041
- className: `${REACT_COMPONENT_PREFIX}-pagination-ellipsis`,
6042
- children: "..."
6043
- },
6044
- `ellipsis-${index}`
6045
- ) : /* @__PURE__ */ jsx(
6046
- "button",
6047
- {
6048
- type: "button",
6049
- className: [
6050
- `${REACT_COMPONENT_PREFIX}-pagination-page`,
6051
- item === safeCurrent ? `${REACT_COMPONENT_PREFIX}-pagination-page-active` : ""
6052
- ].filter(Boolean).join(" "),
6053
- disabled,
6054
- onClick: () => jumpToPage(item),
6055
- children: item
6056
- },
6057
- item
6058
- )
6059
- ) }),
6060
- /* @__PURE__ */ jsx(
6061
- "button",
6062
- {
6063
- type: "button",
6064
- className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
6065
- "aria-label": "\u4E0B\u4E00\u9875",
6066
- disabled: disabled || safeCurrent >= totalPages,
6067
- onClick: () => jumpToPage(safeCurrent + 1),
6068
- children: /* @__PURE__ */ jsx(
6069
- "span",
6052
+ ),
6053
+ simple ? /* @__PURE__ */ jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: [
6054
+ safeCurrent,
6055
+ " / ",
6056
+ totalPages
6057
+ ] }) : /* @__PURE__ */ jsx("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-pages`, children: pages.map(
6058
+ (item, index) => item === "..." ? /* @__PURE__ */ jsx(
6059
+ "span",
6060
+ {
6061
+ className: `${REACT_COMPONENT_PREFIX}-pagination-ellipsis`,
6062
+ children: "..."
6063
+ },
6064
+ `ellipsis-${index}`
6065
+ ) : /* @__PURE__ */ jsx(
6066
+ "button",
6067
+ {
6068
+ type: "button",
6069
+ className: [
6070
+ `${REACT_COMPONENT_PREFIX}-pagination-page`,
6071
+ item === safeCurrent ? `${REACT_COMPONENT_PREFIX}-pagination-page-active` : ""
6072
+ ].filter(Boolean).join(" "),
6073
+ disabled,
6074
+ onClick: () => jumpToPage(item),
6075
+ children: item
6076
+ },
6077
+ item
6078
+ )
6079
+ ) }),
6080
+ /* @__PURE__ */ jsx(
6081
+ "button",
6070
6082
  {
6071
- className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-next`
6072
- }
6073
- )
6074
- }
6075
- ),
6076
- showSizeChanger && pageSizeOptions?.length ? /* @__PURE__ */ jsx(
6077
- ReactSelect,
6078
- {
6079
- value: String(pageSize),
6080
- disabled,
6081
- style: { width: 108 },
6082
- options: pageSizeOptions.map((size) => ({
6083
- label: `${size} / \u9875`,
6084
- value: size
6085
- })),
6086
- onChange: (value) => {
6087
- const nextPageSize = Number(value);
6088
- if (!Number.isFinite(nextPageSize)) {
6089
- return;
6083
+ type: "button",
6084
+ className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
6085
+ "aria-label": "\u4E0B\u4E00\u9875",
6086
+ disabled: disabled || safeCurrent >= totalPages,
6087
+ onClick: () => jumpToPage(safeCurrent + 1),
6088
+ children: /* @__PURE__ */ jsx(
6089
+ "span",
6090
+ {
6091
+ className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-next`
6092
+ }
6093
+ )
6090
6094
  }
6091
- onPageSizeChange?.(1, nextPageSize);
6092
- }
6093
- }
6094
- ) : null,
6095
- showQuickJumper ? /* @__PURE__ */ jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-quick`, children: [
6096
- /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u8DF3\u81F3" }),
6097
- /* @__PURE__ */ jsx(
6098
- ReactInput,
6099
- {
6100
- value: quickValue,
6101
- disabled,
6102
- style: { width: 72 },
6103
- onChange: (event) => {
6104
- setQuickValue(event.target.value.replace(/[^\d]/g, ""));
6105
- },
6106
- onPressEnter: () => {
6107
- handleQuickCommit();
6108
- },
6109
- onBlur: () => {
6110
- handleQuickCommit();
6095
+ ),
6096
+ showSizeChanger && pageSizeOptions?.length ? /* @__PURE__ */ jsx(
6097
+ ReactSelect,
6098
+ {
6099
+ value: String(pageSize),
6100
+ disabled,
6101
+ style: { width: resolvePaginationSelectWidth(size) },
6102
+ options: pageSizeOptions.map((size2) => ({
6103
+ label: `${size2} / \u9875`,
6104
+ value: size2
6105
+ })),
6106
+ onChange: (value) => {
6107
+ const nextPageSize = Number(value);
6108
+ if (!Number.isFinite(nextPageSize)) {
6109
+ return;
6110
+ }
6111
+ onPageSizeChange?.(1, nextPageSize);
6112
+ }
6111
6113
  }
6112
- }
6113
- ),
6114
- /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u9875" })
6115
- ] }) : null
6116
- ] });
6114
+ ) : null,
6115
+ showQuickJumper ? /* @__PURE__ */ jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-quick`, children: [
6116
+ /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u8DF3\u81F3" }),
6117
+ /* @__PURE__ */ jsx(
6118
+ ReactInput,
6119
+ {
6120
+ value: quickValue,
6121
+ disabled,
6122
+ style: { width: resolvePaginationInputWidth(size) },
6123
+ onChange: (event) => {
6124
+ setQuickValue(event.target.value.replace(/[^\d]/g, ""));
6125
+ },
6126
+ onPressEnter: () => {
6127
+ handleQuickCommit();
6128
+ },
6129
+ onBlur: () => {
6130
+ handleQuickCommit();
6131
+ }
6132
+ }
6133
+ ),
6134
+ /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u9875" })
6135
+ ] }) : null
6136
+ ]
6137
+ }
6138
+ );
6139
+ }
6140
+ function resolvePaginationSelectWidth(size) {
6141
+ return size === "small" ? 92 : size === "large" ? 120 : 108;
6142
+ }
6143
+ function resolvePaginationInputWidth(size) {
6144
+ return size === "small" ? 56 : size === "large" ? 80 : 72;
6117
6145
  }
6118
6146
  function buildPageItems(current, totalPages, showLessItems) {
6119
6147
  if (totalPages <= 1) {
@@ -8040,6 +8068,359 @@ function resolveDecadeStart6(year) {
8040
8068
  return Math.floor(year / 10) * 10;
8041
8069
  }
8042
8070
 
8043
- export { REACT_COMPONENT_PREFIX, ReactAutoComplete, ReactCheckbox, ReactColorPicker, ReactContentScaleProvider, ReactDatePicker, ReactDateRangePicker, ReactDateTimePicker, ReactDateTimeRangePicker, ReactFilterPanel, ReactImagePreview, ReactInput, ReactInputNumber, ReactInputRange, ReactModal, ReactMonthPicker, ReactNumberInput, ReactPagination, ReactPopconfirm, ReactPopup, ReactQuarterPicker, ReactResizablePanels, ReactSelect, ReactTimePicker, ReactTimeRangePicker, ReactTransition, ReactVirtualList, ReactYearPicker, resolveResizablePanelSizes, useReactContentScale, useReactTransition };
8071
+ // src/components/compat/style.css
8072
+ styleInject(".canvas-react-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n min-height: 32px;\n padding: 4px 14px;\n border: 1px solid var(--cc-border-color, #d9d9d9);\n border-radius: 6px;\n color: var(--cc-text-color, #1f2937);\n background: var(--cc-surface-color, #fff);\n cursor: pointer;\n}\n.canvas-react-button:hover:not(:disabled) {\n color: #1677ff;\n border-color: #1677ff;\n}\n.canvas-react-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.canvas-react-button-primary {\n color: #fff;\n border-color: #1677ff;\n background: #1677ff;\n}\n.canvas-react-button-danger {\n color: #dc2626;\n border-color: #fca5a5;\n}\n.canvas-react-button-small {\n min-height: 24px;\n padding: 2px 8px;\n}\n.canvas-react-button-large {\n min-height: 40px;\n padding: 6px 18px;\n}\n.canvas-react-button-icon {\n display: inline-flex;\n}\n.canvas-react-row {\n display: flex;\n flex-flow: row wrap;\n}\n.canvas-react-col {\n min-width: 0;\n padding-inline: 8px;\n}\n.canvas-react-radio-group {\n display: flex;\n gap: 16px;\n}\n.canvas-react-radio {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n}\n.canvas-react-radio input {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-radio-mark {\n width: 14px;\n height: 14px;\n border: 1px solid #94a3b8;\n border-radius: 50%;\n box-sizing: border-box;\n}\n.canvas-react-radio input:checked + .canvas-react-radio-mark {\n border: 4px solid #1677ff;\n}\n.canvas-react-form-item {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin-bottom: 16px;\n}\n.canvas-react-form-label {\n color: #334155;\n font-size: 14px;\n}\n.canvas-react-form-error {\n color: #dc2626;\n font-size: 12px;\n}\n.canvas-react-textarea {\n width: 100%;\n min-height: 72px;\n padding: 8px 10px;\n border: 1px solid #d9d9d9;\n border-radius: 6px;\n box-sizing: border-box;\n font: inherit;\n resize: vertical;\n}\n.canvas-react-message-host {\n position: fixed;\n z-index: 3000;\n top: 24px;\n left: 50%;\n display: flex;\n flex-direction: column;\n gap: 8px;\n transform: translateX(-50%);\n pointer-events: none;\n}\n.canvas-react-message {\n padding: 9px 14px;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n color: #334155;\n background: #fff;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.canvas-react-message-error {\n color: #b91c1c;\n border-color: #fecaca;\n}\n");
8073
+ function ReactButton({
8074
+ children,
8075
+ className,
8076
+ danger,
8077
+ htmlType = "button",
8078
+ icon,
8079
+ size = "middle",
8080
+ type = "default",
8081
+ ...props
8082
+ }) {
8083
+ return /* @__PURE__ */ jsxs(
8084
+ "button",
8085
+ {
8086
+ ...props,
8087
+ type: htmlType,
8088
+ className: joinClassNames(
8089
+ `${REACT_COMPONENT_PREFIX}-button`,
8090
+ `${REACT_COMPONENT_PREFIX}-button-${type}`,
8091
+ `${REACT_COMPONENT_PREFIX}-button-${size}`,
8092
+ danger && `${REACT_COMPONENT_PREFIX}-button-danger`,
8093
+ className
8094
+ ),
8095
+ children: [
8096
+ icon ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-button-icon`, children: icon }) : null,
8097
+ children
8098
+ ]
8099
+ }
8100
+ );
8101
+ }
8102
+ function ReactFlex({
8103
+ vertical,
8104
+ justify,
8105
+ align,
8106
+ gap,
8107
+ style,
8108
+ ...props
8109
+ }) {
8110
+ return /* @__PURE__ */ jsx(
8111
+ "div",
8112
+ {
8113
+ ...props,
8114
+ style: {
8115
+ display: "flex",
8116
+ flexDirection: vertical ? "column" : "row",
8117
+ justifyContent: justify,
8118
+ alignItems: align,
8119
+ gap,
8120
+ ...style
8121
+ }
8122
+ }
8123
+ );
8124
+ }
8125
+ function ReactRow({ gutter = 0, style, ...props }) {
8126
+ return /* @__PURE__ */ jsx(
8127
+ "div",
8128
+ {
8129
+ ...props,
8130
+ className: joinClassNames(
8131
+ `${REACT_COMPONENT_PREFIX}-row`,
8132
+ props.className
8133
+ ),
8134
+ style: { marginInline: -gutter / 2, ...style }
8135
+ }
8136
+ );
8137
+ }
8138
+ function ReactCol({ span = 24, style, ...props }) {
8139
+ return /* @__PURE__ */ jsx(
8140
+ "div",
8141
+ {
8142
+ ...props,
8143
+ className: joinClassNames(
8144
+ `${REACT_COMPONENT_PREFIX}-col`,
8145
+ props.className
8146
+ ),
8147
+ style: {
8148
+ flex: `0 0 ${span / 24 * 100}%`,
8149
+ maxWidth: `${span / 24 * 100}%`,
8150
+ ...style
8151
+ }
8152
+ }
8153
+ );
8154
+ }
8155
+ function ReactTooltip({ title, children }) {
8156
+ return cloneElement(children, {
8157
+ title: typeof title === "string" ? title : void 0,
8158
+ "aria-label": typeof title === "string" ? title : void 0
8159
+ });
8160
+ }
8161
+ var RadioGroupContext = createContext({});
8162
+ function ReactRadioOption({
8163
+ value,
8164
+ checked,
8165
+ disabled,
8166
+ onChange,
8167
+ children,
8168
+ className,
8169
+ ...props
8170
+ }) {
8171
+ const group = useContext(RadioGroupContext);
8172
+ const selected = checked ?? String(group.value ?? "") === String(value);
8173
+ return /* @__PURE__ */ jsxs(
8174
+ "label",
8175
+ {
8176
+ ...props,
8177
+ className: joinClassNames(
8178
+ `${REACT_COMPONENT_PREFIX}-radio`,
8179
+ disabled && `${REACT_COMPONENT_PREFIX}-radio-disabled`,
8180
+ className
8181
+ ),
8182
+ children: [
8183
+ /* @__PURE__ */ jsx(
8184
+ "input",
8185
+ {
8186
+ type: "radio",
8187
+ checked: selected,
8188
+ disabled,
8189
+ onChange: () => {
8190
+ const event = { target: { value } };
8191
+ onChange?.(event);
8192
+ group.onChange?.(event);
8193
+ }
8194
+ }
8195
+ ),
8196
+ /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-radio-mark` }),
8197
+ /* @__PURE__ */ jsx("span", { children })
8198
+ ]
8199
+ }
8200
+ );
8201
+ }
8202
+ function ReactRadioGroup({
8203
+ value,
8204
+ onChange,
8205
+ className,
8206
+ ...props
8207
+ }) {
8208
+ return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { value, onChange }, children: /* @__PURE__ */ jsx(
8209
+ "div",
8210
+ {
8211
+ ...props,
8212
+ className: joinClassNames(
8213
+ `${REACT_COMPONENT_PREFIX}-radio-group`,
8214
+ className
8215
+ )
8216
+ }
8217
+ ) });
8218
+ }
8219
+ var ReactRadio = Object.assign(ReactRadioOption, {
8220
+ Group: ReactRadioGroup
8221
+ });
8222
+ function ReactTextArea({ className, ...props }) {
8223
+ return /* @__PURE__ */ jsx(
8224
+ "textarea",
8225
+ {
8226
+ ...props,
8227
+ className: joinClassNames(
8228
+ `${REACT_COMPONENT_PREFIX}-textarea`,
8229
+ className
8230
+ )
8231
+ }
8232
+ );
8233
+ }
8234
+ function createFormInstance() {
8235
+ const store = {
8236
+ values: {},
8237
+ initialValues: {},
8238
+ errors: {},
8239
+ rules: /* @__PURE__ */ new Map(),
8240
+ listeners: /* @__PURE__ */ new Set(),
8241
+ revision: 0,
8242
+ notify() {
8243
+ store.revision += 1;
8244
+ store.listeners.forEach((listener) => listener());
8245
+ }
8246
+ };
8247
+ return {
8248
+ __store: store,
8249
+ getFieldValue: (name) => store.values[name],
8250
+ setFieldsValue(values) {
8251
+ store.values = { ...store.values, ...values };
8252
+ Object.keys(values).forEach((name) => {
8253
+ delete store.errors[name];
8254
+ });
8255
+ store.notify();
8256
+ },
8257
+ resetFields() {
8258
+ store.values = { ...store.initialValues };
8259
+ store.errors = {};
8260
+ store.notify();
8261
+ },
8262
+ async validateFields() {
8263
+ const errors = {};
8264
+ for (const [name, rules] of store.rules) {
8265
+ const value = store.values[name];
8266
+ for (const rawRule of rules) {
8267
+ const rule = typeof rawRule === "function" ? rawRule({ getFieldValue: (field) => store.values[field] }) : rawRule;
8268
+ if (rule.required && (value === void 0 || value === null || value === "")) {
8269
+ errors[name] = rule.message ?? "\u6B64\u9879\u4E3A\u5FC5\u586B\u9879";
8270
+ break;
8271
+ }
8272
+ if ((rule.type === "number" || rule.type === "integer") && typeof value === "number" && rule.min !== void 0 && value < rule.min) {
8273
+ errors[name] = rule.message ?? `\u4E0D\u80FD\u5C0F\u4E8E ${rule.min}`;
8274
+ break;
8275
+ }
8276
+ if ((rule.type === "number" || rule.type === "integer") && typeof value === "number" && rule.max !== void 0 && value > rule.max) {
8277
+ errors[name] = rule.message ?? `\u4E0D\u80FD\u5927\u4E8E ${rule.max}`;
8278
+ break;
8279
+ }
8280
+ if (rule.type === "integer" && typeof value === "number" && !Number.isInteger(value)) {
8281
+ errors[name] = rule.message ?? "\u8BF7\u8F93\u5165\u6574\u6570";
8282
+ break;
8283
+ }
8284
+ if (rule.validator) {
8285
+ try {
8286
+ await rule.validator(rule, value);
8287
+ } catch (error) {
8288
+ errors[name] = error instanceof Error ? error.message : "\u6821\u9A8C\u5931\u8D25";
8289
+ break;
8290
+ }
8291
+ }
8292
+ }
8293
+ }
8294
+ store.errors = errors;
8295
+ store.notify();
8296
+ if (Object.keys(errors).length > 0) {
8297
+ return Promise.reject({
8298
+ errorFields: errors,
8299
+ values: { ...store.values }
8300
+ });
8301
+ }
8302
+ return { ...store.values };
8303
+ }
8304
+ };
8305
+ }
8306
+ function useReactForm() {
8307
+ const formRef = useRef();
8308
+ if (!formRef.current) formRef.current = createFormInstance();
8309
+ return [formRef.current];
8310
+ }
8311
+ function useReactFormWatch(name, form) {
8312
+ return useSyncExternalStore(
8313
+ (listener) => {
8314
+ form.__store.listeners.add(listener);
8315
+ return () => form.__store.listeners.delete(listener);
8316
+ },
8317
+ () => form.__store.revision,
8318
+ () => 0
8319
+ ) >= 0 ? form.getFieldValue(name) : void 0;
8320
+ }
8321
+ var FormContext = createContext(null);
8322
+ function ReactFormRoot({
8323
+ form,
8324
+ initialValues,
8325
+ layout = "vertical",
8326
+ className,
8327
+ children,
8328
+ ...props
8329
+ }) {
8330
+ const initialKey = useMemo(
8331
+ () => JSON.stringify(initialValues ?? {}),
8332
+ [initialValues]
8333
+ );
8334
+ useEffect(() => {
8335
+ form.__store.initialValues = { ...initialValues };
8336
+ form.__store.values = { ...initialValues, ...form.__store.values };
8337
+ form.__store.notify();
8338
+ }, [form, initialKey]);
8339
+ return /* @__PURE__ */ jsx(FormContext.Provider, { value: form, children: /* @__PURE__ */ jsx(
8340
+ "form",
8341
+ {
8342
+ ...props,
8343
+ className: joinClassNames(
8344
+ `${REACT_COMPONENT_PREFIX}-form`,
8345
+ `${REACT_COMPONENT_PREFIX}-form-${layout}`,
8346
+ className
8347
+ ),
8348
+ onSubmit: (event) => event.preventDefault(),
8349
+ children
8350
+ }
8351
+ ) });
8352
+ }
8353
+ function ReactFormItem({
8354
+ label,
8355
+ name,
8356
+ children,
8357
+ rules = [],
8358
+ initialValue
8359
+ }) {
8360
+ const form = useContext(FormContext);
8361
+ if (!form) throw new Error("ReactForm.Item \u5FC5\u987B\u5728 ReactForm \u5185\u4F7F\u7528");
8362
+ useSyncExternalStore(
8363
+ (listener) => {
8364
+ form.__store.listeners.add(listener);
8365
+ return () => form.__store.listeners.delete(listener);
8366
+ },
8367
+ () => form.__store.revision,
8368
+ () => 0
8369
+ );
8370
+ useEffect(() => {
8371
+ form.__store.rules.set(name, rules);
8372
+ if (form.getFieldValue(name) === void 0 && initialValue !== void 0) {
8373
+ form.setFieldsValue({ [name]: initialValue });
8374
+ }
8375
+ return () => {
8376
+ form.__store.rules.delete(name);
8377
+ };
8378
+ }, [form, initialValue, name, rules]);
8379
+ const childProps = children.props;
8380
+ const value = form.getFieldValue(name);
8381
+ return /* @__PURE__ */ jsxs("label", { className: `${REACT_COMPONENT_PREFIX}-form-item`, children: [
8382
+ label ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-label`, children: label }) : null,
8383
+ cloneElement(children, {
8384
+ value: value ?? "",
8385
+ onChange: (...args) => {
8386
+ const first = args[0];
8387
+ const nextValue = typeof first === "object" && first !== null && "target" in first ? first.target?.value : first;
8388
+ form.setFieldsValue({ [name]: nextValue });
8389
+ const childOnChange = childProps.onChange;
8390
+ if (typeof childOnChange === "function") childOnChange(...args);
8391
+ }
8392
+ }),
8393
+ form.__store.errors[name] ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-error`, children: form.__store.errors[name] }) : null
8394
+ ] });
8395
+ }
8396
+ var ReactForm = Object.assign(ReactFormRoot, {
8397
+ Item: ReactFormItem,
8398
+ useForm: useReactForm,
8399
+ useWatch: useReactFormWatch
8400
+ });
8401
+ function showMessage(type, content) {
8402
+ if (typeof document === "undefined") return;
8403
+ const hostId = `${REACT_COMPONENT_PREFIX}-message-host`;
8404
+ let host = document.getElementById(hostId);
8405
+ if (!host) {
8406
+ host = document.createElement("div");
8407
+ host.id = hostId;
8408
+ host.className = hostId;
8409
+ document.body.appendChild(host);
8410
+ }
8411
+ const item = document.createElement("div");
8412
+ item.className = `${REACT_COMPONENT_PREFIX}-message ${REACT_COMPONENT_PREFIX}-message-${type}`;
8413
+ item.textContent = typeof content === "string" ? content : String(content ?? "");
8414
+ host.appendChild(item);
8415
+ window.setTimeout(() => item.remove(), 3e3);
8416
+ }
8417
+ var reactMessage = {
8418
+ info: (content) => showMessage("info", content),
8419
+ success: (content) => showMessage("success", content),
8420
+ warning: (content) => showMessage("warning", content),
8421
+ error: (content) => showMessage("error", content)
8422
+ };
8423
+
8424
+ export { REACT_COMPONENT_PREFIX, ReactAutoComplete, ReactButton, ReactCheckbox, ReactCol, ReactColorPicker, ReactContentScaleProvider, ReactDatePicker, ReactDateRangePicker, ReactDateTimePicker, ReactDateTimeRangePicker, ReactFilterPanel, ReactFlex, ReactForm, ReactImagePreview, ReactInput, ReactInputNumber, ReactInputRange, ReactModal, ReactMonthPicker, ReactNumberInput, ReactPagination, ReactPopconfirm, ReactPopup, ReactQuarterPicker, ReactRadio, ReactResizablePanels, ReactRow, ReactSelect, ReactTextArea, ReactTimePicker, ReactTimeRangePicker, ReactTooltip, ReactTransition, ReactVirtualList, ReactYearPicker, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
8044
8425
  //# sourceMappingURL=index.js.map
8045
8426
  //# sourceMappingURL=index.js.map