rsuite 6.0.0-canary-2025032014 → 6.0.0-canary-20250403

package/esm/Slider/Graduated.js

@@ -16,12 +16,14 @@ const Graduated = forwardRef((props, ref) => {
     value,
     classPrefix = 'slider',
     className,
+    marks = [],
     renderMark,
     ...rest
   } = props;
   const {
     merge,
-    prefix
+    prefix,
+    cssVar
   } = useStyles(classPrefix);
   const activeIndexs = [];
   let startIndex = 0;
@@ -37,32 +39,53 @@ const Graduated = forwardRef((props, ref) => {
     activeIndexs.push(precisionMath(Math.ceil((value - min) / (max - min) * count)));
   }
   const graduatedItems = [];
-  for (let i = 0; i < count; i += 1) {
-    const classes = prefix({
-      pass: i >= startIndex && i <= endIndex,
-      active: ~activeIndexs.indexOf(i)
+
+  // If custom marks are provided, use them
+  if (marks.length > 0) {
+    // Only create DOM nodes for the specific mark values
+    marks.forEach((mark, index) => {
+      // Calculate the position index for this mark
+      const markPosition = precisionMath((mark.value - min) / (max - min) * count);
+      graduatedItems.push(/*#__PURE__*/React.createElement("li", {
+        className: prefix('tick'),
+        key: `${mark.value}-${index}`,
+        "data-pass": markPosition >= startIndex && markPosition <= endIndex,
+        "data-active": activeIndexs.indexOf(markPosition) !== -1,
+        style: cssVar('tick-offset', `${(mark.value - min) / (max - min) * 100}%`)
+      }, /*#__PURE__*/React.createElement(Mark, {
+        mark: mark.value,
+        renderMark: () => mark.label || mark.value
+      })));
     });
-    const mark = precisionMath(i * step + min);
-    const lastMark = Math.min(max, mark + step);
-    const last = i === count - 1;
-    graduatedItems.push(/*#__PURE__*/React.createElement("li", {
-      className: classes,
-      key: i
-    }, /*#__PURE__*/React.createElement(Mark, {
-      mark: mark,
-      renderMark: renderMark
-    }), last ? /*#__PURE__*/React.createElement(Mark, {
-      mark: lastMark,
-      renderMark: renderMark,
-      last: last
-    }) : null));
+  } else {
+    // Original implementation for when no custom marks are provided
+    for (let i = 0; i < count; i += 1) {
+      const mark = precisionMath(i * step + min);
+      const lastMark = Math.min(max, mark + step);
+      const last = i === count - 1;
+      graduatedItems.push(/*#__PURE__*/React.createElement("li", {
+        className: prefix('tick'),
+        "data-pass": i >= startIndex && i <= endIndex,
+        "data-active": activeIndexs.indexOf(i) !== -1,
+        key: i
+      }, /*#__PURE__*/React.createElement(Mark, {
+        mark: mark,
+        renderMark: renderMark
+      }), last ? /*#__PURE__*/React.createElement(Mark, {
+        mark: lastMark,
+        renderMark: renderMark,
+        last: last
+      }) : null));
+    }
   }
   const classes = merge(className, prefix('graduator'));
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: as,
     ref: ref,
     className: classes
-  }, rest), /*#__PURE__*/React.createElement("ol", null, graduatedItems));
+  }, rest, {
+    "data-with-marks": marks.length > 0
+  }), /*#__PURE__*/React.createElement("ol", null, graduatedItems));
 });
 Graduated.displayName = 'Graduated';
 export default Graduated;

package/esm/Slider/Handle.d.ts

@@ -4,9 +4,9 @@ export interface HandleProps extends BoxProps, React.HTMLAttributes<HTMLDivEleme
     disabled?: boolean;
     vertical?: boolean;
     tooltip?: boolean;
-    rtl?: boolean;
     position?: number;
     value?: number;
+    keepTooltipOpen?: boolean;
     renderTooltip?: (value: number | undefined) => React.ReactNode;
     onDragMove?: (event: React.DragEvent, dataset?: DOMStringMap) => void;
     onDragStart?: (event: React.MouseEvent) => void;

package/esm/Slider/Handle.js

@@ -18,10 +18,10 @@ const Handle = forwardRef((props, ref) => {
     position,
     vertical,
     tooltip,
-    rtl,
     value,
     role,
     tabIndex,
+    keepTooltipOpen,
     renderTooltip,
     onDragStart,
     onDragMove,
@@ -31,15 +31,13 @@ const Handle = forwardRef((props, ref) => {
     'data-key': dateKey,
     ...rest
   } = props;
-  const horizontalKey = rtl ? 'right' : 'left';
-  const direction = vertical ? 'bottom' : horizontalKey;
-  const styles = mergeStyles(style, {
-    [direction]: `${position}%`
-  });
+  const actualTooltip = tooltip || keepTooltipOpen;
   const {
     merge,
-    prefix
+    prefix,
+    cssVar
   } = useStyles(classPrefix);
+  const styles = mergeStyles(style, cssVar('offset', `${position}%`));
   const {
     active,
     onMoveStart,
@@ -47,14 +45,15 @@ const Handle = forwardRef((props, ref) => {
     rootRef,
     tooltipRef
   } = useDrag({
-    tooltip,
+    tooltip: actualTooltip,
     disabled,
     onDragStart,
     onDragMove,
-    onDragEnd
+    onDragEnd,
+    keepTooltipOpen
   });
   const handleClasses = merge(className, prefix('handle'), {
-    active
+    active: active || keepTooltipOpen
   });
   return /*#__PURE__*/React.createElement(Box, {
     as: as,
@@ -70,10 +69,11 @@ const Handle = forwardRef((props, ref) => {
     "data-range": dataRange,
     "data-key": dateKey,
     "data-testid": "slider-handle"
-  }, tooltip && /*#__PURE__*/React.createElement(Tooltip, {
+  }, actualTooltip && /*#__PURE__*/React.createElement(Tooltip, {
     "aria-hidden": "true",
     ref: tooltipRef,
-    className: merge(prefix('tooltip'), 'placement-top')
+    className: prefix('tooltip'),
+    "data-placement": vertical ? 'left' : 'top'
   }, renderTooltip ? renderTooltip(value) : value), /*#__PURE__*/React.createElement(Input, _extends({
     tabIndex: -1,
     value: value

package/esm/Slider/Slider.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BoxProps } from '../internals/Box';
-import type { FormControlBaseProps } from '../internals/types';
+import type { FormControlBaseProps, Size } from '../internals/types';
 export interface LocaleType {
     placeholder?: string;
     searchPlaceholder?: string;
@@ -44,6 +44,21 @@ export interface SliderProps<T = number> extends BoxProps, FormControlBaseProps<
     placeholder?: React.ReactNode;
     /** Vertical Slide */
     vertical?: boolean;
+    /** If true, tooltip will always be visible  even without hover */
+    keepTooltipOpen?: boolean;
+    /**
+     * A slider can have different sizes.
+     *
+     * @default 'sm'
+     */
+    size?: Size;
+    /**
+     * Custom marks on the ruler
+     */
+    marks?: {
+        value: number;
+        label: React.ReactNode;
+    }[];
     /** Customize labels on the render ruler */
     renderMark?: (mark: number) => React.ReactNode;
     /** Customize the content of the rendered Tooltip. */

package/esm/Slider/Slider.js

@@ -42,15 +42,18 @@ const Slider = forwardRef((props, ref) => {
     handleTitle,
     tooltip = true,
     step = 1,
+    size = 'sm',
     defaultValue = 0,
     value: valueProp,
     max: maxProp = 100,
     placeholder,
+    marks,
     getAriaValueText,
     renderTooltip,
     renderMark,
     onChange,
     onChangeCommitted,
+    keepTooltipOpen,
     ...rest
   } = propsWithDefaults;
   const barRef = useRef(null);
@@ -178,7 +181,8 @@ const Slider = forwardRef((props, ref) => {
     as: as,
     ref: ref,
     role: "presentation",
-    className: classes
+    className: classes,
+    "data-size": size
   }, rest), /*#__PURE__*/React.createElement("div", {
     ref: barRef,
     className: merge(barClassName, prefix('bar')),
@@ -195,6 +199,7 @@ const Slider = forwardRef((props, ref) => {
     max: max,
     count: count,
     value: value,
+    marks: marks,
     renderMark: renderMark
   })), /*#__PURE__*/React.createElement(Handle, {
     position: (value - min) / (max - min) * 100,
@@ -203,8 +208,8 @@ const Slider = forwardRef((props, ref) => {
     disabled: disabled,
     vertical: vertical,
     tooltip: tooltip,
-    rtl: rtl,
     value: value,
+    keepTooltipOpen: keepTooltipOpen,
     renderTooltip: renderTooltip,
     onDragMove: handleChangeValue,
     onKeyDown: handleKeyDown,

package/esm/Slider/useDrag.d.ts

@@ -5,6 +5,7 @@ interface DragProps {
     onDragStart?: (event: React.MouseEvent) => void;
     onDragMove?: (event: React.DragEvent, dataset?: DOMStringMap) => void;
     onDragEnd?: (event: React.MouseEvent, dataset?: DOMStringMap) => void;
+    keepTooltipOpen?: boolean;
 }
 declare const useDrag: (props: DragProps) => {
     active: boolean;

package/esm/Slider/useDrag.js

@@ -12,7 +12,8 @@ const useDrag = props => {
     disabled,
     onDragMove,
     onDragEnd,
-    onDragStart
+    onDragStart,
+    keepTooltipOpen
   } = props;
   const [active, setActive] = useState(false);
   const moveTracker = useRef(null);
@@ -27,8 +28,9 @@ const useDrag = props => {
     const tooltipElement = tooltipRef.current;
     if (tooltip && tooltipElement) {
       const width = getWidth(tooltipElement);
+
       // Set the position of the tooltip
-      addStyle(tooltipElement, 'left', `-${width / 2}px`);
+      addStyle(tooltipElement, '--rs-tooltip-offset', `-${width / 2}px`);
     }
   }, [tooltip]);
   const handleDragMove = useEventCallback((_deltaX, _deltaY, event) => {
@@ -67,10 +69,13 @@ const useDrag = props => {
     setTooltipPosition();
   });
   useEffect(() => {
+    if (keepTooltipOpen) {
+      onMouseEnter();
+    }
     return () => {
       releaseMoves();
     };
-  }, [releaseMoves]);
+  }, [releaseMoves, keepTooltipOpen]);
   return {
     active,
     rootRef,

package/esm/Steps/Steps.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import StepItem from "./StepItem.js";
 import Box from "../internals/Box/index.js";
-import { forwardRef, ReactChildren } from "../internals/utils/index.js";
+import { forwardRef, rch } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 const Subcomponents = {
@@ -41,8 +41,8 @@ const Steps = forwardRef((props, ref) => {
     vertical,
     horizontal: !vertical
   }));
-  const count = ReactChildren.count(children);
-  const items = ReactChildren.mapCloneElement(children, (item, index) => {
+  const count = rch.count(children);
+  const items = rch.mapCloneElement(children, (item, index) => {
     const itemStyles = {
       flexBasis: index < count - 1 ? `${100 / (count - 1)}%` : undefined,
       maxWidth: index === count - 1 ? `${100 / count}%` : undefined

package/esm/Tabs/Tabs.js

@@ -5,7 +5,7 @@ import Nav from "../Nav/index.js";
 import Tab from "./Tab.js";
 import TabPanel from "./TabPanel.js";
 import Box from "../internals/Box/index.js";
-import { forwardRef, ReactChildren } from "../internals/utils/index.js";
+import { forwardRef, rch } from "../internals/utils/index.js";
 import { useStyles, useControlled, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 
@@ -56,7 +56,7 @@ const renderPanels = (children, tabProps) => {
     id,
     activeKey
   } = tabProps;
-  return ReactChildren.map(children, child => {
+  return rch.map(children, child => {
     const {
       eventKey,
       children
@@ -75,7 +75,7 @@ const renderTabs = (children, tabPanelProps) => {
     id,
     activeKey
   } = tabPanelProps;
-  return ReactChildren.map(children, child => {
+  return rch.map(children, child => {
     const {
       eventKey,
       title,

package/esm/Timeline/Timeline.js

@@ -6,7 +6,7 @@ import TimelineItem from "./TimelineItem.js";
 import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
-import { forwardRef, ReactChildren } from "../internals/utils/index.js";
+import { forwardRef, rch } from "../internals/utils/index.js";
 const ACTIVE_FIRST = index => index === 0;
 const ACTIVE_LAST = (index, totalItemsCount) => index === totalItemsCount - 1;
 const SubcomponentsAndStaticMethods = {
@@ -38,7 +38,7 @@ const Timeline = forwardRef((props, ref) => {
     merge,
     withPrefix
   } = useStyles(classPrefix);
-  const count = ReactChildren.count(children);
+  const count = rch.count(children);
   const withTime = some(React.Children.toArray(children), item => {
     var _item$props;
     return item === null || item === void 0 || (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.time;
@@ -51,7 +51,7 @@ const Timeline = forwardRef((props, ref) => {
     as: as,
     ref: ref,
     className: classes
-  }, rest), ReactChildren.mapCloneElement(children, (_child, index) => ({
+  }, rest), rch.mapCloneElement(children, (_child, index) => ({
     last: index + 1 === count,
     INTERNAL_active: isItemActive(index, count),
     align

package/esm/Toggle/Toggle.d.ts

@@ -42,11 +42,19 @@ export interface ToggleProps extends BoxProps, SanitizedInputProps {
     /**
      * The size of the toggle
      */
-    size?: Omit<Size, 'xs'>;
+    size?: Size;
     /**
      * Custom locale
      */
     locale?: ToggleLocale;
+    /**
+     * The label of the toggle switch
+     */
+    label?: React.ReactNode;
+    /**
+     * The placement of the label
+     */
+    labelPlacement?: 'start' | 'end';
     /**
      * Called when the state of the toggle changes
      */

package/esm/Toggle/Toggle.js

@@ -32,6 +32,8 @@ const Toggle = forwardRef((props, ref) => {
     defaultChecked,
     size = 'md',
     locale,
+    label = children,
+    labelPlacement = 'end',
     onChange,
     ...rest
   } = propsWithDefaults;
@@ -48,10 +50,10 @@ const Toggle = forwardRef((props, ref) => {
     loading
   }));
   const inner = checked ? checkedChildren : unCheckedChildren;
-  const label = checked ? locale === null || locale === void 0 ? void 0 : locale.on : locale === null || locale === void 0 ? void 0 : locale.off;
+  const innerLabel = checked ? locale === null || locale === void 0 ? void 0 : locale.on : locale === null || locale === void 0 ? void 0 : locale.off;
   const labelId = useUniqueId('rs-label');
   const innerId = inner ? labelId + '-inner' : undefined;
-  const labelledby = children ? labelId : innerId;
+  const labelledby = label ? labelId : innerId;
   const [htmlInputProps, restProps] = partitionHTMLProps(rest);
   const handleInputChange = useEventCallback(e => {
     if (disabled || readOnly || loading) {
@@ -64,12 +66,13 @@ const Toggle = forwardRef((props, ref) => {
     onChange === null || onChange === void 0 || onChange(checked, e);
   });
   if (plaintext) {
-    return /*#__PURE__*/React.createElement(Plaintext, null, inner || label);
+    return /*#__PURE__*/React.createElement(Plaintext, null, inner || innerLabel);
   }
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: as,
     ref: ref,
-    className: classes
+    className: classes,
+    "data-placement": labelPlacement
   }, restProps), /*#__PURE__*/React.createElement("input", _extends({}, htmlInputProps, {
     ref: inputRef,
     type: "checkbox",
@@ -83,19 +86,19 @@ const Toggle = forwardRef((props, ref) => {
     "aria-checked": checked,
     "aria-disabled": disabled,
     "aria-labelledby": labelledby,
-    "aria-label": labelledby ? undefined : label,
+    "aria-label": labelledby ? undefined : innerLabel,
     "aria-busy": loading || undefined
   })), /*#__PURE__*/React.createElement("span", {
-    className: prefix('presentation')
-  }, /*#__PURE__*/React.createElement("span", {
+    className: prefix('track')
+  }, inner && /*#__PURE__*/React.createElement("span", {
     className: prefix('inner'),
     id: innerId
   }, inner), loading && /*#__PURE__*/React.createElement(Loader, {
     className: prefix('loader')
-  })), children && /*#__PURE__*/React.createElement("span", {
+  })), label && /*#__PURE__*/React.createElement("span", {
     className: prefix('label'),
     id: labelId
-  }, children));
+  }, label));
 });
 Toggle.displayName = 'Toggle';
 export default Toggle;