rsuite 6.0.0 → 6.1.0

package/cjs/Form/Form.js

@@ -111,7 +111,11 @@ const Form = (0, _utils.forwardRef)((props, ref) => {
   });
   const reset = (0, _hooks.useEventCallback)(event => {
     resetErrors();
-    onReset === null || onReset === void 0 || onReset(resetFormValue(), event);
+    const resetValue = resetFormValue();
+    if (resetValue) {
+      onChange === null || onChange === void 0 || onChange(resetValue);
+    }
+    onReset === null || onReset === void 0 || onReset(resetValue, event);
   });
   const handleSubmit = (0, _hooks.useEventCallback)(event => {
     var _event$preventDefault, _event$stopPropagatio;

package/cjs/InputPicker/InputPicker.js

@@ -596,7 +596,7 @@ const InputPicker = (0, _utils3.forwardRef)((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, (0, _extends2.default)({
     id: id,
     multiple: multi,
-    name: multi ? 'tag' : 'input',
+    pickerType: multi ? 'tag' : 'input',
     block: block,
     disabled: disabled,
     appearance: appearance,

package/cjs/MultiCascader/MultiCascader.js

@@ -301,7 +301,7 @@ const MultiCascader = (0, _utils3.forwardRef)((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     as: as,
     id: id,
-    name: "multi-cascader",
+    pickerType: "multi-cascader",
     block: block,
     disabled: disabled,
     appearance: appearance,

package/cjs/Panel/PanelHeader.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BoxProps } from '../internals/Box';
-export interface PanelHeaderProps extends BoxProps, Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'> {
+export interface PanelHeaderProps extends BoxProps, Omit<React.HTMLAttributes<HTMLDivElement | HTMLHeadingElement>, 'color'> {
     caretAs?: React.ElementType;
     collapsible?: boolean;
     disabled?: boolean;

package/cjs/Panel/PanelHeader.js

@@ -7,14 +7,14 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _get = _interopRequireDefault(require("lodash/get"));
-var _Heading = _interopRequireDefault(require("../Heading"));
 var _AccordionButton = _interopRequireDefault(require("./AccordionButton"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
+var _utils = require("../internals/utils");
 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 PanelHeader = props => {
   const {
-    as = _Heading.default,
+    as = 'div',
     classPrefix = 'panel',
     className,
     children,
@@ -33,8 +33,8 @@ const PanelHeader = props => {
     prefix
   } = (0, _hooks.useStyles)(classPrefix);
   let headerElement;
-  if (! /*#__PURE__*/(0, _react.isValidElement)(children) || Array.isArray(children)) {
-    headerElement = /*#__PURE__*/_react.default.createElement("span", {
+  if (! /*#__PURE__*/(0, _react.isValidElement)(children) || Array.isArray(children) || (0, _utils.isFragment)(children)) {
+    headerElement = /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('title')
     }, children);
   } else {
@@ -45,7 +45,6 @@ const PanelHeader = props => {
   }
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
-    level: 2,
     className: merge(className, prefix('header'))
   }, rest), collapsible ? /*#__PURE__*/_react.default.createElement(_AccordionButton.default, {
     id: buttonId,

package/cjs/Rate/Rate.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 import { StyledBoxProps } from '../internals/StyledBox';
 import type { Color, FormControlBaseProps, Size } from '../internals/types';
 export interface RateProps<T = number> extends Omit<StyledBoxProps, 'name'>, FormControlBaseProps<T> {
+    /** Element type to render as */
+    as?: React.ElementType;
     /** Whether to allow semi selection */
     allowHalf?: boolean;
     /** Custom character of rate */
@@ -16,6 +18,12 @@ export interface RateProps<T = number> extends Omit<StyledBoxProps, 'name'>, For
     color?: Color | React.CSSProperties['color'];
     /** Maximum rate */
     max?: number;
+    /**
+     * The name of the form control.
+     * Used for form integration and does not affect the internal component styling.
+     * @private Internal use only - extracted from props to prevent conflicts with StyledBox
+     */
+    name?: string;
     /** Vertical Rate half */
     vertical?: boolean;
     /** Render custom character */

package/cjs/Rate/Rate.js

@@ -31,6 +31,7 @@ const Rate = (0, _utils.forwardRef)((props, ref) => {
     classPrefix = 'rate',
     disabled,
     max = 5,
+    name,
     readOnly,
     vertical,
     size,
@@ -133,7 +134,8 @@ const Rate = (0, _utils.forwardRef)((props, ref) => {
     style: mergedStyle,
     onMouseLeave: handleMouseLeave,
     "data-disabled": disabled,
-    "data-readonly": readOnly
+    "data-readonly": readOnly,
+    "data-name": name
   }, rest), starStates.map((status, index) => /*#__PURE__*/_react.default.createElement(_Character.default, {
     role: "radio",
     "aria-posinset": index + 1,

package/cjs/SelectPicker/SelectPicker.js

@@ -250,7 +250,7 @@ const SelectPicker = (0, _utils.forwardRef)((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     as: as,
     id: id,
-    name: "select",
+    pickerType: "select",
     block: block,
     disabled: disabled,
     appearance: appearance,

package/cjs/Tree/hooks/useFlattenTree.d.ts

@@ -28,6 +28,10 @@ interface UseFlattenTreeOptions {
      * An array of item values that should not be selectable.
      */
     uncheckableItemValues?: any[];
+    /**
+     * An array of item values that should be disabled.
+     */
+    disabledItemValues?: any[];
     /**
      * A callback function that will be called when the tree nodes change.
      * It receives a map of the tree nodes.

package/cjs/Tree/hooks/useFlattenTree.js

@@ -21,6 +21,7 @@ function useFlattenTree(data, options) {
     valueKey,
     childrenKey,
     uncheckableItemValues = [],
+    disabledItemValues = [],
     cascade,
     multiple,
     callback
@@ -32,6 +33,26 @@ function useFlattenTree(data, options) {
     // Reset values to false
     Object.keys(flattenedNodes.current).forEach(refKey => {
       const node = flattenedNodes.current[refKey];
+
+      // Check if this node or any of its parents is disabled
+      const isNodeDisabled = disabledItemValues.some(disabledValue => (0, _utils.shallowEqual)(node[valueKey], disabledValue));
+      let hasDisabledParent = false;
+      let currentNode = node;
+      while (currentNode.parent && !hasDisabledParent) {
+        const parentRefKey = currentNode.parent.refKey;
+        if (parentRefKey && flattenedNodes.current[parentRefKey]) {
+          const parentValue = flattenedNodes.current[parentRefKey][valueKey];
+          if (disabledItemValues.some(disabledValue => (0, _utils.shallowEqual)(parentValue, disabledValue))) {
+            hasDisabledParent = true;
+          }
+        }
+        currentNode = currentNode.parent;
+      }
+
+      // Skip disabled nodes - they should not be affected by cascade or value changes
+      if (isNodeDisabled || hasDisabledParent) {
+        return;
+      }
       if (cascade && !(0, _isNil.default)(node.parent) && !(0, _isNil.default)(node.parent.refKey)) {
         node.check = flattenedNodes.current[node.parent.refKey].check;
       } else {
@@ -43,7 +64,7 @@ function useFlattenTree(data, options) {
         }
       });
     });
-  }, [cascade, uncheckableItemValues, valueKey]);
+  }, [cascade, uncheckableItemValues, disabledItemValues, valueKey]);
   const flattenTreeData = (0, _react.useCallback)((treeData, parent, layer = 1) => {
     if (!Array.isArray(treeData) || treeData.length === 0) {
       return [];

package/cjs/Tree/hooks/useFocusTree.js

@@ -104,12 +104,30 @@ function useFocusTree(props) {
       onFocusItem
     });
   });
+  const handleHomeKey = (0, _hooks.useEventCallback)(() => {
+    const focusProps = getFocusProps();
+    const focusedValue = (0, _utils.focusFirstItem)(focusProps);
+    if (focusedValue) {
+      setFocusItemValue(focusedValue);
+      onFocused === null || onFocused === void 0 || onFocused(focusedValue);
+    }
+  });
+  const handleEndKey = (0, _hooks.useEventCallback)(() => {
+    const focusProps = getFocusProps();
+    const focusedValue = (0, _utils.focusLastItem)(focusProps);
+    if (focusedValue) {
+      setFocusItemValue(focusedValue);
+      onFocused === null || onFocused === void 0 || onFocused(focusedValue);
+    }
+  });
   const onTreeKeydown = (0, _hooks.useEventCallback)(event => {
     (0, _Picker.onMenuKeyDown)(event, {
       down: () => handleFocusItem(_constants.KEY_VALUES.DOWN),
       up: () => handleFocusItem(_constants.KEY_VALUES.UP),
       left: rtl ? handleRightArrowEvent : handleLeftArrowEvent,
-      right: rtl ? handleLeftArrowEvent : handleRightArrowEvent
+      right: rtl ? handleLeftArrowEvent : handleRightArrowEvent,
+      home: handleHomeKey,
+      end: handleEndKey
     });
   });
   const focusTreeFirstNode = (0, _hooks.useEventCallback)(() => {

package/cjs/Tree/hooks/useVirtualizedTreeData.d.ts

@@ -3,5 +3,6 @@ declare function useVirtualizedTreeData(nodes: TreeNodeMap, data: TreeNode[], op
     expandItemValues: (string | number)[];
     cascade?: boolean;
     searchKeyword?: string;
+    disabledItemValues?: (string | number)[];
 }): () => TreeNode[];
 export default useVirtualizedTreeData;

package/cjs/Tree/hooks/useVirtualizedTreeData.js

@@ -35,7 +35,8 @@ function useVirtualizedTreeData(nodes, data, options) {
     const {
       cascade,
       searchKeyword,
-      expandItemValues
+      expandItemValues,
+      disabledItemValues = []
     } = options;
     return (0, _flattenTree.UNSAFE_flattenTree)(data, childrenKey, node => {
       let formatted = {};
@@ -59,7 +60,9 @@ function useVirtualizedTreeData(nodes, data, options) {
         const checkState = !(0, _isUndefined.default)(cascade) ? (0, _utils.getNodeCheckState)(curNode, {
           cascade,
           nodes,
-          childrenKey
+          childrenKey,
+          disabledItemValues,
+          valueKey
         }) : undefined;
         formatted = {
           ...node,

package/cjs/Tree/utils/focusableTree.d.ts

@@ -35,6 +35,14 @@ export declare const focusNextItem: (props: FocusItemProps) => any;
  * Focuses on the previous item in a tree.
  */
 export declare const focusPreviousItem: (props: FocusItemProps) => any;
+/**
+ * Focuses on the first item in a tree.
+ */
+export declare const focusFirstItem: (props: FocusItemProps) => any;
+/**
+ * Focuses on the last item in a tree.
+ */
+export declare const focusLastItem: (props: FocusItemProps) => any;
 interface ScrollToActiveTreeNodeProps {
     value: any;
     valueKey: string;

package/cjs/Tree/utils/focusableTree.js

@@ -2,7 +2,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.getFocusableItems = exports.getActiveItem = exports.focusTreeNode = exports.focusPreviousItem = exports.focusNextItem = exports.focusCurrentItem = void 0;
+exports.getFocusableItems = exports.getActiveItem = exports.focusTreeNode = exports.focusPreviousItem = exports.focusNextItem = exports.focusLastItem = exports.focusFirstItem = exports.focusCurrentItem = void 0;
 exports.scrollToActiveTreeNode = scrollToActiveTreeNode;
 var _utils = require("../../internals/utils");
 // Active tree node selector
@@ -118,9 +118,47 @@ const focusPreviousItem = props => {
 };
 
 /**
- * Returns the index of the first visible node in the tree that matches the given value.
+ * Focuses on the first item in a tree.
  */
 exports.focusPreviousItem = focusPreviousItem;
+const focusFirstItem = props => {
+  const {
+    focusableItems,
+    treeNodesRefs,
+    valueKey
+  } = props;
+  if (focusableItems.length === 0) {
+    return;
+  }
+  const firstItem = focusableItems[0];
+  const value = firstItem[valueKey];
+  focusTreeNode(firstItem.refKey, treeNodesRefs);
+  return value;
+};
+
+/**
+ * Focuses on the last item in a tree.
+ */
+exports.focusFirstItem = focusFirstItem;
+const focusLastItem = props => {
+  const {
+    focusableItems,
+    treeNodesRefs,
+    valueKey
+  } = props;
+  if (focusableItems.length === 0) {
+    return;
+  }
+  const lastItem = focusableItems[focusableItems.length - 1];
+  const value = lastItem[valueKey];
+  focusTreeNode(lastItem.refKey, treeNodesRefs);
+  return value;
+};
+
+/**
+ * Returns the index of the first visible node in the tree that matches the given value.
+ */
+exports.focusLastItem = focusLastItem;
 const getScrollToIndex = (nodes, value, valueKey) => {
   return nodes.filter(n => n.visible).findIndex(item => item[valueKey] === value);
 };

package/cjs/Tree/utils/index.d.ts

@@ -7,5 +7,5 @@ export { formatNodeRefKey } from './formatNodeRefKey';
 export { indentTreeNode } from './indentTreeNode';
 export { isSearching } from './isSearching';
 export { isExpand } from './isExpand';
-export { getFocusableItems, getActiveItem, focusNextItem, focusPreviousItem, focusTreeNode, focusCurrentItem } from './focusableTree';
+export { getFocusableItems, getActiveItem, focusNextItem, focusPreviousItem, focusFirstItem, focusLastItem, focusTreeNode, focusCurrentItem } from './focusableTree';
 export { handleLeftArrow, handleRightArrow } from './treeKeyboardInteractions';

package/cjs/Tree/utils/index.js

@@ -2,7 +2,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.isSearching = exports.isExpand = exports.indentTreeNode = exports.hasVisibleChildren = exports.handleRightArrow = exports.handleLeftArrow = exports.getTreeActiveNode = exports.getNodeParentKeys = exports.getFocusableItems = exports.getExpandItemValues = exports.getActiveItem = exports.formatNodeRefKey = exports.focusTreeNode = exports.focusPreviousItem = exports.focusNextItem = exports.focusCurrentItem = exports.flattenTree = exports.WalkTreeStrategy = exports.UNSAFE_flattenTree = void 0;
+exports.isSearching = exports.isExpand = exports.indentTreeNode = exports.hasVisibleChildren = exports.handleRightArrow = exports.handleLeftArrow = exports.getTreeActiveNode = exports.getNodeParentKeys = exports.getFocusableItems = exports.getExpandItemValues = exports.getActiveItem = exports.formatNodeRefKey = exports.focusTreeNode = exports.focusPreviousItem = exports.focusNextItem = exports.focusLastItem = exports.focusFirstItem = exports.focusCurrentItem = exports.flattenTree = exports.WalkTreeStrategy = exports.UNSAFE_flattenTree = void 0;
 var _getNodeParentKeys = require("./getNodeParentKeys");
 exports.getNodeParentKeys = _getNodeParentKeys.getNodeParentKeys;
 var _flattenTree = require("./flattenTree");
@@ -28,6 +28,8 @@ exports.getFocusableItems = _focusableTree.getFocusableItems;
 exports.getActiveItem = _focusableTree.getActiveItem;
 exports.focusNextItem = _focusableTree.focusNextItem;
 exports.focusPreviousItem = _focusableTree.focusPreviousItem;
+exports.focusFirstItem = _focusableTree.focusFirstItem;
+exports.focusLastItem = _focusableTree.focusLastItem;
 exports.focusTreeNode = _focusableTree.focusTreeNode;
 exports.focusCurrentItem = _focusableTree.focusCurrentItem;
 var _treeKeyboardInteractions = require("./treeKeyboardInteractions");

package/cjs/TreePicker/TreePicker.js

@@ -261,7 +261,7 @@ const TreePicker = (0, _utils.forwardRef)((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     as: as,
     id: id,
-    name: "tree",
+    pickerType: "tree",
     block: block,
     disabled: disabled,
     appearance: appearance,

package/cjs/internals/Picker/PickerToggleTrigger.d.ts

@@ -29,6 +29,8 @@ export interface PickerToggleTriggerProps
     name?: string;
     /** Controls the open state of the picker */
     open?: boolean;
+    /** Picker type identifier for data-picker attribute */
+    pickerType?: string;
     /** Additional properties for the picker */
     triggerProps: any;
     /** Placement of the component */

package/cjs/internals/Picker/PickerToggleTrigger.js

@@ -32,6 +32,7 @@ const PickerToggleTrigger = exports.PickerToggleTrigger = /*#__PURE__*/_react.de
     id,
     multiple,
     name,
+    pickerType,
     triggerProps,
     placement,
     popupType = 'listbox',
@@ -81,7 +82,8 @@ const PickerToggleTrigger = exports.PickerToggleTrigger = /*#__PURE__*/_react.de
     className: classes,
     style: style,
     ref: rootRef,
-    "data-picker": name,
+    name: name,
+    "data-picker": pickerType,
     "data-appearance": appearance,
     "data-size": size,
     "data-disabled": disabled || undefined,

package/cjs/internals/Picker/utils.d.ts

@@ -13,6 +13,8 @@ export interface KeyboardEvents {
     esc?: React.KeyboardEventHandler;
     right?: React.KeyboardEventHandler;
     left?: React.KeyboardEventHandler;
+    home?: React.KeyboardEventHandler;
+    end?: React.KeyboardEventHandler;
 }
 /**
  * Handling keyboard events...

package/cjs/internals/Picker/utils.js

@@ -54,7 +54,9 @@ function onMenuKeyDown(event, events) {
     del,
     esc,
     right,
-    left
+    left,
+    home,
+    end
   } = events;
   switch (event.key) {
     // down
@@ -89,6 +91,16 @@ function onMenuKeyDown(event, events) {
     case _constants.KEY_VALUES.RIGHT:
       right === null || right === void 0 || right(event);
       break;
+    // home
+    case _constants.KEY_VALUES.HOME:
+      home === null || home === void 0 || home(event);
+      event.preventDefault();
+      break;
+    // end
+    case _constants.KEY_VALUES.END:
+      end === null || end === void 0 || end(event);
+      event.preventDefault();
+      break;
     default:
   }
 }

package/cjs/internals/StyledBox/StyledBox.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { BoxProps } from '../Box';
 import type { Size, Color } from '../types';
 export interface StyledBoxProps extends BoxProps {
-    /** Name of the Box */
+    /** Component identifier for CSS variable generation */
     name: string;
     /** Size of the Box */
     size?: Size | number | string;

package/cjs/internals/StyledBox/StyledBox.js

@@ -12,12 +12,12 @@ const StyledBox = (0, _utils.forwardRef)((props, ref) => {
   const {
     as,
     color,
-    name,
+    name: componentName,
     style,
     size,
     ...rest
   } = props;
-  const boxStyle = (0, _utils.mergeStyles)(style, (0, _utils.getSizeStyle)(size, name), (0, _utils.getColorStyle)(color, name));
+  const boxStyle = (0, _utils.mergeStyles)(style, (0, _utils.getSizeStyle)(size, componentName), (0, _utils.getColorStyle)(color, componentName));
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
     ref: ref,