root -> button

packages/mui-base/src/Menu/Item/useMenuItem.ts

@@ -18,7 +18,7 @@ export function useMenuItem(params: useMenuItem.Parameters): useMenuItem.ReturnV
     typingRef,
   } = params;
 
-  const { getRootProps: getButtonProps, buttonRef: mergedRef } = useButton({
+  const { getButtonProps, buttonRef: mergedRef } = useButton({
     disabled,
     focusableWhenDisabled: true,
     buttonRef: externalRef,

packages/mui-base/src/Menu/Trigger/useMenuTrigger.ts

@@ -21,13 +21,13 @@ export function useMenuTrigger(parameters: useMenuTrigger.Parameters): useMenuTr
 
   const mergedRef = useForkRef(externalRef, triggerRef);
 
-  const { getRootProps: getButtonRootProps, buttonRef: buttonRootRef } = useButton({
+  const { getButtonProps, buttonRef } = useButton({
     disabled,
     focusableWhenDisabled: false,
     buttonRef: mergedRef,
   });
 
-  const handleRef = useForkRef(buttonRootRef, setTriggerElement);
+  const handleRef = useForkRef(buttonRef, setTriggerElement);
   const ignoreNextClick = React.useRef(false);
 
   const getRootProps = React.useCallback(
@@ -73,10 +73,10 @@ export function useMenuTrigger(parameters: useMenuTrigger.Parameters): useMenuTr
             }
           },
         },
-        getButtonRootProps(),
+        getButtonProps(),
       );
     },
-    [getButtonRootProps, handleRef, open, setOpen, setClickAndDragEnabled],
+    [getButtonProps, handleRef, open, setOpen, setClickAndDragEnabled],
   );
 
   return React.useMemo(

packages/mui-base/src/Tabs/Tab/useTab.ts

@@ -34,7 +34,7 @@ function useTab(parameters: UseTabParameters): UseTabReturnValue {
     item: value,
   });
 
-  const { getRootProps: getButtonProps, buttonRef: buttonRefHandler } = useButton({
+  const { getButtonProps, buttonRef: buttonRefHandler } = useButton({
     disabled,
     focusableWhenDisabled: true,
     type: 'button',

packages/mui-base/src/useButton/useButton.test.tsx

@@ -7,40 +7,40 @@ describe('useButton', () => {
   const { render } = createRenderer();
 
   describe('tabIndex', () => {
-    it('does not return tabIndex in getRootProps when host component is BUTTON', () => {
+    it('does not return tabIndex in getButtonProps when host component is BUTTON', () => {
       function TestComponent() {
         const buttonRef = React.useRef(null);
-        const { getRootProps } = useButton({ buttonRef });
+        const { getButtonProps } = useButton({ buttonRef });
 
-        expect(getRootProps().tabIndex).to.equal(undefined);
+        expect(getButtonProps().tabIndex).to.equal(undefined);
 
-        return <button {...getRootProps()} />;
+        return <button {...getButtonProps()} />;
       }
 
       const { getByRole } = render(<TestComponent />);
       expect(getByRole('button')).to.have.property('tabIndex', 0);
     });
 
-    it('returns tabIndex in getRootProps when host component is not BUTTON', () => {
+    it('returns tabIndex in getButtonProps when host component is not BUTTON', () => {
       function TestComponent() {
         const buttonRef = React.useRef(null);
-        const { getRootProps } = useButton({ buttonRef });
+        const { getButtonProps } = useButton({ buttonRef });
 
-        expect(getRootProps().tabIndex).to.equal(buttonRef.current ? 0 : undefined);
+        expect(getButtonProps().tabIndex).to.equal(buttonRef.current ? 0 : undefined);
 
-        return <span {...getRootProps()} />;
+        return <span {...getButtonProps()} />;
       }
 
       const { getByRole } = render(<TestComponent />);
       expect(getByRole('button')).to.have.property('tabIndex', 0);
     });
 
-    it('returns tabIndex in getRootProps if it is explicitly provided', () => {
+    it('returns tabIndex in getButtonProps if it is explicitly provided', () => {
       const customTabIndex = 3;
       function TestComponent() {
         const buttonRef = React.useRef(null);
-        const { getRootProps } = useButton({ buttonRef, tabIndex: customTabIndex });
-        return <button {...getRootProps()} />;
+        const { getButtonProps } = useButton({ buttonRef, tabIndex: customTabIndex });
+        return <button {...getButtonProps()} />;
       }
 
       const { getByRole } = render(<TestComponent />);
@@ -52,8 +52,8 @@ describe('useButton', () => {
     it('are passed to the host component', () => {
       const buttonTestId = 'button-test-id';
       function TestComponent() {
-        const { getRootProps } = useButton({});
-        return <button {...getRootProps({ 'data-testid': buttonTestId })} />;
+        const { getButtonProps } = useButton({});
+        return <button {...getButtonProps({ 'data-testid': buttonTestId })} />;
       }
 
       const { getByRole } = render(<TestComponent />);

packages/mui-base/src/useButton/useButton.ts

@@ -13,21 +13,21 @@ export function useButton(parameters: useButton.Parameters = {}): useButton.Retu
     buttonRef: externalRef,
     tabIndex,
     type,
-    rootElementName: rootElementNameProp,
+    elementName: elementNameProp,
   } = parameters;
   const buttonRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement | null>(null);
 
-  const [rootElementName, updateRootElementName] = useRootElementName({
-    rootElementName: rootElementNameProp,
+  const [elementName, updateElementName] = useRootElementName({
+    rootElementName: elementNameProp,
     componentName: 'Button',
   });
 
   const isNativeButton = () => {
     const button = buttonRef.current;
 
     return (
-      rootElementName === 'BUTTON' ||
-      (rootElementName === 'INPUT' &&
+      elementName === 'BUTTON' ||
+      (elementName === 'INPUT' &&
         ['button', 'submit', 'reset'].includes((button as HTMLInputElement)?.type))
     );
   };
@@ -81,7 +81,7 @@ export function useButton(parameters: useButton.Parameters = {}): useButton.Retu
       }
     };
 
-  const handleRef = useForkRef(updateRootElementName, externalRef, buttonRef);
+  const handleRef = useForkRef(updateElementName, externalRef, buttonRef);
 
   interface AdditionalButtonProps {
     type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
@@ -97,13 +97,13 @@ export function useButton(parameters: useButton.Parameters = {}): useButton.Retu
     buttonProps.tabIndex = tabIndex;
   }
 
-  if (rootElementName === 'BUTTON' || rootElementName === 'INPUT') {
+  if (elementName === 'BUTTON' || elementName === 'INPUT') {
     if (focusableWhenDisabled) {
       buttonProps['aria-disabled'] = disabled;
     } else {
       buttonProps.disabled = disabled;
     }
-  } else if (rootElementName !== '') {
+  } else if (elementName !== '') {
     buttonProps.role = 'button';
     buttonProps.tabIndex = tabIndex ?? 0;
     if (disabled) {
@@ -112,7 +112,7 @@ export function useButton(parameters: useButton.Parameters = {}): useButton.Retu
     }
   }
 
-  const getRootProps = (
+  const getButtonProps = (
     externalProps: React.ComponentPropsWithRef<any>,
   ): React.ComponentPropsWithRef<any> => {
     const externalEventHandlers = {
@@ -135,7 +135,7 @@ export function useButton(parameters: useButton.Parameters = {}): useButton.Retu
   };
 
   return {
-    getRootProps,
+    getButtonProps,
     buttonRef: handleRef,
   };
 }
@@ -163,20 +163,20 @@ export namespace useButton {
      * The HTML element, e.g.'button', 'span' etc.
      * @default ''
      */
-    rootElementName?: keyof HTMLElementTagNameMap;
+    elementName?: keyof HTMLElementTagNameMap;
   }
 
   export interface ReturnValue {
     /**
-     * Resolver for the root slot's props.
-     * @param externalProps additional props for the root slot
-     * @returns props that should be spread on the root slot
+     * Resolver for the button props.
+     * @param externalProps additional props for the button
+     * @returns props that should be spread on the button
      */
-    getRootProps: (
+    getButtonProps: (
       externalProps?: React.ComponentPropsWithRef<any>,
     ) => React.ComponentPropsWithRef<any>;
     /**
-     * A ref to the component's root DOM element.
+     * A ref to the button DOM element.
      */
     buttonRef: React.RefCallback<Element> | null;
   }