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

package/cjs/internals/InputBase/InputBase.js

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

package/cjs/internals/Menu/MenuItem.js

@@ -89,7 +89,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/cjs/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/cjs/internals/Picker/PickerToggle.js

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

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

@@ -13,12 +13,29 @@ var _CustomContext = require("../Provider/CustomContext");
 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;
 }
 
 /**
@@ -63,7 +80,7 @@ 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 = (0, _assign.default)({}, 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(_en_GB.default).includes(localeKey)) {

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

package/cjs/internals/styled-system/css-alias.js

@@ -0,0 +1,391 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.cssSystemPropAlias = void 0;
+var _utils = require("../utils");
+const transformRadiusValue = value => (0, _utils.getSizeValue)('radius', value);
+const transformShadowValue = value => (0, _utils.getSizeValue)('shadow', value);
+
+/**
+ * CSS Property Alias
+ * This type maps all the CSS properties defined in cssSystemPropAlias to their corresponding React CSS types
+ */
+const cssSystemPropAlias = exports.cssSystemPropAlias = {
+  // — Spacing ————————————————————
+  p: {
+    type: 'any',
+    property: 'padding'
+  },
+  pt: {
+    type: 'any',
+    property: 'padding-top'
+  },
+  pr: {
+    type: 'any',
+    property: 'padding-right'
+  },
+  pb: {
+    type: 'any',
+    property: 'padding-bottom'
+  },
+  pl: {
+    type: 'any',
+    property: 'padding-left'
+  },
+  px: {
+    type: 'any',
+    property: 'padding-inline'
+  },
+  py: {
+    type: 'any',
+    property: 'padding-block'
+  },
+  ps: {
+    type: 'any',
+    property: 'padding-inline-start'
+  },
+  pe: {
+    type: 'any',
+    property: 'padding-inline-end'
+  },
+  m: {
+    type: 'any',
+    property: 'margin'
+  },
+  mt: {
+    type: 'any',
+    property: 'margin-top'
+  },
+  mr: {
+    type: 'any',
+    property: 'margin-right'
+  },
+  mb: {
+    type: 'any',
+    property: 'margin-bottom'
+  },
+  ml: {
+    type: 'any',
+    property: 'margin-left'
+  },
+  mx: {
+    type: 'any',
+    property: 'margin-inline'
+  },
+  my: {
+    type: 'any',
+    property: 'margin-block'
+  },
+  ms: {
+    type: 'any',
+    property: 'margin-inline-start'
+  },
+  me: {
+    type: 'any',
+    property: 'margin-inline-end'
+  },
+  // — Sizing ————————————————————
+  w: {
+    type: 'any',
+    property: 'width'
+  },
+  h: {
+    type: 'any',
+    property: 'height'
+  },
+  minw: {
+    type: 'any',
+    property: 'min-width'
+  },
+  maxw: {
+    type: 'any',
+    property: 'max-width'
+  },
+  minh: {
+    type: 'any',
+    property: 'min-height'
+  },
+  maxh: {
+    type: 'any',
+    property: 'max-height'
+  },
+  // — Layout & Position ————————————————————
+  display: {
+    type: 'any',
+    property: 'display'
+  },
+  pos: {
+    type: 'any',
+    property: 'position'
+  },
+  left: {
+    type: 'any',
+    property: 'left'
+  },
+  top: {
+    type: 'any',
+    property: 'top'
+  },
+  right: {
+    type: 'any',
+    property: 'right'
+  },
+  bottom: {
+    type: 'any',
+    property: 'bottom'
+  },
+  inset: {
+    type: 'any',
+    property: 'inset'
+  },
+  insetx: {
+    type: 'any',
+    property: 'inset-inline'
+  },
+  insety: {
+    type: 'any',
+    property: 'inset-block'
+  },
+  bsz: {
+    type: 'string',
+    property: 'box-sizing'
+  },
+  z: {
+    type: 'number',
+    property: 'z-index'
+  },
+  // — Background ————————————————————
+  bg: {
+    type: 'string',
+    property: 'background',
+    transformer: _utils.getColorValue
+  },
+  bgc: {
+    type: 'string',
+    property: 'background-color',
+    transformer: _utils.getColorValue
+  },
+  bgi: {
+    type: 'string',
+    property: 'background-image'
+  },
+  bga: {
+    type: 'string',
+    property: 'background-attachment'
+  },
+  bgp: {
+    type: 'string',
+    property: 'background-position'
+  },
+  bgsz: {
+    type: 'string',
+    property: 'background-size'
+  },
+  bgr: {
+    type: 'string',
+    property: 'background-repeat'
+  },
+  // — Typography ————————————————————
+  c: {
+    type: 'string',
+    property: 'color',
+    transformer: _utils.getColorValue
+  },
+  ff: {
+    type: 'string',
+    property: 'font-family'
+  },
+  fs: {
+    type: 'string',
+    property: 'font-size'
+  },
+  fw: {
+    type: 'string',
+    property: 'font-weight'
+  },
+  ta: {
+    type: 'string',
+    property: 'text-align'
+  },
+  tt: {
+    type: 'string',
+    property: 'text-transform'
+  },
+  td: {
+    type: 'string',
+    property: 'text-decoration'
+  },
+  tds: {
+    type: 'string',
+    property: 'text-decoration-style'
+  },
+  tdc: {
+    type: 'string',
+    property: 'text-decoration-color',
+    transformer: _utils.getColorValue
+  },
+  lts: {
+    type: 'string',
+    property: 'letter-spacing'
+  },
+  lh: {
+    type: 'any',
+    property: 'line-height'
+  },
+  // — Border ————————————————————
+  bd: {
+    type: 'string',
+    property: 'border'
+  },
+  bs: {
+    type: 'string',
+    property: 'border-style'
+  },
+  bc: {
+    type: 'string',
+    property: 'border-color',
+    transformer: _utils.getColorValue
+  },
+  bw: {
+    type: 'any',
+    property: 'border-width'
+  },
+  bdt: {
+    type: 'string',
+    property: 'border-top'
+  },
+  bdb: {
+    type: 'string',
+    property: 'border-bottom'
+  },
+  bdl: {
+    type: 'string',
+    property: 'border-left'
+  },
+  bdr: {
+    type: 'string',
+    property: 'border-right'
+  },
+  bdts: {
+    type: 'string',
+    property: 'border-top-style'
+  },
+  bdbs: {
+    type: 'string',
+    property: 'border-bottom-style'
+  },
+  bdls: {
+    type: 'string',
+    property: 'border-left-style'
+  },
+  bdrs: {
+    type: 'string',
+    property: 'border-right-style'
+  },
+  bdtc: {
+    type: 'string',
+    property: 'border-top-color',
+    transformer: _utils.getColorValue
+  },
+  bdbc: {
+    type: 'string',
+    property: 'border-bottom-color',
+    transformer: _utils.getColorValue
+  },
+  bdlc: {
+    type: 'string',
+    property: 'border-left-color',
+    transformer: _utils.getColorValue
+  },
+  bdrc: {
+    type: 'string',
+    property: 'border-right-color',
+    transformer: _utils.getColorValue
+  },
+  bdtw: {
+    type: 'any',
+    property: 'border-top-width'
+  },
+  bdbw: {
+    type: 'any',
+    property: 'border-bottom-width'
+  },
+  bdlw: {
+    type: 'any',
+    property: 'border-left-width'
+  },
+  bdrw: {
+    type: 'any',
+    property: 'border-right-width'
+  },
+  rounded: {
+    type: 'any',
+    property: 'border-radius',
+    transformer: transformRadiusValue
+  },
+  // — Shadow & Effects ————————————————————
+  shadow: {
+    type: 'any',
+    property: 'box-shadow',
+    transformer: transformShadowValue
+  },
+  opacity: {
+    type: 'any',
+    property: 'opacity'
+  },
+  // — Flex ————————————————————
+  gap: {
+    type: 'any',
+    property: 'gap'
+  },
+  spacing: {
+    type: 'any',
+    property: 'gap'
+  },
+  // alias for gap
+  rowgap: {
+    type: 'any',
+    property: 'row-gap'
+  },
+  colgap: {
+    type: 'any',
+    property: 'column-gap'
+  },
+  align: {
+    type: 'string',
+    property: 'align-items'
+  },
+  justify: {
+    type: 'string',
+    property: 'justify-content'
+  },
+  self: {
+    type: 'string',
+    property: 'align-self'
+  },
+  basis: {
+    type: 'any',
+    property: 'flex-basis'
+  },
+  flex: {
+    type: 'string',
+    property: 'flex'
+  },
+  grow: {
+    type: 'number',
+    property: 'flex-grow'
+  },
+  order: {
+    type: 'number',
+    property: 'order'
+  },
+  shrink: {
+    type: 'number',
+    property: 'flex-shrink'
+  },
+  direction: {
+    type: 'string',
+    property: 'flex-direction'
+  }
+};

package/cjs/internals/styled-system/css-properties.d.ts

@@ -0,0 +1,6 @@
+/**
+ * List of commonly used CSS properties in React components
+ * Focused on layout, spacing, typography, and common UI patterns
+ */
+export declare const supportedCSSProperties: readonly ["display", "position", "top", "right", "bottom", "left", "zIndex", "boxSizing", "width", "height", "minWidth", "maxWidth", "minHeight", "maxHeight", "overflow", "overflowX", "overflowY", "aspectRatio", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "flex", "flexGrow", "flexShrink", "flexBasis", "flexDirection", "flexWrap", "justifyContent", "alignItems", "alignSelf", "alignContent", "gap", "rowGap", "columnGap", "order", "grid", "gridTemplate", "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", "gridArea", "gridColumn", "gridRow", "gridAutoFlow", "gridAutoColumns", "gridAutoRows", "color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "lineHeight", "textAlign", "textDecoration", "textTransform", "whiteSpace", "wordBreak", "wordWrap", "textOverflow", "letterSpacing", "background", "backgroundColor", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "border", "borderColor", "borderStyle", "borderWidth", "borderRadius", "borderTop", "borderRight", "borderBottom", "borderLeft", "boxShadow", "opacity", "transform", "transformOrigin", "transition", "transitionProperty", "transitionDuration", "transitionTimingFunction", "transitionDelay", "cursor", "pointerEvents", "userSelect", "visibility", "scrollBehavior", "scrollbarWidth", "scrollbarColor", "overscrollBehavior", "clipPath", "filter", "objectFit", "objectPosition", "resize"];
+export type SupportedCSSProperty = (typeof supportedCSSProperties)[number];

package/cjs/internals/styled-system/css-properties.js

@@ -0,0 +1,30 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.supportedCSSProperties = void 0;
+/**
+ * List of commonly used CSS properties in React components
+ * Focused on layout, spacing, typography, and common UI patterns
+ */
+const supportedCSSProperties = exports.supportedCSSProperties = [
+// Layout & Box Model
+'display', 'position', 'top', 'right', 'bottom', 'left', 'zIndex', 'boxSizing', 'width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight', 'overflow', 'overflowX', 'overflowY', 'aspectRatio',
+// Spacing
+'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
+// Flexbox
+'flex', 'flexGrow', 'flexShrink', 'flexBasis', 'flexDirection', 'flexWrap', 'justifyContent', 'alignItems', 'alignSelf', 'alignContent', 'gap', 'rowGap', 'columnGap', 'order',
+// Grid
+'grid', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows', 'gridArea', 'gridColumn', 'gridRow', 'gridAutoFlow', 'gridAutoColumns', 'gridAutoRows',
+// Typography
+'color', 'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'lineHeight', 'textAlign', 'textDecoration', 'textTransform', 'whiteSpace', 'wordBreak', 'wordWrap', 'textOverflow', 'letterSpacing',
+// Background & Borders
+'background', 'backgroundColor', 'backgroundImage', 'backgroundPosition', 'backgroundSize', 'backgroundRepeat', 'border', 'borderColor', 'borderStyle', 'borderWidth', 'borderRadius', 'borderTop', 'borderRight', 'borderBottom', 'borderLeft', 'boxShadow', 'opacity',
+// Transforms & Transitions
+'transform', 'transformOrigin', 'transition', 'transitionProperty', 'transitionDuration', 'transitionTimingFunction', 'transitionDelay',
+// Interactivity
+'cursor', 'pointerEvents', 'userSelect', 'visibility',
+// Scroll
+'scrollBehavior', 'scrollbarWidth', 'scrollbarColor', 'overscrollBehavior',
+// Other
+'clipPath', 'filter', 'objectFit', 'objectPosition', 'resize'];

package/cjs/internals/styled-system/index.d.ts

@@ -0,0 +1,5 @@
+export * from './responsive';
+export * from './useStyled';
+export * from './style-manager';
+export * from './css-alias';
+export * from './types';

package/cjs/internals/styled-system/index.js

@@ -0,0 +1,34 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+var _responsive = require("./responsive");
+Object.keys(_responsive).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _responsive[key]) return;
+  exports[key] = _responsive[key];
+});
+var _useStyled = require("./useStyled");
+Object.keys(_useStyled).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useStyled[key]) return;
+  exports[key] = _useStyled[key];
+});
+var _styleManager = require("./style-manager");
+Object.keys(_styleManager).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _styleManager[key]) return;
+  exports[key] = _styleManager[key];
+});
+var _cssAlias = require("./css-alias");
+Object.keys(_cssAlias).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _cssAlias[key]) return;
+  exports[key] = _cssAlias[key];
+});
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  exports[key] = _types[key];
+});

package/cjs/internals/styled-system/responsive.d.ts

@@ -0,0 +1,26 @@
+import type { Breakpoints, ResponsiveValue, WithResponsive } from '../types';
+/**
+ * Breakpoint values in pixels - matching SCSS variables
+ * These values are used for responsive design across the application.
+ * They follow a mobile-first approach where 'xs' is the base breakpoint.
+ */
+export declare const breakpointValues: Record<Breakpoints, number>;
+/**
+ * Checks if a value is a responsive value object
+ * @param value - Value to check
+ * @returns True if the value is a responsive value object
+ */
+export declare function isResponsiveValue(value: any): value is ResponsiveValue<any>;
+/**
+ * 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
+ */
+export declare function processResponsiveValue<T, R extends string | number | undefined>(value: T | ResponsiveValue<T> | undefined, processor: (val: T) => R): R | ResponsiveValue<R> | undefined;
+type CSSVarValue = WithResponsive<string | number | undefined>;
+/**
+ * Converts layout properties to CSS variables with abbreviated names
+ */
+export declare const getCSSVariables: (props: Record<string, any>, prefix?: string) => Record<string, CSSVarValue>;
+export {};