rsuite 6.0.1 → 6.1.0

package/esm/Breadcrumb/BreadcrumbItem.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import SafeAnchor from "../internals/SafeAnchor/index.js";
 import Box from "../internals/Box/index.js";
+import { extractBoxProps, omitBoxProps } from "../internals/Box/utils.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 /**
@@ -11,7 +12,7 @@ import { useStyles } from "../internals/hooks/index.js";
  */
 const BreadcrumbItem = forwardRef((props, ref) => {
   const {
-    wrapperAs = 'li',
+    wrapperAs: Wrapper = 'li',
     href,
     as: Component = href ? SafeAnchor : 'span',
     classPrefix = 'breadcrumb-item',
@@ -30,17 +31,21 @@ const BreadcrumbItem = forwardRef((props, ref) => {
     withPrefix
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix());
+
+  // Separate BoxProps for wrapper and other props for inner component
+  const boxProps = extractBoxProps(rest);
+  const componentProps = omitBoxProps(rest);
   return /*#__PURE__*/React.createElement(Box, _extends({
-    as: wrapperAs,
+    as: Wrapper,
     style: style,
     className: classes,
-    ref: ref,
     "data-active": active
-  }, rest), icon, active ? /*#__PURE__*/React.createElement("span", null, children) : /*#__PURE__*/React.createElement(Component, {
+  }, boxProps), icon, active ? /*#__PURE__*/React.createElement("span", null, children) : /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
     href: href,
     title: title,
     target: target
-  }, children), separator);
+  }, componentProps), children), separator);
 });
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 export default BreadcrumbItem;

package/esm/CheckTree/CheckTree.js

@@ -24,6 +24,7 @@ const CheckTree = forwardRef((props, ref) => {
     defaultExpandAll = false,
     defaultExpandItemValues = [],
     uncheckableItemValues,
+    disabledItemValues,
     expandItemValues: controlledExpandItemValues,
     childrenKey = 'children',
     labelKey = 'label',
@@ -67,6 +68,7 @@ const CheckTree = forwardRef((props, ref) => {
   const flattenedNodes = useFlattenTree(treeData, {
     ...itemDataKeys,
     uncheckableItemValues,
+    disabledItemValues,
     multiple: true,
     cascade,
     value
@@ -96,6 +98,7 @@ const CheckTree = forwardRef((props, ref) => {
     loadingNodeValues: loadingNodeValues,
     flattenedNodes: flattenedNodes,
     uncheckableItemValues: uncheckableItemValues,
+    disabledItemValues: disabledItemValues,
     expandItemValues: expandItemValues,
     onChange: handleChange,
     onExpand: handleExpandTreeNode

package/esm/CheckTree/CheckTreeView.js

@@ -79,7 +79,8 @@ const CheckTreeView = forwardRef((props, ref) => {
   } = useTreeCheckState({
     cascade,
     flattenedNodes,
-    uncheckableItemValues
+    uncheckableItemValues,
+    disabledItemValues
   });
   const handleSearchCallback = (value, _data, event) => {
     onSearch === null || onSearch === void 0 || onSearch(value, event);
@@ -112,7 +113,8 @@ const CheckTreeView = forwardRef((props, ref) => {
   const transformation = useVirtualizedTreeData(flattenedNodes, filteredData, {
     cascade,
     expandItemValues,
-    searchKeyword: keyword
+    searchKeyword: keyword,
+    disabledItemValues
   });
 
   /**
@@ -125,7 +127,9 @@ const CheckTreeView = forwardRef((props, ref) => {
     }
     return getFormattedTree(flattenedNodes, filteredData, {
       childrenKey,
-      cascade
+      cascade,
+      disabledItemValues,
+      valueKey
     }).map(node => render === null || render === void 0 ? void 0 : render(node, 1)).filter(item => item);
   };
   const getTreeNodeProps = useTreeNodeProps({

package/esm/CheckTree/hooks/useTreeCheckState.d.ts

@@ -3,6 +3,7 @@ interface Props {
     cascade?: boolean;
     flattenedNodes: TreeNodeMap;
     uncheckableItemValues: (string | number)[];
+    disabledItemValues?: (string | number)[];
 }
 declare function useTreeCheckState(props: Props): {
     getCheckedValues: (...args: any[]) => any;

package/esm/CheckTree/hooks/useTreeCheckState.js

@@ -4,12 +4,13 @@ import isNil from 'lodash/isNil';
 import cloneDeep from 'lodash/cloneDeep';
 import { useEventCallback } from "../../internals/hooks/index.js";
 import { useItemDataKeys } from "../../internals/Tree/TreeProvider.js";
-import { isEveryChildChecked } from "../utils.js";
+import { isEveryChildChecked, getDisabledState } from "../utils.js";
 function useTreeCheckState(props) {
   const {
     cascade,
     flattenedNodes,
-    uncheckableItemValues
+    uncheckableItemValues,
+    disabledItemValues = []
   } = props;
   const {
     valueKey,
@@ -24,7 +25,9 @@ function useTreeCheckState(props) {
       } else {
         if (isEveryChildChecked(currentNode, {
           nodes,
-          childrenKey
+          childrenKey,
+          disabledItemValues,
+          valueKey
         })) {
           currentNode.check = true;
           currentNode.checkAll = true;
@@ -38,16 +41,57 @@ function useTreeCheckState(props) {
       }
     }
   });
+
+  /**
+   * Recursively checks if a node has any disabled descendants.
+   * This is used to determine if a parent node's checkAll state should be true.
+   * If any descendant is disabled, checkAll must be false because not all descendants can be checked.
+   * @param nodes - The flattened tree node map
+   * @param node - The node to check for disabled descendants
+   * @returns true if any descendant (at any depth) is disabled, false otherwise
+   */
+  const hasDisabledDescendant = useEventCallback((nodes, node) => {
+    if (!node[childrenKey] || !node[childrenKey].length) {
+      return false;
+    }
+    return node[childrenKey].some(child => {
+      const isChildDisabled = getDisabledState(nodes, child, {
+        disabledItemValues,
+        valueKey
+      });
+      if (isChildDisabled) {
+        return true;
+      }
+      // Recursively check descendants
+      return hasDisabledDescendant(nodes, child);
+    });
+  });
   const checkChildNode = useEventCallback((nodes, node, isChecked) => {
     const currentNode = node.refKey ? nodes[node.refKey] : null;
     if (!currentNode) {
       return;
     }
+
+    // Check if the current node is disabled
+    const isDisabled = getDisabledState(nodes, node, {
+      disabledItemValues,
+      valueKey
+    });
+
+    // Skip checking disabled nodes
+    if (isDisabled) {
+      return;
+    }
     currentNode.check = isChecked;
     if (!currentNode[childrenKey] || !currentNode[childrenKey].length || !cascade) {
       currentNode.checkAll = false;
     } else {
-      currentNode.checkAll = isChecked;
+      // Check if any descendant (not just direct children) is disabled
+      const hasDisabledDesc = hasDisabledDescendant(nodes, currentNode);
+
+      // Only set checkAll to true if all descendants will be checked
+      // If there are any disabled descendants, checkAll should be false
+      currentNode.checkAll = isChecked && !hasDisabledDesc;
       currentNode[childrenKey].forEach(child => {
         checkChildNode(nodes, child, isChecked);
       });
@@ -60,6 +104,13 @@ function useTreeCheckState(props) {
       if (!isNil(currentNode.parent) && !isNil(currentNode.parent.refKey)) {
         const parentNode = nodes[currentNode.parent.refKey];
         if (currentNode.check) {
+          // Optimization: When a parent node is checked with checkAll=true, it represents
+          // the entire checked subtree. If the current node also has checkAll=true and its
+          // parent is checked, skip adding this node's value to avoid redundant representation.
+          // The parent's value already implies all descendants are checked.
+          if (currentNode.checkAll && parentNode.check) {
+            continue;
+          }
           if (!(parentNode !== null && parentNode !== void 0 && parentNode.checkAll)) {
             values.push(currentNode[valueKey]);
           } else if (parentNode !== null && parentNode !== void 0 && parentNode.uncheckable) {

package/esm/CheckTree/utils.d.ts

@@ -3,15 +3,19 @@ import { CheckStateType } from '../internals/constants';
 import { TreeNode, TreeNodeMap } from '../internals/Tree/types';
 /**
  * Checks if every child of a given parent node is checked.
+ * Disabled children are ignored in this check.
  */
 export declare function isEveryChildChecked(parent: TreeNode, options: {
     nodes: TreeNodeMap;
     childrenKey: string;
+    disabledItemValues?: any[];
+    valueKey?: string;
 }): boolean;
 /**
  * Checks if any child node is checked.
+ * Disabled children are ignored in this check.
  */
-export declare function isSomeChildChecked(nodes: TreeNodeMap, parent: TreeNode, childrenKey: string): boolean;
+export declare function isSomeChildChecked(nodes: TreeNodeMap, parent: TreeNode, childrenKey: string, disabledItemValues?: any[], valueKey?: string): boolean;
 /**
  * Checks if any node in the data has a grandchild.
  */
@@ -28,9 +32,10 @@ export declare function isEveryFirstLevelNodeUncheckable(nodes: TreeNodeMap, unc
  * Checks if a node is uncheckable.
  */
 export declare function isNodeUncheckable(node: any, props: Required<Pick<CheckTreeProps, 'uncheckableItemValues' | 'valueKey'>>): boolean;
-export declare function getFormattedTree(nodes: TreeNodeMap, data: any[], props: Required<Pick<CheckTreeProps, 'childrenKey' | 'cascade'>>): any[];
+export declare function getFormattedTree(nodes: TreeNodeMap, data: any[], props: Required<Pick<CheckTreeProps, 'childrenKey' | 'cascade' | 'disabledItemValues' | 'valueKey'>>): any[];
 /**
  * Determines the disabled state of a tree node.
+ * If a parent node is disabled, all its children should also be disabled.
  */
 export declare function getDisabledState(nodes: TreeNodeMap, node: TreeNode, props: Required<Pick<CheckTreeProps, 'disabledItemValues' | 'valueKey'>>): boolean;
 /**
@@ -45,6 +50,8 @@ interface NodeCheckStateOptions {
     nodes: TreeNodeMap;
     cascade: boolean;
     childrenKey: string;
+    disabledItemValues?: any[];
+    valueKey?: string;
 }
 /**
  * Calculates the check state of a node in a check tree.

package/esm/CheckTree/utils.js

@@ -2,11 +2,13 @@
 import _isUndefined from "lodash/isUndefined";
 import _isNil from "lodash/isNil";
 import { CHECK_STATE } from "../internals/constants/index.js";
-import { attachParent } from "../internals/utils/index.js";
+import { attachParent, shallowEqual } from "../internals/utils/index.js";
 import { formatNodeRefKey } from "../Tree/utils/index.js";
 
 /**
  * Retrieves the children of a given parent node from a flattened node map.
+ * Filters out uncheckable children.
+ * Note: Does NOT filter disabled children - disabled children are still considered in check state calculations
  */
 function getChildrenByFlattenNodes(nodes, parent) {
   if (!_isNil(parent.refKey) && _isNil(nodes[parent.refKey])) {
@@ -20,11 +22,14 @@ function getChildrenByFlattenNodes(nodes, parent) {
 
 /**
  * Checks if every child of a given parent node is checked.
+ * Disabled children are ignored in this check.
  */
 export function isEveryChildChecked(parent, options) {
   const {
     nodes,
-    childrenKey
+    childrenKey,
+    disabledItemValues = [],
+    valueKey = 'value'
   } = options;
   if (_isNil(parent.refKey) || _isNil(nodes[parent.refKey])) {
     return false;
@@ -34,13 +39,32 @@ export function isEveryChildChecked(parent, options) {
     var _nodes$parent$refKey$;
     return (_nodes$parent$refKey$ = nodes[parent.refKey].check) !== null && _nodes$parent$refKey$ !== void 0 ? _nodes$parent$refKey$ : false;
   }
-  return children.every(child => {
+
+  // Filter out disabled children
+  const enabledChildren = children.filter(child => {
+    const isDisabled = getDisabledState(nodes, child, {
+      disabledItemValues,
+      valueKey
+    });
+    return !isDisabled;
+  });
+
+  // If all children are disabled, return the parent's own check state
+  if (enabledChildren.length === 0) {
+    var _nodes$parent$refKey$2;
+    return (_nodes$parent$refKey$2 = nodes[parent.refKey].check) !== null && _nodes$parent$refKey$2 !== void 0 ? _nodes$parent$refKey$2 : false;
+  }
+
+  // Check if all enabled children are checked
+  return enabledChildren.every(child => {
     var _child$childrenKey;
     if ((child === null || child === void 0 || (_child$childrenKey = child[childrenKey]) === null || _child$childrenKey === void 0 ? void 0 : _child$childrenKey.length) > 0) {
       // fix: #3559
       return isEveryChildChecked(child, {
         nodes,
-        childrenKey
+        childrenKey,
+        disabledItemValues,
+        valueKey
       });
     }
     return !_isNil(child.refKey) && nodes[child.refKey].check;
@@ -49,16 +73,25 @@ export function isEveryChildChecked(parent, options) {
 
 /**
  * Checks if any child node is checked.
+ * Disabled children are ignored in this check.
  */
-export function isSomeChildChecked(nodes, parent, childrenKey) {
+export function isSomeChildChecked(nodes, parent, childrenKey, disabledItemValues = [], valueKey = 'value') {
   if (!_isNil(parent.refKey) && _isNil(nodes[parent.refKey])) {
     return false;
   }
   const children = getChildrenByFlattenNodes(nodes, parent);
   return children.some(child => {
     var _child$childrenKey2;
+    // Skip disabled children
+    const isDisabled = getDisabledState(nodes, child, {
+      disabledItemValues,
+      valueKey
+    });
+    if (isDisabled) {
+      return false; // Disabled children don't count as "some checked"
+    }
     if ((child === null || child === void 0 || (_child$childrenKey2 = child[childrenKey]) === null || _child$childrenKey2 === void 0 ? void 0 : _child$childrenKey2.length) > 0) {
-      return isSomeChildChecked(nodes, child, childrenKey);
+      return isSomeChildChecked(nodes, child, childrenKey, disabledItemValues, valueKey);
     }
     return !_isNil(child.refKey) && nodes[child.refKey].check;
   });
@@ -122,7 +155,9 @@ export function isNodeUncheckable(node, props) {
 export function getFormattedTree(nodes, data, props) {
   const {
     childrenKey,
-    cascade
+    cascade,
+    disabledItemValues,
+    valueKey
   } = props;
   return data.map(node => {
     const formatted = {
@@ -134,7 +169,9 @@ export function getFormattedTree(nodes, data, props) {
       const checkState = !_isUndefined(cascade) ? getNodeCheckState(curNode, {
         cascade,
         nodes,
-        childrenKey
+        childrenKey,
+        disabledItemValues,
+        valueKey
       }) : undefined;
       formatted.check = curNode.check;
       formatted.uncheckable = curNode.uncheckable;
@@ -150,6 +187,7 @@ export function getFormattedTree(nodes, data, props) {
 
 /**
  * Determines the disabled state of a tree node.
+ * If a parent node is disabled, all its children should also be disabled.
  */
 export function getDisabledState(nodes, node, props) {
   const {
@@ -159,7 +197,24 @@ export function getDisabledState(nodes, node, props) {
   if (!_isNil(node.refKey) && _isNil(nodes[node.refKey])) {
     return false;
   }
-  return disabledItemValues.some(value => node.refKey && nodes[node.refKey][valueKey] === value);
+
+  // Check if the current node is disabled
+  const isCurrentNodeDisabled = disabledItemValues.some(value => node.refKey && shallowEqual(nodes[node.refKey][valueKey], value));
+  if (isCurrentNodeDisabled) {
+    return true;
+  }
+
+  // Check if any parent node is disabled
+  let currentNode = node;
+  while (currentNode.parent) {
+    const parentNode = currentNode.parent;
+    const parentRefKey = parentNode.refKey;
+    if (!_isNil(parentRefKey) && !_isNil(nodes[parentRefKey]) && disabledItemValues.some(value => shallowEqual(nodes[parentRefKey][valueKey], value))) {
+      return true;
+    }
+    currentNode = parentNode;
+  }
+  return false;
 }
 
 /**
@@ -193,7 +248,9 @@ export function getNodeCheckState(node, options) {
   const {
     nodes,
     cascade,
-    childrenKey
+    childrenKey,
+    disabledItemValues = [],
+    valueKey = 'value'
   } = options;
   if (node.refKey === undefined) {
     return CHECK_STATE.UNCHECK;
@@ -207,13 +264,15 @@ export function getNodeCheckState(node, options) {
   }
   if (isEveryChildChecked(node, {
     nodes,
-    childrenKey
+    childrenKey,
+    disabledItemValues,
+    valueKey
   })) {
     nodes[node.refKey].checkAll = true;
     nodes[node.refKey].check = true;
     return CHECK_STATE.CHECK;
   }
-  if (isSomeChildChecked(nodes, node, childrenKey)) {
+  if (isSomeChildChecked(nodes, node, childrenKey, disabledItemValues, valueKey)) {
     nodes[node.refKey].checkAll = false;
     return CHECK_STATE.INDETERMINATE;
   }

package/esm/CheckTreePicker/CheckTreePicker.js

@@ -122,6 +122,7 @@ const CheckTreePicker = forwardRef((props, ref) => {
   const flattenedNodes = useFlattenTree(treeData, {
     ...itemDataKeys,
     uncheckableItemValues,
+    disabledItemValues,
     multiple: true,
     cascade,
     value

package/esm/Checkbox/Checkbox.js

@@ -1,9 +1,10 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useContext, useMemo, useRef } from 'react';
+import React, { useContext, useMemo } from 'react';
 import Box from "../internals/Box/index.js";
 import { useControlled, useStyles, useCustom, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
 import { forwardRef, partitionHTMLProps, mergeRefs } from "../internals/utils/index.js";
+import { useIndeterminateCheckbox } from "./hooks/useIndeterminateCheckbox.js";
 import { CheckboxGroupContext } from "../CheckboxGroup/index.js";
 /**
  * The Checkbox component is used for selecting multiple options from a set.
@@ -75,7 +76,7 @@ const Checkbox = forwardRef((props, ref) => {
     // In uncontrolled situations, use defaultChecked instead of checked
     htmlInputProps[controlled ? 'checked' : 'defaultChecked'] = checked;
   }
-  const checkboxRef = useRef(null);
+  const checkboxRef = useIndeterminateCheckbox(indeterminate);
   const handleChange = useEventCallback(event => {
     const nextChecked = event.target.checked;
     if (disabled || readOnly) {

package/esm/Checkbox/hooks/useIndeterminateCheckbox.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+/**
+ * A hook that manages the indeterminate state of a checkbox input element.
+ *
+ * The indeterminate state is a visual and accessibility state that cannot be set via HTML attributes.
+ * It must be set via JavaScript on the DOM element itself. This is required for proper
+ * screen reader support, as assistive technologies rely on the native DOM property
+ * rather than ARIA attributes for native checkboxes.
+ *
+ * @param indeterminate - Whether the checkbox should be in an indeterminate state
+ * @returns A ref object to be attached to the checkbox input element
+ *
+ * @example
+ * ```tsx
+ * const checkboxRef = useIndeterminateCheckbox(isIndeterminate);
+ * return <input type="checkbox" ref={checkboxRef} />;
+ * ```
+ */
+export declare function useIndeterminateCheckbox(indeterminate?: boolean): React.MutableRefObject<HTMLInputElement | null>;

package/esm/Checkbox/hooks/useIndeterminateCheckbox.js

@@ -0,0 +1,29 @@
+'use client';
+import { useLayoutEffect, useRef } from 'react';
+
+/**
+ * A hook that manages the indeterminate state of a checkbox input element.
+ *
+ * The indeterminate state is a visual and accessibility state that cannot be set via HTML attributes.
+ * It must be set via JavaScript on the DOM element itself. This is required for proper
+ * screen reader support, as assistive technologies rely on the native DOM property
+ * rather than ARIA attributes for native checkboxes.
+ *
+ * @param indeterminate - Whether the checkbox should be in an indeterminate state
+ * @returns A ref object to be attached to the checkbox input element
+ *
+ * @example
+ * ```tsx
+ * const checkboxRef = useIndeterminateCheckbox(isIndeterminate);
+ * return <input type="checkbox" ref={checkboxRef} />;
+ * ```
+ */
+export function useIndeterminateCheckbox(indeterminate) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    if (ref.current) {
+      ref.current.indeterminate = indeterminate !== null && indeterminate !== void 0 ? indeterminate : false;
+    }
+  }, [indeterminate]);
+  return ref;
+}

package/esm/DateInput/DateInput.js

@@ -169,6 +169,29 @@ const DateInput = forwardRef((props, ref) => {
       reset();
     }
   });
+  const onAmPmToggle = useEventCallback(event => {
+    const input = event.target;
+    const key = event.key.toLowerCase();
+
+    // Only handle 'a' or 'p' keys when the selected pattern is 'a' (AM/PM)
+    if (selectedState.selectedPattern === 'a' && (key === 'a' || key === 'p')) {
+      const currentHour = dateField.hour || 0;
+      const isAM = currentHour < 12;
+      const isPM = currentHour >= 12;
+
+      // Toggle AM/PM based on the key pressed
+      // 'a' key -> set to AM, 'p' key -> set to PM
+      if (key === 'a' && isPM || key === 'p' && isAM) {
+        const state = getInputSelectedState({
+          ...keyPressOptions,
+          input
+        });
+        setSelectedState(state);
+        setDateOffset('a', 1, date => handleChange(date, event));
+        setSelectionRange(state.selectionStart, state.selectionEnd);
+      }
+    }
+  });
   const handleClick = useEventCallback(event => {
     const input = event.target;
     const state = getInputSelectedState({
@@ -197,6 +220,7 @@ const DateInput = forwardRef((props, ref) => {
     onSegmentValueChange,
     onSegmentValueChangeWithNumericKeys,
     onSegmentValueRemove,
+    onAmPmToggle,
     onKeyDown
   });
   const [focused, focusEventProps] = useIsFocused({

package/esm/DateInput/hooks/useKeyboardInputEvent.d.ts

@@ -4,7 +4,8 @@ interface KeyboardEventOptions {
     onSegmentValueChange?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onSegmentValueChangeWithNumericKeys?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onSegmentValueRemove?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onAmPmToggle?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
-export declare function useKeyboardInputEvent({ onSegmentChange, onSegmentValueChange, onSegmentValueChangeWithNumericKeys, onSegmentValueRemove, onKeyDown }: KeyboardEventOptions): (event: React.KeyboardEvent<HTMLInputElement>) => void;
+export declare function useKeyboardInputEvent({ onSegmentChange, onSegmentValueChange, onSegmentValueChangeWithNumericKeys, onSegmentValueRemove, onAmPmToggle, onKeyDown }: KeyboardEventOptions): (event: React.KeyboardEvent<HTMLInputElement>) => void;
 export default useKeyboardInputEvent;

package/esm/DateInput/hooks/useKeyboardInputEvent.js

@@ -4,6 +4,7 @@ export function useKeyboardInputEvent({
   onSegmentValueChange,
   onSegmentValueChangeWithNumericKeys,
   onSegmentValueRemove,
+  onAmPmToggle,
   onKeyDown
 }) {
   return event => {
@@ -29,6 +30,19 @@ export function useKeyboardInputEvent({
         onSegmentValueChangeWithNumericKeys === null || onSegmentValueChangeWithNumericKeys === void 0 || onSegmentValueChangeWithNumericKeys(event);
         event.preventDefault();
         break;
+      case 'a':
+      case 'p':
+      case 'A':
+      case 'P':
+        // Determine whether the Ctrl or Command key is pressed, does not affect user copy and paste
+        if (event.ctrlKey || event.metaKey) {
+          break;
+        }
+
+        // Handle AM/PM toggle with 'a' or 'p' keys
+        onAmPmToggle === null || onAmPmToggle === void 0 || onAmPmToggle(event);
+        event.preventDefault();
+        break;
       case (_key$match2 = key.match(/[a-z]/)) === null || _key$match2 === void 0 ? void 0 : _key$match2[0]:
         // Determine whether the Ctrl or Command key is pressed, does not affect user copy and paste
         if (event.ctrlKey || event.metaKey) {

package/esm/DateRangeInput/DateRangeInput.js

@@ -203,6 +203,29 @@ const DateRangeInput = /*#__PURE__*/React.forwardRef((props, ref) => {
       reset();
     }
   });
+  const onAmPmToggle = useEventCallback(event => {
+    const input = event.target;
+    const key = event.key.toLowerCase();
+
+    // Only handle 'a' or 'p' keys when the selected pattern is 'a' (AM/PM)
+    if (selectedState.selectedPattern === 'a' && (key === 'a' || key === 'p')) {
+      const currentHour = getActiveState().dateField.hour || 0;
+      const isAM = currentHour < 12;
+      const isPM = currentHour >= 12;
+
+      // Toggle AM/PM based on the key pressed
+      // 'a' key -> set to AM, 'p' key -> set to PM
+      if (key === 'a' && isPM || key === 'p' && isAM) {
+        const state = getInputSelectedState({
+          ...keyPressOptions,
+          input
+        });
+        setSelectedState(state);
+        getActiveState().setDateOffset('a', 1, date => handleChange(date, event));
+        setSelectionRange(state.selectionStart, state.selectionEnd);
+      }
+    }
+  });
   const handleClick = useEventCallback(event => {
     const input = event.target;
     if (input.selectionStart === null) {
@@ -242,6 +265,7 @@ const DateRangeInput = /*#__PURE__*/React.forwardRef((props, ref) => {
     onSegmentValueChange,
     onSegmentValueChangeWithNumericKeys,
     onSegmentValueRemove,
+    onAmPmToggle,
     onKeyDown
   });
   return /*#__PURE__*/React.createElement(Input, _extends({

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