Align externalProps naming

mui · Sep 12, 2023 · 69864af · 69864af
1 parent a11ad3d
commit 69864af
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 51 deletions.
diff --git a/docs/pages/base-ui/api/use-slider.json b/docs/pages/base-ui/api/use-slider.json
@@ -62,22 +62,22 @@
     },
     "getHiddenInputProps": {
       "type": {
-        "name": "&lt;TOther extends EventHandlers = {}&gt;(otherHandlers?: TOther) =&gt; UseSliderHiddenInputProps&lt;TOther&gt;",
-        "description": "&lt;TOther extends EventHandlers = {}&gt;(otherHandlers?: TOther) =&gt; UseSliderHiddenInputProps&lt;TOther&gt;"
+        "name": "&lt;ExternalProps extends Record&lt;string, any&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseSliderHiddenInputProps&lt;ExternalProps&gt;",
+        "description": "&lt;ExternalProps extends Record&lt;string, any&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseSliderHiddenInputProps&lt;ExternalProps&gt;"
       },
       "required": true
     },
     "getRootProps": {
       "type": {
-        "name": "&lt;TOther extends EventHandlers = {}&gt;(otherHandlers?: TOther) =&gt; UseSliderRootSlotProps&lt;TOther&gt;",
-        "description": "&lt;TOther extends EventHandlers = {}&gt;(otherHandlers?: TOther) =&gt; UseSliderRootSlotProps&lt;TOther&gt;"
+        "name": "&lt;ExternalProps extends Record&lt;string, any&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseSliderRootSlotProps&lt;ExternalProps&gt;",
+        "description": "&lt;ExternalProps extends Record&lt;string, any&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseSliderRootSlotProps&lt;ExternalProps&gt;"
       },
       "required": true
     },
     "getThumbProps": {
       "type": {
-        "name": "&lt;TOther extends EventHandlers = {}&gt;(otherHandlers?: TOther) =&gt; UseSliderThumbSlotProps&lt;TOther&gt;",
-        "description": "&lt;TOther extends EventHandlers = {}&gt;(otherHandlers?: TOther) =&gt; UseSliderThumbSlotProps&lt;TOther&gt;"
+        "name": "&lt;ExternalProps extends Record&lt;string, any&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseSliderThumbSlotProps&lt;ExternalProps&gt;",
+        "description": "&lt;ExternalProps extends Record&lt;string, any&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseSliderThumbSlotProps&lt;ExternalProps&gt;"
       },
       "required": true
     },

diff --git a/packages/mui-base/src/useSlider/useSlider.ts b/packages/mui-base/src/useSlider/useSlider.ts
@@ -17,7 +17,7 @@ import {
   UseSliderRootSlotProps,
   UseSliderThumbSlotProps,
 } from './useSlider.types';
-import { areArraysEqual, EventHandlers } from '../utils';
+import { areArraysEqual, EventHandlers, extractEventHandlers } from '../utils';
 
 const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
 
@@ -282,7 +282,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
   const handleRef = useForkRef(ref, handleFocusRef);
 
   const createHandleHiddenInputFocus =
-    (otherHandlers: Record<string, React.EventHandler<any>>) => (event: React.FocusEvent) => {
+    (otherHandlers: EventHandlers) => (event: React.FocusEvent) => {
       const index = Number(event.currentTarget.getAttribute('data-index'));
       handleFocusVisible(event);
       if (isFocusVisibleRef.current === true) {
@@ -292,7 +292,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
       otherHandlers?.onFocus?.(event);
     };
   const createHandleHiddenInputBlur =
-    (otherHandlers: Record<string, React.EventHandler<any>>) => (event: React.FocusEvent) => {
+    (otherHandlers: EventHandlers) => (event: React.FocusEvent) => {
       handleBlurVisible(event);
       if (isFocusVisibleRef.current === false) {
         setFocusedThumbIndex(-1);
@@ -319,7 +319,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
   }
 
   const createHandleHiddenInputChange =
-    (otherHandlers: Record<string, React.EventHandler<any>>) => (event: React.ChangeEvent) => {
+    (otherHandlers: EventHandlers) => (event: React.ChangeEvent) => {
       otherHandlers.onChange?.(event);
 
       const index = Number(event.currentTarget.getAttribute('data-index'));
@@ -571,8 +571,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
   }, [disabled, stopListening]);
 
   const createHandleMouseDown =
-    (otherHandlers: Record<string, React.EventHandler<any>>) =>
-    (event: React.MouseEvent<HTMLSpanElement>) => {
+    (otherHandlers: EventHandlers) => (event: React.MouseEvent<HTMLSpanElement>) => {
       otherHandlers.onMouseDown?.(event);
       if (disabled) {
         return;
@@ -610,50 +609,55 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
   const trackOffset = valueToPercent(range ? values[0] : min, min, max);
   const trackLeap = valueToPercent(values[values.length - 1], min, max) - trackOffset;
 
-  const getRootProps = <TOther extends EventHandlers = {}>(
-    otherHandlers: TOther = {} as TOther,
-  ): UseSliderRootSlotProps<TOther> => {
+  const getRootProps = <ExternalProps extends Record<string, any> = {}>(
+    externalProps: ExternalProps = {} as ExternalProps,
+  ): UseSliderRootSlotProps<ExternalProps> => {
+    const externalHandlers = extractEventHandlers(externalProps);
+
     const ownEventHandlers = {
-      onMouseDown: createHandleMouseDown(otherHandlers || {}),
+      onMouseDown: createHandleMouseDown(externalHandlers || {}),
     };
 
     const mergedEventHandlers = {
-      ...otherHandlers,
+      ...externalHandlers,
       ...ownEventHandlers,
     };
+
     return {
+      ...externalProps,
       ref: handleRef,
       ...mergedEventHandlers,
     };
   };
 
   const createHandleMouseOver =
-    (otherHandlers: Record<string, React.EventHandler<any>>) =>
-    (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+    (otherHandlers: EventHandlers) => (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
       otherHandlers.onMouseOver?.(event);
 
       const index = Number(event.currentTarget.getAttribute('data-index'));
       setOpen(index);
     };
 
   const createHandleMouseLeave =
-    (otherHandlers: Record<string, React.EventHandler<any>>) =>
-    (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+    (otherHandlers: EventHandlers) => (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
       otherHandlers.onMouseLeave?.(event);
 
       setOpen(-1);
     };
 
-  const getThumbProps = <TOther extends EventHandlers = {}>(
-    otherHandlers: TOther = {} as TOther,
-  ): UseSliderThumbSlotProps<TOther> => {
+  const getThumbProps = <ExternalProps extends Record<string, any> = {}>(
+    externalProps: ExternalProps = {} as ExternalProps,
+  ): UseSliderThumbSlotProps<ExternalProps> => {
+    const externalHandlers = extractEventHandlers(externalProps);
+
     const ownEventHandlers = {
-      onMouseOver: createHandleMouseOver(otherHandlers || {}),
-      onMouseLeave: createHandleMouseLeave(otherHandlers || {}),
+      onMouseOver: createHandleMouseOver(externalHandlers || {}),
+      onMouseLeave: createHandleMouseLeave(externalHandlers || {}),
     };
 
     return {
-      ...otherHandlers,
+      ...externalProps,
+      ...externalHandlers,
       ...ownEventHandlers,
     };
   };
@@ -665,17 +669,19 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
     };
   };
 
-  const getHiddenInputProps = <TOther extends EventHandlers = {}>(
-    otherHandlers: TOther = {} as TOther,
-  ): UseSliderHiddenInputProps<TOther> => {
+  const getHiddenInputProps = <ExternalProps extends Record<string, any> = {}>(
+    externalProps: ExternalProps = {} as ExternalProps,
+  ): UseSliderHiddenInputProps<ExternalProps> => {
+    const externalHandlers = extractEventHandlers(externalProps);
+
     const ownEventHandlers = {
-      onChange: createHandleHiddenInputChange(otherHandlers || {}),
-      onFocus: createHandleHiddenInputFocus(otherHandlers || {}),
-      onBlur: createHandleHiddenInputBlur(otherHandlers || {}),
+      onChange: createHandleHiddenInputChange(externalHandlers || {}),
+      onFocus: createHandleHiddenInputFocus(externalHandlers || {}),
+      onBlur: createHandleHiddenInputBlur(externalHandlers || {}),
     };
 
     const mergedEventHandlers = {
-      ...otherHandlers,
+      ...externalHandlers,
       ...ownEventHandlers,
     };
 
@@ -691,6 +697,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
       max: parameters.max,
       step: parameters.step === null && parameters.marks ? 'any' : parameters.step ?? undefined,
       disabled,
+      ...externalProps,
       ...mergedEventHandlers,
       style: {
         ...visuallyHidden,

diff --git a/packages/mui-base/src/useSlider/useSlider.types.ts b/packages/mui-base/src/useSlider/useSlider.types.ts
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { EventHandlers } from '../utils';
 
 export interface UseSliderParameters {
   /**
@@ -113,15 +112,21 @@ export type UseSliderRootSlotOwnProps = {
   ref: React.RefCallback<Element> | null;
 };
 
-export type UseSliderRootSlotProps<TOther = {}> = Omit<TOther, keyof UseSliderRootSlotOwnProps> &
+export type UseSliderRootSlotProps<ExternalProps = {}> = Omit<
+  ExternalProps,
+  keyof UseSliderRootSlotOwnProps
+> &
   UseSliderRootSlotOwnProps;
 
 export type UseSliderThumbSlotOwnProps = {
   onMouseLeave: React.MouseEventHandler;
   onMouseOver: React.MouseEventHandler;
 };
 
-export type UseSliderThumbSlotProps<TOther = {}> = Omit<TOther, keyof UseSliderThumbSlotOwnProps> &
+export type UseSliderThumbSlotProps<ExternalProps = {}> = Omit<
+  ExternalProps,
+  keyof UseSliderThumbSlotOwnProps
+> &
   UseSliderThumbSlotOwnProps;
 
 export type UseSliderHiddenInputOwnProps = {
@@ -140,8 +145,8 @@ export type UseSliderHiddenInputOwnProps = {
   type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
 };
 
-export type UseSliderHiddenInputProps<TOther = {}> = Omit<
-  TOther,
+export type UseSliderHiddenInputProps<ExternalProps = {}> = Omit<
+  ExternalProps,
   keyof UseSliderHiddenInputOwnProps
 > &
   UseSliderHiddenInputOwnProps;
@@ -190,28 +195,28 @@ export interface UseSliderReturnValue {
   focusedThumbIndex: number;
   /**
    * Resolver for the hidden input slot's props.
-   * @param otherHandlers props for the hidden input slot
+   * @param externalProps props for the hidden input slot
    * @returns props that should be spread on the hidden input slot
    */
-  getHiddenInputProps: <TOther extends EventHandlers = {}>(
-    otherHandlers?: TOther,
-  ) => UseSliderHiddenInputProps<TOther>;
+  getHiddenInputProps: <ExternalProps extends Record<string, any> = {}>(
+    externalProps?: ExternalProps,
+  ) => UseSliderHiddenInputProps<ExternalProps>;
   /**
    * Resolver for the root slot's props.
-   * @param otherHandlers props for the root slot
+   * @param externalProps props for the root slot
    * @returns props that should be spread on the root slot
    */
-  getRootProps: <TOther extends EventHandlers = {}>(
-    otherHandlers?: TOther,
-  ) => UseSliderRootSlotProps<TOther>;
+  getRootProps: <ExternalProps extends Record<string, any> = {}>(
+    externalProps?: ExternalProps,
+  ) => UseSliderRootSlotProps<ExternalProps>;
   /**
    * Resolver for the thumb slot's props.
-   * @param otherHandlers props for the thumb slot
+   * @param externalProps props for the thumb slot
    * @returns props that should be spread on the thumb slot
    */
-  getThumbProps: <TOther extends EventHandlers = {}>(
-    otherHandlers?: TOther,
-  ) => UseSliderThumbSlotProps<TOther>;
+  getThumbProps: <ExternalProps extends Record<string, any> = {}>(
+    externalProps?: ExternalProps,
+  ) => UseSliderThumbSlotProps<ExternalProps>;
   /**
    * Resolver for the thumb slot's style prop.
    * @param index of the currently moved thumb