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

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/RadioGroup/RadioGroup.d.ts

@@ -14,7 +14,10 @@ export interface RadioContextProps {
     ]>;
 }
 export interface RadioGroupProps<T = string | number> extends BoxProps, FormControlBaseProps<T> {
-    /** A radio group can have different appearances */
+    /**
+     * A radio group can have different appearances
+     * @deprecated Use `<SegmentedControl indicator="underline" />` instead
+     */
     appearance?: 'default' | 'picker';
     /** Name to use for form */
     name?: string;

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

package/esm/Rate/useRatingStates.js

@@ -4,13 +4,12 @@ import { transformValueToStarStatus, transformStarStatusToValue } from "./utils.
 /**
  * Custom hook to manage rating star states for Rate component
  */
-export const useRatingStates = _ref => {
-  let {
-    value,
-    max,
-    allowHalf,
-    valueProp
-  } = _ref;
+export const useRatingStates = ({
+  value,
+  max,
+  allowHalf,
+  valueProp
+}) => {
   // Create a function to generate star states based on value
   const getStarStates = useCallback(v => {
     return transformValueToStarStatus(typeof v !== 'undefined' ? v : value, max, allowHalf);

package/esm/SegmentedControl/Indicator.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface IndicatorProps {
+    style: React.CSSProperties;
+    classPrefix: string;
+}
+declare const Indicator: {
+    ({ style, classPrefix }: IndicatorProps): React.JSX.Element;
+    displayName: string;
+};
+export default Indicator;

package/esm/SegmentedControl/Indicator.js

@@ -0,0 +1,17 @@
+'use client';
+import React from 'react';
+import { useStyles } from "../internals/hooks/index.js";
+const Indicator = ({
+  style,
+  classPrefix
+}) => {
+  const {
+    prefix
+  } = useStyles(classPrefix);
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefix('indicator'),
+    style: style
+  });
+};
+Indicator.displayName = 'Indicator';
+export default Indicator;

package/esm/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { BoxProps } from '../internals/Box';
+import type { FormControlBaseProps, Size } from '../internals/types';
+export interface SegmentedItemDataType {
+    /** The label of the item */
+    label: React.ReactNode;
+    /** The value of the item */
+    value: string | number;
+}
+export interface SegmentedControlProps<T = string | number | null> extends BoxProps, Omit<FormControlBaseProps<T>, 'readOnly' | 'plaintext'> {
+    /** The indicator style of the segmented control */
+    indicator?: 'pill' | 'underline';
+    /** Name to use for form */
+    name?: string;
+    /** Data of segmented items */
+    data?: SegmentedItemDataType[];
+    /** Display block style, fit the width of the container */
+    block?: boolean;
+    /** A segmented control can have different sizes */
+    size?: Size;
+}
+/**
+ * The `SegmentedControl` component is used to offer multiple exclusive options.
+ * @see https://rsuitejs.com/components/segmented-control
+ */
+declare const SegmentedControl: import("../internals/types").InternalRefForwardingComponent<"div", SegmentedControlProps<string | number | null>, never> & Record<string, never>;
+export default SegmentedControl;

package/esm/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,81 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useRef } from 'react';
+import Box from "../internals/Box/index.js";
+import SegmentedItem from "./SegmentedItem.js";
+import Indicator from "./Indicator.js";
+import { forwardRef, mergeRefs } from "../internals/utils/index.js";
+import { useStyles, useCustom, useControlled, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
+import useIndicatorPosition from "./hooks/useIndicatorPosition.js";
+/**
+ * The `SegmentedControl` component is used to offer multiple exclusive options.
+ * @see https://rsuitejs.com/components/segmented-control
+ */
+const SegmentedControl = forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('SegmentedControl', props);
+  const {
+    as,
+    className,
+    classPrefix = 'segmented-control',
+    value: valueProp,
+    defaultValue,
+    indicator = 'pill',
+    size = 'md',
+    block = false,
+    name,
+    disabled,
+    data,
+    onChange,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    merge,
+    withPrefix
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
+  const [value, setValue] = useControlled(valueProp, defaultValue);
+  const id = useUniqueId('segmented', name);
+
+  // Ref for container element
+  const containerRef = useRef(null);
+
+  // Get the active item index
+  const activeIndex = data === null || data === void 0 ? void 0 : data.findIndex(item => item.value === value);
+  const {
+    style: indicatorStyle
+  } = useIndicatorPosition({
+    containerRef,
+    activeIndex,
+    indicator,
+    data
+  });
+  const handleChange = useEventCallback((nextValue, event) => {
+    setValue(nextValue);
+    onChange === null || onChange === void 0 || onChange(nextValue !== null && nextValue !== void 0 ? nextValue : '', event);
+  });
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
+    role: "radiogroup",
+    ref: mergeRefs(ref, containerRef),
+    className: classes,
+    "data-size": size,
+    "data-block": block || undefined,
+    "data-indicator": indicator
+  }, rest), data === null || data === void 0 ? void 0 : data.map((item, index) => /*#__PURE__*/React.createElement(SegmentedItem, {
+    key: index,
+    item: item,
+    index: index,
+    name: id,
+    active: value === item.value,
+    disabled: disabled,
+    classPrefix: classPrefix,
+    onChange: handleChange
+  })), activeIndex !== -1 && /*#__PURE__*/React.createElement(Indicator, {
+    style: indicatorStyle,
+    classPrefix: classPrefix
+  }));
+});
+SegmentedControl.displayName = 'SegmentedControl';
+export default SegmentedControl;