rsuite 6.0.1 → 6.1.0

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/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,