rsuite 6.0.0 → 6.1.0

package/esm/Form/Form.js

@@ -105,7 +105,11 @@ const Form = forwardRef((props, ref) => {
   });
   const reset = 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 = useEventCallback(event => {
     var _event$preventDefault, _event$stopPropagatio;

package/esm/InputPicker/InputPicker.js

@@ -590,7 +590,7 @@ const InputPicker = forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, _extends({
     id: id,
     multiple: multi,
-    name: multi ? 'tag' : 'input',
+    pickerType: multi ? 'tag' : 'input',
     block: block,
     disabled: disabled,
     appearance: appearance,

package/esm/MultiCascader/MultiCascader.js

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

package/esm/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/esm/Panel/PanelHeader.js

@@ -2,13 +2,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { isValidElement, cloneElement } from 'react';
 import get from 'lodash/get';
-import Heading from "../Heading/index.js";
 import AccordionButton from "./AccordionButton.js";
 import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
+import { isFragment } from "../internals/utils/index.js";
 const PanelHeader = props => {
   const {
-    as = Heading,
+    as = 'div',
     classPrefix = 'panel',
     className,
     children,
@@ -27,8 +27,8 @@ const PanelHeader = props => {
     prefix
   } = useStyles(classPrefix);
   let headerElement;
-  if (! /*#__PURE__*/isValidElement(children) || Array.isArray(children)) {
-    headerElement = /*#__PURE__*/React.createElement("span", {
+  if (! /*#__PURE__*/isValidElement(children) || Array.isArray(children) || isFragment(children)) {
+    headerElement = /*#__PURE__*/React.createElement("div", {
       className: prefix('title')
     }, children);
   } else {
@@ -39,7 +39,6 @@ const PanelHeader = props => {
   }
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: as,
-    level: 2,
     className: merge(className, prefix('header'))
   }, rest), collapsible ? /*#__PURE__*/React.createElement(AccordionButton, {
     id: buttonId,

package/esm/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/esm/Rate/Rate.js

@@ -26,6 +26,7 @@ const Rate = forwardRef((props, ref) => {
     classPrefix = 'rate',
     disabled,
     max = 5,
+    name,
     readOnly,
     vertical,
     size,
@@ -128,7 +129,8 @@ const Rate = 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.createElement(Character, {
     role: "radio",
     "aria-posinset": index + 1,

package/esm/SelectPicker/SelectPicker.js

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

package/esm/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/esm/Tree/hooks/useFlattenTree.js

@@ -16,6 +16,7 @@ function useFlattenTree(data, options) {
     valueKey,
     childrenKey,
     uncheckableItemValues = [],
+    disabledItemValues = [],
     cascade,
     multiple,
     callback
@@ -27,6 +28,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 => 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 => 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 && !isNil(node.parent) && !isNil(node.parent.refKey)) {
         node.check = flattenedNodes.current[node.parent.refKey].check;
       } else {
@@ -38,7 +59,7 @@ function useFlattenTree(data, options) {
         }
       });
     });
-  }, [cascade, uncheckableItemValues, valueKey]);
+  }, [cascade, uncheckableItemValues, disabledItemValues, valueKey]);
   const flattenTreeData = useCallback((treeData, parent, layer = 1) => {
     if (!Array.isArray(treeData) || treeData.length === 0) {
       return [];

package/esm/Tree/hooks/useFocusTree.js

@@ -5,7 +5,7 @@ import { KEY_VALUES } from "../../internals/constants/index.js";
 import { useEventCallback, useCustom } from "../../internals/hooks/index.js";
 import { onMenuKeyDown } from "../../internals/Picker/index.js";
 import { useItemDataKeys, useRegisterTreeMethods } from "../../internals/Tree/TreeProvider.js";
-import { isSearching, focusNextItem, getFocusableItems, getActiveItem, focusPreviousItem, focusCurrentItem, focusTreeNode, handleLeftArrow, handleRightArrow } from "../utils/index.js";
+import { isSearching, focusNextItem, getFocusableItems, getActiveItem, focusPreviousItem, focusFirstItem, focusLastItem, focusCurrentItem, focusTreeNode, handleLeftArrow, handleRightArrow } from "../utils/index.js";
 import useTreeNodeRefs from "./useTreeNodeRefs.js";
 /**
  * Custom hook that manages the focus behavior of a tree component.
@@ -99,12 +99,30 @@ function useFocusTree(props) {
       onFocusItem
     });
   });
+  const handleHomeKey = useEventCallback(() => {
+    const focusProps = getFocusProps();
+    const focusedValue = focusFirstItem(focusProps);
+    if (focusedValue) {
+      setFocusItemValue(focusedValue);
+      onFocused === null || onFocused === void 0 || onFocused(focusedValue);
+    }
+  });
+  const handleEndKey = useEventCallback(() => {
+    const focusProps = getFocusProps();
+    const focusedValue = focusLastItem(focusProps);
+    if (focusedValue) {
+      setFocusItemValue(focusedValue);
+      onFocused === null || onFocused === void 0 || onFocused(focusedValue);
+    }
+  });
   const onTreeKeydown = useEventCallback(event => {
     onMenuKeyDown(event, {
       down: () => handleFocusItem(KEY_VALUES.DOWN),
       up: () => handleFocusItem(KEY_VALUES.UP),
       left: rtl ? handleRightArrowEvent : handleLeftArrowEvent,
-      right: rtl ? handleLeftArrowEvent : handleRightArrowEvent
+      right: rtl ? handleLeftArrowEvent : handleRightArrowEvent,
+      home: handleHomeKey,
+      end: handleEndKey
     });
   });
   const focusTreeFirstNode = useEventCallback(() => {

package/esm/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/esm/Tree/hooks/useVirtualizedTreeData.js

@@ -30,7 +30,8 @@ function useVirtualizedTreeData(nodes, data, options) {
     const {
       cascade,
       searchKeyword,
-      expandItemValues
+      expandItemValues,
+      disabledItemValues = []
     } = options;
     return UNSAFE_flattenTree(data, childrenKey, node => {
       let formatted = {};
@@ -54,7 +55,9 @@ function useVirtualizedTreeData(nodes, data, options) {
         const checkState = !isUndefined(cascade) ? getNodeCheckState(curNode, {
           cascade,
           nodes,
-          childrenKey
+          childrenKey,
+          disabledItemValues,
+          valueKey
         }) : undefined;
         formatted = {
           ...node,

package/esm/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/esm/Tree/utils/focusableTree.js

@@ -108,6 +108,42 @@ export const focusPreviousItem = props => {
   return value;
 };
 
+/**
+ * Focuses on the first item in a tree.
+ */
+export 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.
+ */
+export 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.
  */

package/esm/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/esm/Tree/utils/index.js

@@ -10,5 +10,5 @@ export { isSearching } from "./isSearching.js";
 export { isExpand } from "./isExpand.js";
 
 // Utility functions for managing focusable items in a tree.
-export { getFocusableItems, getActiveItem, focusNextItem, focusPreviousItem, focusTreeNode, focusCurrentItem } from "./focusableTree.js";
+export { getFocusableItems, getActiveItem, focusNextItem, focusPreviousItem, focusFirstItem, focusLastItem, focusTreeNode, focusCurrentItem } from "./focusableTree.js";
 export { handleLeftArrow, handleRightArrow } from "./treeKeyboardInteractions.js";

package/esm/TreePicker/TreePicker.js

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

package/esm/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/esm/internals/Picker/PickerToggleTrigger.js

@@ -27,6 +27,7 @@ export const PickerToggleTrigger = /*#__PURE__*/React.forwardRef((props, ref) =>
     id,
     multiple,
     name,
+    pickerType,
     triggerProps,
     placement,
     popupType = 'listbox',
@@ -76,7 +77,8 @@ export const PickerToggleTrigger = /*#__PURE__*/React.forwardRef((props, ref) =>
     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/esm/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/esm/internals/Picker/utils.js

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

package/esm/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/esm/internals/StyledBox/StyledBox.js

@@ -7,12 +7,12 @@ const StyledBox = forwardRef((props, ref) => {
   const {
     as,
     color,
-    name,
+    name: componentName,
     style,
     size,
     ...rest
   } = props;
-  const boxStyle = mergeStyles(style, getSizeStyle(size, name), getColorStyle(color, name));
+  const boxStyle = mergeStyles(style, getSizeStyle(size, componentName), getColorStyle(color, componentName));
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: as,
     ref: ref,

package/internals/Box/styles/index.scss

@@ -0,0 +1,31 @@
+@use '../../../styles/base' as base;
+@use '../../../styles/themes' as themes;
+@use '../../../styles/variables' as vars;
+
+// Define breakpoints map
+$breakpoints: (
+  xs: vars.$screen-sm,
+  sm: vars.$screen-md,
+  md: vars.$screen-lg,
+  lg: vars.$screen-xl,
+  xl: vars.$screen-xxl
+);
+
+// Generate responsive visibility styles
+@each $key, $value in $breakpoints {
+  $bp: calc(#{$value} - 1px);
+
+  // Visible from breakpoint
+  @media (max-width: $bp) {
+    [data-visible-from='#{$key}'] {
+      display: none !important;
+    }
+  }
+
+  // Hidden from breakpoint
+  @media (min-width: #{$value}) {
+    [data-hidden-from='#{$key}'] {
+      display: none !important;
+    }
+  }
+}

package/internals/Burger/styles/index.scss

@@ -0,0 +1,72 @@
+@use '../../Box/styles/index' as box;
+
+.rs-burger {
+  --rs-burger-size: 36px;
+  --rs-burger-thickness: 2px;
+  --rs-burger-color: currentColor;
+  --rs-burger-spacing: calc(var(--rs-spacing) * 1.5);
+  --rs-burger-line-size: calc(var(--rs-burger-size) - var(--rs-burger-spacing) * 2);
+
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  outline: none;
+  transition: background 0.2s;
+  box-sizing: border-box;
+  width: var(--rs-burger-size);
+  height: var(--rs-burger-size);
+  padding: var(--rs-burger-spacing);
+
+  // The burger line (middle)
+  &-line {
+    position: relative;
+    display: block;
+    width: var(--rs-burger-line-size);
+    height: var(--rs-burger-thickness);
+    background: var(--rs-burger-color);
+    border-radius: var(--rs-burger-thickness);
+    transition-property: background, transform;
+    transition-duration: 0.2s, 0.3s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    pointer-events: none;
+
+    // Top and bottom lines
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      inset-inline-start: 0;
+      width: 100%;
+      height: var(--rs-burger-thickness);
+      background: var(--rs-burger-color);
+      border-radius: var(--rs-burger-thickness);
+      transition-property: transform;
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    &::before {
+      top: calc(var(--rs-burger-line-size) / -3);
+    }
+
+    &::after {
+      top: calc(var(--rs-burger-line-size) / 3);
+    }
+  }
+
+  // Opened state animation
+  &:where([data-opened='true']) {
+    .rs-burger-line {
+      background: transparent;
+
+      &::before {
+        transform: translateY(calc(var(--rs-burger-line-size) / 3)) rotate(45deg);
+      }
+
+      &::after {
+        transform: translateY(calc(var(--rs-burger-line-size) / -3)) rotate(-45deg);
+      }
+    }
+  }
+}

package/internals/CloseButton/styles/index.scss

@@ -0,0 +1,14 @@
+@use '../../../IconButton/styles/index' as icon-button;
+
+// Close button
+.rs-btn-close {
+  border: none;
+  outline: none !important;
+  background: transparent;
+  line-height: 1;
+  cursor: pointer;
+
+  .rs-icon {
+    vertical-align: bottom;
+  }
+}