Fix component integration

mui · Aug 6, 2024 · bd4739f · bd4739f
1 parent 2c02387
commit bd4739f
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 19 deletions.
diff --git a/docs/pages/base-ui/api/use-slider-thumb.json b/docs/pages/base-ui/api/use-slider-thumb.json
@@ -4,8 +4,8 @@
     "axis": { "type": { "name": "Axis", "description": "Axis" }, "required": true },
     "changeValue": {
       "type": {
-        "name": "(valueInput: number, index: number, event: React.KeyboardEvent | React.ChangeEvent) =&gt; void",
-        "description": "(valueInput: number, index: number, event: React.KeyboardEvent | React.ChangeEvent) =&gt; void"
+        "name": "(valueInput: number, index: number, event?: React.KeyboardEvent | React.ChangeEvent) =&gt; void",
+        "description": "(valueInput: number, index: number, event?: React.KeyboardEvent | React.ChangeEvent) =&gt; void"
       },
       "required": true
     },

diff --git a/packages/mui-base/src/Checkbox/Root/useCheckboxRoot.ts b/packages/mui-base/src/Checkbox/Root/useCheckboxRoot.ts
@@ -99,9 +99,13 @@ export function useCheckboxRoot(params: UseCheckboxRootParameters): UseCheckboxR
         'aria-disabled': disabled || undefined,
         'aria-readonly': readOnly || undefined,
         'aria-labelledby': labelId,
-        onBlur(event) {
+        onBlur() {
+          const element = inputRef.current;
+          if (!element) {
+            return;
+          }
           setTouched(true);
-          commitValidation(event.currentTarget.value);
+          commitValidation(element.checked);
         },
         onClick(event) {
           if (event.defaultPrevented || readOnly) {

diff --git a/packages/mui-base/src/Slider/Root/SliderRoot.types.ts b/packages/mui-base/src/Slider/Root/SliderRoot.types.ts
@@ -218,7 +218,7 @@ export interface UseSliderReturnValue {
   changeValue: (
     valueInput: number,
     index: number,
-    event: React.KeyboardEvent | React.ChangeEvent,
+    event?: React.KeyboardEvent | React.ChangeEvent,
   ) => void;
   compoundComponentContextValue: CompoundComponentContextValue<any, SliderThumbMetadata>;
   dragging: boolean;

diff --git a/packages/mui-base/src/Slider/Root/useSliderRoot.ts b/packages/mui-base/src/Slider/Root/useSliderRoot.ts
@@ -262,7 +262,7 @@ function useSliderRoot(parameters: UseSliderParameters): UseSliderReturnValue {
   );
 
   const changeValue = React.useCallback(
-    (valueInput: number, index: number, event: React.KeyboardEvent | React.ChangeEvent) => {
+    (valueInput: number, index: number, event?: React.KeyboardEvent | React.ChangeEvent) => {
       let newValue: number | number[] = valueInput;
 
       newValue = clamp(newValue, min, max);
@@ -284,14 +284,15 @@ function useSliderRoot(parameters: UseSliderParameters): UseSliderReturnValue {
         setValueState(newValue);
         setDirty(newValue !== validityData.initialValue);
 
-        if (handleValueChange && !areValuesEqual(newValue)) {
+        if (handleValueChange && !areValuesEqual(newValue) && event) {
           handleValueChange(newValue, index, event);
         }
 
-        if (onValueCommitted) {
-          setTouched(true);
+        setTouched(true);
+        commitValidation(newValue);
+
+        if (onValueCommitted && event) {
           onValueCommitted(newValue, event.nativeEvent);
-          commitValidation(newValue);
         }
       }
     },

diff --git a/packages/mui-base/src/Slider/Thumb/useSliderThumb.ts b/packages/mui-base/src/Slider/Thumb/useSliderThumb.ts
@@ -75,11 +75,7 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
   } = parameters;
 
   const { setTouched } = useFieldRootContext();
-  const {
-    getInputValidationProps,
-    inputRef: inputValidationRef,
-    commitValidation,
-  } = useFieldControlValidation();
+  const { getInputValidationProps, inputRef: inputValidationRef } = useFieldControlValidation();
 
   const thumbId = useId(idParam);
   const thumbRef = React.useRef<HTMLElement>(null);
@@ -137,7 +133,7 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
             return;
           }
           setTouched(true);
-          commitValidation((thumbRef.current as HTMLInputElement).valueAsNumber);
+          changeValue(thumbValue, index);
         },
         onKeyDown(event: React.KeyboardEvent) {
           let newValue = null;
@@ -215,7 +211,6 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
       tabIndex,
       disabled,
       setTouched,
-      commitValidation,
       sliderValues,
       thumbValue,
       largeStep,

diff --git a/packages/mui-base/src/Switch/Root/useSwitchRoot.ts b/packages/mui-base/src/Switch/Root/useSwitchRoot.ts
@@ -91,9 +91,13 @@ export function useSwitchRoot(params: UseSwitchRootParameters): UseSwitchRootRet
         'aria-disabled': disabled || undefined,
         'aria-readonly': readOnly,
         'aria-labelledby': labelId,
-        onBlur(event) {
+        onBlur() {
+          const element = inputRef.current;
+          if (!element) {
+            return;
+          }
           setTouched(true);
-          commitValidation(event.currentTarget.value);
+          commitValidation(element.checked);
         },
         onClick(event) {
           if (event.defaultPrevented || readOnly) {