rsuite 6.0.0-canary-20250620 → 6.0.0-canary-20250622

package/cjs/index.js

@@ -356,6 +356,12 @@ Object.keys(_SelectPicker).forEach(function (key) {
   if (key in exports && exports[key] === _SelectPicker[key]) return;
   exports[key] = _SelectPicker[key];
 });
+var _SegmentedControl = require("./SegmentedControl");
+Object.keys(_SegmentedControl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SegmentedControl[key]) return;
+  exports[key] = _SegmentedControl[key];
+});
 var _CheckPicker = require("./CheckPicker");
 Object.keys(_CheckPicker).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/internals/Box/Box.d.ts

@@ -1,45 +1,45 @@
 import { CSSProperties as CSS } from 'react';
-import type { WithAsProps, Breakpoints, ColorScheme, Size } from '../types';
+import type { WithAsProps, Breakpoints, ResponsiveValue, ColorScheme, Size } from '../types';
 export interface BoxProps extends WithAsProps {
     /** Breakpoint below which the component is shown with `display: block` */
     showFrom?: Breakpoints;
     /** Breakpoint above which the component is hidden with `display: none` */
     hideFrom?: Breakpoints;
     /** Display property */
-    display?: CSS['display'];
+    display?: CSS['display'] | ResponsiveValue<CSS['display']>;
     /** Padding */
-    p?: CSS['padding'];
-    pt?: CSS['paddingTop'];
-    pb?: CSS['paddingBottom'];
-    pl?: CSS['paddingLeft'];
-    pr?: CSS['paddingRight'];
-    px?: CSS['paddingInline'];
-    py?: CSS['paddingBlock'];
+    p?: CSS['padding'] | ResponsiveValue<CSS['padding']>;
+    pt?: CSS['paddingTop'] | ResponsiveValue<CSS['paddingTop']>;
+    pb?: CSS['paddingBottom'] | ResponsiveValue<CSS['paddingBottom']>;
+    pl?: CSS['paddingLeft'] | ResponsiveValue<CSS['paddingLeft']>;
+    pr?: CSS['paddingRight'] | ResponsiveValue<CSS['paddingRight']>;
+    px?: CSS['paddingInline'] | ResponsiveValue<CSS['paddingInline']>;
+    py?: CSS['paddingBlock'] | ResponsiveValue<CSS['paddingBlock']>;
     /** Margin */
-    m?: CSS['margin'];
-    mt?: CSS['marginTop'];
-    mb?: CSS['marginBottom'];
-    ml?: CSS['marginLeft'];
-    mr?: CSS['marginRight'];
-    mx?: CSS['marginInline'];
-    my?: CSS['marginBlock'];
+    m?: CSS['margin'] | ResponsiveValue<CSS['margin']>;
+    mt?: CSS['marginTop'] | ResponsiveValue<CSS['marginTop']>;
+    mb?: CSS['marginBottom'] | ResponsiveValue<CSS['marginBottom']>;
+    ml?: CSS['marginLeft'] | ResponsiveValue<CSS['marginLeft']>;
+    mr?: CSS['marginRight'] | ResponsiveValue<CSS['marginRight']>;
+    mx?: CSS['marginInline'] | ResponsiveValue<CSS['marginInline']>;
+    my?: CSS['marginBlock'] | ResponsiveValue<CSS['marginBlock']>;
     /** Box size */
-    w?: CSS['width'];
-    h?: CSS['height'];
-    minw?: CSS['minWidth'];
-    maxw?: CSS['maxWidth'];
-    minh?: CSS['minHeight'];
-    maxh?: CSS['maxHeight'];
+    w?: CSS['width'] | ResponsiveValue<CSS['width']>;
+    h?: CSS['height'] | ResponsiveValue<CSS['height']>;
+    minw?: CSS['minWidth'] | ResponsiveValue<CSS['minWidth']>;
+    maxw?: CSS['maxWidth'] | ResponsiveValue<CSS['maxWidth']>;
+    minh?: CSS['minHeight'] | ResponsiveValue<CSS['minHeight']>;
+    maxh?: CSS['maxHeight'] | ResponsiveValue<CSS['maxHeight']>;
     /** Box Color */
-    c?: ColorScheme | CSS['color'];
+    c?: ColorScheme | CSS['color'] | ResponsiveValue<ColorScheme | CSS['color']>;
     /** Box Border */
-    bd?: CSS['border'];
+    bd?: CSS['border'] | ResponsiveValue<CSS['border']>;
     /** Box Background */
-    bg?: ColorScheme | CSS['backgroundColor'];
+    bg?: ColorScheme | CSS['backgroundColor'] | ResponsiveValue<ColorScheme | CSS['backgroundColor']>;
     /** Box Border Radius */
-    rounded?: Size | CSS['borderRadius'] | 'full';
+    rounded?: Size | CSS['borderRadius'] | 'full' | ResponsiveValue<Size | CSS['borderRadius'] | 'full'>;
     /** Box Shadow */
-    shadow?: Size | CSS['boxShadow'];
+    shadow?: Size | CSS['boxShadow'] | ResponsiveValue<Size | CSS['boxShadow']>;
 }
 /**
  * Box component is the base component for all components,

package/cjs/internals/Box/Box.js

@@ -7,9 +7,9 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
-var _utils = require("../utils");
 var _forwardRef = require("../utils/react/forwardRef");
-var _utils2 = require("./utils");
+var _utils = require("./utils");
+var _useStyled = require("../hooks/useStyled");
 /**
  * Box component is the base component for all components,
  * providing shorthand for style properties.
@@ -26,18 +26,23 @@ const Box = (0, _forwardRef.forwardRef)((props, ref) => {
     style,
     ...rest
   } = props;
-  const boxProps = (0, _utils2.extractBoxProps)(rest);
-  const domProps = (0, _utils2.omitBoxProps)(rest);
-  const boxCSSVars = (0, _utils2.getBoxCSSVariables)(boxProps);
-  const boxStyle = (0, _utils.mergeStyles)(style, boxCSSVars);
+  const boxProps = (0, _utils.extractBoxProps)(rest);
+  const domProps = (0, _utils.omitBoxProps)(rest);
+  const boxCSSVars = (0, _utils.getBoxCSSVariables)(boxProps);
   const isBox = !(0, _isEmpty.default)(boxCSSVars) || showFrom || hideFrom;
+  const styled = (0, _useStyled.useStyled)({
+    cssVars: boxCSSVars,
+    className,
+    style,
+    enabled: isBox
+  });
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,
     "data-rs": isBox ? 'box' : undefined,
     "data-visible-from": showFrom,
     "data-hidden-from": hideFrom,
-    className: className,
-    style: boxStyle
+    className: styled.className,
+    style: styled.style
   }, domProps), children);
 });
 Box.displayName = 'Box';

package/cjs/internals/Box/utils.d.ts

@@ -1,3 +1,4 @@
+import type { ResponsiveValue } from '../types';
 /**
  * Extract box properties from props
  * @param props Original props object
@@ -10,9 +11,11 @@ export declare const extractBoxProps: (props: Record<string, any>) => Record<str
  * @returns New object without layout properties
  */
 export declare const omitBoxProps: (props: Record<string, any>) => Record<string, any>;
+type CSSVarValue = string | number | undefined | ResponsiveValue<string | number>;
 /**
  * Converts layout properties to CSS variables with abbreviated names
  * @param props Object containing layout properties
  * @returns Object with CSS variables
  */
-export declare const getBoxCSSVariables: (props: Record<string, any>) => Record<string, string | number | undefined>;
+export declare const getBoxCSSVariables: (props: Record<string, any>) => Record<string, CSSVarValue>;
+export {};

package/cjs/internals/Box/utils.js

@@ -4,6 +4,7 @@
 exports.__esModule = true;
 exports.omitBoxProps = exports.getBoxCSSVariables = exports.extractBoxProps = void 0;
 var _utils = require("../utils");
+var _constants = require("../constants");
 // Mapping for padding properties to their CSS style equivalents
 const paddingStyleMap = {
   p: 'padding',
@@ -74,51 +75,191 @@ const omitBoxProps = props => {
   return filteredProps;
 };
 
+/**
+ * Checks if a value is a responsive value object
+ * @param value - Value to check
+ * @returns True if the value is a responsive value object
+ */
+exports.omitBoxProps = omitBoxProps;
+function isResponsiveValue(value) {
+  return value !== null && typeof value === 'object' && !Array.isArray(value) && Object.keys(value).some(key => _constants.BREAKPOINTS.includes(key));
+}
+
+/**
+ * Process a value that might be a responsive value
+ * @param value - Value to process
+ * @param processor - Function to process non-responsive values
+ * @returns Processed value or responsive object with processed values
+ */
+function processResponsiveValue(value, processor) {
+  if (value === undefined) {
+    return undefined;
+  }
+  if (isResponsiveValue(value)) {
+    const result = {};
+    Object.entries(value).forEach(([breakpoint, val]) => {
+      if (val !== undefined) {
+        const processed = processor(val);
+        if (processed !== undefined) {
+          result[breakpoint] = processed;
+        }
+      }
+    });
+    return Object.keys(result).length > 0 ? result : undefined;
+  }
+  return processor(value);
+}
+
+// Type for CSS variable values that can be string, number, or responsive values
+
+// Silence ESLint warnings for unused parameters in forEach callbacks
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
 /**
  * Converts layout properties to CSS variables with abbreviated names
  * @param props Object containing layout properties
  * @returns Object with CSS variables
  */
-exports.omitBoxProps = omitBoxProps;
 const getBoxCSSVariables = props => {
   const cssVars = {};
+  const prefix = `--rs-box-`;
 
   // Process padding properties
   Object.keys(paddingStyleMap).forEach(propKey => {
     if (props[propKey] !== undefined) {
-      cssVars[`--rs-box-${propKey}`] = (0, _utils.getCssValue)(props[propKey]);
+      cssVars[`${prefix}${propKey}`] = processResponsiveValue(props[propKey], val => (0, _utils.getCssValue)(val));
     }
   });
 
   // Process margin properties
   Object.keys(marginStyleMap).forEach(propKey => {
     if (props[propKey] !== undefined) {
-      cssVars[`--rs-box-${propKey}`] = (0, _utils.getCssValue)(props[propKey]);
+      cssVars[`${prefix}${propKey}`] = processResponsiveValue(props[propKey], val => (0, _utils.getCssValue)(val));
     }
   });
 
   // Process size properties
   Object.keys(sizeStyleMap).forEach(propKey => {
     if (props[propKey] !== undefined) {
-      cssVars[`--rs-box-${propKey}`] = (0, _utils.getCssValue)(props[propKey]);
+      cssVars[`${prefix}${propKey}`] = processResponsiveValue(props[propKey], val => (0, _utils.getCssValue)(val));
     }
   });
   if (props.bd !== undefined) {
-    cssVars['--rs-box-bd'] = (0, _utils.getCssValue)(props.bd);
+    cssVars[`${prefix}bd`] = processResponsiveValue(props.bd, val => (0, _utils.getCssValue)(val));
   }
   if (props.display !== undefined) {
-    cssVars['--rs-box-display'] = props.display;
+    cssVars[`${prefix}display`] = processResponsiveValue(props.display, val => val);
   }
   if (props.c !== undefined) {
-    cssVars['--rs-box-c'] = (0, _utils.getColorVar)(props.c);
+    cssVars[`${prefix}c`] = processResponsiveValue(props.c, val => (0, _utils.getColorVar)(val));
   }
   if (props.bg !== undefined) {
-    cssVars['--rs-box-bg'] = (0, _utils.getColorVar)(props.bg);
+    cssVars[`${prefix}bg`] = processResponsiveValue(props.bg, val => (0, _utils.getColorVar)(val));
+  }
+
+  // Handle special cases for rounded and shadow
+  if (props.rounded !== undefined) {
+    const processRounded = val => {
+      const result = (0, _utils.getSizeStyle)(val, 'box', 'rounded');
+      return result ? result : undefined;
+    };
+    if (isResponsiveValue(props.rounded)) {
+      // Handle responsive rounded values
+      const responsiveRounded = {};
+      Object.entries(props.rounded).forEach(([breakpoint, val]) => {
+        if (val !== undefined) {
+          const styleObj = processRounded(val);
+          if (styleObj) {
+            responsiveRounded[breakpoint] = styleObj;
+          }
+        }
+      });
+
+      // For each CSS variable key in the rounded styles, create a responsive value
+      const processedKeys = new Set();
+      Object.entries(responsiveRounded).forEach(([_breakpoint, styleObj]) => {
+        if (styleObj) {
+          Object.entries(styleObj).forEach(([key, _value]) => {
+            processedKeys.add(key);
+          });
+        }
+      });
+      processedKeys.forEach(key => {
+        const responsiveValue = {};
+        Object.entries(responsiveRounded).forEach(([breakpoint, styleObj]) => {
+          if (styleObj && styleObj[key] !== undefined) {
+            // Ensure we're only using string values for CSS variables
+            const value = styleObj[key];
+            if (typeof value === 'string' || typeof value === 'number') {
+              responsiveValue[breakpoint] = value;
+            }
+          }
+        });
+        if (Object.keys(responsiveValue).length > 0) {
+          cssVars[key] = responsiveValue;
+        }
+      });
+    } else {
+      // Handle non-responsive rounded value
+      const styleObj = processRounded(props.rounded);
+      if (styleObj) {
+        Object.entries(styleObj).forEach(([key, value]) => {
+          cssVars[key] = value;
+        });
+      }
+    }
+  }
+  if (props.shadow !== undefined) {
+    const processShadow = val => {
+      const result = (0, _utils.getSizeStyle)(val, 'box', 'shadow');
+      return result ? result : undefined;
+    };
+    if (isResponsiveValue(props.shadow)) {
+      // Handle responsive shadow values
+      const responsiveShadow = {};
+      Object.entries(props.shadow).forEach(([breakpoint, val]) => {
+        if (val !== undefined) {
+          const styleObj = processShadow(val);
+          if (styleObj) {
+            responsiveShadow[breakpoint] = styleObj;
+          }
+        }
+      });
+
+      // For each CSS variable key in the shadow styles, create a responsive value
+      const processedKeys = new Set();
+      Object.entries(responsiveShadow).forEach(([_breakpoint, styleObj]) => {
+        if (styleObj) {
+          Object.entries(styleObj).forEach(([key, _value]) => {
+            processedKeys.add(key);
+          });
+        }
+      });
+      processedKeys.forEach(key => {
+        const responsiveValue = {};
+        Object.entries(responsiveShadow).forEach(([breakpoint, styleObj]) => {
+          if (styleObj && styleObj[key] !== undefined) {
+            // Ensure we're only using string values for CSS variables
+            const value = styleObj[key];
+            if (typeof value === 'string' || typeof value === 'number') {
+              responsiveValue[breakpoint] = value;
+            }
+          }
+        });
+        if (Object.keys(responsiveValue).length > 0) {
+          cssVars[key] = responsiveValue;
+        }
+      });
+    } else {
+      // Handle non-responsive shadow value
+      const styleObj = processShadow(props.shadow);
+      if (styleObj) {
+        Object.entries(styleObj).forEach(([key, value]) => {
+          cssVars[key] = value;
+        });
+      }
+    }
   }
-  return {
-    ...cssVars,
-    ...(0, _utils.getSizeStyle)(props.rounded, 'box', 'rounded'),
-    ...(0, _utils.getSizeStyle)(props.shadow, 'box', 'shadow')
-  };
+  return cssVars;
 };
 exports.getBoxCSSVariables = getBoxCSSVariables;

package/cjs/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/cjs/internals/constants/index.js

@@ -3,8 +3,8 @@
 
 exports.__esModule = true;
 exports.TREE_NODE_DROP_POSITION = exports.STATUS = exports.SIZE = exports.PLACEMENT_AUTO = exports.PLACEMENT_8 = exports.PLACEMENT_4 = exports.PLACEMENT = exports.KEY_VALUES = exports.DATERANGE_DISABLED_TARGET = exports.COLOR = exports.CHECK_STATE = exports.BREAKPOINTS = void 0;
-const SIZE = exports.SIZE = ['lg', 'md', 'sm', 'xs'];
-const BREAKPOINTS = exports.BREAKPOINTS = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+const SIZE = exports.SIZE = ['xs', 'sm', 'md', 'lg'];
+const BREAKPOINTS = exports.BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
 const STATUS = exports.STATUS = ['success', 'warning', 'error', 'info'];
 const COLOR = exports.COLOR = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'];
 const PLACEMENT_4 = exports.PLACEMENT_4 = ['top', 'bottom', 'right', 'left'];

package/cjs/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/cjs/internals/hooks/useElementResize.js

@@ -15,18 +15,61 @@ var _resizeObserver = require("@juggle/resize-observer");
  */
 function useElementResize(eventTarget, listener) {
   const resizeObserver = (0, _react.useRef)(null);
+  const currentElement = (0, _react.useRef)(null);
+
+  // Create the observer
   (0, _react.useEffect)(() => {
-    if (!resizeObserver.current) {
-      const target = typeof eventTarget === 'function' ? eventTarget() : eventTarget;
-      if (target) {
-        resizeObserver.current = new _resizeObserver.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.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
+  (0, _react.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]);
 }
 var _default = exports.default = useElementResize;

package/cjs/internals/hooks/useStyled.d.ts

@@ -0,0 +1,60 @@
+import { CSSProperties } from 'react';
+import type { Breakpoints, ResponsiveValue } from '../types';
+/**
+ * Options for the useStyled hook
+ */
+interface UseStyledOptions {
+    /**
+     * CSS variables to apply
+     */
+    cssVars?: Record<string, string | number | undefined | ResponsiveValue<string | number>>;
+    /**
+     * Base class name to include
+     */
+    className?: string;
+    /**
+     * Base style to merge with
+     */
+    style?: CSSProperties;
+    /**
+     * Whether this element should be styled
+     * Can be a boolean or a breakpoint string
+     */
+    enabled?: boolean | Breakpoints;
+    /**
+     * Prefix for the generated class name
+     * @default 'rs'
+     */
+    prefix?: string;
+}
+/**
+ * Result of the useStyled hook
+ */
+interface UseStyledResult {
+    /**
+     * Combined class name including the unique identifier
+     */
+    className: string | undefined;
+    /**
+     * Style object without CSS variables
+     */
+    style: CSSProperties | undefined;
+    /**
+     * Unique identifier for this styled element
+     */
+    id: string;
+}
+/**
+ * Custom hook for managing component styling with scoped CSS variables
+ *
+ * This hook handles:
+ * 1. Generating a unique class name for the component
+ * 2. Creating a scoped style rule to prevent CSS variable inheritance
+ * 3. Managing the lifecycle of style rules
+ * 4. Handling responsive values for different breakpoints
+ *
+ * @param options - Styling options
+ * @returns Styling properties to apply to the component
+ */
+export declare function useStyled(options: UseStyledOptions): UseStyledResult;
+export default useStyled;