rsuite 6.0.0-canary-20250403 → 6.0.0-canary-20250416

package/cjs/Rate/Rate.js

@@ -5,19 +5,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _Star = _interopRequireDefault(require("@rsuite/icons/Star"));
 var _Character = _interopRequireDefault(require("./Character"));
 var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
-var _Box = _interopRequireDefault(require("../internals/Box"));
+var _StyledBox = _interopRequireDefault(require("../internals/StyledBox"));
 var _constants = require("../internals/constants");
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _utils2 = require("./utils");
+var _useRatingStates = require("./useRatingStates");
 var _CustomProvider = require("../CustomProvider");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * The `Rate` component is used for rating. It can be used to evaluate the quality of the content.
  * @see https://rsuitejs.com/components/rate/
@@ -35,7 +34,7 @@ const Rate = (0, _utils.forwardRef)((props, ref) => {
     max = 5,
     readOnly,
     vertical,
-    size = 'md',
+    size,
     color,
     allowHalf = false,
     value: valueProp,
@@ -49,39 +48,37 @@ const Rate = (0, _utils.forwardRef)((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const [value, setValue] = (0, _hooks.useControlled)(valueProp, defaultValue);
-  const getCharacterMap = (0, _react.useCallback)(v => {
-    return (0, _utils2.transformValueToCharacterMap)(typeof v !== 'undefined' ? v : value, max, allowHalf);
-  }, [allowHalf, max, value]);
-  const [characterMap, setCharacterMap] = (0, _react.useState)(getCharacterMap());
-  const hoverValue = (0, _utils2.transformCharacterMapToValue)(characterMap);
   const {
     merge,
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix(size, (0, _utils.isPresetColor)(color) && color, {
-    disabled,
-    readonly: readOnly
-  }));
-  const styles = (0, _react.useMemo)(() => (0, _utils.mergeStyles)(style, (0, _utils.createColorVariables)(color, '--rs-rate-symbol-checked')), [style, color]);
-  const resetCharacterMap = (0, _react.useCallback)(() => {
-    setCharacterMap(getCharacterMap());
-  }, [getCharacterMap]);
-  (0, _react.useEffect)(() => {
-    // Update characterMap when value is updated.
-    setCharacterMap(getCharacterMap(valueProp));
-  }, [valueProp]);
+  const classes = merge(className, withPrefix());
+
+  // Use the custom hook to manage rating star states
+  const {
+    starStates,
+    setStarStates,
+    resetStarStates,
+    hoverValue,
+    getStarStates
+  } = (0, _useRatingStates.useRatingStates)({
+    value,
+    max,
+    allowHalf,
+    valueProp
+  });
   const handleMouseLeave = (0, _hooks.useEventCallback)(event => {
-    resetCharacterMap();
+    resetStarStates();
     onChangeActive === null || onChangeActive === void 0 || onChangeActive(value, event);
   });
   const handleChangeValue = (0, _hooks.useEventCallback)((index, event) => {
-    let nextValue = (0, _utils2.transformCharacterMapToValue)(characterMap);
-    if (cleanable && value === nextValue && getCharacterMap(value)[index] === characterMap[index]) {
+    let nextValue = (0, _utils2.transformStarStatusToValue)(starStates);
+    if (cleanable && value === nextValue && getStarStates(value)[index] === starStates[index]) {
       nextValue = 0;
     }
     if (nextValue !== value) {
       setValue(nextValue);
-      setCharacterMap(getCharacterMap(nextValue));
+      setStarStates(getStarStates(nextValue));
       onChange === null || onChange === void 0 || onChange(nextValue, event);
     }
   });
@@ -89,59 +86,67 @@ const Rate = (0, _utils.forwardRef)((props, ref) => {
     const {
       key
     } = event;
-    let nextValue = (0, _utils2.transformCharacterMapToValue)(characterMap);
+    let nextValue = (0, _utils2.transformStarStatusToValue)(starStates);
     if (key === _constants.KEY_VALUES.RIGHT && nextValue < max) {
       nextValue = allowHalf ? nextValue + 0.5 : nextValue + 1;
     } else if (key === _constants.KEY_VALUES.LEFT && nextValue > 0) {
       nextValue = allowHalf ? nextValue - 0.5 : nextValue - 1;
     }
-    setCharacterMap(getCharacterMap(nextValue));
+    setStarStates(getStarStates(nextValue));
     if (key === _constants.KEY_VALUES.ENTER) {
       handleChangeValue(index, event);
     }
   });
-  const handleChangeCharacterMap = (0, _hooks.useEventCallback)((index, key, event) => {
-    const nextCharacterMap = characterMap.map((_item, i) => {
+  const handleChangeStarStates = (0, _hooks.useEventCallback)((index, key, event) => {
+    const nextStarStates = starStates.map((_item, i) => {
       if (i === index && key === 'before' && allowHalf) {
         return 0.5;
       }
       return index >= i ? 1 : 0;
     });
-    if (!(0, _utils.shallowEqualArray)(characterMap, nextCharacterMap)) {
-      setCharacterMap(nextCharacterMap);
-      onChangeActive === null || onChangeActive === void 0 || onChangeActive((0, _utils2.transformCharacterMapToValue)(nextCharacterMap), event);
+    if (!(0, _utils.shallowEqualArray)(starStates, nextStarStates)) {
+      setStarStates(nextStarStates);
+      onChangeActive === null || onChangeActive === void 0 || onChangeActive((0, _utils2.transformStarStatusToValue)(nextStarStates), event);
     }
   });
   const handleClick = (0, _hooks.useEventCallback)((index, key, event) => {
-    handleChangeCharacterMap(index, key, event);
+    handleChangeStarStates(index, key, event);
     handleChangeValue(index, event);
   });
   if (plaintext) {
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {
       localeKey: "notSelected",
       className: className
-    }, !(0, _isNil.default)(value) ? `${value}(${max})` : null);
+    }, !(0, _isNil.default)(value) ? `${value}/${max}` : null);
   }
-  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+  const mergedStyle = (0, _utils.mergeStyles)(style, {
+    '--rs-rate-before-size': (0, _utils2.getFractionalValue)(value)
+  });
+  return /*#__PURE__*/_react.default.createElement(_StyledBox.default, (0, _extends2.default)({
     as: as,
+    name: "rate",
+    size: size,
+    color: color,
     role: "radiogroup",
-    tabIndex: 0,
+    tabIndex: disabled ? -1 : 0,
     ref: ref,
     className: classes,
-    style: styles,
-    onMouseLeave: handleMouseLeave
-  }, rest), characterMap.map((item, index) => /*#__PURE__*/_react.default.createElement(_Character.default, {
+    style: mergedStyle,
+    onMouseLeave: handleMouseLeave,
+    "data-disabled": disabled,
+    "data-readonly": readOnly
+  }, rest), starStates.map((status, index) => /*#__PURE__*/_react.default.createElement(_Character.default, {
     role: "radio",
     "aria-posinset": index + 1,
     "aria-setsize": max,
     "aria-checked": value === index + 1,
     key: index,
-    status: item,
+    status: status,
     disabled: disabled || readOnly,
     vertical: vertical,
     onClick: (key, event) => handleClick(index, key, event),
     onKeyDown: event => handleKeyDown(index, event),
-    onMouseMove: (key, event) => handleChangeCharacterMap(index, key, event)
+    onMouseMove: (key, event) => handleChangeStarStates(index, key, event)
   }, renderCharacter ? renderCharacter(hoverValue, index) : character)));
 });
 Rate.displayName = 'Rate';

package/cjs/Rate/types.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Represents the status of a star in a rating system.
+ * 0: Empty star
+ * 0.5: Half-filled star
+ * 1: Fully filled star
+ * number: Any other fractional value for custom fill levels
+ */
+export type StarStatus = 0 | 0.5 | 1 | number;

package/cjs/Rate/types.js

@@ -0,0 +1,4 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;

package/cjs/Rate/useRatingStates.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import type { StarStatus } from './types';
+interface UseRatingStatesParams {
+    value: number;
+    max: number;
+    allowHalf: boolean;
+    valueProp?: number;
+}
+interface UseRatingStatesReturn {
+    starStates: StarStatus[];
+    hoverValue: number;
+    setStarStates: React.Dispatch<React.SetStateAction<StarStatus[]>>;
+    resetStarStates: () => void;
+    getStarStates: (v?: number) => StarStatus[];
+}
+/**
+ * Custom hook to manage rating star states for Rate component
+ */
+export declare const useRatingStates: ({ value, max, allowHalf, valueProp }: UseRatingStatesParams) => UseRatingStatesReturn;
+export {};

package/cjs/Rate/useRatingStates.js

@@ -0,0 +1,48 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.useRatingStates = void 0;
+var _react = require("react");
+var _utils = require("./utils");
+/**
+ * Custom hook to manage rating star states for Rate component
+ */
+const useRatingStates = _ref => {
+  let {
+    value,
+    max,
+    allowHalf,
+    valueProp
+  } = _ref;
+  // Create a function to generate star states based on value
+  const getStarStates = (0, _react.useCallback)(v => {
+    return (0, _utils.transformValueToStarStatus)(typeof v !== 'undefined' ? v : value, max, allowHalf);
+  }, [allowHalf, max, value]);
+
+  // Initialize star states
+  const [starStates, setStarStates] = (0, _react.useState)(getStarStates());
+
+  // Calculate hover value from star states
+  const hoverValue = (0, _utils.transformStarStatusToValue)(starStates);
+
+  // Function to reset star states to current value
+  const resetStarStates = (0, _react.useCallback)(() => {
+    setStarStates(getStarStates());
+  }, [getStarStates]);
+
+  // Update star states when value prop changes
+  (0, _react.useEffect)(() => {
+    if (typeof valueProp !== 'undefined') {
+      setStarStates(getStarStates(valueProp));
+    }
+  }, [valueProp, getStarStates]);
+  return {
+    starStates,
+    setStarStates,
+    resetStarStates,
+    hoverValue,
+    getStarStates
+  };
+};
+exports.useRatingStates = useRatingStates;

package/cjs/Rate/utils.d.ts

@@ -1,3 +1,14 @@
-export type CharacterType = 0 | 0.5 | 1;
-export declare const transformValueToCharacterMap: (value: number, max: number, allowHalf: boolean) => CharacterType[];
-export declare const transformCharacterMapToValue: (characterMap: CharacterType[]) => number;
+import type { StarStatus } from './types';
+/**
+ * Transforms a numeric value into a character map array.
+ */
+export declare const transformValueToStarStatus: (value: number, max: number, allowHalf: boolean) => StarStatus[];
+/**
+ * Transforms a character map array into a numeric value.
+ */
+export declare const transformStarStatusToValue: (characterMap: StarStatus[]) => number;
+/**
+ * Calculates the fractional part of a value as a percentage string.
+ */
+export declare const getFractionalValue: (value: number) => string | undefined;
+export declare const getStarStatus: (status?: StarStatus) => any;

package/cjs/Rate/utils.js

@@ -2,24 +2,65 @@
 "use strict";
 
 exports.__esModule = true;
-exports.transformValueToCharacterMap = exports.transformCharacterMapToValue = void 0;
-const transformValueToCharacterMap = (value, max, allowHalf) => {
+exports.transformValueToStarStatus = exports.transformStarStatusToValue = exports.getStarStatus = exports.getFractionalValue = void 0;
+/**
+ * Transforms a numeric value into a character map array.
+ */
+const transformValueToStarStatus = (value, max, allowHalf) => {
   const characterMap = [];
   for (let i = 0; i < max; i++) {
-    if (i < value) {
-      if (allowHalf && i + 1 > value) {
-        value && characterMap.push(0.5);
+    if (i < value && value >= i + 1) {
+      // Fully filled star
+      characterMap.push(1);
+    } else if (i < value && value < i + 1) {
+      // Partially filled star
+      if (allowHalf) {
+        // Use 0.5 to represent partial fill when half ratings are allowed
+        characterMap.push(0.5);
       } else {
-        characterMap.push(1);
+        // Extract the decimal part
+        characterMap.push(value - i);
       }
     } else {
+      // Empty star
       characterMap.push(0);
     }
   }
   return characterMap;
 };
-exports.transformValueToCharacterMap = transformValueToCharacterMap;
-const transformCharacterMapToValue = characterMap => characterMap.reduce((total, currentValue) => {
+
+/**
+ * Transforms a character map array into a numeric value.
+ */
+exports.transformValueToStarStatus = transformValueToStarStatus;
+const transformStarStatusToValue = characterMap => characterMap.reduce((total, currentValue) => {
   return total + currentValue;
 });
-exports.transformCharacterMapToValue = transformCharacterMapToValue;
+
+/**
+ * Calculates the fractional part of a value as a percentage string.
+ */
+exports.transformStarStatusToValue = transformStarStatusToValue;
+const getFractionalValue = value => {
+  if (!value) {
+    return undefined;
+  }
+  const integer = Math.floor(value);
+  const decimal = value - integer;
+
+  // Round to avoid floating-point precision issues
+  return decimal ? `${Math.round(decimal * 100)}%` : undefined;
+};
+exports.getFractionalValue = getFractionalValue;
+const starStatusMap = {
+  [0]: 'empty',
+  [0.5]: 'half',
+  [1]: 'full'
+};
+const getStarStatus = status => {
+  if (typeof status === 'number') {
+    return starStatusMap[status] || 'frac';
+  }
+  return null;
+};
+exports.getStarStatus = getStarStatus;

package/cjs/Textarea/Textarea.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { InputBaseCommonProps } from '../internals/InputBase';
+import type { SanitizedTextareaProps, PropsWithoutChange, FormControlBaseProps, Size } from '../internals/types';
+export interface TextareaProps extends InputBaseCommonProps, SanitizedTextareaProps, PropsWithoutChange<FormControlBaseProps> {
+    /**
+     * The size of the textarea.
+     * @default 'md'
+     */
+    size?: Size;
+    /** Enable auto resize of the textarea based on content */
+    autosize?: boolean;
+    /**
+     * Maximum number of rows up to which the textarea can grow
+     * Auto resize props for react-textarea-autosize
+     */
+    maxRows?: number;
+    /**
+     * Minimum number of rows up to which the textarea can shrink
+     * Auto resize props for react-textarea-autosize
+     */
+    minRows?: number;
+    /**
+     * Whether to allow the textarea to be resized
+     */
+    resize?: React.CSSProperties['resize'];
+    /**
+     * Called when Enter key is pressed
+     */
+    onPressEnter?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+}
+declare const Textarea: import("../internals/types").InternalRefForwardingComponent<"textarea", TextareaProps, never> & Record<string, never>;
+export default Textarea;

package/cjs/Textarea/Textarea.js

@@ -0,0 +1,51 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _reactTextareaAutosize = _interopRequireDefault(require("react-textarea-autosize"));
+var _InputBase = _interopRequireDefault(require("../internals/InputBase"));
+var _utils = require("../internals/utils");
+var _hooks = require("../internals/hooks");
+var _CustomProvider = require("../CustomProvider");
+const Textarea = (0, _utils.forwardRef)((props, ref) => {
+  const {
+    propsWithDefaults
+  } = (0, _CustomProvider.useCustom)('Textarea', props);
+  const {
+    rows = 3,
+    classPrefix = 'textarea',
+    className,
+    size = 'md',
+    autosize,
+    maxRows,
+    minRows,
+    resize,
+    style,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withPrefix,
+    merge,
+    cssVar
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix());
+  const styles = (0, _utils.mergeStyles)(style, cssVar('resize', resize));
+  const autosizeProps = autosize ? {
+    maxRows,
+    minRows
+  } : {};
+  return /*#__PURE__*/_react.default.createElement(_InputBase.default, (0, _extends2.default)({
+    as: autosize ? _reactTextareaAutosize.default : 'textarea',
+    ref: ref,
+    size: size,
+    rows: rows,
+    className: classes,
+    style: styles
+  }, autosizeProps, rest));
+});
+Textarea.displayName = 'Textarea';
+var _default = exports.default = Textarea;

package/cjs/Textarea/index.d.ts

@@ -0,0 +1,4 @@
+import Textarea from './Textarea';
+export type { TextareaProps } from './Textarea';
+export { Textarea };
+export default Textarea;

package/cjs/Textarea/index.js

@@ -0,0 +1,11 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Textarea = _interopRequireDefault(require("./Textarea"));
+exports.Textarea = _Textarea.default;
+// export types
+// export components
+var _default = exports.default = _Textarea.default;