rsuite 6.0.0-canary-20250624 → 6.0.0-canary-20250702

package/cjs/Steps/Steps.js

@@ -5,11 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _StepItem = _interopRequireDefault(require("./StepItem"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const Subcomponents = {
   Item: _StepItem.default
 };
@@ -36,46 +37,43 @@ const Steps = (0, _utils.forwardRef)((props, ref) => {
   } = propsWithDefaults;
   const {
     merge,
-    prefix,
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
-  const horizontal = !vertical;
-  const classes = merge(className, withPrefix({
-    small,
-    vertical,
-    horizontal: !vertical
-  }));
-  const count = _utils.rch.count(children);
-  const items = _utils.rch.mapCloneElement(children, (item, index) => {
-    const itemStyles = {
-      flexBasis: index < count - 1 ? `${100 / (count - 1)}%` : undefined,
-      maxWidth: index === count - 1 ? `${100 / count}%` : undefined
-    };
-    const itemProps = {
-      stepNumber: index + 1,
-      status: 'wait',
-      style: horizontal ? itemStyles : undefined,
-      ...item.props
-    };
+  const classes = merge(className, withPrefix());
+  const items = (0, _react.useMemo)(() => {
+    const count = _utils.rch.count(children);
+    return _utils.rch.mapCloneElement(children, (item, index) => {
+      const itemStyles = {
+        flexBasis: index < count - 1 ? `${100 / (count - 1)}%` : undefined,
+        maxWidth: index === count - 1 ? `${100 / count}%` : undefined
+      };
+      const itemProps = {
+        stepNumber: index + 1,
+        status: 'wait',
+        style: !vertical ? itemStyles : undefined,
+        ...item.props
+      };
 
-    // fix tail color
-    if (currentStatus === 'error' && index === current - 1) {
-      itemProps.className = prefix('next-error');
-    }
-    if (!item.props.status) {
-      if (index === current) {
-        itemProps.status = currentStatus;
-        itemProps.className = merge(itemProps.className, prefix('item-active'));
-      } else if (index < current) {
-        itemProps.status = 'finish';
+      // fix tail color
+      if (currentStatus === 'error' && index === current - 1) {
+        itemProps['data-next-error'] = true;
+      }
+      if (!item.props.status) {
+        if (index === current) {
+          itemProps.status = currentStatus;
+        } else if (index < current) {
+          itemProps.status = 'finish';
+        }
       }
-    }
-    return itemProps;
-  });
+      return itemProps;
+    });
+  }, [children, current, currentStatus, vertical]);
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
     ref: ref,
-    className: classes
+    className: classes,
+    "data-size": small ? 'small' : undefined,
+    "data-direction": vertical ? 'vertical' : 'horizontal'
   }, rest), items);
 }, Subcomponents);
 Steps.displayName = 'Steps';

package/cjs/Tabs/Tabs.js

@@ -22,7 +22,7 @@ function getFocusableTabs(tablist) {
 }
 function getFocusedTab(tablist) {
   const tabs = getFocusableTabs(tablist);
-  return tabs.find(tab => tab.getAttribute('aria-selected'));
+  return tabs.find(tab => tab.getAttribute('aria-selected') === 'true');
 }
 function nextItem(tablist) {
   if (!tablist) {

package/cjs/Tag/Tag.js

@@ -43,14 +43,17 @@ const Tag = (0, _utils.forwardRef)((props, ref) => {
     prefix,
     merge
   } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix(size, (0, _utils.isPresetColor)(color) && color));
+  const classes = merge(className, withPrefix());
   const styles = (0, _react.useMemo)(() => (0, _utils.mergeStyles)(style, (0, _utils.createColorVariables)(color, '--rs-tag-bg', '--rs-tag-text')), [style, color]);
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
     ref: ref,
     className: classes,
     style: styles
-  }, rest), /*#__PURE__*/_react.default.createElement("span", {
+  }, rest, {
+    "data-size": size,
+    "data-color": (0, _utils.isPresetColor)(color) ? color : undefined
+  }), /*#__PURE__*/_react.default.createElement("span", {
     className: prefix`text`
   }, children), closable && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
     className: prefix`icon-close`,

package/cjs/Toggle/Toggle.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { BoxProps } from '../internals/Box';
 import type { SanitizedInputProps, Color, Size } from '../internals/types';
 import type { ToggleLocale } from '../locales';
-export interface ToggleProps extends BoxProps, SanitizedInputProps {
+export interface ToggleProps extends Omit<BoxProps, 'height' | 'width'>, SanitizedInputProps {
     /**
      * The color of the toggle.
      */

package/cjs/Toggle/Toggle.js

@@ -49,11 +49,7 @@ const Toggle = (0, _utils.forwardRef)((props, ref) => {
     withPrefix,
     prefix
   } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix(size, color, {
-    checked,
-    disabled,
-    loading
-  }));
+  const classes = merge(className, withPrefix({}));
   const inner = checked ? checkedChildren : unCheckedChildren;
   const innerLabel = checked ? locale === null || locale === void 0 ? void 0 : locale.on : locale === null || locale === void 0 ? void 0 : locale.off;
   const labelId = (0, _hooks.useUniqueId)('rs-label');
@@ -77,7 +73,12 @@ const Toggle = (0, _utils.forwardRef)((props, ref) => {
     as: as,
     ref: ref,
     className: classes,
-    "data-placement": labelPlacement
+    "data-placement": labelPlacement,
+    "data-color": color,
+    "data-size": size,
+    "data-checked": checked,
+    "data-loading": loading,
+    "data-disabled": disabled
   }, restProps), /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, htmlInputProps, {
     ref: inputRef,
     type: "checkbox",

package/cjs/Tree/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { BoxProps } from '../internals/Box';
+import type { BaseBoxProps } from '../internals/Box';
 import type { ListProps } from '../internals/Windowing';
 import type { TreeNode } from '../internals/Tree/types';
 /**
@@ -80,7 +80,7 @@ export type WithTreeDragProps<P> = P & TreeDragProps;
 /**
  * Represents the props for the Tree component.
  */
-export interface TreeViewBaseProps<V = string | number, T = TreeNode> extends BoxProps {
+export interface TreeViewBaseProps<V = string | number, T = TreeNode> extends BaseBoxProps {
     /**
      * The height of the tree.
      */

package/cjs/Uploader/Uploader.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type ErrorStatus } from './utils/ajaxUpload';
 import { UploadTriggerProps } from './UploadTrigger';
-import { BoxProps } from '../internals/Box';
+import { BaseBoxProps } from '../internals/Box';
 import type { UploaderLocale } from '../locales';
 export interface FileType {
     /** File Name */
@@ -21,7 +21,7 @@ export interface UploaderInstance {
     root: HTMLElement;
     start: (file?: FileType) => void;
 }
-export interface UploaderProps extends BoxProps, Omit<UploadTriggerProps, 'onChange' | 'onError' | 'onProgress'> {
+export interface UploaderProps extends BaseBoxProps, Omit<UploadTriggerProps, 'onChange' | 'onError' | 'onProgress'> {
     /**
      * Custom ref for Uploader
      */

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

@@ -6,6 +6,7 @@ export interface BoxProps extends WithAsProps, CSSSystemProps {
     /** Breakpoint above which the component is hidden with `display: none` */
     hideFrom?: Breakpoints;
 }
+export type BaseBoxProps = Omit<BoxProps, 'color'>;
 /**
  * Box component is the base component for all components,
  * providing shorthand for style properties.

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

@@ -1,4 +1,4 @@
 import Box from './Box';
-export type { BoxProps } from './Box';
+export type { BoxProps, BaseBoxProps } from './Box';
 export { Box };
 export default Box;

package/cjs/internals/Box/utils.js

@@ -5,18 +5,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.omitBoxProps = exports.extractBoxProps = void 0;
 var _camelCase = _interopRequireDefault(require("lodash/camelCase"));
-var _flatten = _interopRequireDefault(require("lodash/flatten"));
 var _styledSystem = require("../styled-system");
 var _utils = require("../utils");
 const getUsedPropKeys = () => {
-  const boxPropKeys = Object.entries(_styledSystem.cssPropertyMap).map(([key, prop]) => {
+  const propSet = new Set();
+  Object.entries(_styledSystem.cssSystemPropAlias).forEach(([key, prop]) => {
     const {
       property
     } = prop;
     const propName = (0, _camelCase.default)(property);
-    return [key, propName];
+    propSet.add(key);
+    propSet.add(propName);
   });
-  return (0, _flatten.default)(boxPropKeys);
+  return Array.from(propSet);
 };
 
 /**

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