Merge branch 'master' into fix/js-anim

mui · Jan 7, 2025 · 49bf54c · 49bf54c
2 parents c5b4936 + 1908c94
commit 49bf54c
Show file tree

Hide file tree

Showing 25 changed files with 580 additions and 545 deletions.
diff --git a/docs/reference/generated/slider-root.json b/docs/reference/generated/slider-root.json
@@ -26,6 +26,10 @@
       "type": "(value, event) => void",
       "description": "Callback function that is fired when the `pointerup` is triggered."
     },
+    "tabIndex": {
+      "type": "number",
+      "description": "Optional tab index attribute for the thumb components."
+    },
     "step": {
       "type": "number",
       "default": "1",

diff --git a/docs/reference/generated/slider-thumb.json b/docs/reference/generated/slider-thumb.json
@@ -18,6 +18,11 @@
       "type": "function(formattedValue: string, value: number, index: number) => string",
       "description": "Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.\nThis is important for screen reader users."
     },
+    "tabIndex": {
+      "type": "number",
+      "default": "null",
+      "description": "Optional tab index attribute for the thumb components."
+    },
     "className": {
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."

diff --git a/packages/react/src/menu/trigger/useMenuTrigger.ts b/packages/react/src/menu/trigger/useMenuTrigger.ts
@@ -6,8 +6,11 @@ import { useForkRef } from '../../utils/useForkRef';
 import { GenericHTMLProps } from '../../utils/types';
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { ownerDocument } from '../../utils/owner';
+import { getPseudoElementBounds } from '../../utils/getPseudoElementBounds';
 
 export function useMenuTrigger(parameters: useMenuTrigger.Parameters): useMenuTrigger.ReturnValue {
+  const BOUNDARY_OFFSET = 2;
+
   const {
     disabled = false,
     rootRef: externalRef,
@@ -71,18 +74,21 @@ export function useMenuTrigger(parameters: useMenuTrigger.Parameters): useMenuTr
 
               const mouseUpTarget = mouseEvent.target as Element | null;
 
-              const triggerRect = triggerRef.current.getBoundingClientRect();
+              if (
+                contains(triggerRef.current, mouseUpTarget) ||
+                contains(positionerRef.current, mouseUpTarget) ||
+                mouseUpTarget === triggerRef.current
+              ) {
+                return;
+              }
 
-              const isInsideTrigger =
-                mouseEvent.clientX >= triggerRect.left &&
-                mouseEvent.clientX <= triggerRect.right &&
-                mouseEvent.clientY >= triggerRect.top &&
-                mouseEvent.clientY <= triggerRect.bottom;
+              const bounds = getPseudoElementBounds(triggerRef.current);
 
               if (
-                isInsideTrigger ||
-                contains(positionerRef.current, mouseUpTarget) ||
-                contains(triggerRef.current, mouseUpTarget)
+                mouseEvent.clientX >= bounds.left - BOUNDARY_OFFSET &&
+                mouseEvent.clientX <= bounds.right + BOUNDARY_OFFSET &&
+                mouseEvent.clientY >= bounds.top - BOUNDARY_OFFSET &&
+                mouseEvent.clientY <= bounds.bottom + BOUNDARY_OFFSET
               ) {
                 return;
               }

diff --git a/packages/react/src/select/trigger/useSelectTrigger.ts b/packages/react/src/select/trigger/useSelectTrigger.ts
@@ -7,10 +7,13 @@ import { useForkRef } from '../../utils/useForkRef';
 import { useSelectRootContext } from '../root/SelectRootContext';
 import { ownerDocument } from '../../utils/owner';
 import { useFieldRootContext } from '../../field/root/FieldRootContext';
+import { getPseudoElementBounds } from '../../utils/getPseudoElementBounds';
 
 export function useSelectTrigger(
   parameters: useSelectTrigger.Parameters,
 ): useSelectTrigger.ReturnValue {
+  const BOUNDARY_OFFSET = 2;
+
   const { disabled = false, rootRef: externalRef } = parameters;
 
   const {
@@ -107,18 +110,22 @@ export function useSelectTrigger(
 
               const mouseUpTarget = mouseEvent.target as Element | null;
 
-              const triggerRect = triggerRef.current.getBoundingClientRect();
+              // Early return if clicked on trigger element or its children
+              if (
+                contains(triggerRef.current, mouseUpTarget) ||
+                contains(positionerElement, mouseUpTarget) ||
+                mouseUpTarget === triggerRef.current
+              ) {
+                return;
+              }
 
-              const isInsideTrigger =
-                mouseEvent.clientX >= triggerRect.left &&
-                mouseEvent.clientX <= triggerRect.right &&
-                mouseEvent.clientY >= triggerRect.top &&
-                mouseEvent.clientY <= triggerRect.bottom;
+              const bounds = getPseudoElementBounds(triggerRef.current);
 
               if (
-                isInsideTrigger ||
-                contains(positionerElement, mouseUpTarget) ||
-                contains(triggerRef.current, mouseUpTarget)
+                mouseEvent.clientX >= bounds.left - BOUNDARY_OFFSET &&
+                mouseEvent.clientX <= bounds.right + BOUNDARY_OFFSET &&
+                mouseEvent.clientY >= bounds.top - BOUNDARY_OFFSET &&
+                mouseEvent.clientY <= bounds.bottom + BOUNDARY_OFFSET
               ) {
                 return;
               }

diff --git a/packages/react/src/slider/control/SliderControl.test.tsx b/packages/react/src/slider/control/SliderControl.test.tsx
@@ -6,22 +6,23 @@ import { NOOP } from '../../utils/noop';
 
 const testRootContext: SliderRootContext = {
   active: -1,
-  areValuesEqual: () => true,
-  changeValue: NOOP,
-  direction: 'ltr',
+  handleInputChange: NOOP,
   dragging: false,
   disabled: false,
-  getFingerNewValue: () => ({
-    newValue: 0,
-    activeIndex: 0,
-    newPercentageValue: 0,
+  getFingerState: () => ({
+    value: 0,
+    valueRescaled: 0,
+    percentageValues: [0],
+    thumbIndex: 0,
   }),
-  handleValueChange: NOOP,
+  setValue: NOOP,
   largeStep: 10,
   thumbMap: new Map(),
   max: 100,
   min: 0,
   minStepsBetweenValues: 0,
+  name: '',
+  onValueCommitted: NOOP,
   orientation: 'horizontal',
   state: {
     activeThumbIndex: -1,
@@ -41,9 +42,10 @@ const testRootContext: SliderRootContext = {
   registerSliderControl: NOOP,
   setActive: NOOP,
   setDragging: NOOP,
+  setPercentageValues: NOOP,
   setThumbMap: NOOP,
-  setValueState: NOOP,
   step: 1,
+  tabIndex: null,
   thumbRefs: { current: [] },
   values: [0],
 };

diff --git a/packages/react/src/slider/control/SliderControl.tsx b/packages/react/src/slider/control/SliderControl.tsx
@@ -21,37 +21,33 @@ const SliderControl = React.forwardRef(function SliderControl(
   const { render: renderProp, className, ...otherProps } = props;
 
   const {
-    areValuesEqual,
     disabled,
     dragging,
-    getFingerNewValue,
-    handleValueChange,
+    getFingerState,
+    setValue,
     minStepsBetweenValues,
     onValueCommitted,
     state,
     percentageValues,
     registerSliderControl,
     setActive,
     setDragging,
-    setValueState,
     step,
     thumbRefs,
   } = useSliderRootContext();
 
   const { getRootProps } = useSliderControl({
-    areValuesEqual,
     disabled,
     dragging,
-    getFingerNewValue,
-    handleValueChange,
+    getFingerState,
+    setValue,
     minStepsBetweenValues,
     onValueCommitted,
     percentageValues,
     registerSliderControl,
     rootRef: forwardedRef,
     setActive,
     setDragging,
-    setValueState,
     step,
     thumbRefs,
   });