rsuite 6.0.0-canary-20250424 → 6.0.0-canary-20250620

package/esm/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/esm/Progress/ProgressLine.js

@@ -2,8 +2,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import Box from "../internals/Box/index.js";
-import { PROGRESS_STATUS_ICON } from "../internals/constants/statusIcons.js";
-import { forwardRef } from "../internals/utils/index.js";
+import ProgressInfo from "./ProgressInfo.js";
+import ProgressStroke from "./ProgressStroke.js";
+import ProgressSections from "./ProgressSections.js";
+import { forwardRef, mergeStyles, getCssValue } from "../internals/utils/index.js";
 import { useStyles, useCustom } from "../internals/hooks/index.js";
 /**
  * The `Progress.Line` component is used to display the progress of current operation.
@@ -16,61 +18,70 @@ const ProgressLine = 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
   } = 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.createElement("span", {
-    className: prefix(`icon-${status || ''}`)
-  }, PROGRESS_STATUS_ICON[status]) : /*#__PURE__*/React.createElement("span", {
-    className: prefix('info-status')
-  }, percent, "%");
+  const totalPercent = sections ? sections.reduce((sum, section) => sum + section.percent, 0) : percent;
+  const styles = mergeStyles(cssVar('trail-size', getCssValue(trailWidth || strokeWidth)), cssVar('trail-color', trailColor), cssVar('stroke', `${totalPercent}%`), cssVar('size', getCssValue(strokeWidth)), cssVar('color', strokeColor), cssVar('radius', getCssValue(radius)), style);
+  const info = /*#__PURE__*/React.createElement(ProgressInfo, {
+    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.createElement(Box, _extends({
     as: as,
+    ref: ref,
+    className: classes,
     role: "progressbar",
     "aria-valuemin": "0",
     "aria-valuemax": "100",
-    "aria-valuenow": percent
-  }, rest, {
-    ref: ref,
-    className: classes
-  }), /*#__PURE__*/React.createElement("div", {
-    className: prefix('line-outer')
-  }, /*#__PURE__*/React.createElement("div", {
-    className: prefix('line-inner'),
-    style: lineInnerStyle
+    "aria-valuenow": totalPercent,
+    "data-status": status,
+    "data-placement": percentPlacement,
+    style: styles
+  }, rest), /*#__PURE__*/React.createElement("div", {
+    className: prefix('outer')
   }, /*#__PURE__*/React.createElement("div", {
-    className: prefix('line-bg'),
-    style: percentStyle
-  }))), showInfo ? /*#__PURE__*/React.createElement("div", {
-    className: prefix('info')
-  }, info) : null);
+    className: prefix('trail')
+  }, sections ? /*#__PURE__*/React.createElement(ProgressSections, {
+    classPrefix: classPrefix,
+    sections: sections,
+    vertical: vertical
+  }) : /*#__PURE__*/React.createElement(ProgressStroke, {
+    classPrefix: classPrefix,
+    percent: indeterminate ? 100 : percent,
+    vertical: vertical
+  }, showInfo && isInsidePlacement ? info : null))), showInfo && !isInsidePlacement ? info : null);
 });
 ProgressLine.displayName = 'ProgressLine';
 export default ProgressLine;

package/esm/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/esm/Progress/ProgressSections.js

@@ -0,0 +1,38 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import ProgressStroke from "./ProgressStroke.js";
+import { useStyles } from "../internals/hooks/index.js";
+/**
+ * A component to render multiple sections in a progress bar
+ */
+const ProgressSections = /*#__PURE__*/React.memo(props => {
+  const {
+    classPrefix,
+    sections,
+    vertical,
+    ...rest
+  } = props;
+  const {
+    prefix
+  } = useStyles(classPrefix);
+  let countPercent = 0;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: prefix('sections')
+  }, rest), sections.map((section, index) => {
+    const sectionStroke = /*#__PURE__*/React.createElement(ProgressStroke, {
+      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';
+export default ProgressSections;

package/esm/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/esm/Progress/ProgressStroke.js

@@ -0,0 +1,46 @@
+'use client';
+import React from 'react';
+import { useStyles } from "../internals/hooks/index.js";
+import { mergeStyles } from "../internals/utils/index.js";
+import Tooltip from "../Tooltip/index.js";
+import Whisper from "../Whisper/index.js";
+/**
+ * A single stroke component used within ProgressLine
+ */
+const ProgressStroke = /*#__PURE__*/React.memo(props => {
+  const {
+    classPrefix,
+    percent,
+    color,
+    vertical,
+    children,
+    isSection,
+    tooltip,
+    style,
+    countPercent
+  } = props;
+  const {
+    prefix
+  } = useStyles(classPrefix);
+
+  // Build class names
+  const classes = prefix('stroke', {
+    section: isSection
+  });
+  const content = /*#__PURE__*/React.createElement("div", {
+    className: classes,
+    style: mergeStyles(style, {
+      width: vertical ? '100%' : `${percent}%`,
+      height: vertical ? `${percent}%` : '100%',
+      background: color,
+      bottom: vertical ? `${countPercent}%` : undefined
+    })
+  }, children);
+  return tooltip ? /*#__PURE__*/React.createElement(Whisper, {
+    trigger: "hover",
+    placement: "top",
+    speaker: /*#__PURE__*/React.createElement(Tooltip, null, tooltip)
+  }, content) : content;
+});
+ProgressStroke.displayName = 'ProgressStroke';
+export default ProgressStroke;

package/esm/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/esm/Progress/index.js

@@ -1,6 +1,6 @@
 'use client';
 import Progress from "./Progress.js";
-import ProgressCircle from "./ProgressCircle.js";
+import ProgressCircle from "../ProgressCircle/index.js";
 import ProgressLine from "./ProgressLine.js";
 
 // export types

package/esm/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/esm/Progress/types.js

@@ -0,0 +1,2 @@
+'use client';
+export {};

package/esm/{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/esm/ProgressCircle/ProgressCircle.js

@@ -0,0 +1,107 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useMemo } from 'react';
+import Box from "../internals/Box/index.js";
+import ProgressInfo from "../Progress/ProgressInfo.js";
+import ProgressCircleSections from "./ProgressCircleSections.js";
+import useProgressCirclePath from "./hooks/useProgressCirclePath.js";
+import { forwardRef } from "../internals/utils/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
+/**
+ * Display circular progress for an operation.
+ * @see https://rsuitejs.com/components/progress-circle
+ */
+const ProgressCircle = forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = 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 = useMemo(() => {
+    if (!sections) return percent;
+    return Math.min(100, sections.reduce((acc, section) => acc + section.percent, 0));
+  }, [percent, sections]);
+  const {
+    pathString,
+    trailPathStyle,
+    strokePathStyle
+  } = useProgressCirclePath({
+    gapDegree,
+    gapPosition,
+    totalPercent,
+    strokeColor,
+    strokeWidth,
+    trailColor
+  });
+  const {
+    prefix,
+    merge,
+    withPrefix
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix({
+    [`${status || ''}`]: !!status
+  }));
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
+    role: "progressbar",
+    "aria-valuemin": "0",
+    "aria-valuemax": "100",
+    "aria-valuenow": totalPercent,
+    ref: ref,
+    className: classes,
+    style: style
+  }, rest), showInfo && /*#__PURE__*/React.createElement(ProgressInfo, {
+    percent: totalPercent,
+    renderInfo: renderInfo,
+    status: status,
+    classPrefix: classPrefix
+  }), /*#__PURE__*/React.createElement("svg", {
+    className: prefix('svg'),
+    viewBox: "0 0 100 100"
+  }, /*#__PURE__*/React.createElement("path", {
+    className: prefix('trail'),
+    d: pathString,
+    strokeWidth: trailWidth || strokeWidth,
+    fillOpacity: "0",
+    style: trailPathStyle
+  }), sections ? /*#__PURE__*/React.createElement(ProgressCircleSections, {
+    classPrefix: classPrefix,
+    sections: sections,
+    pathString: pathString,
+    strokeLinecap: strokeLinecap,
+    strokeWidth: strokeWidth,
+    gapDegree: gapDegree,
+    totalPercent: totalPercent
+  }) :
+  /*#__PURE__*/
+  // Render single stroke
+  React.createElement("path", {
+    d: pathString,
+    strokeLinecap: strokeLinecap,
+    className: prefix('stroke'),
+    strokeWidth: totalPercent === 0 ? 0 : strokeWidth,
+    fillOpacity: "0",
+    style: strokePathStyle
+  })));
+});
+ProgressCircle.displayName = 'ProgressCircle';
+export default ProgressCircle;

package/esm/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/esm/ProgressCircle/ProgressCircleSections.js

@@ -0,0 +1,47 @@
+'use client';
+import React from 'react';
+import { useStyles } from "../internals/hooks/index.js";
+/**
+ * A component to render multiple sections in a circular progress bar
+ */
+const ProgressCircleSections = /*#__PURE__*/React.memo(props => {
+  const {
+    classPrefix,
+    sections,
+    pathString,
+    strokeLinecap,
+    strokeWidth,
+    gapDegree,
+    totalPercent
+  } = props;
+  const {
+    prefix
+  } = useStyles(classPrefix);
+  let startPercent = 0;
+  return /*#__PURE__*/React.createElement(React.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.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';
+export default ProgressCircleSections;

package/esm/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;

package/esm/ProgressCircle/hooks/useProgressCirclePath.js

@@ -0,0 +1,62 @@
+'use client';
+import { useMemo } from 'react';
+/**
+ * Custom hook to calculate path string and styles for ProgressCircle
+ */
+const useProgressCirclePath = options => {
+  const {
+    gapDegree,
+    gapPosition,
+    totalPercent,
+    strokeColor,
+    strokeWidth,
+    trailColor
+  } = options;
+  return useMemo(() => {
+    const radius = 50 - strokeWidth / 2;
+    let x1 = 0;
+    let y1 = -radius;
+    let x2 = 0;
+    let y2 = -2 * radius;
+    switch (gapPosition) {
+      case 'left':
+        x1 = -radius;
+        y1 = 0;
+        x2 = 2 * radius;
+        y2 = 0;
+        break;
+      case 'right':
+        x1 = radius;
+        y1 = 0;
+        x2 = -2 * radius;
+        y2 = 0;
+        break;
+      case 'bottom':
+        y1 = radius;
+        y2 = 2 * radius;
+        break;
+      default:
+      // 'top' is the default, values are already set
+    }
+    const pathString = `M 50,50 m ${x1},${y1} a ${radius},${radius} 0 1 1 ${x2},${-y2} a ${radius},${radius} 0 1 1 ${-x2},${y2}`;
+    const len = Math.PI * 2 * radius;
+    // Convert gapDegree from degrees to a proportion of the circumference
+    const gapLength = gapDegree / 360 * len;
+    const trailPathStyle = {
+      stroke: trailColor,
+      strokeDasharray: `${len - gapLength}px ${len}px`,
+      strokeDashoffset: `-${gapLength / 2}px`
+    };
+    const strokePathStyle = {
+      stroke: strokeColor,
+      strokeDasharray: `${totalPercent / 100 * (len - gapLength)}px ${len}px`,
+      strokeDashoffset: `-${gapLength / 2}px`
+    };
+    return {
+      pathString,
+      trailPathStyle,
+      strokePathStyle
+    };
+  }, [gapDegree, gapPosition, totalPercent, strokeColor, strokeWidth, trailColor]);
+};
+export default useProgressCirclePath;

package/esm/ProgressCircle/index.d.ts

@@ -0,0 +1,4 @@
+import ProgressCircle from './ProgressCircle';
+export type { ProgressCircleProps } from './ProgressCircle';
+export { ProgressCircle };
+export default ProgressCircle;

package/esm/ProgressCircle/index.js

@@ -0,0 +1,8 @@
+'use client';
+import ProgressCircle from "./ProgressCircle.js";
+
+// export types
+
+// export components
+export { ProgressCircle };
+export default ProgressCircle;

package/esm/RangeSlider/RangeSlider.js

@@ -300,7 +300,6 @@ const RangeSlider = forwardRef((props, ref) => {
     ref: barRef,
     onClick: handleBarClick
   }, progress && /*#__PURE__*/React.createElement(ProgressBar, {
-    rtl: rtl,
     vertical: vertical,
     start: (value[0] - min) / (max - min) * 100,
     end: (value[1] - min) / (max - min) * 100