rsuite 5.61.0 → 5.62.0

package/Accordion/styles/index.css

@@ -17,6 +17,7 @@
   --rs-btn-subtle-hover-bg: var(--rs-gray-200);
   --rs-btn-subtle-hover-text: var(--rs-gray-800);
   --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+  --rs-scroll-view-shadow-color: rgba(9, 9, 9, 0.2);
 }
 .rs-theme-dark {
   --rs-gray-0: #fff;
@@ -36,6 +37,7 @@
   --rs-btn-subtle-hover-bg: var(--rs-gray-500);
   --rs-btn-subtle-hover-text: var(--rs-gray-50);
   --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+  --rs-scroll-view-shadow-color: rgba(0, 0, 0, 0.99);
 }
 .rs-theme-high-contrast {
   --rs-gray-0: #fff;
@@ -55,6 +57,7 @@
   --rs-btn-subtle-hover-bg: transparent;
   --rs-btn-subtle-hover-text: var(--rs-primary-400);
   --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+  --rs-scroll-view-shadow-color: rgba(0, 0, 0, 0.99);
 }
 /* stylelint-disable */
 *[class*='rs-'] {
@@ -119,6 +122,66 @@
   font-size: 16px;
   line-height: 22px;
 }
+.rs-scroll-view.rs-scroll-view-shadow {
+  overflow: auto;
+  padding: 0px;
+}
+.rs-scroll-view.rs-scroll-view-shadow::before,
+.rs-scroll-view.rs-scroll-view-shadow::after {
+  content: '';
+  position: sticky;
+  width: 100%;
+  height: 2px;
+  visibility: hidden;
+  display: block;
+  z-index: 1;
+}
+.rs-scroll-view.rs-scroll-view-shadow::before {
+  top: -2px;
+  -webkit-box-shadow: 3px 0 5px rgba(9, 9, 9, 0.2);
+  -webkit-box-shadow: 3px 0 5px var(--rs-scroll-view-shadow-color);
+          box-shadow: 3px 0 5px rgba(9, 9, 9, 0.2);
+          box-shadow: 3px 0 5px var(--rs-scroll-view-shadow-color);
+}
+.rs-scroll-view.rs-scroll-view-shadow::after {
+  bottom: -2px;
+  -webkit-box-shadow: -3px 0 5px rgba(9, 9, 9, 0.2);
+  -webkit-box-shadow: -3px 0 5px var(--rs-scroll-view-shadow-color);
+          box-shadow: -3px 0 5px rgba(9, 9, 9, 0.2);
+          box-shadow: -3px 0 5px var(--rs-scroll-view-shadow-color);
+}
+.rs-scroll-view.rs-scroll-view-shadow.rs-scroll-view-thumb-middle::before,
+.rs-scroll-view.rs-scroll-view-shadow.rs-scroll-view-thumb-middle::after {
+  visibility: visible;
+}
+.rs-scroll-view.rs-scroll-view-shadow.rs-scroll-view-thumb-top::after {
+  visibility: visible;
+}
+.rs-scroll-view.rs-scroll-view-shadow.rs-scroll-view-thumb-bottom::before {
+  visibility: visible;
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar {
+  --rs-scrollbar-bg: transparent;
+  --rs-scrollbar-thumb-bg: rgba(87, 87, 87, 0.6);
+  --rs-scrollbar-thumb-hover-bg: var(--rs-gray-800);
+  scrollbar-width: auto;
+  scrollbar-color: var(--rs-scrollbar-thumb-bg) var(--rs-scrollbar-bg);
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar {
+  width: 12px;
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar-track {
+  background: var(--rs-scrollbar-bg);
+  border-radius: 10px;
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--rs-scrollbar-thumb-bg);
+  border-radius: 6px;
+  border: 3px solid var(--rs-scrollbar-bg);
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--rs-scrollbar-thumb-hover-bg);
+}
 .rs-panel {
   border-radius: 6px;
   overflow: hidden;
@@ -223,7 +286,7 @@ tbody.rs-panel .rs-anim-collapse.rs-anim-in {
 .rs-panel-title a:active {
   text-decoration: none;
 }
-.rs-panel-header + .rs-panel-collapse .rs-panel-body,
+.rs-panel-header + .rs-panel-body-collapse .rs-panel-body,
 .rs-panel-header + .rs-panel-body {
   padding-top: 0;
 }

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [5.62.0](https://github.com/rsuite/rsuite/compare/v5.61.0...v5.62.0) (2024-05-24)
+
+
+### Bug Fixes
+
+* **DatePicker:** fix calendar component style issue ([#3816](https://github.com/rsuite/rsuite/issues/3816)) ([f455182](https://github.com/rsuite/rsuite/commit/f455182ffcebb382ad9a3d71149c876aefa84e4a))
+* **DatePicker,DateRangePicker:** fix `renderValue` and `editable` can't coexist ([#3815](https://github.com/rsuite/rsuite/issues/3815)) ([20d4a81](https://github.com/rsuite/rsuite/commit/20d4a817ec70ea3f073ca7763c8abbe66b21a913))
+
+
+### Features
+
+* **Calendar,DatePicker,DateRangePicker:** add support for `weekStart` ([#3814](https://github.com/rsuite/rsuite/issues/3814)) ([9edbbcd](https://github.com/rsuite/rsuite/commit/9edbbcdf1d550e669483c5bca6cad624d5e8cf74))
+* **Panel, Tree, CheckTree:** add support for `scrollShadow` ([#3818](https://github.com/rsuite/rsuite/issues/3818)) ([8183e92](https://github.com/rsuite/rsuite/commit/8183e92d1998cc1945b181b916bce6cefcee3012))
+
+
+
 # [5.61.0](https://github.com/rsuite/rsuite/compare/v5.60.2...v5.61.0) (2024-05-17)
 
 

package/DateRangePicker/styles/index.css

@@ -4033,15 +4033,15 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-popup.rs-picker-popup-daterange {
   padding: 0;
 }
+.rs-picker-popup.rs-picker-popup-daterange .rs-calendar:first-child {
+  border-right: 1px solid #e5e5ea;
+  border-right: 1px solid var(--rs-border-primary);
+}
 .rs-picker-popup .rs-calendar {
   display: inline-block;
   height: 274px;
   padding-bottom: 12px;
 }
-.rs-picker-popup .rs-calendar:first-child {
-  border-right: 1px solid #e5e5ea;
-  border-right: 1px solid var(--rs-border-primary);
-}
 .rs-picker-popup .rs-calendar-header {
   width: 100%;
   text-align: center;

package/DateRangePicker/styles/index.less

@@ -34,6 +34,10 @@
 .rs-picker-popup {
   &&-daterange {
     padding: 0;
+
+    .rs-calendar:first-child {
+      border-right: 1px solid var(--rs-border-primary);
+    }
   }
 
   .rs-calendar {
@@ -41,10 +45,6 @@
     height: 274px;
     padding-bottom: 12px;
 
-    &:first-child {
-      border-right: 1px solid var(--rs-border-primary);
-    }
-
     &-header {
       width: 100%;
       text-align: center;

package/Panel/styles/index.css

@@ -17,6 +17,7 @@
   --rs-btn-subtle-hover-bg: var(--rs-gray-200);
   --rs-btn-subtle-hover-text: var(--rs-gray-800);
   --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+  --rs-scroll-view-shadow-color: rgba(9, 9, 9, 0.2);
 }
 .rs-theme-dark {
   --rs-gray-0: #fff;
@@ -36,6 +37,7 @@
   --rs-btn-subtle-hover-bg: var(--rs-gray-500);
   --rs-btn-subtle-hover-text: var(--rs-gray-50);
   --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+  --rs-scroll-view-shadow-color: rgba(0, 0, 0, 0.99);
 }
 .rs-theme-high-contrast {
   --rs-gray-0: #fff;
@@ -55,6 +57,7 @@
   --rs-btn-subtle-hover-bg: transparent;
   --rs-btn-subtle-hover-text: var(--rs-primary-400);
   --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+  --rs-scroll-view-shadow-color: rgba(0, 0, 0, 0.99);
 }
 /* stylelint-disable */
 *[class*='rs-'] {
@@ -96,6 +99,66 @@
   font-size: 16px;
   line-height: 22px;
 }
+.rs-scroll-view.rs-scroll-view-shadow {
+  overflow: auto;
+  padding: 0px;
+}
+.rs-scroll-view.rs-scroll-view-shadow::before,
+.rs-scroll-view.rs-scroll-view-shadow::after {
+  content: '';
+  position: sticky;
+  width: 100%;
+  height: 2px;
+  visibility: hidden;
+  display: block;
+  z-index: 1;
+}
+.rs-scroll-view.rs-scroll-view-shadow::before {
+  top: -2px;
+  -webkit-box-shadow: 3px 0 5px rgba(9, 9, 9, 0.2);
+  -webkit-box-shadow: 3px 0 5px var(--rs-scroll-view-shadow-color);
+          box-shadow: 3px 0 5px rgba(9, 9, 9, 0.2);
+          box-shadow: 3px 0 5px var(--rs-scroll-view-shadow-color);
+}
+.rs-scroll-view.rs-scroll-view-shadow::after {
+  bottom: -2px;
+  -webkit-box-shadow: -3px 0 5px rgba(9, 9, 9, 0.2);
+  -webkit-box-shadow: -3px 0 5px var(--rs-scroll-view-shadow-color);
+          box-shadow: -3px 0 5px rgba(9, 9, 9, 0.2);
+          box-shadow: -3px 0 5px var(--rs-scroll-view-shadow-color);
+}
+.rs-scroll-view.rs-scroll-view-shadow.rs-scroll-view-thumb-middle::before,
+.rs-scroll-view.rs-scroll-view-shadow.rs-scroll-view-thumb-middle::after {
+  visibility: visible;
+}
+.rs-scroll-view.rs-scroll-view-shadow.rs-scroll-view-thumb-top::after {
+  visibility: visible;
+}
+.rs-scroll-view.rs-scroll-view-shadow.rs-scroll-view-thumb-bottom::before {
+  visibility: visible;
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar {
+  --rs-scrollbar-bg: transparent;
+  --rs-scrollbar-thumb-bg: rgba(87, 87, 87, 0.6);
+  --rs-scrollbar-thumb-hover-bg: var(--rs-gray-800);
+  scrollbar-width: auto;
+  scrollbar-color: var(--rs-scrollbar-thumb-bg) var(--rs-scrollbar-bg);
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar {
+  width: 12px;
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar-track {
+  background: var(--rs-scrollbar-bg);
+  border-radius: 10px;
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--rs-scrollbar-thumb-bg);
+  border-radius: 6px;
+  border: 3px solid var(--rs-scrollbar-bg);
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--rs-scrollbar-thumb-hover-bg);
+}
 .rs-panel {
   border-radius: 6px;
   overflow: hidden;
@@ -200,7 +263,7 @@ tbody.rs-panel .rs-anim-collapse.rs-anim-in {
 .rs-panel-title a:active {
   text-decoration: none;
 }
-.rs-panel-header + .rs-panel-collapse .rs-panel-body,
+.rs-panel-header + .rs-panel-body-collapse .rs-panel-body,
 .rs-panel-header + .rs-panel-body {
   padding-top: 0;
 }

package/Panel/styles/index.less

@@ -1,5 +1,6 @@
 @import '../../styles/common.less';
 @import '../../Heading/styles/index.less';
+@import '../../internals/ScrollView/styles/index.less';
 
 //
 // Panel
@@ -90,7 +91,7 @@
   }
 
   // Adjust the padding value when the head and body are combined.
-  &-header + &-collapse &-body,
+  &-header + &-body-collapse &-body,
   &-header + &-body {
     padding-top: 0;
   }

package/cjs/Accordion/Accordion.d.ts

@@ -1,6 +1,6 @@
 import { type PanelGroupProps } from '../PanelGroup';
 import Panel from '../Panel';
-import { RsRefForwardingComponent } from '../@types/common';
+import { RsRefForwardingComponent } from '@/internals/types';
 export declare type AccordionProps = Omit<PanelGroupProps, 'accordion'>;
 export interface AccordionComponent extends RsRefForwardingComponent<'div', AccordionProps> {
     Panel: typeof Panel;

package/cjs/Affix/Affix.d.ts

@@ -1,4 +1,4 @@
-import { Offset, RsRefForwardingComponent, WithAsProps } from '../@types/common';
+import { Offset, RsRefForwardingComponent, WithAsProps } from '@/internals/types';
 export interface AffixProps extends WithAsProps {
     /** Specify the container. */
     container?: HTMLElement | (() => HTMLElement);

package/cjs/Affix/Affix.js

@@ -11,7 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _getOffset = _interopRequireDefault(require("dom-lib/getOffset"));
-var _utils = require("../utils");
+var _hooks = require("../internals/hooks");
+var _utils = require("../internals/utils");
 /**
  * Get the layout size and offset of the mount element
  */
@@ -33,18 +34,18 @@ function useOffset(mountRef, onOffsetChange) {
   }, [mountRef, offset, onOffsetChange]);
 
   // Update after the element size changes
-  (0, _utils.useElementResize)(function () {
+  (0, _hooks.useElementResize)(function () {
     return mountRef.current;
   }, updateOffset);
 
   // Initialize after the first render
-  (0, _utils.useMount)(updateOffset);
+  (0, _hooks.useMount)(updateOffset);
 
   // Update after window size changes
-  (0, _utils.useEventListener)(window, 'resize', updateOffset, false);
+  (0, _hooks.useEventListener)(window, 'resize', updateOffset, false);
 
   // Update after window scroll
-  (0, _utils.useEventListener)(window, 'scroll', (0, _debounce.default)(updateOffset, 100), false);
+  (0, _hooks.useEventListener)(window, 'scroll', (0, _debounce.default)(updateOffset, 100), false);
   return offset;
 }
 
@@ -96,7 +97,7 @@ function useFixed(offset, containerOffset, props) {
   }, [offset, top, containerOffset, fixed, onChange]);
 
   // Add scroll event to window
-  (0, _utils.useEventListener)(window, 'scroll', handleScroll, false);
+  (0, _hooks.useEventListener)(window, 'scroll', handleScroll, false);
   return fixed;
 }
 
@@ -127,7 +128,7 @@ var Affix = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     top: top,
     onChange: onChange
   });
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
   var classes = merge(className, (_merge = {}, _merge[withClassPrefix()] = fixed, _merge));

package/cjs/Animation/Bounce.js

@@ -8,7 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _Transition = _interopRequireDefault(require("./Transition"));
-var _utils = require("../utils");
+var _hooks = require("../internals/hooks");
 /**
  * Bounce animation component
  * @see https://rsuitejs.com/components/animation/#bounce
@@ -17,7 +17,7 @@ var Bounce = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref$timeout = _ref.timeout,
     timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
     props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["timeout"]);
-  var _useClassNames = (0, _utils.useClassNames)('anim'),
+  var _useClassNames = (0, _hooks.useClassNames)('anim'),
     prefix = _useClassNames.prefix;
   return /*#__PURE__*/_react.default.createElement(_Transition.default, (0, _extends2.default)({}, props, {
     ref: ref,

package/cjs/Animation/Collapse.js

@@ -14,7 +14,8 @@ var _addStyle = _interopRequireDefault(require("dom-lib/addStyle"));
 var _get = _interopRequireDefault(require("lodash/get"));
 var _capitalize = _interopRequireDefault(require("lodash/capitalize"));
 var _Transition = _interopRequireWildcard(require("./Transition"));
-var _utils = require("../utils");
+var _hooks = require("../internals/hooks");
+var _utils = require("../internals/utils");
 var DIMENSION;
 exports.DIMENSION = DIMENSION;
 (function (DIMENSION) {
@@ -60,7 +61,7 @@ var Collapse = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onExit = props.onExit,
     onExiting = props.onExiting,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "timeout", "dimension", "exitedClassName", "exitingClassName", "enteredClassName", "enteringClassName", "getDimensionValue", "onEnter", "onEntering", "onEntered", "onExit", "onExiting"]);
-  var _useClassNames = (0, _utils.useClassNames)('anim'),
+  var _useClassNames = (0, _hooks.useClassNames)('anim'),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge;
   var dimension = typeof dimensionProp === 'function' ? dimensionProp() : dimensionProp;

package/cjs/Animation/Fade.js

@@ -8,7 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _Transition = _interopRequireDefault(require("./Transition"));
-var _utils = require("../utils");
+var _hooks = require("../internals/hooks");
 /**
  * Fade animation component
  * @see https://rsuitejs.com/components/animation/#fade
@@ -18,7 +18,7 @@ var Fade = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
     className = _ref.className,
     props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["timeout", "className"]);
-  var _useClassNames = (0, _utils.useClassNames)('anim'),
+  var _useClassNames = (0, _hooks.useClassNames)('anim'),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge;
   return /*#__PURE__*/_react.default.createElement(_Transition.default, (0, _extends2.default)({}, props, {

package/cjs/Animation/Slide.js

@@ -8,7 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _Transition = _interopRequireDefault(require("./Transition"));
-var _utils = require("../utils");
+var _hooks = require("../internals/hooks");
 /**
  * Slide animation component
  * @see https://rsuitejs.com/components/animation/#slide
@@ -19,7 +19,7 @@ var Slide = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? 'right' : _ref$placement,
     props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["timeout", "placement"]);
-  var _useClassNames = (0, _utils.useClassNames)('anim'),
+  var _useClassNames = (0, _hooks.useClassNames)('anim'),
     prefix = _useClassNames.prefix;
   var enterClassName = prefix('slide-in', placement);
   var exitClassName = prefix('slide-out', placement);

package/cjs/Animation/Transition.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { AnimationEventProps } from '../@types/common';
+import { AnimationEventProps } from '@/internals/types';
 export declare enum STATUS {
     UNMOUNTED = 0,
     EXITED = 1,

package/cjs/Animation/Transition.js

@@ -14,7 +14,7 @@ var _on = _interopRequireDefault(require("dom-lib/on"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
-var _utils = require("../utils");
+var _utils = require("../internals/utils");
 var _utils2 = require("./utils");
 var STATUS;
 exports.STATUS = STATUS;

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { PickerComponent } from '../internals/Picker';
-import { WithAsProps, FormControlPickerProps, TypeAttributes, ItemDataType } from '../@types/common';
+import { PickerComponent } from '@/internals/Picker';
+import { WithAsProps, FormControlPickerProps, TypeAttributes, ItemDataType } from '@/internals/types';
 export declare type ValueType = string;
 export interface AutoCompleteProps<T = ValueType> extends WithAsProps, FormControlPickerProps<T, any, ItemDataType | string> {
     /** Additional classes for menu */

package/cjs/AutoComplete/AutoComplete.js

@@ -11,9 +11,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
-var _utils = require("../utils");
+var _hooks = require("../internals/hooks");
+var _utils = require("../internals/utils");
 var _utils2 = require("../Animation/utils");
 var _Picker = require("../internals/Picker");
+var _constants = require("../internals/constants");
 var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
 var _propTypes2 = require("../internals/propTypes");
 var _utils3 = require("./utils");
@@ -62,7 +64,7 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     onMenuFocus = props.onMenuFocus,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "disabled", "className", "placement", "selectOnEnter", "classPrefix", "defaultValue", "menuAutoWidth", "data", "value", "open", "style", "size", "menuClassName", "id", "readOnly", "plaintext", "renderMenu", "renderMenuItem", "onSelect", "filterBy", "onKeyDown", "onChange", "onClose", "onOpen", "onFocus", "onBlur", "onMenuFocus"]);
   var datalist = (0, _utils3.transformData)(data);
-  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
+  var _useControlled = (0, _hooks.useControlled)(valueProp, defaultValue),
     value = _useControlled[0],
     setValue = _useControlled[1];
   var _useState = (0, _react.useState)(false),
@@ -74,7 +76,7 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     trigger = _usePickerRef.trigger,
     overlay = _usePickerRef.overlay,
     root = _usePickerRef.root;
-  var isMounted = (0, _utils.useIsMounted)();
+  var isMounted = (0, _hooks.useIsMounted)();
 
   // Used to hover the focuse item  when trigger `onKeydown`
   var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {
@@ -114,10 +116,10 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }
     handleClose();
   };
-  var handleSelect = (0, _utils.useEventCallback)(function (item, event) {
+  var handleSelect = (0, _hooks.useEventCallback)(function (item, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value, item, event);
   });
-  var handleChangeValue = (0, _utils.useEventCallback)(function (value, event) {
+  var handleChangeValue = (0, _hooks.useEventCallback)(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
   });
   var handleChange = function handleChange(value, event) {
@@ -126,17 +128,17 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     setFocus(true);
     handleChangeValue(value, event);
   };
-  var handleClose = (0, _utils.useEventCallback)(function () {
+  var handleClose = (0, _hooks.useEventCallback)(function () {
     if (isMounted()) {
       setFocus(false);
       onClose === null || onClose === void 0 ? void 0 : onClose();
     }
   });
-  var handleOpen = (0, _utils.useEventCallback)(function () {
+  var handleOpen = (0, _hooks.useEventCallback)(function () {
     setFocus(true);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
   });
-  var handleItemSelect = (0, _utils.useEventCallback)(function (nextItemValue, item, event) {
+  var handleItemSelect = (0, _hooks.useEventCallback)(function (nextItemValue, item, event) {
     setValue(nextItemValue);
     setFocusItemValue(nextItemValue);
     handleSelect(item, event);
@@ -145,15 +147,15 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }
     handleClose();
   });
-  var handleInputFocus = (0, _utils.useEventCallback)(function (event) {
+  var handleInputFocus = (0, _hooks.useEventCallback)(function (event) {
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
     handleOpen();
   });
-  var handleInputBlur = (0, _utils.useEventCallback)(function (event) {
+  var handleInputBlur = (0, _hooks.useEventCallback)(function (event) {
     setTimeout(handleClose, 300);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   });
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix({
@@ -234,7 +236,7 @@ AutoComplete.propTypes = (0, _extends2.default)({}, _utils2.animationPropTypes,
   className: _propTypes.default.string,
   menuClassName: _propTypes.default.string,
   menuAutoWidth: _propTypes.default.bool,
-  placement: (0, _propTypes2.oneOf)(_utils.PLACEMENT),
+  placement: (0, _propTypes2.oneOf)(_constants.PLACEMENT),
   onFocus: _propTypes.default.func,
   onMenuFocus: _propTypes.default.func,
   onBlur: _propTypes.default.func,

package/cjs/Avatar/Avatar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '../@types/common';
+import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '@/internals/types';
 import { type Size } from '../AvatarGroup/AvatarGroup';
 export interface AvatarProps extends WithAsProps {
     /**

package/cjs/Avatar/Avatar.js

@@ -10,7 +10,8 @@ var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
+var _hooks = require("../internals/hooks");
+var _utils = require("../internals/utils");
 var _AvatarGroup = require("../AvatarGroup/AvatarGroup");
 var _propTypes2 = require("../internals/propTypes");
 var _AvatarIcon = _interopRequireDefault(require("./AvatarIcon"));
@@ -44,7 +45,7 @@ var Avatar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     imgProps = props.imgProps,
     onError = props.onError,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "bordered", "alt", "className", "children", "circle", "color", "classPrefix", "size", "src", "srcSet", "sizes", "style", "imgProps", "onError"]);
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge;
@@ -62,7 +63,7 @@ var Avatar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onError: onError
     })),
     loaded = _useImage.loaded;
-  var _useCustom = (0, _utils.useCustom)('Avatar'),
+  var _useCustom = (0, _hooks.useCustom)('Avatar'),
     rtl = _useCustom.rtl;
   var altComponent = (0, _react.useMemo)(function () {
     if (alt) {

package/cjs/Avatar/useImage.js

@@ -4,7 +4,7 @@
 exports.__esModule = true;
 exports.default = void 0;
 var _react = require("react");
-var _utils = require("../utils");
+var _hooks = require("../internals/hooks");
 /**
  * A hook that loads an image and returns the status of the image.
  *
@@ -57,7 +57,7 @@ var useImage = function useImage(props) {
     if (crossOrigin) img.crossOrigin = crossOrigin;
     imgRef.current = img;
   }, [crossOrigin, handleError, handleLoad, sizes, src, srcSet]);
-  (0, _utils.useIsomorphicLayoutEffect)(function () {
+  (0, _hooks.useIsomorphicLayoutEffect)(function () {
     if (status === 'loading') {
       loadImge();
     }

package/cjs/AvatarGroup/AvatarGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import { WithAsProps, RsRefForwardingComponent } from '@/internals/types';
 export declare type Size = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 export interface AvatarGroupProps extends WithAsProps {
     /**

package/cjs/AvatarGroup/AvatarGroup.js

@@ -9,7 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
+var _hooks = require("../internals/hooks");
+var _utils = require("../internals/utils");
 var _propTypes2 = require("../internals/propTypes");
 var AvatarGroupContext = /*#__PURE__*/_react.default.createContext({});
 
@@ -30,7 +31,7 @@ var AvatarGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     size = props.size,
     style = props.style,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "spacing", "className", "children", "stack", "size", "style"]);
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix({

package/cjs/Badge/Badge.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '../@types/common';
+import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '@/internals/types';
 export interface BadgeProps extends WithAsProps {
     /** Main content */
     content?: React.ReactNode;

package/cjs/Badge/Badge.js

@@ -8,7 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
+var _hooks = require("../internals/hooks");
 var _propTypes2 = require("../internals/propTypes");
 /**
  * The Badge component is usually used to mark or highlight the status or quantity of an object.
@@ -26,7 +26,7 @@ var Badge = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     _props$maxCount = props.maxCount,
     maxCount = _props$maxCount === void 0 ? 99 : _props$maxCount,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "content", "color", "className", "classPrefix", "children", "maxCount"]);
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge;