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

package/esm/internals/Box/utils.js

@@ -1,6 +1,6 @@
 'use client';
 import { getCssValue, getSizeStyle, getColorVar } from "../utils/index.js";
-
+import { BREAKPOINTS } from "../constants/index.js";
 // Mapping for padding properties to their CSS style equivalents
 const paddingStyleMap = {
   p: 'padding',
@@ -70,6 +70,45 @@ export 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
+ */
+function isResponsiveValue(value) {
+  return value !== null && typeof value === 'object' && !Array.isArray(value) && Object.keys(value).some(key => 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
@@ -77,42 +116,143 @@ export const omitBoxProps = props => {
  */
 export 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}`] = getCssValue(props[propKey]);
+      cssVars[`${prefix}${propKey}`] = processResponsiveValue(props[propKey], val => getCssValue(val));
     }
   });
 
   // Process margin properties
   Object.keys(marginStyleMap).forEach(propKey => {
     if (props[propKey] !== undefined) {
-      cssVars[`--rs-box-${propKey}`] = getCssValue(props[propKey]);
+      cssVars[`${prefix}${propKey}`] = processResponsiveValue(props[propKey], val => getCssValue(val));
     }
   });
 
   // Process size properties
   Object.keys(sizeStyleMap).forEach(propKey => {
     if (props[propKey] !== undefined) {
-      cssVars[`--rs-box-${propKey}`] = getCssValue(props[propKey]);
+      cssVars[`${prefix}${propKey}`] = processResponsiveValue(props[propKey], val => getCssValue(val));
     }
   });
   if (props.bd !== undefined) {
-    cssVars['--rs-box-bd'] = getCssValue(props.bd);
+    cssVars[`${prefix}bd`] = processResponsiveValue(props.bd, val => 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'] = getColorVar(props.c);
+    cssVars[`${prefix}c`] = processResponsiveValue(props.c, val => getColorVar(val));
   }
   if (props.bg !== undefined) {
-    cssVars['--rs-box-bg'] = getColorVar(props.bg);
+    cssVars[`${prefix}bg`] = processResponsiveValue(props.bg, val => getColorVar(val));
+  }
+
+  // Handle special cases for rounded and shadow
+  if (props.rounded !== undefined) {
+    const processRounded = val => {
+      const result = 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 = 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,
-    ...getSizeStyle(props.rounded, 'box', 'rounded'),
-    ...getSizeStyle(props.shadow, 'box', 'shadow')
-  };
+  return cssVars;
 };

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

@@ -1,6 +1,6 @@
 'use client';
-export const SIZE = ['lg', 'md', 'sm', 'xs'];
-export const BREAKPOINTS = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+export const SIZE = ['xs', 'sm', 'md', 'lg'];
+export const BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
 export const STATUS = ['success', 'warning', 'error', 'info'];
 export const COLOR = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'];
 export const PLACEMENT_4 = ['top', 'bottom', 'right', 'left'];

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

package/esm/internals/hooks/useStyled.js

@@ -0,0 +1,251 @@
+'use client';
+import { useId, useLayoutEffect, useContext } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { StyleManager } from "../utils/style-sheet/style-manager.js";
+import { BREAKPOINTS } from "../constants/index.js";
+import { CustomContext } from "../Provider/CustomContext.js";
+// CSS Property Map
+const propertyMap = {
+  // Padding
+  p: 'padding',
+  pt: 'padding-top',
+  pr: 'padding-right',
+  pb: 'padding-bottom',
+  pl: 'padding-left',
+  px: 'padding-inline',
+  py: 'padding-block',
+  // Margin
+  m: 'margin',
+  mt: 'margin-top',
+  mr: 'margin-right',
+  mb: 'margin-bottom',
+  ml: 'margin-left',
+  mx: 'margin-inline',
+  my: 'margin-block',
+  // Size
+  w: 'width',
+  h: 'height',
+  minw: 'min-width',
+  maxw: 'max-width',
+  minh: 'min-height',
+  maxh: 'max-height',
+  // Display
+  display: 'display',
+  // Color and Background
+  c: 'color',
+  bg: 'background',
+  // Border
+  bd: 'border',
+  rounded: 'border-radius',
+  // Shadow
+  shadow: 'box-shadow',
+  // Stack
+  spacing: 'gap',
+  align: 'align-items',
+  justify: 'justify-content'
+};
+
+// Breakpoint values in pixels - matching SCSS variables
+const breakpointValues = {
+  xs: 0,
+  // Base mobile first
+  sm: 576,
+  // $screen-sm
+  md: 768,
+  // $screen-md
+  lg: 992,
+  // $screen-lg
+  xl: 1200,
+  // $screen-xl
+  xxl: 1400 // $screen-xxl
+};
+
+/**
+ * Options for the useStyled hook
+ */
+
+/**
+ * Result of the useStyled hook
+ */
+
+/**
+ * Checks if a value is a responsive value object
+ * @param value - Value to check
+ * @returns True if the value is a responsive value object
+ */
+function isResponsiveValue(value) {
+  return value !== null && typeof value === 'object' && !Array.isArray(value) && Object.keys(value).some(key => BREAKPOINTS.includes(key));
+}
+
+/**
+ * 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 function useStyled(options) {
+  const {
+    cssVars = {},
+    className,
+    style,
+    enabled = true,
+    prefix = 'box'
+  } = options;
+
+  // CSS Variable Prefix, e.g. --rs-box-
+  const cssVarPrefix = `--rs-${prefix}-`;
+  const {
+    csp
+  } = useContext(CustomContext);
+
+  // Generate a unique ID for this component instance
+  const uniqueId = useId().replace(/:/g, '');
+  const componentId = `rs-${prefix}-${uniqueId}`;
+
+  // Only apply styling if enabled and there are CSS variables
+  const shouldApplyStyles = enabled && !isEmpty(cssVars);
+
+  // Apply CSS variables through StyleManager
+  useLayoutEffect(() => {
+    if (!shouldApplyStyles) return;
+
+    // Create base CSS rules for the variables
+    let baseVarRules = '';
+    let basePropRules = '';
+
+    // Track responsive variables to handle separately
+    const responsiveVars = {};
+
+    // Process CSS variables, separating responsive from non-responsive
+    Object.entries(cssVars).forEach(([key, value]) => {
+      if (value !== undefined) {
+        if (isResponsiveValue(value)) {
+          // Store responsive values for later processing
+          responsiveVars[key] = value;
+
+          // Add xs (mobile first) values to base styles if present
+          const xsValue = value.xs;
+          if (xsValue !== undefined) {
+            baseVarRules += `${key}: ${xsValue}; `;
+          }
+        } else {
+          // Add non-responsive values directly
+          baseVarRules += `${key}: ${value}; `;
+        }
+      }
+    });
+
+    // Add actual style rules based on CSS variables
+    Object.keys(cssVars).forEach(varName => {
+      // Skip responsive values that don't have xs values
+      if (responsiveVars[varName] && !responsiveVars[varName].xs) return;
+
+      // Extract property name from variable name (remove prefix)
+      const propName = varName.startsWith(cssVarPrefix) ? varName.substring(cssVarPrefix.length) : varName;
+
+      // Check if the property has a corresponding CSS property mapping
+      const cssProperty = propertyMap[propName];
+      if (cssProperty) {
+        basePropRules += `${cssProperty}: var(${varName}); `;
+      }
+    });
+
+    // Combine variable definitions and property assignments
+    const baseCssRules = baseVarRules + basePropRules;
+
+    // Add the base rule to the style manager
+    StyleManager.addRule(`.${componentId}`, baseCssRules, {
+      nonce: csp === null || csp === void 0 ? void 0 : csp.nonce
+    });
+
+    // Process responsive variables
+    if (!isEmpty(responsiveVars)) {
+      // Create media queries for each breakpoint
+      const breakpointVarRules = {
+        xs: '',
+        // xs rules will be merged into base styles
+        sm: '',
+        md: '',
+        lg: '',
+        xl: '',
+        xxl: ''
+      };
+      const breakpointPropRules = {
+        xs: '',
+        sm: '',
+        md: '',
+        lg: '',
+        xl: '',
+        xxl: ''
+      };
+
+      // Group styles by breakpoint
+      Object.entries(responsiveVars).forEach(([varName, responsiveValue]) => {
+        Object.entries(responsiveValue).forEach(([breakpoint, value]) => {
+          const bp = breakpoint;
+          if (value !== undefined && bp !== 'xs') {
+            // Skip xs as it's already in base styles
+            // Add the CSS variable definition for this breakpoint
+            breakpointVarRules[bp] += `${varName}: ${value}; `;
+
+            // Extract property name from variable name (remove prefix)
+            const propName = varName.startsWith(cssVarPrefix) ? varName.substring(cssVarPrefix.length) : varName;
+
+            // Check if the property has a corresponding CSS property mapping
+            const cssProperty = propertyMap[propName];
+            if (cssProperty) {
+              breakpointPropRules[bp] += `${cssProperty}: var(${varName}); `;
+            }
+          }
+        });
+      });
+
+      // Combine variable definitions and property assignments for each breakpoint
+      const breakpointRules = {
+        xs: '',
+        sm: breakpointVarRules.sm + breakpointPropRules.sm,
+        md: breakpointVarRules.md + breakpointPropRules.md,
+        lg: breakpointVarRules.lg + breakpointPropRules.lg,
+        xl: breakpointVarRules.xl + breakpointPropRules.xl,
+        xxl: breakpointVarRules.xxl + breakpointPropRules.xxl
+      };
+
+      // Add media queries for each breakpoint with rules (skip xs)
+      Object.entries(breakpointRules).forEach(([breakpoint, rules]) => {
+        if (rules && breakpoint !== 'xs') {
+          const bp = breakpoint;
+          const minWidth = breakpointValues[bp];
+          StyleManager.addRule(`@media (min-width: ${minWidth}px)`, `.${componentId} { ${rules} }`, {
+            nonce: csp === null || csp === void 0 ? void 0 : csp.nonce
+          });
+        }
+      });
+    }
+    return () => {
+      // Clean up rules when component unmounts
+      StyleManager.removeRule(`.${componentId}`);
+
+      // Clean up media query rules
+      Object.keys(breakpointValues).forEach(breakpoint => {
+        const bp = breakpoint;
+        const minWidth = breakpointValues[bp];
+        StyleManager.removeRule(`@media (min-width: ${minWidth}px)`);
+      });
+    };
+  }, [componentId, cssVars, shouldApplyStyles]);
+
+  // Combine class names
+  const combinedClassName = shouldApplyStyles ? `${className || ''} ${componentId}`.trim() : className;
+  return {
+    className: combinedClassName || undefined,
+    style,
+    id: componentId
+  };
+}
+export default useStyled;

package/esm/internals/utils/colours.js

@@ -19,7 +19,7 @@ export const getColorVar = color => {
 
   // Check if color is a color with shade (e.g., 'red.50', 'gray.900')
   const colorWithShadeRegex = /^(red|orange|yellow|green|cyan|blue|violet|gray)\.([1-9]00|50)$/;
-  const match = color.match(colorWithShadeRegex);
+  const match = color === null || color === void 0 ? void 0 : color.match(colorWithShadeRegex);
   if (match) {
     const [, colorName, shade] = match;
     return `var(--rs-${colorName}-${shade})`;

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/esm/internals/utils/style-sheet/index.d.ts

@@ -2,3 +2,4 @@ export * from './styles';
 export * from './css';
 export * from './prefix';
 export * from './responsive';
+export * from './style-manager';

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

@@ -2,4 +2,5 @@
 export * from "./styles.js";
 export * from "./css.js";
 export * from "./prefix.js";
-export * from "./responsive.js";
+export * from "./responsive.js";
+export * from "./style-manager.js";