rsuite 6.0.0-canary-20250507 → 6.0.0-canary-2025062016

package/cjs/Progress/ProgressLine.d.ts

@@ -1,21 +1,35 @@
+import React from 'react';
 import { BoxProps } from '../internals/Box';
+import type { ProgressSection } from './types';
 export interface ProgressLineProps extends BoxProps {
-    /** Line color */
-    strokeColor?: string;
+    /** Whether to show indeterminate loading animation */
+    indeterminate?: boolean;
     /** Percent of progress */
     percent?: number;
+    /** The placement of the percent info */
+    percentPlacement?: 'start' | 'end' | 'insideStart' | 'insideEnd' | 'insideCenter';
+    /** Line color */
+    strokeColor?: string;
     /** Line width */
     strokeWidth?: number;
-    /** Trail color */
-    trailColor?: string;
-    /** Trail width */
-    trailWidth?: number;
     /** Show text */
     showInfo?: boolean;
     /** Progress status */
     status?: 'success' | 'fail' | 'active';
+    /** Whether to apply a striped effect to the progress bar */
+    striped?: boolean;
+    /** Multiple sections with different colors */
+    sections?: ProgressSection[];
+    /** Trail color */
+    trailColor?: string;
+    /** Trail width */
+    trailWidth?: number;
     /**  The progress bar is displayed vertically */
     vertical?: boolean;
+    /** The radius of the progress bar */
+    radius?: number | string;
+    /** Custom render function for info content */
+    renderInfo?: (percent: number, status?: 'success' | 'fail' | 'active') => React.ReactNode;
 }
 /**
  * The `Progress.Line` component is used to display the progress of current operation.

package/cjs/Progress/ProgressLine.js

@@ -7,7 +7,9 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
-var _statusIcons = require("../internals/constants/statusIcons");
+var _ProgressInfo = _interopRequireDefault(require("./ProgressInfo"));
+var _ProgressStroke = _interopRequireDefault(require("./ProgressStroke"));
+var _ProgressSections = _interopRequireDefault(require("./ProgressSections"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 /**
@@ -21,61 +23,70 @@ const ProgressLine = (0, _utils.forwardRef)((props, ref) => {
   const {
     as,
     className,
+    classPrefix = 'progress-line',
     percent = 0,
+    percentPlacement = 'end',
+    radius,
     strokeColor,
     strokeWidth,
-    trailColor,
-    trailWidth,
     status,
+    striped,
+    style,
     showInfo = true,
-    classPrefix = 'progress',
+    trailColor,
+    trailWidth,
     vertical,
+    sections,
+    renderInfo,
+    indeterminate,
     ...rest
   } = propsWithDefaults;
   const {
     merge,
     prefix,
-    withPrefix
+    withPrefix,
+    cssVar
   } = (0, _hooks.useStyles)(classPrefix);
-  const lineInnerStyle = {
-    backgroundColor: trailColor,
-    [vertical ? 'width' : 'height']: trailWidth || strokeWidth
-  };
-  const percentStyle = {
-    [vertical ? 'height' : 'width']: `${percent}%`,
-    backgroundColor: strokeColor,
-    [vertical ? 'width' : 'height']: strokeWidth
-  };
-  const classes = merge(className, withPrefix('line', {
-    'line-vertical': vertical,
-    [`line-${status}`]: !!status
+  const classes = merge(className, withPrefix({
+    vertical,
+    striped,
+    indeterminate
   }));
-  const showIcon = status && status !== 'active';
-  const info = showIcon ? /*#__PURE__*/_react.default.createElement("span", {
-    className: prefix(`icon-${status || ''}`)
-  }, _statusIcons.PROGRESS_STATUS_ICON[status]) : /*#__PURE__*/_react.default.createElement("span", {
-    className: prefix('info-status')
-  }, percent, "%");
+  const totalPercent = sections ? sections.reduce((sum, section) => sum + section.percent, 0) : percent;
+  const styles = (0, _utils.mergeStyles)(cssVar('trail-size', (0, _utils.getCssValue)(trailWidth || strokeWidth)), cssVar('trail-color', trailColor), cssVar('stroke', `${totalPercent}%`), cssVar('size', (0, _utils.getCssValue)(strokeWidth)), cssVar('color', strokeColor), cssVar('radius', (0, _utils.getCssValue)(radius)), style);
+  const info = /*#__PURE__*/_react.default.createElement(_ProgressInfo.default, {
+    percent: percent,
+    renderInfo: renderInfo,
+    status: status,
+    classPrefix: classPrefix
+  });
+
+  // Determine if the info should be placed inside the stroke
+  const isInsidePlacement = percentPlacement === null || percentPlacement === void 0 ? void 0 : percentPlacement.startsWith('inside');
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
+    ref: ref,
+    className: classes,
     role: "progressbar",
     "aria-valuemin": "0",
     "aria-valuemax": "100",
-    "aria-valuenow": percent
-  }, rest, {
-    ref: ref,
-    className: classes
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: prefix('line-outer')
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: prefix('line-inner'),
-    style: lineInnerStyle
+    "aria-valuenow": totalPercent,
+    "data-status": status,
+    "data-placement": percentPlacement,
+    style: styles
+  }, rest), /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix('outer')
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: prefix('line-bg'),
-    style: percentStyle
-  }))), showInfo ? /*#__PURE__*/_react.default.createElement("div", {
-    className: prefix('info')
-  }, info) : null);
+    className: prefix('trail')
+  }, sections ? /*#__PURE__*/_react.default.createElement(_ProgressSections.default, {
+    classPrefix: classPrefix,
+    sections: sections,
+    vertical: vertical
+  }) : /*#__PURE__*/_react.default.createElement(_ProgressStroke.default, {
+    classPrefix: classPrefix,
+    percent: indeterminate ? 100 : percent,
+    vertical: vertical
+  }, showInfo && isInsidePlacement ? info : null))), showInfo && !isInsidePlacement ? info : null);
 });
 ProgressLine.displayName = 'ProgressLine';
 var _default = exports.default = ProgressLine;

package/cjs/Progress/ProgressSections.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ProgressSection } from './types';
+export interface ProgressSectionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The classPrefix passed from parent component */
+    classPrefix: string;
+    /** Multiple sections with different colors */
+    sections: ProgressSection[];
+    /** Whether the progress bar is displayed vertically */
+    vertical?: boolean;
+}
+/**
+ * A component to render multiple sections in a progress bar
+ */
+declare const ProgressSections: React.MemoExoticComponent<(props: ProgressSectionsProps) => React.JSX.Element>;
+export default ProgressSections;

package/cjs/Progress/ProgressSections.js

@@ -0,0 +1,43 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _ProgressStroke = _interopRequireDefault(require("./ProgressStroke"));
+var _hooks = require("../internals/hooks");
+/**
+ * A component to render multiple sections in a progress bar
+ */
+const ProgressSections = /*#__PURE__*/_react.default.memo(props => {
+  const {
+    classPrefix,
+    sections,
+    vertical,
+    ...rest
+  } = props;
+  const {
+    prefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  let countPercent = 0;
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: prefix('sections')
+  }, rest), sections.map((section, index) => {
+    const sectionStroke = /*#__PURE__*/_react.default.createElement(_ProgressStroke.default, {
+      key: index,
+      classPrefix: classPrefix,
+      percent: section.percent,
+      color: section.color,
+      vertical: vertical,
+      isSection: true,
+      tooltip: section.tooltip,
+      countPercent: countPercent
+    }, section.label);
+    countPercent += section.percent;
+    return sectionStroke;
+  }));
+});
+ProgressSections.displayName = 'ProgressSections';
+var _default = exports.default = ProgressSections;

package/cjs/Progress/ProgressStroke.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface ProgressStrokeProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The classPrefix passed from parent component */
+    classPrefix: string;
+    /** Percent of progress */
+    percent: number;
+    /** Line color */
+    color?: string;
+    /** Whether the progress bar is displayed vertically */
+    vertical?: boolean;
+    /** Children to be rendered inside the stroke */
+    children?: React.ReactNode;
+    /** Whether this is part of a multi-section progress bar */
+    isSection?: boolean;
+    /** Tooltip of this section */
+    tooltip?: React.ReactNode;
+    /**  The percentage of the current section in the total progress bar */
+    countPercent?: number;
+}
+/**
+ * A single stroke component used within ProgressLine
+ */
+declare const ProgressStroke: React.MemoExoticComponent<(props: ProgressStrokeProps) => React.JSX.Element>;
+export default ProgressStroke;

package/cjs/Progress/ProgressStroke.js

@@ -0,0 +1,51 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("../internals/hooks");
+var _utils = require("../internals/utils");
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _Whisper = _interopRequireDefault(require("../Whisper"));
+/**
+ * A single stroke component used within ProgressLine
+ */
+const ProgressStroke = /*#__PURE__*/_react.default.memo(props => {
+  const {
+    classPrefix,
+    percent,
+    color,
+    vertical,
+    children,
+    isSection,
+    tooltip,
+    style,
+    countPercent
+  } = props;
+  const {
+    prefix
+  } = (0, _hooks.useStyles)(classPrefix);
+
+  // Build class names
+  const classes = prefix('stroke', {
+    section: isSection
+  });
+  const content = /*#__PURE__*/_react.default.createElement("div", {
+    className: classes,
+    style: (0, _utils.mergeStyles)(style, {
+      width: vertical ? '100%' : `${percent}%`,
+      height: vertical ? `${percent}%` : '100%',
+      background: color,
+      bottom: vertical ? `${countPercent}%` : undefined
+    })
+  }, children);
+  return tooltip ? /*#__PURE__*/_react.default.createElement(_Whisper.default, {
+    trigger: "hover",
+    placement: "top",
+    speaker: /*#__PURE__*/_react.default.createElement(_Tooltip.default, null, tooltip)
+  }, content) : content;
+});
+ProgressStroke.displayName = 'ProgressStroke';
+var _default = exports.default = ProgressStroke;

package/cjs/Progress/index.d.ts

@@ -1,7 +1,7 @@
 import Progress from './Progress';
-import ProgressCircle from './ProgressCircle';
+import ProgressCircle from '../ProgressCircle';
 import ProgressLine from './ProgressLine';
-export type { ProgressCircleProps } from './ProgressCircle';
-export type { ProgressLineProps } from './ProgressLine';
+export type { ProgressLineProps as ProgressProps } from './ProgressLine';
+export type { ProgressSection } from './types';
 export { Progress, ProgressCircle, ProgressLine };
 export default Progress;

package/cjs/Progress/index.js

@@ -6,7 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _Progress = _interopRequireDefault(require("./Progress"));
 exports.Progress = _Progress.default;
-var _ProgressCircle = _interopRequireDefault(require("./ProgressCircle"));
+var _ProgressCircle = _interopRequireDefault(require("../ProgressCircle"));
 exports.ProgressCircle = _ProgressCircle.default;
 var _ProgressLine = _interopRequireDefault(require("./ProgressLine"));
 exports.ProgressLine = _ProgressLine.default;

package/cjs/Progress/types.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface ProgressSection {
+    /** Percent of this section */
+    percent: number;
+    /** Color of this section */
+    color: string;
+    /** Label of this section */
+    label?: React.ReactNode;
+    /** Tooltip of this section */
+    tooltip?: React.ReactNode;
+}

package/cjs/Progress/types.js

@@ -0,0 +1,4 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;

package/cjs/{Progress → ProgressCircle}/ProgressCircle.d.ts

@@ -1,29 +1,35 @@
+import React from 'react';
 import { BoxProps } from '../internals/Box';
+import type { ProgressSection } from '../Progress';
 export interface ProgressCircleProps extends BoxProps {
-    /** Line color */
-    strokeColor?: string;
-    /** The end of different types of open paths */
-    strokeLinecap?: 'butt' | 'round' | 'square';
-    /** Tail color */
-    trailColor?: string;
-    /** Percent of progress */
-    percent?: number;
-    /** Line width */
-    strokeWidth?: number;
-    /** Tail width */
-    trailWidth?: number;
     /** Circular progress bar degree */
     gapDegree?: number;
     /** Circular progress bar Notch position */
     gapPosition?: 'top' | 'bottom' | 'left' | 'right';
+    /** Percent of progress */
+    percent?: number;
     /** Show text */
     showInfo?: boolean;
     /** Progress status */
     status?: 'success' | 'fail' | 'active';
+    /** Line color */
+    strokeColor?: string;
+    /** The end of different types of open paths */
+    strokeLinecap?: 'butt' | 'round' | 'square';
+    /** Line width */
+    strokeWidth?: number;
+    /** Tail color */
+    trailColor?: string;
+    /** Tail width */
+    trailWidth?: number;
+    /** Multiple sections with different colors */
+    sections?: Pick<ProgressSection, 'percent' | 'color'>[];
+    /** Custom render function for info content */
+    renderInfo?: (percent: number, status?: 'success' | 'fail' | 'active') => React.ReactNode;
 }
 /**
- * The `Progress.Circle` component is used to display the progress of current operation.
- * @see https://rsuitejs.com/components/progress/#circle
+ * Display circular progress for an operation.
+ * @see https://rsuitejs.com/components/progress-circle
  */
 declare const ProgressCircle: import("../internals/types").InternalRefForwardingComponent<"div", ProgressCircleProps, never> & Record<string, never>;
 export default ProgressCircle;

package/cjs/ProgressCircle/ProgressCircle.js

@@ -0,0 +1,113 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
+var _ProgressInfo = _interopRequireDefault(require("../Progress/ProgressInfo"));
+var _ProgressCircleSections = _interopRequireDefault(require("./ProgressCircleSections"));
+var _useProgressCirclePath = _interopRequireDefault(require("./hooks/useProgressCirclePath"));
+var _utils = require("../internals/utils");
+var _hooks = require("../internals/hooks");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Display circular progress for an operation.
+ * @see https://rsuitejs.com/components/progress-circle
+ */
+const ProgressCircle = (0, _utils.forwardRef)((props, ref) => {
+  const {
+    propsWithDefaults
+  } = (0, _hooks.useCustom)('ProgressCircle', props);
+  const {
+    as,
+    classPrefix = 'progress-circle',
+    className,
+    gapDegree = 0,
+    gapPosition = 'top',
+    percent = 0,
+    renderInfo,
+    showInfo = true,
+    status,
+    strokeColor,
+    strokeLinecap = 'round',
+    strokeWidth = 6,
+    style,
+    trailColor,
+    trailWidth = strokeWidth,
+    sections,
+    ...rest
+  } = propsWithDefaults;
+
+  // Calculate total percent from sections if provided
+  const totalPercent = (0, _react.useMemo)(() => {
+    if (!sections) return percent;
+    return Math.min(100, sections.reduce((acc, section) => acc + section.percent, 0));
+  }, [percent, sections]);
+  const {
+    pathString,
+    trailPathStyle,
+    strokePathStyle
+  } = (0, _useProgressCirclePath.default)({
+    gapDegree,
+    gapPosition,
+    totalPercent,
+    strokeColor,
+    strokeWidth,
+    trailColor
+  });
+  const {
+    prefix,
+    merge,
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
+    [`${status || ''}`]: !!status
+  }));
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
+    role: "progressbar",
+    "aria-valuemin": "0",
+    "aria-valuemax": "100",
+    "aria-valuenow": totalPercent,
+    ref: ref,
+    className: classes,
+    style: style
+  }, rest), showInfo && /*#__PURE__*/_react.default.createElement(_ProgressInfo.default, {
+    percent: totalPercent,
+    renderInfo: renderInfo,
+    status: status,
+    classPrefix: classPrefix
+  }), /*#__PURE__*/_react.default.createElement("svg", {
+    className: prefix('svg'),
+    viewBox: "0 0 100 100"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    className: prefix('trail'),
+    d: pathString,
+    strokeWidth: trailWidth || strokeWidth,
+    fillOpacity: "0",
+    style: trailPathStyle
+  }), sections ? /*#__PURE__*/_react.default.createElement(_ProgressCircleSections.default, {
+    classPrefix: classPrefix,
+    sections: sections,
+    pathString: pathString,
+    strokeLinecap: strokeLinecap,
+    strokeWidth: strokeWidth,
+    gapDegree: gapDegree,
+    totalPercent: totalPercent
+  }) :
+  /*#__PURE__*/
+  // Render single stroke
+  _react.default.createElement("path", {
+    d: pathString,
+    strokeLinecap: strokeLinecap,
+    className: prefix('stroke'),
+    strokeWidth: totalPercent === 0 ? 0 : strokeWidth,
+    fillOpacity: "0",
+    style: strokePathStyle
+  })));
+});
+ProgressCircle.displayName = 'ProgressCircle';
+var _default = exports.default = ProgressCircle;

package/cjs/ProgressCircle/ProgressCircleSections.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { ProgressSection } from '../Progress';
+export interface ProgressCircleSectionsProps {
+    /** The classPrefix passed from parent component */
+    classPrefix: string;
+    /** Multiple sections with different colors */
+    sections: ProgressSection[];
+    /** Path string for the circle */
+    pathString: string;
+    /** Stroke line cap style */
+    strokeLinecap: 'butt' | 'round' | 'square';
+    /** Stroke width */
+    strokeWidth: number;
+    /** Gap degree */
+    gapDegree: number;
+    /** Total percent of all sections */
+    totalPercent: number;
+}
+/**
+ * A component to render multiple sections in a circular progress bar
+ */
+declare const ProgressCircleSections: React.MemoExoticComponent<(props: ProgressCircleSectionsProps) => React.JSX.Element>;
+export default ProgressCircleSections;

package/cjs/ProgressCircle/ProgressCircleSections.js

@@ -0,0 +1,52 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("../internals/hooks");
+/**
+ * A component to render multiple sections in a circular progress bar
+ */
+const ProgressCircleSections = /*#__PURE__*/_react.default.memo(props => {
+  const {
+    classPrefix,
+    sections,
+    pathString,
+    strokeLinecap,
+    strokeWidth,
+    gapDegree,
+    totalPercent
+  } = props;
+  const {
+    prefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  let startPercent = 0;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sections.map((section, index) => {
+    const sectionLen = Math.PI * 2 * (50 - strokeWidth / 2);
+    const gapLength = gapDegree / 360 * sectionLen;
+    const sectionPercent = section.percent;
+    const endPercent = startPercent + sectionPercent;
+
+    // Calculate the stroke dash array and offset for this section
+    const sectionStyle = {
+      stroke: section.color,
+      strokeDasharray: `${sectionPercent / 100 * (sectionLen - gapLength)}px ${sectionLen}px`,
+      strokeDashoffset: `-${gapLength / 2 + startPercent / 100 * (sectionLen - gapLength)}px`
+    };
+    const sectionPath = /*#__PURE__*/_react.default.createElement("path", {
+      key: index,
+      d: pathString,
+      strokeLinecap: strokeLinecap,
+      className: prefix('stroke'),
+      strokeWidth: totalPercent === 0 ? 0 : strokeWidth,
+      fillOpacity: "0",
+      style: sectionStyle
+    });
+    startPercent = endPercent;
+    return sectionPath;
+  }));
+});
+ProgressCircleSections.displayName = 'ProgressCircleSections';
+var _default = exports.default = ProgressCircleSections;

package/cjs/ProgressCircle/hooks/useProgressCirclePath.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+interface ProgressCirclePathOptions {
+    /** Circular progress bar degree */
+    gapDegree: number;
+    /** Circular progress bar Notch position */
+    gapPosition: 'top' | 'bottom' | 'left' | 'right';
+    /** Total percent of progress */
+    totalPercent: number;
+    /** Line color */
+    strokeColor?: string;
+    /** Line width */
+    strokeWidth: number;
+    /** Tail color */
+    trailColor?: string;
+}
+interface ProgressCirclePathResult {
+    /** SVG path string for the circle */
+    pathString: string;
+    /** Style object for the trail path */
+    trailPathStyle: React.CSSProperties;
+    /** Style object for the stroke path */
+    strokePathStyle: React.CSSProperties;
+}
+/**
+ * Custom hook to calculate path string and styles for ProgressCircle
+ */
+declare const useProgressCirclePath: (options: ProgressCirclePathOptions) => ProgressCirclePathResult;
+export default useProgressCirclePath;