[base-ui][useSelect][useOption] Align external props handling (#39038)

mui · Sep 20, 2023 · 18d9260 · 18d9260
1 parent 9124a83
commit 18d9260
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 62 deletions.
diff --git a/docs/pages/base-ui/api/use-option.json b/docs/pages/base-ui/api/use-option.json
@@ -14,8 +14,8 @@
   "returnValue": {
     "getRootProps": {
       "type": {
-        "name": "&lt;Other extends EventHandlers&gt;(otherHandlers?: Other) =&gt; UseOptionRootSlotProps&lt;Other&gt;",
-        "description": "&lt;Other extends EventHandlers&gt;(otherHandlers?: Other) =&gt; UseOptionRootSlotProps&lt;Other&gt;"
+        "name": "&lt;ExternalProps extends Record&lt;string, unknown&gt;&gt;(externalProps?: ExternalProps) =&gt; UseOptionRootSlotProps&lt;ExternalProps&gt;",
+        "description": "&lt;ExternalProps extends Record&lt;string, unknown&gt;&gt;(externalProps?: ExternalProps) =&gt; UseOptionRootSlotProps&lt;ExternalProps&gt;"
       },
       "required": true
     },

diff --git a/docs/pages/base-ui/api/use-select.json b/docs/pages/base-ui/api/use-select.json
@@ -96,22 +96,22 @@
     },
     "getButtonProps": {
       "type": {
-        "name": "&lt;OtherHandlers extends EventHandlers = {}&gt;(otherHandlers?: OtherHandlers) =&gt; UseSelectButtonSlotProps&lt;OtherHandlers&gt;",
-        "description": "&lt;OtherHandlers extends EventHandlers = {}&gt;(otherHandlers?: OtherHandlers) =&gt; UseSelectButtonSlotProps&lt;OtherHandlers&gt;"
+        "name": "&lt;ExternalProps extends Record&lt;string, unknown&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseSelectButtonSlotProps&lt;ExternalProps&gt;",
+        "description": "&lt;ExternalProps extends Record&lt;string, unknown&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseSelectButtonSlotProps&lt;ExternalProps&gt;"
       },
       "required": true
     },
     "getHiddenInputProps": {
       "type": {
-        "name": "&lt;OtherHandlers extends EventHandlers = {}&gt;(otherHandlers?: OtherHandlers) =&gt; UseSelectHiddenInputSlotProps&lt;OtherHandlers&gt;",
-        "description": "&lt;OtherHandlers extends EventHandlers = {}&gt;(otherHandlers?: OtherHandlers) =&gt; UseSelectHiddenInputSlotProps&lt;OtherHandlers&gt;"
+        "name": "&lt;ExternalProps extends Record&lt;string, unknown&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseSelectHiddenInputSlotProps&lt;ExternalProps&gt;",
+        "description": "&lt;ExternalProps extends Record&lt;string, unknown&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseSelectHiddenInputSlotProps&lt;ExternalProps&gt;"
       },
       "required": true
     },
     "getListboxProps": {
       "type": {
-        "name": "&lt;OtherHandlers extends EventHandlers = {}&gt;(otherHandlers?: OtherHandlers) =&gt; UseSelectListboxSlotProps&lt;OtherHandlers&gt;",
-        "description": "&lt;OtherHandlers extends EventHandlers = {}&gt;(otherHandlers?: OtherHandlers) =&gt; UseSelectListboxSlotProps&lt;OtherHandlers&gt;"
+        "name": "&lt;ExternalProps extends Record&lt;string, unknown&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseSelectListboxSlotProps&lt;ExternalProps&gt;",
+        "description": "&lt;ExternalProps extends Record&lt;string, unknown&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseSelectListboxSlotProps&lt;ExternalProps&gt;"
       },
       "required": true
     },

diff --git a/docs/translations/api-docs/use-option/use-option.json b/docs/translations/api-docs/use-option/use-option.json
@@ -1 +1,10 @@
-{ "hookDescription": "", "parametersDescriptions": {}, "returnValueDescriptions": {} }
+{
+  "hookDescription": "",
+  "parametersDescriptions": {},
+  "returnValueDescriptions": {
+    "getRootProps": { "description": "Resolver for the root slot&#39;s props." },
+    "highlighted": { "description": "If <code>true</code>, the option is highlighted." },
+    "rootRef": { "description": "Ref to the root slot DOM node." },
+    "selected": { "description": "If <code>true</code>, the option is selected." }
+  }
+}
diff --git a/packages/mui-base/src/useOption/useOption.ts b/packages/mui-base/src/useOption/useOption.ts
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { unstable_useForkRef as useForkRef, unstable_useId as useId } from '@mui/utils';
 import { SelectOption, UseOptionParameters, UseOptionReturnValue } from './useOption.types';
-import { EventHandlers } from '../utils';
+import { extractEventHandlers } from '../utils/extractEventHandlers';
 import { useListItem } from '../useList';
 import { useCompoundItem } from '../utils/useCompoundItem';
 
@@ -48,14 +48,19 @@ export function useOption<Value>(params: UseOptionParameters<Value>): UseOptionR
   const handleRef = useForkRef(optionRefParam, optionRef, listItemRefHandler)!;
 
   return {
-    getRootProps: <Other extends EventHandlers = {}>(otherHandlers: Other = {} as Other) => ({
-      ...otherHandlers,
-      ...getListItemProps(otherHandlers),
-      id,
-      ref: handleRef,
-      role: 'option',
-      'aria-selected': selected,
-    }),
+    getRootProps: <ExternalProps extends Record<string, unknown> = {}>(
+      externalProps: ExternalProps = {} as ExternalProps,
+    ) => {
+      const externalEventHandlers = extractEventHandlers(externalProps);
+      return {
+        ...externalProps,
+        ...getListItemProps(externalEventHandlers),
+        id,
+        ref: handleRef,
+        role: 'option',
+        'aria-selected': selected,
+      };
+    },
     highlighted,
     index,
     selected,

diff --git a/packages/mui-base/src/useOption/useOption.types.ts b/packages/mui-base/src/useOption/useOption.types.ts
@@ -1,5 +1,4 @@
 import { UseListItemRootSlotProps } from '../useList';
-import { EventHandlers } from '../utils';
 
 export interface SelectOption<Value> {
   value: Value;
@@ -18,16 +17,30 @@ export interface UseOptionParameters<Value> {
 }
 
 export interface UseOptionReturnValue {
+  /**
+   * If `true`, the option is selected.
+   */
   selected: boolean;
+  /**
+   * If `true`, the option is highlighted.
+   */
   highlighted: boolean;
   index: number;
-  getRootProps: <Other extends EventHandlers>(
-    otherHandlers?: Other,
-  ) => UseOptionRootSlotProps<Other>;
+  /**
+   * Resolver for the root slot's props.
+   * @param externalProps props for the root slot
+   * @returns props that should be spread on the root slot
+   */
+  getRootProps: <ExternalProps extends Record<string, unknown>>(
+    externalProps?: ExternalProps,
+  ) => UseOptionRootSlotProps<ExternalProps>;
+  /**
+   * Ref to the root slot DOM node.
+   */
   rootRef: React.RefCallback<Element> | null;
 }
 
-export type UseOptionRootSlotProps<Other extends EventHandlers = {}> =
-  UseListItemRootSlotProps<Other> & {
+export type UseOptionRootSlotProps<ExternalProps extends Record<string, unknown> = {}> =
+  UseListItemRootSlotProps<ExternalProps> & {
     ref?: React.RefCallback<Element> | null;
-  } & Other;
+  } & ExternalProps;
diff --git a/packages/mui-base/src/useSelect/useSelect.ts b/packages/mui-base/src/useSelect/useSelect.ts
@@ -23,6 +23,7 @@ import { EventHandlers } from '../utils/types';
 import { defaultOptionStringifier } from './defaultOptionStringifier';
 import { SelectProviderValue } from './SelectProvider';
 import { useCompoundParent } from '../utils/useCompound';
+import { extractEventHandlers } from '../utils/extractEventHandlers';
 import { SelectOption } from '../useOption/useOption.types';
 import { selectReducer } from './selectReducer';
 import { combineHooksSlotProps } from '../utils/combineHooksSlotProps';
@@ -299,9 +300,8 @@ function useSelect<OptionValue, Multiple extends boolean = false>(
   } = useList(useListParameters);
 
   const createHandleButtonMouseDown =
-    (otherHandlers?: Record<string, React.EventHandler<any>>) =>
-    (event: React.MouseEvent & MuiCancellableEvent) => {
-      otherHandlers?.onMouseDown?.(event);
+    (externalEventHandlers?: EventHandlers) => (event: React.MouseEvent & MuiCancellableEvent) => {
+      externalEventHandlers?.onMouseDown?.(event);
       if (!event.defaultMuiPrevented) {
         const action: ButtonClickAction = {
           type: SelectActionTypes.buttonClick,
@@ -336,8 +336,8 @@ function useSelect<OptionValue, Multiple extends boolean = false>(
     [getOptionByValue],
   );
 
-  const getSelectTriggerProps = <TOther extends EventHandlers>(
-    otherHandlers: TOther = {} as TOther,
+  const getSelectTriggerProps = <OtherHandlers extends EventHandlers>(
+    otherHandlers: OtherHandlers = {} as OtherHandlers,
   ) => {
     return {
       ...otherHandlers,
@@ -349,19 +349,23 @@ function useSelect<OptionValue, Multiple extends boolean = false>(
     };
   };
 
-  const getButtonProps = <TOther extends EventHandlers>(
-    otherHandlers: TOther = {} as TOther,
-  ): UseSelectButtonSlotProps<TOther> => {
+  const getButtonProps = <ExternalProps extends Record<string, unknown>>(
+    externalProps: ExternalProps = {} as ExternalProps,
+  ): UseSelectButtonSlotProps<ExternalProps> => {
+    const externalEventHandlers = extractEventHandlers(externalProps);
     const listboxAndButtonProps = combineHooksSlotProps(getButtonRootProps, getListboxRootProps);
     const combinedProps = combineHooksSlotProps(listboxAndButtonProps, getSelectTriggerProps);
-    return combinedProps(otherHandlers);
+    return {
+      ...externalProps,
+      ...combinedProps(externalEventHandlers),
+    };
   };
 
-  const getListboxProps = <TOther extends EventHandlers>(
-    otherHandlers: TOther = {} as TOther,
-  ): UseSelectListboxSlotProps<TOther> => {
+  const getListboxProps = <ExternalProps extends Record<string, unknown>>(
+    externalProps: ExternalProps = {} as ExternalProps,
+  ): UseSelectListboxSlotProps<ExternalProps> => {
     return {
-      ...otherHandlers,
+      ...externalProps,
       id: listboxId,
       role: 'listbox' as const,
       'aria-multiselectable': multiple ? 'true' : undefined,
@@ -404,18 +408,20 @@ function useSelect<OptionValue, Multiple extends boolean = false>(
       null) as SelectValue<SelectOption<OptionValue>, Multiple>;
   }
 
-  const getHiddenInputProps = <TOther extends EventHandlers>(
-    otherHandlers: TOther = {} as TOther,
-  ): UseSelectHiddenInputSlotProps<TOther> => ({
-    name,
-    tabIndex: -1,
-    'aria-hidden': true,
-    required: required ? true : undefined,
-    value: getSerializedValue(selectedOptionsMetadata),
-    onChange: noop,
-    style: visuallyHiddenStyle,
-    ...otherHandlers,
-  });
+  const getHiddenInputProps = <ExternalProps extends Record<string, unknown>>(
+    externalProps: ExternalProps = {} as ExternalProps,
+  ): UseSelectHiddenInputSlotProps<ExternalProps> => {
+    return {
+      name,
+      tabIndex: -1,
+      'aria-hidden': true,
+      required: required ? true : undefined,
+      value: getSerializedValue(selectedOptionsMetadata),
+      onChange: noop,
+      style: visuallyHiddenStyle,
+      ...externalProps,
+    };
+  };
 
   return {
     buttonActive,

diff --git a/packages/mui-base/src/useSelect/useSelect.types.ts b/packages/mui-base/src/useSelect/useSelect.types.ts
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { ListAction, ListState, UseListRootSlotProps } from '../useList';
 import { SelectOption } from '../useOption/useOption.types';
-import { EventHandlers } from '../utils/types';
 import { SelectProviderValue } from './SelectProvider';
 import { MuiCancellableEventHandler } from '../utils/MuiCancellableEvent';
 
@@ -182,27 +181,28 @@ export interface UseSelectReturnValue<Value, Multiple> {
   dispatch: (action: ListAction<Value> | SelectAction) => void;
   /**
    * Resolver for the button slot's props.
-   * @param otherHandlers event handlers for the button slot
+   * @param externalProps event handlers for the button slot
    * @returns props that should be spread on the button slot
    */
-  getButtonProps: <OtherHandlers extends EventHandlers = {}>(
-    otherHandlers?: OtherHandlers,
-  ) => UseSelectButtonSlotProps<OtherHandlers>;
+  getButtonProps: <ExternalProps extends Record<string, unknown> = {}>(
+    externalProps?: ExternalProps,
+  ) => UseSelectButtonSlotProps<ExternalProps>;
   /**
    * Resolver for the hidden input slot's props.
+   * @param externalProps event handlers for the hidden input slot
    * @returns HTML input attributes that should be spread on the hidden input slot
    */
-  getHiddenInputProps: <OtherHandlers extends EventHandlers = {}>(
-    otherHandlers?: OtherHandlers,
-  ) => UseSelectHiddenInputSlotProps<OtherHandlers>;
+  getHiddenInputProps: <ExternalProps extends Record<string, unknown> = {}>(
+    externalProps?: ExternalProps,
+  ) => UseSelectHiddenInputSlotProps<ExternalProps>;
   /**
    * Resolver for the listbox slot's props.
-   * @param otherHandlers event handlers for the listbox slot
+   * @param externalProps event handlers for the listbox slot
    * @returns props that should be spread on the listbox slot
    */
-  getListboxProps: <OtherHandlers extends EventHandlers = {}>(
-    otherHandlers?: OtherHandlers,
-  ) => UseSelectListboxSlotProps<OtherHandlers>;
+  getListboxProps: <ExternalProps extends Record<string, unknown> = {}>(
+    externalProps?: ExternalProps,
+  ) => UseSelectListboxSlotProps<ExternalProps>;
   /**
    * A function that returns the metadata of an option with a given value.
    *