diff --git a/packages/@react-aria/i18n/src/useFilter.ts b/packages/@react-aria/i18n/src/useFilter.ts index aee067ae546..c84ae63fbec 100644 --- a/packages/@react-aria/i18n/src/useFilter.ts +++ b/packages/@react-aria/i18n/src/useFilter.ts @@ -15,11 +15,11 @@ import {useCollator} from './useCollator'; export interface Filter { /** Returns whether a string starts with a given substring. */ - startsWith(string: string, substring: string): boolean, + startsWith: (string: string, substring: string) => boolean, /** Returns whether a string ends with a given substring. */ - endsWith(string: string, substring: string): boolean, + endsWith: (string: string, substring: string) => boolean, /** Returns whether a string contains a given substring. */ - contains(string: string, substring: string): boolean + contains: (string: string, substring: string) => boolean } /** diff --git a/packages/react-aria-components/src/ToggleButton.tsx b/packages/react-aria-components/src/ToggleButton.tsx index 45db0a25e4a..88b00a568d6 100644 --- a/packages/react-aria-components/src/ToggleButton.tsx +++ b/packages/react-aria-components/src/ToggleButton.tsx @@ -71,7 +71,7 @@ export const ToggleButton = /*#__PURE__*/ (forwardRef as forwardRefType)(functio : useToggleButton({...props, id: props.id != null ? String(props.id) : undefined}, state, ref); let {focusProps, isFocused, isFocusVisible} = useFocusRing(props); - let {hoverProps, isHovered} = useHover(props); + let {hoverProps, isHovered} = useHover({...props, isDisabled}); let renderProps = useRenderProps({ ...props, id: undefined, diff --git a/packages/react-aria-components/test/ToggleButtonGroup.test.js b/packages/react-aria-components/test/ToggleButtonGroup.test.js index 32c1a3a9cfa..474f48ac869 100644 --- a/packages/react-aria-components/test/ToggleButtonGroup.test.js +++ b/packages/react-aria-components/test/ToggleButtonGroup.test.js @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {pointerMap, render} from '@react-spectrum/test-utils-internal'; +import {installPointerEvent, pointerMap, render} from '@react-spectrum/test-utils-internal'; import React from 'react'; import {ToggleButton, ToggleButtonGroup} from '../'; import userEvent from '@testing-library/user-event'; @@ -25,6 +25,7 @@ function renderGroup(props) { } describe('ToggleButtonGroup', () => { + installPointerEvent(); let user; beforeAll(() => { user = userEvent.setup({delay: null, pointerMap}); @@ -59,6 +60,17 @@ describe('ToggleButtonGroup', () => { } }); + it('should not show hover state when disabled', async () => { + let {getAllByRole} = renderGroup({isDisabled: true, className: ({isHovered}) => (isHovered ? 'hover' : '')}); + let radios = getAllByRole('radio'); + await user.hover(radios[0]); + expect(radios[0]).not.toHaveAttribute('data-hovered'); + expect(radios[0]).not.toHaveClass('hover'); + await user.hover(radios[1]); + expect(radios[1]).not.toHaveAttribute('data-hovered'); + expect(radios[1]).not.toHaveClass('hover'); + }); + it('should support uncontrolled single selection', async () => { let onSelectionChange = jest.fn(); let {getByRole, getAllByRole} = renderGroup({selectionMode: 'single', onSelectionChange});