diff --git a/packages/mui-base/src/Menu/Item/useMenuItem.ts b/packages/mui-base/src/Menu/Item/useMenuItem.ts
index 5fbd8b5982..cfa228f0a5 100644
--- a/packages/mui-base/src/Menu/Item/useMenuItem.ts
+++ b/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,
diff --git a/packages/mui-base/src/Menu/Trigger/useMenuTrigger.ts b/packages/mui-base/src/Menu/Trigger/useMenuTrigger.ts
index ca53161617..4a69d607f4 100644
--- a/packages/mui-base/src/Menu/Trigger/useMenuTrigger.ts
+++ b/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(
diff --git a/packages/mui-base/src/Tabs/Tab/useTab.ts b/packages/mui-base/src/Tabs/Tab/useTab.ts
index 91d9d73c44..f04b4d7cf5 100644
--- a/packages/mui-base/src/Tabs/Tab/useTab.ts
+++ b/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',
diff --git a/packages/mui-base/src/useButton/useButton.test.tsx b/packages/mui-base/src/useButton/useButton.test.tsx
index 9ca1bef7fe..26e4554a4a 100644
--- a/packages/mui-base/src/useButton/useButton.test.tsx
+++ b/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 ;
+ return ;
}
const { getByRole } = render();
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 ;
+ return ;
}
const { getByRole } = render();
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 ;
+ const { getButtonProps } = useButton({ buttonRef, tabIndex: customTabIndex });
+ return ;
}
const { getByRole } = render();
@@ -52,8 +52,8 @@ describe('useButton', () => {
it('are passed to the host component', () => {
const buttonTestId = 'button-test-id';
function TestComponent() {
- const { getRootProps } = useButton({});
- return ;
+ const { getButtonProps } = useButton({});
+ return ;
}
const { getByRole } = render();
diff --git a/packages/mui-base/src/useButton/useButton.ts b/packages/mui-base/src/useButton/useButton.ts
index ed372b91f7..1a7bd3fe60 100644
--- a/packages/mui-base/src/useButton/useButton.ts
+++ b/packages/mui-base/src/useButton/useButton.ts
@@ -13,12 +13,12 @@ export function useButton(parameters: useButton.Parameters = {}): useButton.Retu
buttonRef: externalRef,
tabIndex,
type,
- rootElementName: rootElementNameProp,
+ elementName: elementNameProp,
} = parameters;
const buttonRef = React.useRef(null);
- const [rootElementName, updateRootElementName] = useRootElementName({
- rootElementName: rootElementNameProp,
+ const [elementName, updateElementName] = useRootElementName({
+ rootElementName: elementNameProp,
componentName: 'Button',
});
@@ -26,8 +26,8 @@ export function useButton(parameters: useButton.Parameters = {}): useButton.Retu
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['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,
): React.ComponentPropsWithRef => {
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,
) => React.ComponentPropsWithRef;
/**
- * A ref to the component's root DOM element.
+ * A ref to the button DOM element.
*/
buttonRef: React.RefCallback | null;
}