@canvas-components/react-components 0.3.4 → 0.3.6

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 +143 -59
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +9 -2
  4. package/dist/index.d.ts +9 -2
  5. package/dist/index.js +143 -59
  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,8 @@ interface ReactPaginationProps {
509
515
  */
510
516
  pageSize?: number;
511
517
  /**
512
- * 每页条数候选。
518
+ * 每页条数候选。非空候选中缺少当前 pageSize 时自动补入。
519
+ * @default [10, 20, 50, 100]
513
520
  */
514
521
  pageSizeOptions?: number[];
515
522
  /**
@@ -1282,4 +1289,4 @@ declare function useReactContentScale(): ReactContentScaleValue;
1282
1289
  */
1283
1290
  declare const REACT_COMPONENT_PREFIX = "canvas-react";
1284
1291
 
1285
- 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 };
1292
+ 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,8 @@ interface ReactPaginationProps {
509
515
  */
510
516
  pageSize?: number;
511
517
  /**
512
- * 每页条数候选。
518
+ * 每页条数候选。非空候选中缺少当前 pageSize 时自动补入。
519
+ * @default [10, 20, 50, 100]
513
520
  */
514
521
  pageSizeOptions?: number[];
515
522
  /**
@@ -1282,4 +1289,4 @@ declare function useReactContentScale(): ReactContentScaleValue;
1282
1289
  */
1283
1290
  declare const REACT_COMPONENT_PREFIX = "canvas-react";
1284
1291
 
1285
- 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 };
1292
+ 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
@@ -5986,7 +5986,8 @@ function formatDisplayValue(value, formatter, precision, step) {
5986
5986
  }
5987
5987
 
5988
5988
  // 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');
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 > .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
+ var DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
5990
5991
  function ReactPagination(props) {
5991
5992
  const {
5992
5993
  current,
@@ -5994,16 +5995,25 @@ function ReactPagination(props) {
5994
5995
  onChange,
5995
5996
  onPageSizeChange,
5996
5997
  pageSize = 10,
5997
- pageSizeOptions,
5998
+ pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
5998
5999
  showLessItems,
5999
6000
  showQuickJumper,
6000
6001
  showSizeChanger,
6001
6002
  showTotal,
6002
6003
  simple,
6003
6004
  size = "middle",
6004
- total
6005
+ total,
6006
+ style: rootStyle,
6007
+ styles
6005
6008
  } = props;
6009
+ const style = { ...rootStyle, ...styles?.root };
6006
6010
  const [quickValue, setQuickValue] = useState("");
6011
+ const resolvedPageSizeOptions = useMemo(() => {
6012
+ if (pageSizeOptions.length === 0 || pageSizeOptions.includes(pageSize) || !Number.isSafeInteger(pageSize) || pageSize <= 0) {
6013
+ return pageSizeOptions;
6014
+ }
6015
+ return [...pageSizeOptions, pageSize].sort((left, right) => left - right);
6016
+ }, [pageSizeOptions, pageSize]);
6007
6017
  const totalPages = Math.max(1, Math.ceil(total / pageSize));
6008
6018
  const safeCurrent = clampPage(current, totalPages);
6009
6019
  const range = total === 0 ? [0, 0] : [
@@ -6031,75 +6041,120 @@ function ReactPagination(props) {
6031
6041
  return /* @__PURE__ */ jsxs(
6032
6042
  "div",
6033
6043
  {
6044
+ style: {
6045
+ ...style,
6046
+ ...style?.borderColor ? { "--canvas-react-color-border": style.borderColor } : {},
6047
+ ...style?.backgroundColor ? { "--canvas-react-color-bg": style.backgroundColor } : {},
6048
+ ...style?.color ? {
6049
+ "--canvas-react-color-text": style.color,
6050
+ "--canvas-react-color-text-muted": style.color
6051
+ } : {},
6052
+ ...style?.fontSize ? {
6053
+ "--canvas-react-font-size": typeof style.fontSize === "number" ? `${style.fontSize}px` : style.fontSize
6054
+ } : {}
6055
+ },
6034
6056
  className: `${REACT_COMPONENT_PREFIX}-pagination ${REACT_COMPONENT_PREFIX}-pagination-${size}`,
6035
6057
  children: [
6036
- showTotal ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: showTotal(total, range) }) : null,
6058
+ showTotal ? /* @__PURE__ */ jsx(
6059
+ "span",
6060
+ {
6061
+ style: styles?.total,
6062
+ className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
6063
+ children: showTotal(total, range)
6064
+ }
6065
+ ) : null,
6037
6066
  /* @__PURE__ */ jsx(
6038
6067
  "button",
6039
6068
  {
6040
6069
  type: "button",
6041
6070
  className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
6042
6071
  "aria-label": "\u4E0A\u4E00\u9875",
6072
+ style: styles?.prevButton,
6043
6073
  disabled: disabled || safeCurrent <= 1,
6044
6074
  onClick: () => jumpToPage(safeCurrent - 1),
6045
6075
  children: /* @__PURE__ */ jsx(
6046
6076
  "span",
6047
6077
  {
6048
- className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-prev`
6078
+ className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-prev`,
6079
+ style: styles?.prevIcon
6049
6080
  }
6050
6081
  )
6051
6082
  }
6052
6083
  ),
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
- ) }),
6084
+ simple ? /* @__PURE__ */ jsxs(
6085
+ "span",
6086
+ {
6087
+ style: styles?.pageItem,
6088
+ className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
6089
+ children: [
6090
+ safeCurrent,
6091
+ " / ",
6092
+ totalPages
6093
+ ]
6094
+ }
6095
+ ) : /* @__PURE__ */ jsx(
6096
+ "div",
6097
+ {
6098
+ style: styles?.pages,
6099
+ className: `${REACT_COMPONENT_PREFIX}-pagination-pages`,
6100
+ children: pages.map(
6101
+ (item, index) => item === "..." ? /* @__PURE__ */ jsx(
6102
+ "span",
6103
+ {
6104
+ className: `${REACT_COMPONENT_PREFIX}-pagination-ellipsis`,
6105
+ style: styles?.ellipsis,
6106
+ children: "..."
6107
+ },
6108
+ `ellipsis-${index}`
6109
+ ) : /* @__PURE__ */ jsx(
6110
+ "button",
6111
+ {
6112
+ type: "button",
6113
+ style: {
6114
+ ...styles?.pageItem,
6115
+ ...item === safeCurrent ? styles?.activePageItem : void 0
6116
+ },
6117
+ className: [
6118
+ `${REACT_COMPONENT_PREFIX}-pagination-page`,
6119
+ item === safeCurrent ? `${REACT_COMPONENT_PREFIX}-pagination-page-active` : ""
6120
+ ].filter(Boolean).join(" "),
6121
+ disabled,
6122
+ onClick: () => jumpToPage(item),
6123
+ children: item
6124
+ },
6125
+ item
6126
+ )
6127
+ )
6128
+ }
6129
+ ),
6080
6130
  /* @__PURE__ */ jsx(
6081
6131
  "button",
6082
6132
  {
6083
6133
  type: "button",
6084
6134
  className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
6085
6135
  "aria-label": "\u4E0B\u4E00\u9875",
6136
+ style: styles?.nextButton,
6086
6137
  disabled: disabled || safeCurrent >= totalPages,
6087
6138
  onClick: () => jumpToPage(safeCurrent + 1),
6088
6139
  children: /* @__PURE__ */ jsx(
6089
6140
  "span",
6090
6141
  {
6091
- className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-next`
6142
+ className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-next`,
6143
+ style: styles?.nextIcon
6092
6144
  }
6093
6145
  )
6094
6146
  }
6095
6147
  ),
6096
- showSizeChanger && pageSizeOptions?.length ? /* @__PURE__ */ jsx(
6148
+ showSizeChanger && resolvedPageSizeOptions.length ? /* @__PURE__ */ jsx(
6097
6149
  ReactSelect,
6098
6150
  {
6099
6151
  value: String(pageSize),
6100
6152
  disabled,
6101
- style: { width: resolvePaginationSelectWidth(size) },
6102
- options: pageSizeOptions.map((size2) => ({
6153
+ style: {
6154
+ width: resolvePaginationSelectWidth(size, resolvedPageSizeOptions),
6155
+ ...styles?.sizeChanger
6156
+ },
6157
+ options: resolvedPageSizeOptions.map((size2) => ({
6103
6158
  label: `${size2} / \u9875`,
6104
6159
  value: size2
6105
6160
  })),
@@ -6112,33 +6167,62 @@ function ReactPagination(props) {
6112
6167
  }
6113
6168
  }
6114
6169
  ) : 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
6170
+ showQuickJumper ? /* @__PURE__ */ jsxs(
6171
+ "div",
6172
+ {
6173
+ style: styles?.quickJumper,
6174
+ className: `${REACT_COMPONENT_PREFIX}-pagination-quick`,
6175
+ children: [
6176
+ /* @__PURE__ */ jsx(
6177
+ "span",
6178
+ {
6179
+ style: styles?.quickJumperText,
6180
+ className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
6181
+ children: "\u8DF3\u81F3"
6182
+ }
6183
+ ),
6184
+ /* @__PURE__ */ jsx(
6185
+ ReactInput,
6186
+ {
6187
+ value: quickValue,
6188
+ disabled,
6189
+ style: {
6190
+ width: resolvePaginationInputWidth(size),
6191
+ ...styles?.quickJumperInput
6192
+ },
6193
+ onChange: (event) => {
6194
+ setQuickValue(event.target.value.replace(/[^\d]/g, ""));
6195
+ },
6196
+ onPressEnter: () => {
6197
+ handleQuickCommit();
6198
+ },
6199
+ onBlur: () => {
6200
+ handleQuickCommit();
6201
+ }
6202
+ }
6203
+ ),
6204
+ /* @__PURE__ */ jsx(
6205
+ "span",
6206
+ {
6207
+ style: styles?.quickJumperText,
6208
+ className: `${REACT_COMPONENT_PREFIX}-pagination-total`,
6209
+ children: "\u9875"
6210
+ }
6211
+ )
6212
+ ]
6213
+ }
6214
+ ) : null
6136
6215
  ]
6137
6216
  }
6138
6217
  );
6139
6218
  }
6140
- function resolvePaginationSelectWidth(size) {
6141
- return size === "small" ? 92 : size === "large" ? 120 : 108;
6219
+ function resolvePaginationSelectWidth(size, pageSizeOptions) {
6220
+ const minWidth = size === "large" ? 120 : 108;
6221
+ const digits = Math.max(
6222
+ 1,
6223
+ ...pageSizeOptions.map((value) => String(value).length)
6224
+ );
6225
+ return `max(${minWidth}px, calc(${digits}ch + 3em + 44px))`;
6142
6226
  }
6143
6227
  function resolvePaginationInputWidth(size) {
6144
6228
  return size === "small" ? 56 : size === "large" ? 80 : 72;