rsuite 6.0.0-canary-2025062016 → 6.0.0-canary-20250622

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

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

@@ -0,0 +1,50 @@
+/**
+ * StyleManager - A utility for managing CSS styles dynamically
+ *
+ * This manager creates and maintains a single style element in the document head
+ * and provides methods to add, update, and remove CSS rules.
+ * Supports CSP nonce for Content Security Policy compliance.
+ */
+export declare const StyleManager: {
+    styleElement: HTMLStyleElement | null;
+    styleMap: Map<string, string>;
+    nonce: string | undefined;
+    /**
+     * Initialize the style element if it doesn't exist
+     * @param options - Optional configuration options
+     * @param options.nonce - CSP nonce to apply to the style element
+     * @returns The style element
+     */
+    init(options?: {
+        nonce?: string;
+    }): HTMLStyleElement | null;
+    /**
+     * Set the CSP nonce for the style element
+     * @param nonce - CSP nonce value
+     */
+    setNonce(nonce?: string): void;
+    /**
+     * Add a CSS rule to the style sheet
+     * @param selector - CSS selector
+     * @param cssText - CSS properties and values
+     * @param options - Optional configuration options
+     * @param options.nonce - CSP nonce to apply to the style element
+     */
+    addRule(selector: string, cssText: string, options?: {
+        nonce?: string;
+    }): void;
+    /**
+     * Remove a CSS rule from the style sheet
+     * @param selector - CSS selector to remove
+     */
+    removeRule(selector: string): void;
+    /**
+     * Update the style element with all current rules
+     */
+    updateStyles(): void;
+    /**
+     * Clear all rules from the style sheet
+     */
+    clearRules(): void;
+};
+export default StyleManager;

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

@@ -0,0 +1,93 @@
+'use client';
+/**
+ * StyleManager - A utility for managing CSS styles dynamically
+ *
+ * This manager creates and maintains a single style element in the document head
+ * and provides methods to add, update, and remove CSS rules.
+ * Supports CSP nonce for Content Security Policy compliance.
+ */
+
+// Global style sheet manager
+export const StyleManager = {
+  styleElement: null,
+  styleMap: new Map(),
+  nonce: undefined,
+  /**
+   * Initialize the style element if it doesn't exist
+   * @param options - Optional configuration options
+   * @param options.nonce - CSP nonce to apply to the style element
+   * @returns The style element
+   */
+  init(options) {
+    if (!this.styleElement && typeof document !== 'undefined') {
+      this.styleElement = document.createElement('style');
+      this.styleElement.setAttribute('data-rs-style-manager', '');
+
+      // Apply CSP nonce if provided
+      const nonce = (options === null || options === void 0 ? void 0 : options.nonce) || this.nonce;
+      if (nonce) {
+        this.styleElement.setAttribute('nonce', nonce);
+        this.nonce = nonce; // Store for future use
+      }
+      document.head.appendChild(this.styleElement);
+    }
+    return this.styleElement;
+  },
+  /**
+   * Set the CSP nonce for the style element
+   * @param nonce - CSP nonce value
+   */
+  setNonce(nonce) {
+    this.nonce = nonce;
+
+    // Apply to existing style element if it exists
+    if (this.styleElement && nonce) {
+      this.styleElement.setAttribute('nonce', nonce);
+    }
+  },
+  /**
+   * Add a CSS rule to the style sheet
+   * @param selector - CSS selector
+   * @param cssText - CSS properties and values
+   * @param options - Optional configuration options
+   * @param options.nonce - CSP nonce to apply to the style element
+   */
+  addRule(selector, cssText, options) {
+    this.init(options);
+    if (!this.styleMap.has(selector) || this.styleMap.get(selector) !== cssText) {
+      this.styleMap.set(selector, cssText);
+      this.updateStyles();
+    }
+  },
+  /**
+   * Remove a CSS rule from the style sheet
+   * @param selector - CSS selector to remove
+   */
+  removeRule(selector) {
+    if (this.styleMap.has(selector)) {
+      this.styleMap.delete(selector);
+      this.updateStyles();
+    }
+  },
+  /**
+   * Update the style element with all current rules
+   */
+  updateStyles() {
+    if (!this.styleElement) return;
+    let cssText = '';
+    this.styleMap.forEach((rules, selector) => {
+      cssText += `${selector} { ${rules} }\n`;
+    });
+    this.styleElement.textContent = cssText;
+  },
+  /**
+   * Clear all rules from the style sheet
+   */
+  clearRules() {
+    this.styleMap.clear();
+    if (this.styleElement) {
+      this.styleElement.textContent = '';
+    }
+  }
+};
+export default StyleManager;

package/package.json

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