rsuite 6.0.1 → 6.1.1

package/cjs/Breadcrumb/BreadcrumbItem.js

@@ -8,15 +8,16 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _SafeAnchor = _interopRequireDefault(require("../internals/SafeAnchor"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
-var _utils = require("../internals/utils");
+var _utils = require("../internals/Box/utils");
+var _utils2 = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 /**
  * The `<Breadcrumb.Item>` component is used to specify each section of the Breadcrumb.
  * @see https://rsuitejs.com/components/breadcrumb
  */
-const BreadcrumbItem = (0, _utils.forwardRef)((props, ref) => {
+const BreadcrumbItem = (0, _utils2.forwardRef)((props, ref) => {
   const {
-    wrapperAs = 'li',
+    wrapperAs: Wrapper = 'li',
     href,
     as: Component = href ? _SafeAnchor.default : 'span',
     classPrefix = 'breadcrumb-item',
@@ -35,17 +36,21 @@ const BreadcrumbItem = (0, _utils.forwardRef)((props, ref) => {
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix());
+
+  // Separate BoxProps for wrapper and other props for inner component
+  const boxProps = (0, _utils.extractBoxProps)(rest);
+  const componentProps = (0, _utils.omitBoxProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
-    as: wrapperAs,
+    as: Wrapper,
     style: style,
     className: classes,
-    ref: ref,
     "data-active": active
-  }, rest), icon, active ? /*#__PURE__*/_react.default.createElement("span", null, children) : /*#__PURE__*/_react.default.createElement(Component, {
+  }, boxProps), icon, active ? /*#__PURE__*/_react.default.createElement("span", null, children) : /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: ref,
     href: href,
     title: title,
     target: target
-  }, children), separator);
+  }, componentProps), children), separator);
 });
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 var _default = exports.default = BreadcrumbItem;

package/cjs/CheckTree/CheckTree.js

@@ -30,6 +30,7 @@ const CheckTree = (0, _utils.forwardRef)((props, ref) => {
     defaultExpandAll = false,
     defaultExpandItemValues = [],
     uncheckableItemValues,
+    disabledItemValues,
     expandItemValues: controlledExpandItemValues,
     childrenKey = 'children',
     labelKey = 'label',
@@ -73,6 +74,7 @@ const CheckTree = (0, _utils.forwardRef)((props, ref) => {
   const flattenedNodes = (0, _useFlattenTree.default)(treeData, {
     ...itemDataKeys,
     uncheckableItemValues,
+    disabledItemValues,
     multiple: true,
     cascade,
     value
@@ -102,6 +104,7 @@ const CheckTree = (0, _utils.forwardRef)((props, ref) => {
     loadingNodeValues: loadingNodeValues,
     flattenedNodes: flattenedNodes,
     uncheckableItemValues: uncheckableItemValues,
+    disabledItemValues: disabledItemValues,
     expandItemValues: expandItemValues,
     onChange: handleChange,
     onExpand: handleExpandTreeNode

package/cjs/CheckTree/CheckTreeView.js

@@ -84,7 +84,8 @@ const CheckTreeView = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _useTreeCheckState.default)({
     cascade,
     flattenedNodes,
-    uncheckableItemValues
+    uncheckableItemValues,
+    disabledItemValues
   });
   const handleSearchCallback = (value, _data, event) => {
     onSearch === null || onSearch === void 0 || onSearch(value, event);
@@ -117,7 +118,8 @@ const CheckTreeView = (0, _utils.forwardRef)((props, ref) => {
   const transformation = (0, _useVirtualizedTreeData.default)(flattenedNodes, filteredData, {
     cascade,
     expandItemValues,
-    searchKeyword: keyword
+    searchKeyword: keyword,
+    disabledItemValues
   });
 
   /**
@@ -130,7 +132,9 @@ const CheckTreeView = (0, _utils.forwardRef)((props, ref) => {
     }
     return (0, _utils3.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 = (0, _useTreeNodeProps.default)({

package/cjs/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/cjs/CheckTree/hooks/useTreeCheckState.js

@@ -14,7 +14,8 @@ function useTreeCheckState(props) {
   const {
     cascade,
     flattenedNodes,
-    uncheckableItemValues
+    uncheckableItemValues,
+    disabledItemValues = []
   } = props;
   const {
     valueKey,
@@ -29,7 +30,9 @@ function useTreeCheckState(props) {
       } else {
         if ((0, _utils.isEveryChildChecked)(currentNode, {
           nodes,
-          childrenKey
+          childrenKey,
+          disabledItemValues,
+          valueKey
         })) {
           currentNode.check = true;
           currentNode.checkAll = true;
@@ -43,16 +46,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 = (0, _hooks.useEventCallback)((nodes, node) => {
+    if (!node[childrenKey] || !node[childrenKey].length) {
+      return false;
+    }
+    return node[childrenKey].some(child => {
+      const isChildDisabled = (0, _utils.getDisabledState)(nodes, child, {
+        disabledItemValues,
+        valueKey
+      });
+      if (isChildDisabled) {
+        return true;
+      }
+      // Recursively check descendants
+      return hasDisabledDescendant(nodes, child);
+    });
+  });
   const checkChildNode = (0, _hooks.useEventCallback)((nodes, node, isChecked) => {
     const currentNode = node.refKey ? nodes[node.refKey] : null;
     if (!currentNode) {
       return;
     }
+
+    // Check if the current node is disabled
+    const isDisabled = (0, _utils.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);
       });
@@ -65,6 +109,13 @@ function useTreeCheckState(props) {
       if (!(0, _isNil.default)(currentNode.parent) && !(0, _isNil.default)(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/cjs/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/cjs/CheckTree/utils.js

@@ -21,6 +21,8 @@ var _utils = require("../internals/utils");
 var _utils2 = require("../Tree/utils");
 /**
  * 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 (!(0, _isNil2.default)(parent.refKey) && (0, _isNil2.default)(nodes[parent.refKey])) {
@@ -34,11 +36,14 @@ function getChildrenByFlattenNodes(nodes, parent) {
 
 /**
  * Checks if every child of a given parent node is checked.
+ * Disabled children are ignored in this check.
  */
 function isEveryChildChecked(parent, options) {
   const {
     nodes,
-    childrenKey
+    childrenKey,
+    disabledItemValues = [],
+    valueKey = 'value'
   } = options;
   if ((0, _isNil2.default)(parent.refKey) || (0, _isNil2.default)(nodes[parent.refKey])) {
     return false;
@@ -48,13 +53,32 @@ 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 !(0, _isNil2.default)(child.refKey) && nodes[child.refKey].check;
@@ -63,16 +87,25 @@ function isEveryChildChecked(parent, options) {
 
 /**
  * Checks if any child node is checked.
+ * Disabled children are ignored in this check.
  */
-function isSomeChildChecked(nodes, parent, childrenKey) {
+function isSomeChildChecked(nodes, parent, childrenKey, disabledItemValues = [], valueKey = 'value') {
   if (!(0, _isNil2.default)(parent.refKey) && (0, _isNil2.default)(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 !(0, _isNil2.default)(child.refKey) && nodes[child.refKey].check;
   });
@@ -136,7 +169,9 @@ function isNodeUncheckable(node, props) {
 function getFormattedTree(nodes, data, props) {
   const {
     childrenKey,
-    cascade
+    cascade,
+    disabledItemValues,
+    valueKey
   } = props;
   return data.map(node => {
     const formatted = {
@@ -148,7 +183,9 @@ function getFormattedTree(nodes, data, props) {
       const checkState = !(0, _isUndefined2.default)(cascade) ? getNodeCheckState(curNode, {
         cascade,
         nodes,
-        childrenKey
+        childrenKey,
+        disabledItemValues,
+        valueKey
       }) : undefined;
       formatted.check = curNode.check;
       formatted.uncheckable = curNode.uncheckable;
@@ -164,6 +201,7 @@ 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.
  */
 function getDisabledState(nodes, node, props) {
   const {
@@ -173,7 +211,24 @@ function getDisabledState(nodes, node, props) {
   if (!(0, _isNil2.default)(node.refKey) && (0, _isNil2.default)(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 && (0, _utils.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 (!(0, _isNil2.default)(parentRefKey) && !(0, _isNil2.default)(nodes[parentRefKey]) && disabledItemValues.some(value => (0, _utils.shallowEqual)(nodes[parentRefKey][valueKey], value))) {
+      return true;
+    }
+    currentNode = parentNode;
+  }
+  return false;
 }
 
 /**
@@ -207,7 +262,9 @@ function getNodeCheckState(node, options) {
   const {
     nodes,
     cascade,
-    childrenKey
+    childrenKey,
+    disabledItemValues = [],
+    valueKey = 'value'
   } = options;
   if (node.refKey === undefined) {
     return _constants.CHECK_STATE.UNCHECK;
@@ -221,13 +278,15 @@ function getNodeCheckState(node, options) {
   }
   if (isEveryChildChecked(node, {
     nodes,
-    childrenKey
+    childrenKey,
+    disabledItemValues,
+    valueKey
   })) {
     nodes[node.refKey].checkAll = true;
     nodes[node.refKey].check = true;
     return _constants.CHECK_STATE.CHECK;
   }
-  if (isSomeChildChecked(nodes, node, childrenKey)) {
+  if (isSomeChildChecked(nodes, node, childrenKey, disabledItemValues, valueKey)) {
     nodes[node.refKey].checkAll = false;
     return _constants.CHECK_STATE.INDETERMINATE;
   }

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -128,6 +128,7 @@ const CheckTreePicker = (0, _utils.forwardRef)((props, ref) => {
   const flattenedNodes = (0, _useFlattenTree.default)(treeData, {
     ...itemDataKeys,
     uncheckableItemValues,
+    disabledItemValues,
     multiple: true,
     cascade,
     value

package/cjs/Checkbox/Checkbox.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
+var _useIndeterminateCheckbox = require("./hooks/useIndeterminateCheckbox");
 var _CheckboxGroup = require("../CheckboxGroup");
 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); }
 /**
@@ -81,7 +82,7 @@ const Checkbox = (0, _utils.forwardRef)((props, ref) => {
     // In uncontrolled situations, use defaultChecked instead of checked
     htmlInputProps[controlled ? 'checked' : 'defaultChecked'] = checked;
   }
-  const checkboxRef = (0, _react.useRef)(null);
+  const checkboxRef = (0, _useIndeterminateCheckbox.useIndeterminateCheckbox)(indeterminate);
   const handleChange = (0, _hooks.useEventCallback)(event => {
     const nextChecked = event.target.checked;
     if (disabled || readOnly) {

package/cjs/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/cjs/Checkbox/hooks/useIndeterminateCheckbox.js

@@ -0,0 +1,32 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.useIndeterminateCheckbox = useIndeterminateCheckbox;
+var _react = require("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} />;
+ * ```
+ */
+function useIndeterminateCheckbox(indeterminate) {
+  const ref = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(() => {
+    if (ref.current) {
+      ref.current.indeterminate = indeterminate !== null && indeterminate !== void 0 ? indeterminate : false;
+    }
+  }, [indeterminate]);
+  return ref;
+}

package/cjs/DateInput/DateInput.js

@@ -175,6 +175,29 @@ const DateInput = (0, _utils.forwardRef)((props, ref) => {
       reset();
     }
   });
+  const onAmPmToggle = (0, _hooks.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 = (0, _utils2.getInputSelectedState)({
+          ...keyPressOptions,
+          input
+        });
+        setSelectedState(state);
+        setDateOffset('a', 1, date => handleChange(date, event));
+        setSelectionRange(state.selectionStart, state.selectionEnd);
+      }
+    }
+  });
   const handleClick = (0, _hooks.useEventCallback)(event => {
     const input = event.target;
     const state = (0, _utils2.getInputSelectedState)({
@@ -203,6 +226,7 @@ const DateInput = (0, _utils.forwardRef)((props, ref) => {
     onSegmentValueChange,
     onSegmentValueChangeWithNumericKeys,
     onSegmentValueRemove,
+    onAmPmToggle,
     onKeyDown
   });
   const [focused, focusEventProps] = (0, _useIsFocused.default)({

package/cjs/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/cjs/DateInput/hooks/useKeyboardInputEvent.js

@@ -9,6 +9,7 @@ function useKeyboardInputEvent({
   onSegmentValueChange,
   onSegmentValueChangeWithNumericKeys,
   onSegmentValueRemove,
+  onAmPmToggle,
   onKeyDown
 }) {
   return event => {
@@ -34,6 +35,19 @@ 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/cjs/DateRangeInput/DateRangeInput.js

@@ -209,6 +209,29 @@ const DateRangeInput = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       reset();
     }
   });
+  const onAmPmToggle = (0, _hooks.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 = (0, _utils2.getInputSelectedState)({
+          ...keyPressOptions,
+          input
+        });
+        setSelectedState(state);
+        getActiveState().setDateOffset('a', 1, date => handleChange(date, event));
+        setSelectionRange(state.selectionStart, state.selectionEnd);
+      }
+    }
+  });
   const handleClick = (0, _hooks.useEventCallback)(event => {
     const input = event.target;
     if (input.selectionStart === null) {
@@ -248,6 +271,7 @@ const DateRangeInput = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     onSegmentValueChange,
     onSegmentValueChangeWithNumericKeys,
     onSegmentValueRemove,
+    onAmPmToggle,
     onKeyDown
   });
   return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({

package/cjs/DateRangePicker/DateRangePicker.js

@@ -387,6 +387,12 @@ const DateRangePicker = (0, _utils3.forwardRef)((props, ref) => {
     const calendarKey = index === 0 ? 'start' : 'end';
     const nextCalendarDate = Array.from(calendarDateRange);
     nextCalendarDate[index] = date;
+
+    // If allowSameMonth is true, the start and end dates should be the same
+    if (allowSameMonth) {
+      nextCalendarDate[0] = date;
+      nextCalendarDate[1] = date;
+    }
     setCalendarDateRange({
       dateRange: nextCalendarDate,
       calendarKey,

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