@canvas-components/react-components 0.3.5 → 0.3.7

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 +165 -62
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +10 -2
  4. package/dist/index.d.ts +10 -2
  5. package/dist/index.js +165 -62
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -490,7 +490,13 @@ interface ReactInputNumberProps extends Omit<InputHTMLAttributes<HTMLInputElemen
490
490
  */
491
491
  declare const ReactInputNumber: react.ForwardRefExoticComponent<ReactInputNumberProps & react.RefAttributes<HTMLInputElement>>;
492
492
 
493
+ /** 分页器节点级 DOM 样式；当前页样式覆盖普通页码样式。 */
494
+ type ReactPaginationStyles = Partial<Record<"root" | "total" | "pages" | "pageItem" | "activePageItem" | "prevButton" | "nextButton" | "prevIcon" | "nextIcon" | "ellipsis" | "sizeChanger" | "quickJumper" | "quickJumperText" | "quickJumperInput", CSSProperties>>;
493
495
  interface ReactPaginationProps {
496
+ /** 分页器容器的 DOM 样式。 */
497
+ style?: CSSProperties;
498
+ /** 节点样式；styles.root 优先于 style。 */
499
+ styles?: ReactPaginationStyles;
494
500
  /**
495
501
  * 分页器尺寸。
496
502
  * @default "middle"
@@ -509,7 +515,7 @@ interface ReactPaginationProps {
509
515
  */
510
516
  pageSize?: number;
511
517
  /**
512
- * 每页条数候选。
518
+ * 每页条数候选。非空候选中缺少当前 pageSize 时自动补入。
513
519
  * @default [10, 20, 50, 100]
514
520
  */
515
521
  pageSizeOptions?: number[];
@@ -559,6 +565,8 @@ interface PopupAnchorRect {
559
565
  height: number;
560
566
  }
561
567
  interface ReactPopupProps {
568
+ /** 将面板高度限制在视口内，超出部分在面板内部滚动。 */
569
+ constrainHeight?: boolean;
562
570
  /**
563
571
  * 是否显示弹层。
564
572
  */
@@ -1283,4 +1291,4 @@ declare function useReactContentScale(): ReactContentScaleValue;
1283
1291
  */
1284
1292
  declare const REACT_COMPONENT_PREFIX = "canvas-react";
1285
1293
 
1286
- export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
1294
+ export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
package/dist/index.d.ts CHANGED
@@ -490,7 +490,13 @@ interface ReactInputNumberProps extends Omit<InputHTMLAttributes<HTMLInputElemen
490
490
  */
491
491
  declare const ReactInputNumber: react.ForwardRefExoticComponent<ReactInputNumberProps & react.RefAttributes<HTMLInputElement>>;
492
492
 
493
+ /** 分页器节点级 DOM 样式；当前页样式覆盖普通页码样式。 */
494
+ type ReactPaginationStyles = Partial<Record<"root" | "total" | "pages" | "pageItem" | "activePageItem" | "prevButton" | "nextButton" | "prevIcon" | "nextIcon" | "ellipsis" | "sizeChanger" | "quickJumper" | "quickJumperText" | "quickJumperInput", CSSProperties>>;
493
495
  interface ReactPaginationProps {
496
+ /** 分页器容器的 DOM 样式。 */
497
+ style?: CSSProperties;
498
+ /** 节点样式；styles.root 优先于 style。 */
499
+ styles?: ReactPaginationStyles;
494
500
  /**
495
501
  * 分页器尺寸。
496
502
  * @default "middle"
@@ -509,7 +515,7 @@ interface ReactPaginationProps {
509
515
  */
510
516
  pageSize?: number;
511
517
  /**
512
- * 每页条数候选。
518
+ * 每页条数候选。非空候选中缺少当前 pageSize 时自动补入。
513
519
  * @default [10, 20, 50, 100]
514
520
  */
515
521
  pageSizeOptions?: number[];
@@ -559,6 +565,8 @@ interface PopupAnchorRect {
559
565
  height: number;
560
566
  }
561
567
  interface ReactPopupProps {
568
+ /** 将面板高度限制在视口内，超出部分在面板内部滚动。 */
569
+ constrainHeight?: boolean;
562
570
  /**
563
571
  * 是否显示弹层。
564
572
  */
@@ -1283,4 +1291,4 @@ declare function useReactContentScale(): ReactContentScaleValue;
1283
1291
  */
1284
1292
  declare const REACT_COMPONENT_PREFIX = "canvas-react";
1285
1293
 
1286
- export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
1294
+ export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
package/dist/index.js CHANGED
@@ -298,6 +298,7 @@ function ReactPopup(props) {
298
298
  style,
299
299
  surfaceClassName,
300
300
  surfaceStyle,
301
+ constrainHeight = false,
301
302
  zIndex = 1200
302
303
  } = props;
303
304
  const { scale: contentScale } = useReactContentScale();
@@ -319,6 +320,7 @@ function ReactPopup(props) {
319
320
  return;
320
321
  }
321
322
  const nextPosition = resolvePopupPosition({
323
+ constrainHeight,
322
324
  anchor: nextAnchor,
323
325
  contentScale,
324
326
  matchAnchorWidth,
@@ -328,7 +330,7 @@ function ReactPopup(props) {
328
330
  popupRect: resolvePopupSurfaceRect(surfaceRef.current, contentScale)
329
331
  });
330
332
  setPosition((prev) => {
331
- if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth) {
333
+ if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth && prev?.style.maxHeight === nextPosition.style.maxHeight) {
332
334
  return prev;
333
335
  }
334
336
  return nextPosition;
@@ -355,6 +357,7 @@ function ReactPopup(props) {
355
357
  anchorRect,
356
358
  anchorRef,
357
359
  contentScale,
360
+ constrainHeight,
358
361
  matchAnchorWidth,
359
362
  minWidth,
360
363
  offset,
@@ -371,6 +374,7 @@ function ReactPopup(props) {
371
374
  return;
372
375
  }
373
376
  const nextPosition = resolvePopupPosition({
377
+ constrainHeight,
374
378
  anchor: nextAnchor,
375
379
  contentScale,
376
380
  matchAnchorWidth,
@@ -380,7 +384,7 @@ function ReactPopup(props) {
380
384
  popupRect: resolvePopupSurfaceRect(surfaceRef.current, contentScale)
381
385
  });
382
386
  setPosition((prev) => {
383
- if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth) {
387
+ if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth && prev?.style.maxHeight === nextPosition.style.maxHeight) {
384
388
  return prev;
385
389
  }
386
390
  return nextPosition;
@@ -398,6 +402,7 @@ function ReactPopup(props) {
398
402
  anchorRect,
399
403
  anchorRef,
400
404
  contentScale,
405
+ constrainHeight,
401
406
  matchAnchorWidth,
402
407
  minWidth,
403
408
  offset,
@@ -463,7 +468,7 @@ function ReactPopup(props) {
463
468
  transition.className,
464
469
  surfaceClassName
465
470
  ),
466
- style: surfaceStyle,
471
+ style: resolvePopupSurfaceStyle(surfaceStyle, position.style.maxHeight),
467
472
  children
468
473
  }
469
474
  )
@@ -492,7 +497,8 @@ function resolvePopupPosition(params) {
492
497
  matchAnchorWidth ? anchor.width : 0
493
498
  );
494
499
  const popupWidth = preferredVisualWidth;
495
- const popupHeight = popupRect?.height ?? 0;
500
+ const maxVisualHeight = Math.max(0, viewportHeight - margin * 2);
501
+ const popupHeight = params.constrainHeight ? Math.min(popupRect?.height ?? 0, maxVisualHeight) : popupRect?.height ?? 0;
496
502
  const isHorizontalPlacement = placement.startsWith("left") || placement.startsWith("right");
497
503
  const preferredVertical = placement.startsWith("top") ? "top" : placement.endsWith("Top") ? "top" : "bottom";
498
504
  const preferredTop = resolveRawTop({
@@ -537,6 +543,7 @@ function resolvePopupPosition(params) {
537
543
  vertical: resolvedVertical
538
544
  }),
539
545
  style: {
546
+ ...params.constrainHeight ? { maxHeight: toContentLayoutSize(maxVisualHeight, contentScale) } : {},
540
547
  left,
541
548
  top,
542
549
  width: matchAnchorWidth ? layoutAnchorWidth : void 0,
@@ -544,6 +551,19 @@ function resolvePopupPosition(params) {
544
551
  }
545
552
  };
546
553
  }
554
+ function resolvePopupSurfaceStyle(style, viewportMaxHeight) {
555
+ if (typeof viewportMaxHeight !== "number") return style;
556
+ const custom = style?.maxHeight;
557
+ const maxHeight = typeof custom === "number" ? Math.min(custom, viewportMaxHeight) : typeof custom === "string" && custom !== "none" ? `min(${custom}, ${viewportMaxHeight}px)` : viewportMaxHeight;
558
+ return {
559
+ ...style,
560
+ boxSizing: "border-box",
561
+ minHeight: 0,
562
+ maxHeight,
563
+ overflowY: "auto",
564
+ overscrollBehaviorY: "contain"
565
+ };
566
+ }
547
567
  function resolvePlacement(params) {
548
568
  const { horizontal, isHorizontalPlacement, vertical } = params;
549
569
  if (isHorizontalPlacement) {
@@ -5986,7 +6006,7 @@ function formatDisplayValue(value, formatter, precision, step) {
5986
6006
  }
5987
6007
 
5988
6008
  // src/components/pagination/style.css
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');
6009
+ 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 > .canvas-react-select-wrap {\n flex: 0 0 auto;\n width: auto;\n height: auto;\n}\n.canvas-react-pagination > .canvas-react-select-wrap > .canvas-react-select {\n flex-shrink: 0;\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.canvas-react-pagination button,\n.canvas-react-pagination input {\n font-family: inherit;\n font-weight: inherit;\n font-size: inherit;\n}\n');
5990
6010
  var DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
5991
6011
  function ReactPagination(props) {
5992
6012
  const {
@@ -6002,9 +6022,18 @@ function ReactPagination(props) {
6002
6022
  showTotal,
6003
6023
  simple,
6004
6024
  size = "middle",
6005
- total
6025
+ total,
6026
+ style: rootStyle,
6027
+ styles
6006
6028
  } = props;
6029
+ const style = { ...rootStyle, ...styles?.root };
6007
6030
  const [quickValue, setQuickValue] = useState("");
6031
+ const resolvedPageSizeOptions = useMemo(() => {
6032
+ if (pageSizeOptions.length === 0 || pageSizeOptions.includes(pageSize) || !Number.isSafeInteger(pageSize) || pageSize <= 0) {
6033
+ return pageSizeOptions;
6034
+ }
6035
+ return [...pageSizeOptions, pageSize].sort((left, right) => left - right);
6036
+ }, [pageSizeOptions, pageSize]);
6008
6037
  const totalPages = Math.max(1, Math.ceil(total / pageSize));
6009
6038
  const safeCurrent = clampPage(current, totalPages);
6010
6039
  const range = total === 0 ? [0, 0] : [
@@ -6032,75 +6061,120 @@ function ReactPagination(props) {
6032
6061
  return /* @__PURE__ */ jsxs(
6033
6062
  "div",
6034
6063
  {
6064
+ style: {
6065
+ ...style,
6066
+ ...style?.borderColor ? { "--canvas-react-color-border": style.borderColor } : {},
6067
+ ...style?.backgroundColor ? { "--canvas-react-color-bg": style.backgroundColor } : {},
6068
+ ...style?.color ? {
6069
+ "--canvas-react-color-text": style.color,
6070
+ "--canvas-react-color-text-muted": style.color
6071
+ } : {},
6072
+ ...style?.fontSize ? {
6073
+ "--canvas-react-font-size": typeof style.fontSize === "number" ? `${style.fontSize}px` : style.fontSize
6074
+ } : {}
6075
+ },
6035
6076
  className: `${REACT_COMPONENT_PREFIX}-pagination ${REACT_COMPONENT_PREFIX}-pagination-${size}`,
6036
6077
  children: [
6037
- showTotal ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: showTotal(total, range) }) : null,
6078
+ showTotal ? /* @__PURE__ */ jsx(
6079
+ "span",
6080
+ {
6081
+ style: styles?.total,
6082
+ className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
6083
+ children: showTotal(total, range)
6084
+ }
6085
+ ) : null,
6038
6086
  /* @__PURE__ */ jsx(
6039
6087
  "button",
6040
6088
  {
6041
6089
  type: "button",
6042
6090
  className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
6043
6091
  "aria-label": "\u4E0A\u4E00\u9875",
6092
+ style: styles?.prevButton,
6044
6093
  disabled: disabled || safeCurrent <= 1,
6045
6094
  onClick: () => jumpToPage(safeCurrent - 1),
6046
6095
  children: /* @__PURE__ */ jsx(
6047
6096
  "span",
6048
6097
  {
6049
- className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-prev`
6098
+ className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-prev`,
6099
+ style: styles?.prevIcon
6050
6100
  }
6051
6101
  )
6052
6102
  }
6053
6103
  ),
6054
- simple ? /* @__PURE__ */ jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: [
6055
- safeCurrent,
6056
- " / ",
6057
- totalPages
6058
- ] }) : /* @__PURE__ */ jsx("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-pages`, children: pages.map(
6059
- (item, index) => item === "..." ? /* @__PURE__ */ jsx(
6060
- "span",
6061
- {
6062
- className: `${REACT_COMPONENT_PREFIX}-pagination-ellipsis`,
6063
- children: "..."
6064
- },
6065
- `ellipsis-${index}`
6066
- ) : /* @__PURE__ */ jsx(
6067
- "button",
6068
- {
6069
- type: "button",
6070
- className: [
6071
- `${REACT_COMPONENT_PREFIX}-pagination-page`,
6072
- item === safeCurrent ? `${REACT_COMPONENT_PREFIX}-pagination-page-active` : ""
6073
- ].filter(Boolean).join(" "),
6074
- disabled,
6075
- onClick: () => jumpToPage(item),
6076
- children: item
6077
- },
6078
- item
6079
- )
6080
- ) }),
6104
+ simple ? /* @__PURE__ */ jsxs(
6105
+ "span",
6106
+ {
6107
+ style: styles?.pageItem,
6108
+ className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
6109
+ children: [
6110
+ safeCurrent,
6111
+ " / ",
6112
+ totalPages
6113
+ ]
6114
+ }
6115
+ ) : /* @__PURE__ */ jsx(
6116
+ "div",
6117
+ {
6118
+ style: styles?.pages,
6119
+ className: `${REACT_COMPONENT_PREFIX}-pagination-pages`,
6120
+ children: pages.map(
6121
+ (item, index) => item === "..." ? /* @__PURE__ */ jsx(
6122
+ "span",
6123
+ {
6124
+ className: `${REACT_COMPONENT_PREFIX}-pagination-ellipsis`,
6125
+ style: styles?.ellipsis,
6126
+ children: "..."
6127
+ },
6128
+ `ellipsis-${index}`
6129
+ ) : /* @__PURE__ */ jsx(
6130
+ "button",
6131
+ {
6132
+ type: "button",
6133
+ style: {
6134
+ ...styles?.pageItem,
6135
+ ...item === safeCurrent ? styles?.activePageItem : void 0
6136
+ },
6137
+ className: [
6138
+ `${REACT_COMPONENT_PREFIX}-pagination-page`,
6139
+ item === safeCurrent ? `${REACT_COMPONENT_PREFIX}-pagination-page-active` : ""
6140
+ ].filter(Boolean).join(" "),
6141
+ disabled,
6142
+ onClick: () => jumpToPage(item),
6143
+ children: item
6144
+ },
6145
+ item
6146
+ )
6147
+ )
6148
+ }
6149
+ ),
6081
6150
  /* @__PURE__ */ jsx(
6082
6151
  "button",
6083
6152
  {
6084
6153
  type: "button",
6085
6154
  className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
6086
6155
  "aria-label": "\u4E0B\u4E00\u9875",
6156
+ style: styles?.nextButton,
6087
6157
  disabled: disabled || safeCurrent >= totalPages,
6088
6158
  onClick: () => jumpToPage(safeCurrent + 1),
6089
6159
  children: /* @__PURE__ */ jsx(
6090
6160
  "span",
6091
6161
  {
6092
- className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-next`
6162
+ className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-next`,
6163
+ style: styles?.nextIcon
6093
6164
  }
6094
6165
  )
6095
6166
  }
6096
6167
  ),
6097
- showSizeChanger && pageSizeOptions?.length ? /* @__PURE__ */ jsx(
6168
+ showSizeChanger && resolvedPageSizeOptions.length ? /* @__PURE__ */ jsx(
6098
6169
  ReactSelect,
6099
6170
  {
6100
6171
  value: String(pageSize),
6101
6172
  disabled,
6102
- style: { width: resolvePaginationSelectWidth(size) },
6103
- options: pageSizeOptions.map((size2) => ({
6173
+ style: {
6174
+ width: resolvePaginationSelectWidth(size, resolvedPageSizeOptions),
6175
+ ...styles?.sizeChanger
6176
+ },
6177
+ options: resolvedPageSizeOptions.map((size2) => ({
6104
6178
  label: `${size2} / \u9875`,
6105
6179
  value: size2
6106
6180
  })),
@@ -6113,33 +6187,62 @@ function ReactPagination(props) {
6113
6187
  }
6114
6188
  }
6115
6189
  ) : null,
6116
- showQuickJumper ? /* @__PURE__ */ jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-quick`, children: [
6117
- /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u8DF3\u81F3" }),
6118
- /* @__PURE__ */ jsx(
6119
- ReactInput,
6120
- {
6121
- value: quickValue,
6122
- disabled,
6123
- style: { width: resolvePaginationInputWidth(size) },
6124
- onChange: (event) => {
6125
- setQuickValue(event.target.value.replace(/[^\d]/g, ""));
6126
- },
6127
- onPressEnter: () => {
6128
- handleQuickCommit();
6129
- },
6130
- onBlur: () => {
6131
- handleQuickCommit();
6132
- }
6133
- }
6134
- ),
6135
- /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u9875" })
6136
- ] }) : null
6190
+ showQuickJumper ? /* @__PURE__ */ jsxs(
6191
+ "div",
6192
+ {
6193
+ style: styles?.quickJumper,
6194
+ className: `${REACT_COMPONENT_PREFIX}-pagination-quick`,
6195
+ children: [
6196
+ /* @__PURE__ */ jsx(
6197
+ "span",
6198
+ {
6199
+ style: styles?.quickJumperText,
6200
+ className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
6201
+ children: "\u8DF3\u81F3"
6202
+ }
6203
+ ),
6204
+ /* @__PURE__ */ jsx(
6205
+ ReactInput,
6206
+ {
6207
+ value: quickValue,
6208
+ disabled,
6209
+ style: {
6210
+ width: resolvePaginationInputWidth(size),
6211
+ ...styles?.quickJumperInput
6212
+ },
6213
+ onChange: (event) => {
6214
+ setQuickValue(event.target.value.replace(/[^\d]/g, ""));
6215
+ },
6216
+ onPressEnter: () => {
6217
+ handleQuickCommit();
6218
+ },
6219
+ onBlur: () => {
6220
+ handleQuickCommit();
6221
+ }
6222
+ }
6223
+ ),
6224
+ /* @__PURE__ */ jsx(
6225
+ "span",
6226
+ {
6227
+ style: styles?.quickJumperText,
6228
+ className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
6229
+ children: "\u9875"
6230
+ }
6231
+ )
6232
+ ]
6233
+ }
6234
+ ) : null
6137
6235
  ]
6138
6236
  }
6139
6237
  );
6140
6238
  }
6141
- function resolvePaginationSelectWidth(size) {
6142
- return size === "small" ? 92 : size === "large" ? 120 : 108;
6239
+ function resolvePaginationSelectWidth(size, pageSizeOptions) {
6240
+ const minWidth = size === "large" ? 120 : 108;
6241
+ const digits = Math.max(
6242
+ 1,
6243
+ ...pageSizeOptions.map((value) => String(value).length)
6244
+ );
6245
+ return `max(${minWidth}px, calc(${digits}ch + 3em + 44px))`;
6143
6246
  }
6144
6247
  function resolvePaginationInputWidth(size) {
6145
6248
  return size === "small" ? 56 : size === "large" ? 80 : 72;