rsuite 6.0.0-canary-20250620 → 6.0.0-canary-2025062016

package/esm/Grid/utils/styles.d.ts

@@ -3,4 +3,4 @@ import type { GutterType } from '../types';
 /**
  * Generates CSS variable styles for grid gutters, supporting both single values and arrays [horizontal, vertical]
  */
-export declare const getResponsiveGutterStyles: (gutter?: GutterType | ResponsiveValue<GutterType>) => Record<string, string>;
+export declare const getResponsiveGutterStyles: (gutter?: GutterType | ResponsiveValue<GutterType>) => Record<string, string | undefined>;

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

package/esm/SegmentedControl/SegmentedItem.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SegmentedItemDataType } from './SegmentedControl';
+export interface SegmentedItemProps {
+    item: SegmentedItemDataType;
+    index: number;
+    name?: string;
+    active: boolean;
+    disabled?: boolean;
+    classPrefix: string;
+    onChange: (value: string | number, event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const SegmentedItem: {
+    ({ item, index, name, active, disabled, classPrefix, onChange }: SegmentedItemProps): React.JSX.Element;
+    displayName: string;
+};
+export default SegmentedItem;

package/esm/SegmentedControl/SegmentedItem.js

@@ -0,0 +1,39 @@
+'use client';
+import React from 'react';
+import { useStyles } from "../internals/hooks/index.js";
+const SegmentedItem = ({
+  item,
+  index,
+  name,
+  active,
+  disabled,
+  classPrefix,
+  onChange
+}) => {
+  const {
+    prefix
+  } = useStyles(classPrefix);
+  const handleChange = event => {
+    if (disabled) return;
+    onChange(item.value, event);
+  };
+  return /*#__PURE__*/React.createElement("label", {
+    className: prefix('item'),
+    "data-value": item.value,
+    "data-index": index,
+    "data-active": active || undefined,
+    "data-disabled": disabled || undefined
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "radio",
+    name: name,
+    value: String(item.value),
+    checked: active,
+    disabled: disabled,
+    onChange: handleChange,
+    className: prefix('radio')
+  }), /*#__PURE__*/React.createElement("span", {
+    className: prefix('label')
+  }, item.label));
+};
+SegmentedItem.displayName = 'SegmentedItem';
+export default SegmentedItem;

package/esm/SegmentedControl/hooks/useIndicatorPosition.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+interface UseIndicatorPositionProps {
+    containerRef: RefObject<HTMLDivElement | null>;
+    activeIndex?: number;
+    indicator: 'pill' | 'underline';
+    data?: Array<{
+        value: string | number;
+    }>;
+    block?: boolean;
+}
+/**
+ * Custom hook to calculate and update the indicator position
+ */
+declare const useIndicatorPosition: ({ containerRef, activeIndex, indicator, data }: UseIndicatorPositionProps) => {
+    style: import("react").CSSProperties;
+};
+export default useIndicatorPosition;

package/esm/SegmentedControl/hooks/useIndicatorPosition.js

@@ -0,0 +1,50 @@
+'use client';
+import { useCallback, useEffect, useState } from 'react';
+import isEqual from 'lodash/isEqual';
+import { useElementResize } from "../../internals/hooks/index.js";
+/**
+ * Updates the indicator position based on the active item
+ */
+const updateIndicatorPosition = (container, activeIndex, indicator) => {
+  if (activeIndex === -1) return {};
+  const activeItem = container.querySelector(`[data-index="${activeIndex}"]`);
+  if (!activeItem) return {};
+  const containerStyle = window.getComputedStyle(container);
+  const paddingLeft = parseFloat(containerStyle.paddingLeft) || 0;
+  return {
+    transform: `translateX(${activeItem.offsetLeft - paddingLeft}px)`,
+    width: activeItem.offsetWidth,
+    height: indicator === 'underline' ? 2 : activeItem.offsetHeight
+  };
+};
+
+/**
+ * Custom hook to calculate and update the indicator position
+ */
+const useIndicatorPosition = ({
+  containerRef,
+  activeIndex,
+  indicator,
+  data
+}) => {
+  const [indicatorStyle, setIndicatorStyle] = useState({});
+  const updatePosition = useCallback(() => {
+    if (!(containerRef !== null && containerRef !== void 0 && containerRef.current)) {
+      return;
+    }
+    const newStyle = updateIndicatorPosition(containerRef.current, activeIndex, indicator);
+    setIndicatorStyle(prev => isEqual(prev, newStyle) ? prev : newStyle);
+  }, [containerRef, activeIndex, indicator]);
+
+  // Update position when active item or data changes
+  useEffect(() => {
+    updatePosition();
+  }, [updatePosition, data]);
+
+  // Set up resize observer
+  useElementResize(containerRef, updatePosition);
+  return {
+    style: indicatorStyle
+  };
+};
+export default useIndicatorPosition;

package/esm/SegmentedControl/index.d.ts

@@ -0,0 +1,4 @@
+import SegmentedControl from './SegmentedControl';
+export type { SegmentedControlProps, SegmentedItemDataType } from './SegmentedControl';
+export { SegmentedControl };
+export default SegmentedControl;

package/esm/SegmentedControl/index.js

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

package/esm/Slider/ProgressBar.js

@@ -20,7 +20,7 @@ const ProgressBar = forwardRef((props, ref) => {
     withPrefix
   } = useStyles(classPrefix);
   const sizeKey = vertical ? 'height' : 'width';
-  const startKey = vertical ? 'bottom' : 'inset-inline-start';
+  const startKey = vertical ? 'bottom' : 'insetInlineStart';
   const styles = mergeStyles(style, {
     [startKey]: `${start}%`,
     [sizeKey]: `${end - start}%`

package/esm/index.d.ts

@@ -57,6 +57,7 @@ export * from './RadioGroup';
 export * from './RadioTile';
 export * from './RadioTileGroup';
 export * from './SelectPicker';
+export * from './SegmentedControl';
 export * from './CheckPicker';
 export * from './InputPicker';
 export * from './TagPicker';

package/esm/index.js

@@ -81,6 +81,7 @@ export * from "./RadioGroup/index.js";
 export * from "./RadioTile/index.js";
 export * from "./RadioTileGroup/index.js";
 export * from "./SelectPicker/index.js";
+export * from "./SegmentedControl/index.js";
 export * from "./CheckPicker/index.js";
 export * from "./InputPicker/index.js";
 export * from "./TagPicker/index.js";

package/esm/internals/Provider/types.d.ts

@@ -87,6 +87,7 @@ import type { RangeSliderProps } from '../../RangeSlider';
 import type { RateProps } from '../../Rate';
 import type { RowProps } from '../../Row';
 import type { SelectPickerProps } from '../../SelectPicker';
+import type { SegmentedControlProps } from '../../SegmentedControl';
 import type { SidebarProps } from '../../Sidebar';
 import type { SidenavProps } from '../../Sidenav';
 import type { SliderProps } from '../../Slider';
@@ -209,6 +210,7 @@ export interface ReactSuiteComponents {
     Rate: ComponentProps<RateProps>;
     Row: ComponentProps<RowProps>;
     SelectPicker: ComponentProps<SelectPickerProps>;
+    SegmentedControl: ComponentProps<SegmentedControlProps>;
     Sidebar: ComponentProps<SidebarProps>;
     Sidenav: ComponentProps<SidenavProps>;
     Slider: ComponentProps<SliderProps>;

package/esm/internals/hooks/useElementResize.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Attach the event handler directly to the specified DOM element,
  * and it will be triggered when the size of the DOM element is changed.
@@ -5,5 +6,5 @@
  * @param eventTarget The target to listen for events on
  * @param listener An event handler
  */
-export declare function useElementResize(eventTarget: Element | null | (() => Element | null), listener: ResizeObserverCallback): void;
+export declare function useElementResize(eventTarget: Element | null | (() => Element | null) | React.RefObject<Element | null>, listener: ResizeObserverCallback): void;
 export default useElementResize;

package/esm/internals/hooks/useElementResize.js

@@ -11,18 +11,61 @@ import { ResizeObserver } from '@juggle/resize-observer';
  */
 export function useElementResize(eventTarget, listener) {
   const resizeObserver = useRef(null);
+  const currentElement = useRef(null);
+
+  // Create the observer
   useEffect(() => {
-    if (!resizeObserver.current) {
-      const target = typeof eventTarget === 'function' ? eventTarget() : eventTarget;
-      if (target) {
-        resizeObserver.current = new ResizeObserver(listener);
-        resizeObserver.current.observe(target);
+    // Get the target element
+    let target = null;
+    if (eventTarget) {
+      if (typeof eventTarget === 'function') {
+        target = eventTarget();
+      } else if ('current' in eventTarget) {
+        target = eventTarget.current;
+      } else {
+        target = eventTarget;
+      }
+    }
+
+    // If target changed, disconnect the previous observer
+    if (currentElement.current !== target) {
+      if (resizeObserver.current) {
+        resizeObserver.current.disconnect();
+        resizeObserver.current = null;
       }
+      currentElement.current = target;
+    }
+
+    // If we have a target and no observer, create one
+    if (target && !resizeObserver.current) {
+      const observer = new ResizeObserver(listener);
+      observer.observe(target);
+      resizeObserver.current = observer;
     }
+
+    // Cleanup function
     return () => {
-      var _resizeObserver$curre;
-      (_resizeObserver$curre = resizeObserver.current) === null || _resizeObserver$curre === void 0 || _resizeObserver$curre.disconnect();
+      if (resizeObserver.current) {
+        resizeObserver.current.disconnect();
+        resizeObserver.current = null;
+      }
+      currentElement.current = null;
     };
   }, [eventTarget, listener]);
+
+  // Update the current element reference if it changes
+  useEffect(() => {
+    if (eventTarget) {
+      if (typeof eventTarget === 'function') {
+        currentElement.current = eventTarget();
+      } else if ('current' in eventTarget) {
+        currentElement.current = eventTarget.current;
+      } else {
+        currentElement.current = eventTarget;
+      }
+    } else {
+      currentElement.current = null;
+    }
+  }, [eventTarget]);
 }
 export default useElementResize;

package/esm/internals/utils/style-sheet/css.d.ts

@@ -3,7 +3,7 @@ import type { StyleProperties } from '../../types';
 /**
  * Processes and returns a value suitable for CSS (with a unit).
  */
-export declare function getCssValue(value?: number | string | null, unit?: string): string;
+export declare function getCssValue(value?: number | string | null, unit?: string): string | undefined;
 /**
  * Merge multiple style objects, filtering out undefined values
  */

package/esm/internals/utils/style-sheet/css.js

@@ -5,7 +5,7 @@ import isEmpty from 'lodash/isEmpty';
  */
 export function getCssValue(value, unit = 'px') {
   if (value === undefined || value === null || value === '') {
-    return '';
+    return undefined;
   }
 
   // If the value is 0, return it as a string without unit

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "6.0.0-canary-20250620",
+  "version": "6.0.0-canary-2025062016",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",