rsuite 6.0.0-canary-20250622 → 6.0.0-canary-20250702

package/esm/internals/Box/utils.js

@@ -1,52 +1,34 @@
 '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',
-  pt: 'paddingTop',
-  pb: 'paddingBottom',
-  pl: 'paddingLeft',
-  pr: 'paddingRight',
-  px: 'paddingInline',
-  py: 'paddingBlock'
-};
-
-// Mapping for margin properties to their CSS style equivalents
-const marginStyleMap = {
-  m: 'margin',
-  mt: 'marginTop',
-  mb: 'marginBottom',
-  ml: 'marginLeft',
-  mr: 'marginRight',
-  mx: 'marginInline',
-  my: 'marginBlock'
-};
-
-// Mapping for size properties to their CSS style equivalents
-const sizeStyleMap = {
-  w: 'width',
-  h: 'height',
-  minw: 'minWidth',
-  maxw: 'maxWidth',
-  minh: 'minHeight',
-  maxh: 'maxHeight'
+import camelCase from 'lodash/camelCase';
+import { cssSystemPropAlias } from "../styled-system/index.js";
+import { isCSSProperty } from "../utils/index.js";
+const getUsedPropKeys = () => {
+  const propSet = new Set();
+  Object.entries(cssSystemPropAlias).forEach(([key, prop]) => {
+    const {
+      property
+    } = prop;
+    const propName = camelCase(property);
+    propSet.add(key);
+    propSet.add(propName);
+  });
+  return Array.from(propSet);
 };
 
-// Derive box property keys from style mappings
-const boxPropKeys = [...Object.keys(paddingStyleMap), ...Object.keys(marginStyleMap), ...Object.keys(sizeStyleMap), 'bd', 'bg', 'c', 'display', 'rounded', 'shadow'];
-
 /**
  * Extract box properties from props
  * @param props Original props object
  * @returns Object containing only box properties
  */
 export const extractBoxProps = props => {
+  const boxPropKeys = getUsedPropKeys();
   const boxProps = {};
 
   // Extract only box related properties
-  boxPropKeys.forEach(key => {
-    if (key in props && props[key] !== undefined) {
+  Object.keys(props).forEach(key => {
+    if (boxPropKeys.includes(key) && props[key] !== undefined) {
+      boxProps[key] = props[key];
+    } else if (isCSSProperty(key)) {
       boxProps[key] = props[key];
     }
   });
@@ -59,6 +41,7 @@ export const extractBoxProps = props => {
  * @returns New object without layout properties
  */
 export const omitBoxProps = props => {
+  const boxPropKeys = getUsedPropKeys();
   const filteredProps = {};
 
   // Copy all properties except box related ones
@@ -68,191 +51,4 @@ 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
- * @returns Object with CSS variables
- */
-export const getBoxCSSVariables = props => {
-  const cssVars = {};
-  const prefix = `--rs-box-`;
-
-  // Process padding properties
-  Object.keys(paddingStyleMap).forEach(propKey => {
-    if (props[propKey] !== undefined) {
-      cssVars[`${prefix}${propKey}`] = processResponsiveValue(props[propKey], val => getCssValue(val));
-    }
-  });
-
-  // Process margin properties
-  Object.keys(marginStyleMap).forEach(propKey => {
-    if (props[propKey] !== undefined) {
-      cssVars[`${prefix}${propKey}`] = processResponsiveValue(props[propKey], val => getCssValue(val));
-    }
-  });
-
-  // Process size properties
-  Object.keys(sizeStyleMap).forEach(propKey => {
-    if (props[propKey] !== undefined) {
-      cssVars[`${prefix}${propKey}`] = processResponsiveValue(props[propKey], val => getCssValue(val));
-    }
-  });
-  if (props.bd !== undefined) {
-    cssVars[`${prefix}bd`] = processResponsiveValue(props.bd, val => getCssValue(val));
-  }
-  if (props.display !== undefined) {
-    cssVars[`${prefix}display`] = processResponsiveValue(props.display, val => val);
-  }
-  if (props.c !== undefined) {
-    cssVars[`${prefix}c`] = processResponsiveValue(props.c, val => getColorVar(val));
-  }
-  if (props.bg !== undefined) {
-    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;
 };

package/esm/internals/InputBase/InputBase.d.ts

@@ -5,7 +5,7 @@ import type { PropsWithoutChange, FormControlBaseProps, Size } from '../types';
 export interface InputBaseLocaleType {
     unfilled: string;
 }
-export interface InputBaseCommonProps extends BoxProps, PropsWithoutChange<FormControlBaseProps> {
+export interface InputBaseCommonProps extends Omit<BoxProps, 'height' | 'width'>, PropsWithoutChange<FormControlBaseProps> {
     /** A component can have different sizes */
     size?: Size;
     /** The HTML input id */

package/esm/internals/InputBase/InputBase.js

@@ -52,7 +52,7 @@ const InputBase = forwardRef((props, ref) => {
     withPrefix,
     merge
   } = useStyles(classPrefix || 'input');
-  const classes = merge(className, withPrefix(size, {
+  const classes = merge(className, withPrefix({
     plaintext
   }));
 
@@ -82,7 +82,8 @@ const InputBase = forwardRef((props, ref) => {
     defaultValue: defaultValue,
     disabled: disabled,
     readOnly: readOnly,
-    placeholder: placeholder
+    placeholder: placeholder,
+    "data-size": size
   }, inputProps, eventProps, rest));
 });
 InputBase.displayName = 'InputBase';

package/esm/internals/Menu/MenuItem.js

@@ -83,7 +83,7 @@ function MenuItem(props) {
     role: 'menuitem',
     // fixme Only use `aria-checked` on menuitemradio and menuitemcheckbox
     'aria-checked': selected || undefined,
-    'aria-disabled': disabled,
+    'aria-disabled': disabled || undefined,
     tabIndex: -1,
     onClick: handleClick,
     // render props

package/esm/internals/Overlay/Modal.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { BoxProps } from '../Box';
 import type { AnimationEventProps } from '../types';
-export interface BaseModalProps extends Omit<BoxProps, 'children'>, AnimationEventProps {
+export interface BaseModalProps extends Omit<BoxProps, 'children' | 'transition' | 'color' | 'overflow'>, AnimationEventProps {
     /** Animation-related properties */
     animationProps?: any;
     /** Primary content */

package/esm/internals/Picker/PickerToggle.js

@@ -103,9 +103,7 @@ const PickerToggle = forwardRef((props, ref) => {
     id: labelId
   }, label)), /*#__PURE__*/React.createElement(Stack.Item, {
     grow: 1,
-    style: {
-      overflow: 'hidden'
-    }
+    overflow: "hidden"
   }, /*#__PURE__*/React.createElement("input", {
     readOnly: true,
     "aria-hidden": true,
@@ -113,7 +111,7 @@ const PickerToggle = forwardRef((props, ref) => {
     "data-testid": "picker-toggle-input",
     name: name,
     value: inputValue,
-    className: prefix('textbox', 'read-only'),
+    className: prefix('textbox'),
     style: {
       pointerEvents: 'none'
     }

package/esm/internals/SafeAnchor/SafeAnchor.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { BoxProps } from '../Box';
-export interface SafeAnchorProps extends BoxProps, React.HTMLAttributes<HTMLElement> {
+import { BaseBoxProps } from '../Box';
+export interface SafeAnchorProps extends BaseBoxProps, React.HTMLAttributes<HTMLElement> {
     /** Link specified url */
     href?: string;
     /** A link can show it is currently unable to be interacted with */

package/esm/internals/Tree/TreeView.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { BoxProps } from '../Box';
-interface TreeViewProps extends BoxProps, React.HTMLAttributes<HTMLDivElement> {
+import { BaseBoxProps } from '../Box';
+interface TreeViewProps extends BaseBoxProps, React.HTMLAttributes<HTMLDivElement> {
     treeRootClassName: string;
     multiselectable?: boolean;
     height?: number;

package/esm/internals/hooks/useCustom.js

@@ -7,12 +7,29 @@ import { CustomContext } from "../Provider/CustomContext.js";
 function getDefaultRTL() {
   return typeof document !== 'undefined' && (document.body.getAttribute('dir') || document.dir) === 'rtl';
 }
-function toLocaleKey(componentName) {
-  const Picker = ['Cascader', 'CheckTreePicker', 'MultiCascader', 'SelectPicker', 'TreePicker', 'CheckPicker', 'CheckTreePicker'];
-  if (Picker.includes(componentName)) {
-    return 'Combobox';
-  }
-  return componentName;
+
+/**
+ * Maps a component name to its corresponding locale key
+ * @param componentName - The name of the component
+ * @returns The locale key for the component
+ */
+function getComponentLocaleKey(componentName) {
+  // Define mappings for components that share locale keys
+  const localeKeyMappings = {
+    // All picker components use the Combobox locale
+    Cascader: 'Combobox',
+    CheckTreePicker: 'Combobox',
+    MultiCascader: 'Combobox',
+    SelectPicker: 'Combobox',
+    TreePicker: 'Combobox',
+    CheckPicker: 'Combobox',
+    // Time components use date components locales
+    TimePicker: 'DatePicker',
+    TimeRangePicker: 'DateRangePicker'
+  };
+
+  // Return the mapped locale key or the component name itself if no mapping exists
+  return localeKeyMappings[componentName] || componentName;
 }
 
 /**
@@ -57,7 +74,7 @@ export function useCustom(componentName, componentProps) {
     //Memoize the global default props based on component name
     const globalDefaultProps = ((_components$component = components[componentName]) === null || _components$component === void 0 ? void 0 : _components$component.defaultProps) || {};
     const mergedProps = assign({}, globalDefaultProps, restProps);
-    const localeKey = toLocaleKey(componentName);
+    const localeKey = getComponentLocaleKey(componentName);
 
     // If the default locale has the component name, then merge the locale.
     if (Object.keys(enGB).includes(localeKey)) {

package/esm/internals/styled-system/css-alias.d.ts

@@ -0,0 +1,7 @@
+import type { CSSSystemProps, CSSProperty } from './types';
+/**
+ * CSS Property Alias
+ * This type maps all the CSS properties defined in cssSystemPropAlias to their corresponding React CSS types
+ */
+export declare const cssSystemPropAlias: Partial<Record<keyof CSSSystemProps, CSSProperty>>;
+export type CSSSystemPropKey = keyof typeof cssSystemPropAlias;