rsuite 6.0.0-canary-20250403 → 6.0.0-canary-20250424

package/cjs/PinInput/hooks/usePinValue.js

@@ -0,0 +1,73 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.usePinValue = exports.default = void 0;
+var _react = require("react");
+var _hooks = require("../../internals/hooks");
+/**
+ * Hook for managing pin input value
+ * - Handles controlled/uncontrolled value
+ * - Normalizes value to array format
+ * - Manages array updates and modifications
+ */
+const usePinValue = (controlValue, defaultValue, length, onChange, onComplete) => {
+  // Use controlled pattern for value management
+  const [value, setValue] = (0, _hooks.useControlled)(controlValue, defaultValue);
+
+  // Convert string value to array of characters
+  const valueArray = (0, _react.useMemo)(() => {
+    // Ensure value is a string and split it into an array of characters
+    const valueString = value || '';
+    const chars = valueString.split('');
+
+    // Pad the array with empty strings if needed
+    while (chars.length < length) {
+      chars.push('');
+    }
+
+    // Trim the array if it's too long
+    if (chars.length > length) {
+      chars.length = length;
+    }
+    return chars;
+  }, [value, length]);
+
+  // Update specific digit at index
+  const setDigit = (index, digit) => {
+    if (index < 0 || index >= length) return;
+    const newValueArray = [...valueArray];
+    newValueArray[index] = digit;
+    updateValue(newValueArray.join(''));
+  };
+
+  // Clear specific digit at index
+  const clearDigit = index => {
+    if (index < 0 || index >= length) return;
+    const newValueArray = [...valueArray];
+    newValueArray[index] = '';
+    updateValue(newValueArray.join(''));
+  };
+
+  // Set entire value at once
+  const updateValue = newValue => {
+    // Filter out any extra characters beyond length
+    const filteredValue = newValue.slice(0, length);
+    setValue(filteredValue);
+    onChange === null || onChange === void 0 || onChange(filteredValue);
+
+    // Call onComplete if the value is complete
+    if (filteredValue.length === length) {
+      onComplete === null || onComplete === void 0 || onComplete(filteredValue);
+    }
+  };
+  return {
+    value,
+    valueArray,
+    setDigit,
+    clearDigit,
+    updateValue
+  };
+};
+exports.usePinValue = usePinValue;
+var _default = exports.default = usePinValue;

package/cjs/PinInput/index.d.ts

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

package/cjs/PinInput/index.js

@@ -0,0 +1,9 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _PinInput = _interopRequireDefault(require("./PinInput"));
+exports.PinInput = _PinInput.default;
+var _default = exports.default = _PinInput.default;

package/cjs/Placeholder/PlaceholderGraph.js

@@ -8,7 +8,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
-var _CustomProvider = require("../CustomProvider");
 var _utils = require("../internals/utils");
 /**
  * The `Placeholder.Graph` component is used to display the loading state of the block.
@@ -17,7 +16,7 @@ var _utils = require("../internals/utils");
 const PlaceholderGraph = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('PlaceholderGraph', props);
+  } = (0, _hooks.useCustom)('PlaceholderGraph', props);
   const {
     as,
     className,

package/cjs/Placeholder/PlaceholderGrid.js

@@ -8,7 +8,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
-var _CustomProvider = require("../CustomProvider");
 var _utils = require("../internals/utils");
 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; }
@@ -19,7 +18,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const PlaceholderGrid = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('PlaceholderGrid', props);
+  } = (0, _hooks.useCustom)('PlaceholderGrid', props);
   const {
     as,
     className,

package/cjs/Placeholder/PlaceholderParagraph.js

@@ -8,7 +8,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
-var _CustomProvider = require("../CustomProvider");
 var _utils = require("../internals/utils");
 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; }
@@ -19,7 +18,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const PlaceholderParagraph = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('PlaceholderParagraph', props);
+  } = (0, _hooks.useCustom)('PlaceholderParagraph', props);
   const {
     as,
     className,

package/cjs/Popover/Popover.js

@@ -10,7 +10,6 @@ var _Heading = _interopRequireDefault(require("../Heading"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
-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; }
 /**
@@ -20,7 +19,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const Popover = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('Popover', props);
+  } = (0, _hooks.useCustom)('Popover', props);
   const {
     as,
     classPrefix = 'popover',

package/cjs/Progress/ProgressCircle.js

@@ -10,7 +10,6 @@ var _Box = _interopRequireDefault(require("../internals/Box"));
 var _statusIcons = require("../internals/constants/statusIcons");
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
-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; }
 /**
@@ -20,7 +19,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const ProgressCircle = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('ProgressCircle', props);
+  } = (0, _hooks.useCustom)('ProgressCircle', props);
   const {
     as,
     strokeWidth = 6,

package/cjs/Progress/ProgressLine.js

@@ -10,7 +10,6 @@ var _Box = _interopRequireDefault(require("../internals/Box"));
 var _statusIcons = require("../internals/constants/statusIcons");
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
-var _CustomProvider = require("../CustomProvider");
 /**
  * The `Progress.Line` component is used to display the progress of current operation.
  * @see https://rsuitejs.com/components/progress/#line
@@ -18,7 +17,7 @@ var _CustomProvider = require("../CustomProvider");
 const ProgressLine = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('ProgressLine', props);
+  } = (0, _hooks.useCustom)('ProgressLine', props);
   const {
     as,
     className,

package/cjs/Radio/Radio.js

@@ -10,7 +10,6 @@ var _Box = _interopRequireDefault(require("../internals/Box"));
 var _RadioGroup = require("../RadioGroup/RadioGroup");
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
-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; }
 /**
@@ -21,7 +20,7 @@ const Radio = (0, _utils.forwardRef)((props, ref) => {
   const radioContext = (0, _react.useContext)(_RadioGroup.RadioContext);
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('Radio', props);
+  } = (0, _hooks.useCustom)('Radio', props);
   const {
     value: groupValue,
     inline: inlineContext,

package/cjs/RadioGroup/RadioGroup.js

@@ -10,7 +10,6 @@ var _Box = _interopRequireDefault(require("../internals/Box"));
 var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
-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; }
 const RadioContext = exports.RadioContext = /*#__PURE__*/_react.default.createContext(void 0);
@@ -22,7 +21,7 @@ const RadioContext = exports.RadioContext = /*#__PURE__*/_react.default.createCo
 const RadioGroup = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('RadioGroup', props);
+  } = (0, _hooks.useCustom)('RadioGroup', props);
   const {
     as,
     className,

package/cjs/RadioTile/RadioTile.js

@@ -11,7 +11,6 @@ var _Box = _interopRequireDefault(require("../internals/Box"));
 var _RadioTileGroup = require("../RadioTileGroup/RadioTileGroup");
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
-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; }
 /**
@@ -22,7 +21,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const RadioTile = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('RadioTile', props);
+  } = (0, _hooks.useCustom)('RadioTile', props);
   const {
     value: groupValue,
     name: nameContext,

package/cjs/RadioTileGroup/RadioTileGroup.js

@@ -10,7 +10,6 @@ var _Stack = _interopRequireDefault(require("../Stack"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
-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; }
 const RadioTileContext = exports.RadioTileContext = /*#__PURE__*/_react.default.createContext({});
@@ -23,7 +22,7 @@ const RadioTileContext = exports.RadioTileContext = /*#__PURE__*/_react.default.
 const RadioTileGroup = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('RadioTileGroup', props);
+  } = (0, _hooks.useCustom)('RadioTileGroup', props);
   const {
     as = _Stack.default,
     className,

package/cjs/RangeSlider/RangeSlider.js

@@ -17,7 +17,6 @@ var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _utils2 = require("../Slider/utils");
-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; }
 const defaultDefaultValue = [0, 0];
@@ -29,7 +28,7 @@ const defaultDefaultValue = [0, 0];
 const RangeSlider = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('RangeSlider', props);
+  } = (0, _hooks.useCustom)('RangeSlider', props);
   const {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
@@ -76,7 +75,7 @@ const RangeSlider = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _hooks.useStyles)(classPrefix);
   const {
     rtl
-  } = (0, _CustomProvider.useCustom)('RangeSlider');
+  } = (0, _hooks.useCustom)('RangeSlider');
   const classes = merge(className, withPrefix({
     vertical,
     disabled,

package/cjs/Rate/Character.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import { BoxProps } from '../internals/Box';
+import type { StarStatus } from './types';
 interface CharacterProps extends BoxProps {
     vertical?: boolean;
-    status?: 0 | 0.5 | 1;
+    status?: StarStatus;
     disabled?: boolean;
-    onMouseMove?: (key: any, event: React.MouseEvent) => void;
-    onClick?: (key: any, event: React.MouseEvent) => void;
+    onMouseMove?: (key: 'before' | 'after', event: React.MouseEvent) => void;
+    onClick?: (key: 'before' | 'after', event: React.MouseEvent) => void;
     onKeyDown?: (event: React.KeyboardEvent) => void;
 }
 declare const Character: import("../internals/types").InternalRefForwardingComponent<"li", CharacterProps, never> & Record<string, never>;

package/cjs/Rate/Character.js

@@ -7,18 +7,15 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _contains = _interopRequireDefault(require("dom-lib/contains"));
-var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
+var _utils2 = require("./utils");
 var _hooks = require("../internals/hooks");
 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; }
-const characterStatus = {
-  [0]: 'empty',
-  [0.5]: 'half',
-  [1]: 'full'
+const getKey = (element, target) => {
+  return element && target && (0, _contains.default)(element, target) ? 'before' : 'after';
 };
-const getKey = (a, b) => (0, _contains.default)(a, b) ? 'before' : 'after';
 const Character = (0, _utils.forwardRef)((props, ref) => {
   const {
     as = 'li',
@@ -34,27 +31,34 @@ const Character = (0, _utils.forwardRef)((props, ref) => {
     ...rest
   } = props;
   const {
-    merge,
     prefix,
-    withPrefix
+    withPrefix,
+    merge
   } = (0, _hooks.useStyles)(classPrefix);
   const beforeRef = (0, _react.useRef)(null);
-  const classes = merge(className, withPrefix(!(0, _isNil.default)(status) && characterStatus[status]));
   const handleMouseMove = (0, _hooks.useEventCallback)(event => {
     onMouseMove === null || onMouseMove === void 0 || onMouseMove(getKey(beforeRef.current, event.target), event);
   });
   const handleClick = (0, _hooks.useEventCallback)(event => {
     onClick === null || onClick === void 0 || onClick(getKey(beforeRef.current, event.target), event);
   });
+  const eventHandlers = (0, _react.useMemo)(() => {
+    if (disabled) {
+      return null;
+    }
+    return {
+      onClick: handleClick,
+      onKeyDown,
+      onMouseMove: handleMouseMove
+    };
+  }, [disabled, handleClick, onKeyDown, handleMouseMove]);
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
     ref: ref,
-    className: classes,
-    tabIndex: 0,
-    onClick: disabled ? null : handleClick,
-    onKeyDown: disabled ? null : onKeyDown,
-    onMouseMove: disabled ? null : handleMouseMove
-  }, rest), /*#__PURE__*/_react.default.createElement("div", {
+    className: merge(className, withPrefix()),
+    tabIndex: disabled ? -1 : 0,
+    "data-status": (0, _utils2.getStarStatus)(status)
+  }, eventHandlers, rest), /*#__PURE__*/_react.default.createElement("div", {
     ref: beforeRef,
     className: prefix('before', {
       vertical

package/cjs/Rate/Rate.d.ts

@@ -1,18 +1,26 @@
 import React from 'react';
-import { BoxProps } from '../internals/Box';
+import { StyledBoxProps } from '../internals/StyledBox';
 import type { Color, FormControlBaseProps, Size } from '../internals/types';
-export interface RateProps<T = number> extends BoxProps, FormControlBaseProps<T> {
+export interface RateProps<T = number> extends Omit<StyledBoxProps, 'name'>, FormControlBaseProps<T> {
+    /** Whether to allow semi selection */
     allowHalf?: boolean;
+    /** Custom character of rate */
     character?: React.ReactNode;
+    /** The prefix of the component CSS class */
     classPrefix?: string;
+    /** Whether to allow cancel selection */
     cleanable?: boolean;
     /** A rate can have different sizes */
     size?: Size;
     /** A rate can have different colors */
     color?: Color | React.CSSProperties['color'];
+    /** Maximum rate */
     max?: number;
+    /** Vertical Rate half */
     vertical?: boolean;
+    /** Render custom character */
     renderCharacter?: (value: number, index: number) => React.ReactNode;
+    /** Callback function when hover state changes */
     onChangeActive?: (value: T, event: React.SyntheticEvent) => void;
 }
 /**

package/cjs/Rate/Rate.js

@@ -5,19 +5,17 @@ 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 _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; }
+var _useRatingStates = require("./useRatingStates");
 /**
  * The `Rate` component is used for rating. It can be used to evaluate the quality of the content.
  * @see https://rsuitejs.com/components/rate/
@@ -25,7 +23,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const Rate = (0, _utils.forwardRef)((props, ref) => {
   const {
     propsWithDefaults
-  } = (0, _CustomProvider.useCustom)('Rate', props);
+  } = (0, _hooks.useCustom)('Rate', props);
   const {
     as = 'ul',
     character = /*#__PURE__*/_react.default.createElement(_Star.default, null),
@@ -35,7 +33,7 @@ const Rate = (0, _utils.forwardRef)((props, ref) => {
     max = 5,
     readOnly,
     vertical,
-    size = 'md',
+    size,
     color,
     allowHalf = false,
     value: valueProp,
@@ -49,39 +47,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 +85,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;